$(document).ready(function(){

  var width = $('.games-main').width();
  var height = $('.games-main').height();
  var buttonSize = 80;
  var buttonY = height * 0.68;
  var games = [
      ['flappy_bird', 'http://files.gamebanana.com/img/ico/sprays/538578b593b47.gif'], 
      ['frogger', 'http://andyluvsdonna.com/wp-content/uploads/2015/02/frogger-1.png'], 
      ['othergame', 'http://www.pngmart.com/files/3/Spaceship-PNG-Pic.png'], 
      ['othergame', 'http://vignette3.wikia.nocookie.net/metalslug/images/d/d7/192064fb7b55d9f8569231678ee1e333.jpg.gif/revision/latest?cb=20160109031801&path-prefix=es'], 
      ['othergame', 'http://www.retrogamenetwork.com/wp-content/uploads/2012/05/rand-avatar.png']
    ]

  // generate svg element
  d3.select('.games-main').selectAll('svg')
    .data([null])
    .enter()
    .append('svg')
    .style('width', width)
    .style('height', height);

  var svg = d3.select("svg");

  // add game-images
  function makeImage() {
    svg.selectAll("image")
      .data(games)
      .enter()
      .append("image")
      .attr("y", 100)
      .attr("x", -100)
      .attr("class", function(d){ return d[0] })
      .classed('game', true)
      .attr('xlink:href', function(d){ return d[1] })
      .attr('height', buttonSize)
      .attr('width', buttonSize)
      .style('fill', 'red');
  };

  // move the images onto the screen
  function moveImageRight() {
    svg.selectAll('.game')
      .transition()
      .delay( function(d, i){ return 150 * i } )      
      .duration(1500)
      .attr('x', function(d, i){ return width - ((i + 0.5) * (width / games.length)) });
  }

  // move the images down to their final positions
  function moveImageDown() {
    svg.selectAll('.game')
      .transition()
      .delay( function(d, i){ return 50 * i })
      .duration(1000)
      .attr('y', buttonY);
  }

  // enlarge game images when the user has their mouse over them
  function magnify(){
    svg.selectAll('.game')
      .on("mouseover", function(){
        d3.select(this)
          .transition()
          .duration(200)
          .attr('y', buttonY - buttonSize/2)
          .attr('height', buttonSize * 1.5)
          .attr('width', buttonSize * 1.5);
      })
      .on("mouseout", function(){
        d3.select(this)
          .transition()
          .duration(200)
          .attr('y', buttonY)
          .attr('height', buttonSize)
          .attr('width', buttonSize);
      });
  };

  // navigate to the game represented by the image
    // when the user clicks on them
  function navigate() {
    svg.selectAll('.game')
      .on("click", function(){
        if ($(this).hasClass("frogger")) {
          var gameUrl = '/games/1'
        } else if ($(this).hasClass("flappy_bird")) {
          var gameUrl = 'games/2'
        }
        // add in more conditionals for future games
        $.ajax({
          method: "get",
          url: gameUrl
        })
          .done(function(data){
            // This is just replacing the body content, not really redirecting
            $("body").empty().append(data);
          });
      });
  };

  makeImage(games);
  moveImageRight()
  setTimeout(moveImageDown, 1500);
  setTimeout(magnify, 2000);
  navigate();

});
@@ -262,17 +262,16 @@
 7.gif'%5D,
- 
 %0A      %5B
@@ -346,25 +346,24 @@
 ger-1.png'%5D,
- 
 %0A      %5B'oth
@@ -355,33 +355,32 @@
 '%5D,%0A      %5B'
-othergame
+invasion
 ', 'http://w
@@ -426,17 +426,16 @@
 c.png'%5D,
- 
 %0A      %5B
@@ -598,17 +598,16 @@
 ix=es'%5D,
- 
 %0A      %5B
@@ -1484,22 +1484,16 @@
  * i %7D )
-      
 %0A      .
@@ -2757,16 +2757,101 @@
 ames/2'%0A
+        %7D else if ($(this).hasClass(%22invasion%22)) %7B%0A          var gameUrl = 'games/3'%0A
         
@@ -3284,11 +3284,12 @@
 ate();%0A%0A
-
 %7D);
+%0A

add link to invasion-game from games/index