|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>d3 | Fox, goose and bag of beans puzzle</title> |
|
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> |
|
|
|
<style> |
|
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600); |
|
body {font-family: "Source Code Pro", Consolas, monaco, monospace; line-height: 160%; font-size: 18px; margin: 0; } |
|
header { padding: 20px; max-width : 680px;} |
|
.svg-wrap { |
|
display: inline-block; |
|
position: relative; |
|
width: 100%; |
|
padding-bottom: 75%; /* aspect ratio */ |
|
vertical-align: top; |
|
overflow: hidden; |
|
} |
|
.svg-responsive { |
|
display: inline-block; |
|
position: absolute; |
|
top: 10px; |
|
left: 0; |
|
} |
|
#status { |
|
color: #EE3124; |
|
} |
|
</style> |
|
|
|
</head> |
|
<body> |
|
<header> |
|
<h2>Tip: <span id="status">Cross to the other side</span></h2> |
|
<p id="action">T-Rex, Homer & the Ginger Bread Man</p> |
|
</header> |
|
|
|
<div id="gameContainer"></div> |
|
|
|
|
|
<script type="text/javascript"> |
|
|
|
var characterData = [ |
|
{ "name": "Homer", "ref": "H", "colour" : "#FDBB30" }, |
|
{ "name": "T-Rex", "ref": "T", "colour" : "#7AC143" }, |
|
{ "name": "Ginger Bread Man", "ref": "G", "colour" : "#EC008C" } |
|
]; |
|
|
|
// vars tc colours |
|
var tc_blue_light = "#00B0DD", |
|
tc_black = "#130C0E"; |
|
|
|
// width and height of svg |
|
var w = 600, h = 450; |
|
|
|
// dimensions, distances and radius |
|
var r = 18, leftDis = 50, rightDis = 800; |
|
|
|
|
|
var svg = d3.select("#gameContainer") |
|
.append("div") |
|
.classed("svg-wrap", true) //container class to make it responsive |
|
.append("svg") |
|
//responsive SVG needs these 2 attributes and no width and height attr |
|
.attr("preserveAspectRatio", "xMinYMin meet") |
|
.attr("viewBox", "0 0 600 450") |
|
//class to make it responsive |
|
.classed("svg-responsive", true); |
|
|
|
// make a river |
|
var river = svg.append("rect") |
|
.attr("x", 260) |
|
.attr("y", 0) |
|
.attr("width", 10) |
|
.attr("height", 200) |
|
.style("fill", tc_blue_light); |
|
|
|
// three characters |
|
var character = svg.selectAll("circle") |
|
.data(characterData) |
|
.enter() |
|
.append("circle") |
|
.attr("cx", leftDis) |
|
.attr("cy", function (d, i) { |
|
return i * 50 +30; |
|
}) |
|
.attr("r", r) |
|
.attr("id", function(d, i) { return ("id-" + i)}) |
|
.attr("fill", function (d) { |
|
return d.colour; |
|
}); |
|
|
|
var labels = svg.selectAll("text") |
|
.data(characterData) |
|
.enter() |
|
.append("text") |
|
.attr("dx", 10) |
|
.attr("dy", function (d, i) { |
|
return i * 50 +36; |
|
}) |
|
.style("fill", tc_black) |
|
.style("font-size", "14px") |
|
.text(function (d) { |
|
return d.ref + ":"; |
|
}); |
|
|
|
// access the characters ! |
|
// var homer = d3.select(character[0][0]); |
|
// var trex = d3.select(character[0][1]); |
|
// var ginger = d3.select(character[0][2]); |
|
var characterHomer = document.getElementById("id-0"), |
|
characterTrex = document.getElementById("id-1"), |
|
characterGinger = document.getElementById("id-2"); |
|
|
|
|
|
// event handler |
|
|
|
var clicked = false; |
|
|
|
var events = character |
|
.on('click', function (d) { |
|
|
|
d3.select('#action').html("you selected: " + d.name); |
|
|
|
if (clicked == false) { |
|
clicked = true; |
|
var destination = 1; |
|
} |
|
else { |
|
clicked = false; |
|
var destination = -1; |
|
} |
|
|
|
|
|
|
|
d3.select( this ) // select element in current context |
|
.classed('crossedRiver', clicked) |
|
.transition().duration(300) |
|
.attr("cx", (200 * destination) + 250); |
|
|
|
// move labels |
|
// labels.attr("dx", (200 * destination) + 245); |
|
|
|
// call if else function |
|
ifElse(); |
|
|
|
}); |
|
|
|
// if else function |
|
function ifElse() { |
|
|
|
// was initially going to use cx values to test is been moved but was giving me the value pre click |
|
// var homerStatus = characterHomer.cx.baseVal.valueInSpecifiedUnits, |
|
// trexStatus = characterTrex.cx.baseVal.valueInSpecifiedUnits; |
|
// gingerStatus = characterGinger.cx.baseVal.valueInSpecifiedUnits; |
|
|
|
// console.log("homer cx value: " + homerStatus); |
|
// console.log("trex cx value: " + trexStatus); |
|
// console.log("ginger cx value: " + gingerStatus); |
|
|
|
|
|
var testHomerClass = characterHomer.classList.contains("crossedRiver"), |
|
testTrexClass = characterTrex.classList.contains("crossedRiver"); |
|
testgingerClass = characterGinger.classList.contains("crossedRiver"); |
|
|
|
if ( (testHomerClass == true) && (testTrexClass == false) && (testgingerClass == false) ) { |
|
d3.select('#status').html("Homer is across!"); |
|
} |
|
else if ( (testHomerClass == true) && (testTrexClass == false) && (testgingerClass == true) ) { |
|
d3.select('#status').html("Homer is licking his lips"); |
|
} |
|
else if ( (testHomerClass == true) && (testTrexClass == true) && (testgingerClass == false) ) { |
|
d3.select('#status').html("T-Rex will eat Homer"); |
|
} |
|
else if ( (testHomerClass == true) && (testTrexClass == true) && (testgingerClass == true) ) { |
|
d3.select('#status').html("All across hey!"); |
|
} |
|
else if ( (testHomerClass == false) && (testTrexClass == true) && (testgingerClass == false) ) { |
|
d3.select('#status').html("Homer with the Ginger Bread Man?"); |
|
} |
|
else if ( (testHomerClass == false) && (testTrexClass == true) && (testgingerClass == true) ) { |
|
d3.select('#status').html("How did you do that?"); |
|
} |
|
else if ( (testHomerClass == false) && (testTrexClass == false) && (testgingerClass == false) ) { |
|
d3.select('#status').html("Ready to try again?"); |
|
} |
|
else if ( (testHomerClass == false) && (testTrexClass == false) && (testgingerClass == true) ) { |
|
d3.select('#status').html("T-Rex is eyeing up Homer"); |
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
</body> |
|
</html> |