Skip to content

Instantly share code, notes, and snippets.

@hemulin

hemulin/index.html

Last active October 12, 2015 18:28
Show Gist options
  • Save hemulin/4068554 to your computer and use it in GitHub Desktop.
Save hemulin/4068554 to your computer and use it in GitHub Desktop.
Download ZIP
IT ex1
Raw
index.html
<html>
<head>
<title>ex1</title>
<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
<script type="text/javascript" src="tooltip.js"></script>
<style>
div#tooltip {
background-color: white;
font-family: Open Sans,Helvetica,sans-serif;
font-size: 20px;
padding-top: 10px;
padding-bottom: 10px;
width: 200px;
border: black 2px solid;
font-weight: bold;
color: #093D72;
text-align: center;
}
</style>
</head>
<body>
<div id="vis"></div>
<script type="application/javascript">
//Players choises
var p1pick, p2pick;
//Items imgaes
var rockPic = "http://www.rocks-rock.com/Rhyolite.jpg";
var paperPic = "http://www.sugarcraft.com/catalog/misc/WFO-811.jpg";
var scissorsPic = "http://lifeand100books.files.wordpress.com/2012/04/scissors.jpg";
//locations and sizes
var displayW = 1000,
displayH = 600;
var itemW = 100,
itemH = 150;
var p1XOrigin = 250,
p2XOrigin = 650,
firstY = -20,
delta = 10;
p1XSelect = p1XOrigin+itemW+delta,
p2XSelect = p2XOrigin-itemW-delta;
var movedP1 = Array();
var movedP2 = Array();
//Creating the display area
var svg = d3.select("#vis")
.append("svg")
.attr("width", displayW)
.attr("height", displayH)
.style("background-color", "#E8E8E8");
//Instructional text
var p1Text = svg.append("text")
.attr("x", 20)
.attr("y", 220)
.style("font-weight", "bold")
.style("font-family", "arial")
.text("Player 1, pick your choise");
var p2Text = svg.append("text")
.attr("x", 780)
.attr("y", 220)
.style("font-weight", "bold")
.style("font-family", "arial")
.text("Player 2, pick your choise");
//Creating the surronding boxes
var p1Box = svg.append("rect")
.attr("x", p1XOrigin-delta/2)
.attr("y", firstY+delta*2.5)
.attr("height", firstY+(3*itemH)-delta/2)
.attr("width", itemW+delta)
.style("fill", "#E8E8E8")
.style("stroke", "black");
var p2Box = svg.append("rect")
.attr("x", p2XOrigin-delta/2)
.attr("y", firstY+delta*2.5)
.attr("height", firstY+(3*itemH)-delta/2)
.attr("width", itemW+delta)
.style("fill", "#E8E8E8")
.style("stroke", "black");
//START OF INAGE ELEMENTS
var p1Rock = svg.append("image")
.attr("xlink:href", rockPic)
.attr("width", itemW)
.attr("height", itemH)
.attr("x", p1XOrigin)
.attr("y", firstY)
.attr("id", "rock1")
.attr("class", "p1Class")
.on("click", function(){
moveSelection("rock1", "p1Class");
p1pick = "1";})
.call(d3.helper.tooltip(function() {return "Rock"}));
var p2Rock = svg.append("image")
.attr("xlink:href", rockPic)
.attr("width", itemW)
.attr("height", itemH)
.attr("x", p2XOrigin)
.attr("y", firstY)
.attr("id", "rock2")
.attr("class", "p2Class")
.on("click", function() {
moveSelection("rock2", "p2Class");
p2pick = "1";})
.call(d3.helper.tooltip(function() {return "Rock"}));
var p1Paper = svg.append("image")
.attr("xlink:href", paperPic)
.attr("width", itemW)
.attr("height", itemH)
.attr("x", p1XOrigin)
.attr("y", firstY+itemH+delta)
.attr("class", "p1Class")
.attr("id", "paper1")
.on("click", function(){
moveSelection("paper1", "p1Class");
p1pick = "2";})
.call(d3.helper.tooltip(function() {return "Paper"}));
var p2Paper = svg.append("image")
.attr("xlink:href", paperPic)
.attr("width", itemW)
.attr("height", itemH)
.attr("x", p2XOrigin)
.attr("y", firstY+itemH+delta)
.attr("class", "p2Class")
.attr("id", "paper2")
.on("click", function() {
moveSelection("paper2", "p2Class");
p2pick = "2";})
.call(d3.helper.tooltip(function() {return "Paper"}));
var p1Scissors = svg.append("image")
.attr("xlink:href", scissorsPic)
.attr("width", itemW)
.attr("height", itemH)
.attr("x", p1XOrigin)
.attr("y", firstY+2*(itemH+delta))
.attr("class", "p1Class")
.attr("id", "scissors1")
.on("click", function(){
moveSelection("scissors1", "p1Class");
p1pick = "3";})
.call(d3.helper.tooltip(function() {return "Scissors"}));
var p2Scissors = svg.append("image")
.attr("xlink:href", scissorsPic)
.attr("width", itemW)
.attr("height", itemH)
.attr("x", p2XOrigin)
.attr("y", firstY+2*(itemH+delta))
.attr("class", "p2Class")
.attr("id", "scissors2")
.on("click", function(){
moveSelection("scissors2", "p2Class");
p2pick = "3";})
.call(d3.helper.tooltip(function() {return "Scissors"}));
//END OF IMAGE ELEMENTES
//Play button
var playButton = svg.append("rect")
.attr("x", 385)
.attr("y", 460)
.attr("width", 200)
.attr("height", 50)
.attr("id", "playRect")
.style("fill", "#FA8072")
.style("cursor", "pointer")
.on("mouseover", function() {d3.select(this).transition().duration(100).style("opacity", 0.5);})
.on("mouseout", function() {d3.select(this).transition().duration(100).style("opacity", 1);})
.on("click", rps);
var playText = svg.append("text")
.attr("x", 445)
.attr("y", 495)
.style("font-size", 30)
.style("font-weight", "bold")
.style("cursor", "pointer")
.text("PLAY")
.on("click", rps);
//repositioning the selected element in each colomn
function moveSelection(id, pClass) {
var toMove = d3.select("#"+id);
var clsSel = (pClass == "p1Class") ? "p1col" : "p2col";
if (clsSel == "p1col" && movedP1.length == 1) {
var moveBack = movedP1.pop();
moveBack.transition()
.duration(500)
.attr("x", p1XOrigin);
} else if (clsSel == "p2col" && movedP2.length == 1) {
var moveBack = movedP2.pop();
moveBack.transition()
.duration(500)
.attr("x", p2XOrigin);
}
if (clsSel == "p1col") {
toMove.transition()
.duration(500)
.attr("x", p1XSelect);
movedP1.push(toMove);
} else if (clsSel=="p2col"){
toMove.transition()
.duration(500)
.attr("x", p2XSelect);
movedP2.push(toMove);
}
}
var winRect = svg.append("rect").attr("id", "winrect").attr("x", 335).attr("y", 530).attr("width", 300).attr("height", 50).style("fill", "peachpuff").style("opacity", 0);
var winText = svg.append("text").attr("id", "wintext").style("font-size",24).style("font-weight", "bold").attr("x", 380).attr("y", 565).style("opacity", 0);
//Indicate that the game is in random mode
function indicateRandom(playerN, textToDisplay) {
var randomRect = svg.append("rect")
.attr("id","randRect")
.attr("width", 175)
.attr("height", 25)
.style("fill", "#35E609")
.style("opacity", "0.5");
var randText = svg.append("text")
.attr("id", "randText")
.text(textToDisplay+" is in random mode");
if (playerN == "1") {
randomRect.attr("x", 30)
.attr("y", 230);
randText.attr("x", 31)
.attr("y", 248);
}
if (playerN == "2") {
randomRect.attr("x", 790)
.attr("y", 230);
randText.attr("x", 791)
.attr("y", 248);
}
}
function rps() {
if (typeof(p1pick)=="undefined") {
indicateRandom("1", "Player 1");
var rand = Math.floor((Math.random()*3)+1);
switch(rand) {
case(1): { p1pick = "1";
moveSelection("rock1", "p1Class");
break;
}
case(2): { p1pick = "2";
moveSelection("paper1", "p1Class");
break;
}
default: { p1pick = "3";
moveSelection("scissors1", "p1Class");
break;
}
}
rps();
}
if (typeof(p2pick)=="undefined") {
indicateRandom("2", "Player 2");
var rand = Math.floor((Math.random()*3)+1);
switch(rand) {
case(1): { p2pick = "1";
moveSelection("rock2", "p2Class");
break;
}
case(2): { p2pick = "2";
moveSelection("paper2", "p2Class");
break;
}
default: { p2pick = "3";
moveSelection("scissors2", "p2Class");
break;
}
}
rps();
//Both players chose items
} else {
d3.select("#winrect")
.transition()
.delay(500)
.duration(1000)
.style("opacity", 1);
d3.select("#wintext")
.transition()
.delay(500)
.duration(1000)
.style("opacity", 1)
.attr("x", 485-logic().length*4.5)
.text(logic());
}
}
function logic() {
if (p1pick == p2pick) {
return "It's a draw";
} else if (p1pick == "1" && p2pick == "2") {
return "Player 2 is the winer";
} else if (p1pick == "1" && p2pick == "3") {
return "Player 1 is the winer";
} else if (p1pick == "2" && p2pick == "1") {
return "Player 1 is the winer";
} else if (p1pick == "2" && p2pick == "3") {
return "Player 2 is the winer";
} else if (p1pick == "3" && p2pick == "1") {
return "Player 2 is the winer";
} else {
return "Player 1 is the winer";
}
}
//reset circle
var reset = svg.append("circle")
.attr("r", 60)
.attr("cx", 100)
.attr("cy", 500)
.style("fill", "wheat")
.style("cursor", "pointer")
.on("mouseover", function() {d3.select(this).transition().duration(500).attr("r",40).style("fill", "brown");})
.on("mouseout", function() {d3.select(this).transition().duration(500).attr("r",60).style("fill", "wheat");})
.on("click", resetValues);
var resetText = svg.append("text")
.attr("x", 70)
.attr("y", 505)
.style("cursor", "pointer")
.style("font-size", 20)
.style("font-weight", "bold")
.text("RESET")
.on("click", resetValues);
//reset all the values
function resetValues() {
p1pick = undefined;
p2pick = undefined;
if (movedP1.length ==1) {
movedP1.pop().transition()
.duration(500)
.attr("x", p1XOrigin);
d3.select("#randRect").remove();
d3.select("#randText").remove();
}
if (movedP2.length ==1) {
movedP2.pop().transition()
.duration(500)
.attr("x", p2XOrigin);
d3.select("#randRect").remove();
d3.select("#randText").remove();
}
d3.select("#winrect").transition().style("opacity", 0);
d3.select("#winText").transition().style("opacity",0).text("");
}
</script>
</body>
</html>
Raw
tooltip.js
d3.helper = {};
d3.helper.tooltip = function(accessor){
return function(selection){
var tooltipDiv;
var bodyNode = d3.select('body').node();
selection.on("mouseover", function(d, i){
// Clean up lost tooltips
d3.select('body').selectAll('div.tooltip').remove();
// Append tooltip
tooltipDiv = d3.select('body').append('div').attr('class', 'tooltip').attr("id", "tooltip");
var absoluteMousePos = d3.mouse(bodyNode);
// console.log("mousePos[0] = "+absoluteMousePos[0], "mousePos[1] = "+absoluteMousePos[1]);
tooltipDiv.style('left', function(d){
return (absoluteMousePos[0] < 507) ? (absoluteMousePos[0] + 20)+'px' :
(absoluteMousePos[0] - 230)+'px';})
.style('top', (absoluteMousePos[1] - 15)+'px')
.style('position', 'absolute')
.style('z-index', 1001);
// Add text using the accessor function
var tooltipText = accessor(d, i) || '';
// Crop text arbitrarily
tooltipDiv.style('width', function(d, i){return (tooltipText.length > 80) ? '300px' : null;})
.html(tooltipText);
})
.on('mousemove', function(d, i) {
// Move tooltip
var absoluteMousePos = d3.mouse(bodyNode);
tooltipDiv.style('left', function(d){return (absoluteMousePos[0] < 507) ? (absoluteMousePos[0] + 20)+'px' :
(absoluteMousePos[0] - 230)+'px';})
.style('top', (absoluteMousePos[1] - 15)+'px');
var tooltipText = accessor(d, i) || '';
tooltipDiv.html(tooltipText);
})
.on("mouseout", function(d, i){
// Remove tooltip
tooltipDiv.remove();
});
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment