d3 | puzzle adaptation

Simple game built for my blog post on an adaptation of the classic 'Fox, goose and bag of beans puzzle'.

View the actual blog post →

img of lego figures

The constraints:

The police man can only take only one across at a time.

you can only take only one across at a time
T wants to eat H, so T can’t be left alone with H.
H wants to eat G, so H can’t be left alone with G.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>d3 | Fox, goose and bag of beans puzzle</title>
        <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

</head>
    <body>
        <header>
            <h2>Tip: <span id="status">Cross to the other side</span></h2> 
            <p id="action">T-Rex, Homer &amp; the Ginger Bread Man</p>
        </header>

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js