Ada-C5 · nlcurry · Jul 5, 2016 · Jul 5, 2016 · Jul 5, 2016 · Jul 6, 2016
diff --git a/README.md b/README.md
@@ -17,14 +17,32 @@ Recreate as much of the original game as is reasonable in the one week we have a
 ### Project Baseline
 - Play a couple games of [2048](http://gabrielecirulli.github.io/2048/). Think about everything that's likely happening in the code to support what's happening on the screen. Once you've got a feel for the game, talk with your pair and answer the following questions:
   1. How does scoring work?
+   point are equivalent to the final tile value
+
   1. When do tiles enter the game?
+  after you move a certain direction
+
   1. How do you know if you've won?
+  have one tile that has a value of 2048
+
   1. How do you know if you've lost?
+  if all of the slots have tiles, and no collisions can happen.
+
   1. What makes tiles move?
+  the arrow button
+
   1. What happens when they move?
+  if two tiles' values match when going in the direction of the 'move', they will combine values and make one tile. If there are three tiles with matching values, the combination will happen to the two tiles in the opposite direction of the 'move'.(ex: if you click right, the two tiles on the left will combine). Tiles that don't match will move into an empty slot in the direction of the 'move'
+
   1. How would you know how far a tile should move?
+  It should move over until there's no empty slot in the direction of the 'move'. It will not move if there is no empty slot.
+
   1. How would you know if tiles would collide?
+  if the tile's values are the same
+
   1. What happens when tiles collide?
+  they turn into one tile, and add together their values. It also adds the final value as points to the player.
+
 - Document your answers to these questions in this README.
 - Use your discussion and answers to create tasks for a trello board. Organize those tasks into deliverable components (e.e., _Scoring_, _Tile Collision_, _Win/Loss_).
 - Open a PR with your discussion notes and answers to the above questions. Include a link to your Trello board. Indicate in the PR which deliverable(s) you are targeting first.
diff --git a/index.html b/index.html
@@ -7,6 +7,8 @@
     <script type="text/javascript" src="javascripts/2048.js"></script>
   </head>
   <body>
+    <h1 class="title">2048</h1>
+    <p>Your Score is: 0</p>
     <div id="gameboard">
       <div class="cells">
         <div class="cell"></div>
@@ -26,7 +28,27 @@
         <div class="cell"></div>
         <div class="cell"></div>
       </div>
-      <div class="tile" data-row="r1", data-col="c1" data-val="2">2</div>
+
+      <div class="tile" data-debug="0" data-row="r0", data-col="c0" data-val="2">2</div>
+      <div class="tile" data-debug="1" data-row="r1", data-col="c0" data-val="2">2</div>
+      <div class="tile" data-debug="2" data-row="r2", data-col="c0" data-val="2">2</div>
+      <div class="tile" data-debug="3" data-row="r3", data-col="c0" data-val="2">2</div>
+
+      <!-- <div class="tile" data-debug="0" data-row="r0", data-col="c1" data-val="2">2</div>
+      <div class="tile" data-debug="1" data-row="r1", data-col="c1" data-val="2">2</div>
+      <div class="tile" data-debug="2" data-row="r2", data-col="c1" data-val="2">2</div>
+      <div class="tile" data-debug="3" data-row="r3", data-col="c1" data-val="2">2</div>
+
+      <div class="tile" data-debug="0" data-row="r0", data-col="c2" data-val="2">2</div>
+      <div class="tile" data-debug="1" data-row="r1", data-col="c2" data-val="2">2</div>
+      <div class="tile" data-debug="2" data-row="r2", data-col="c2" data-val="2">2</div>
+      <div class="tile" data-debug="3" data-row="r3", data-col="c2" data-val="2">2</div>
+
+      <div class="tile" data-debug="0" data-row="r0", data-col="c3" data-val="2">2</div>
+      <div class="tile" data-debug="1" data-row="r1", data-col="c3" data-val="2">2</div>
+      <div class="tile" data-debug="2" data-row="r2", data-col="c3" data-val="2">2</div>
+      <div class="tile" data-debug="3" data-row="r3", data-col="c3" data-val="2">2</div> -->
+
     </div>
   </body>
 </html>
diff --git a/javascripts/2048.js b/javascripts/2048.js
@@ -1,25 +1,224 @@
 var Game = function() {
-  // Game logic and initialization here
+  this.score = 0
 };
 
-Game.prototype.moveTile = function(tile, direction) {
-  // Game method here
+Game.prototype.moveTile = function(tiles, direction) {
   switch(direction) {
     case 38: //up
       console.log('up');
+      this.legit("up")
       break;
     case 40: //down
       console.log('down');
+      this.legit("down")
       break;
     case 37: //left
       console.log('left');
+      this.legit("left")
       break;
     case 39: //right
       console.log('right');
+      this.legit("right")
       break;
   }
 };
 
+Game.prototype.addTile = function () {
+  var tiles = $(".tile")
+  var rows = ["r0", "r1", "r2", "r3"]
+  var columns = ["c0", "c1", "c2", "c3"]
+  var value = [2,4]
+  var randValue= value[Math.floor(Math.random() * value.length)]
+  var newTile = null
+  var random = [rows[Math.floor(Math.random() * rows.length)], columns[Math.floor(Math.random() * columns.length)]]
+  while (newTile === null) {
+    var exists = $(".tile[data-row=" + random[0] + "][data-col=" + random[1] + "]")
+      if (exists.length !== 0) {
+        random = [rows[Math.floor(Math.random() * rows.length)], columns[Math.floor(Math.random() * columns.length)]]
+      } else {
+        newTile = $("<div>", {class: "tile", "data-row":random[0], "data-col":random[1], "data-val":randValue, text: randValue})
+      }
+  }
+  console.log("this is random ", random);
+  $(".cells").after(newTile)
+  newTile = null
+}
+
+
+Game.prototype.legit = function (direction) { // if left or right use rows ||  if up or down use col
+  var self = this
+  if (direction === "left") {
+    for (var row = 0; row < 4; row++) {
+      var current = $("div[data-row=r" + row + "]").get().sort(function (div1, div2) {
+        if ($(div1).attr("data-col") < $(div2).attr("data-col")) {
+          return -1
+        } else if ($(div1).attr("data-col") === $(div2).attr("data-col")) {
+          return 0
+        } else {
+          return 1
+        }
+      })
+      var length = current.length - 1
+
+      for (var i = 0; i < length; i++) {
+        if (current[i + 1]) { // edge case, if next thing is not null, go on
+          var curr = $(current[i])
+          var next = $(current[i + 1])
+          if (curr.attr("data-val") === next.attr("data-val")) {
+            var total = parseInt(curr.attr("data-val")) + parseInt(next.attr("data-val"))
+            next.attr("data-col", curr.attr("data-col"))
+            self.scoring(total)
+            self.checkWin(total)
+            // setTimeout(function () {
+              curr.attr("data-val", total).html(total)
+              next.remove()
+            // }, 925)
+            current.splice([i + 1], 1)
+          }
+        }
+      }
+      if (current.length > 0) {
+        for (var j = 0; j < current.length; j++) {
+          var space = $(current[j])
+          space.attr("data-col", "c" + j)
+        }
+      }
+    }
+  } else if (direction === "right") {
+    for (var row = 0; row < 4; row++) {
+      var current = $("div[data-row=r" + row + "]").get().sort(function (div1, div2) {
+        if ($(div1).attr("data-col") < $(div2).attr("data-col")) {
+          return -1
+        } else if ($(div1).attr("data-col") === $(div2).attr("data-col")) {
+          return 0
+        } else {
+          return 1
+        }
+      })
+      var length = current.length - 1
+      for (var i = length; i >= 0; i--) {
+        if (current[i - 1]) {
+          var curr = $(current[i])
+          var next = $(current[i - 1])
+          if (curr.attr("data-val") === next.attr("data-val")) {
+            var total = parseInt(curr.attr("data-val")) + parseInt(next.attr("data-val"))
+            self.scoring(total)
+            self.checkWin(total)
+            next.attr("data-col", curr.attr("data-col"))
+            // setTimeout(function () {
+              curr.attr("data-val", total).html(total)
+              next.remove()
+            // }, 925)
+            current.splice([i - 1], 1)
+          }
+        }
+      }
+      if (current.length > 0) {
+        var k = 3
+        for (var j = current.length - 1; j >= 0; j--) {
+          var space = $(current[j])
+          space.attr("data-col", "c" + k)
+          k--
+        }
+      }
+    }
+  } else if (direction === "up") {
+    for (var col = 0; col < 4; col++) {
+      var current = $("div[data-col=c" + col + "]").get().sort(function (div1, div2) {
+        if ($(div1).attr("data-row") < $(div2).attr("data-row")) {
+          return -1
+        } else if ($(div1).attr("data-row") === $(div2).attr("data-row")) {
+          return 0
+        } else {
+          return 1
+        }
+      })
+      var length = current.length - 1
+      for (var i = 0; i < length; i++) {
+      // current.each(function (i, val) {
+        if (current[i + 1]) {
+          var curr = $(current[i])
+          var next = $(current[i + 1])
+          if (curr.attr("data-val") === next.attr("data-val")) {
+            var total = parseInt(curr.attr("data-val")) + parseInt(next.attr("data-val"))
+            self.scoring(total)
+            self.checkWin(total)
+            next.attr("data-row", curr.attr("data-row"))
+            // setTimeout(function () {
+              curr.attr("data-val", total).html(total)
+              next.remove()
+            // }, 925)
+            current.splice([i + 1], 1)
+          }
+        }
+      }
+      if (current.length > 0) {
+        for (var j = 0; j < current.length; j++) {
+          var space = $(current[j])
+          space.attr("data-row", "r" + j)
+        }
+      }
+    }
+  } else if (direction === "down") {
+    for (var col = 0; col < 4; col++) {
+      var current = $("div[data-col=c" + col + "]").get().sort(function (div1, div2) {
+        if ($(div1).attr("data-row") < $(div2).attr("data-row")) {
+          return -1
+        } else if ($(div1).attr("data-row") === $(div2).attr("data-row")) {
+          return 0
+        } else {
+          return 1
+        }
+      })
+      var length = current.length - 1
+      for (var i = length; i >= 0; i--) {
+        if (current[i - 1]) {
+          var curr = $(current[i])
+          var next = $(current[i - 1])
+          if (curr.attr("data-val") === next.attr("data-val")) {
+            var total = parseInt(curr.attr("data-val")) + parseInt(next.attr("data-val"))
+            self.scoring(total)
+            self.checkWin(total)
+            next.attr("data-row", curr.attr("data-row"))
+            // setTimeout(function () {
+              curr.attr("data-val", total).html(total)
+              next.remove()
+            // }, 925)
+            current.splice([i - 1], 1)
+          }
+        }
+      }
+      if (current.length > 0) {
+        var k = 3
+        for (var j = current.length - 1; j >= 0; j--) {
+          var space = $(current[j])
+          space.attr("data-row", "r" + k)
+          k--
+        }
+      }
+    }
+  }
+  this.addTile()
+}
+
+Game.prototype.scoring = function(value){
+  this.score += value
+  $("p").text('Your Score is: '+this.score)
+}
+
+Game.prototype.checkWin = function(value){
+  if (value === 2048){
+    $("p").text('YOU WON!!')
+  }
+}
+
+// Game.prototype.checkLose = function(){
+//   var tiles = $(".tile")
+//   if (tiles.length === 16 &&) {
+
+//   }
+// }
+
 $(document).ready(function() {
   console.log("ready to go!");
   // Any interactive jQuery functionality
@@ -28,9 +227,8 @@ $(document).ready(function() {
   $('body').keydown(function(event){
     var arrows = [37, 38, 39, 40];
     if (arrows.indexOf(event.which) > -1) {
-      var tile = $('.tile');
-
-      game.moveTile(tile, event.which);
+      var tiles = $('.tile');
+      game.moveTile(tiles, event.which);
     }
   });
 });
diff --git a/stylesheets/2048.css b/stylesheets/2048.css
@@ -23,7 +23,7 @@ html {
 .tile {
   position: absolute;
   top: 0; left: 0;
-  transition: all 0.2s ease-in-out;
+  transition: all 1s ease-in-out;
 
   color: #f9f6f2;
   background: #000;
@@ -59,3 +59,15 @@ html {
 .tile[data-val="512"]  { background: #edc850; }
 .tile[data-val="1024"] { background: #edc53f; }
 .tile[data-val="2048"] { background: #edc22e; }
+
+h1 {
+  color: #776e65;
+  font-weight: bold;
+  margin-left: 30%;
+}
+
+p {
+  color: #776e65;
+  font-weight: bold;
+  margin-left: 30%;
+}