Ada-C5 · jadevance · Jul 5, 2016 · Jul 5, 2016 · Jul 5, 2016 · Jul 5, 2016
diff --git a/README.md b/README.md
@@ -16,15 +16,24 @@ 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?
-  1. When do tiles enter the game?
-  1. How do you know if you've won?
-  1. How do you know if you've lost?
-  1. What makes tiles move?
-  1. What happens when they move?
-  1. How would you know how far a tile should move?
-  1. How would you know if tiles would collide?
-  1. What happens when tiles collide?
+  + How does scoring work?
+    - When numbers are able to combine, the sum is added to the total score.
+  + When do tiles enter the game?
+    - If movement is possible, when moved a new "2" or "4" tile enters the game. (noted: this is usually on the edge of the game board)
+  + How do you know if you've won?
+    - The score of 2048 is reached on any ONE tile. Not combined score. 
+  +  How do you know if you've lost?
+    - You are unable to combine any more tilesand when the squares are full. 
+  + What makes tiles move?
+    - the arrow keys on the keyboard
+  + What happens when they move?
+    - They slide in the direction that the arrow key was pressed. They also slide across the entire board until they encounter a tile they cannot combine with. 
+  + How would you know how far a tile should move?
+    - They can slide across the board to the furthest empty cell. If the cell adjacent to the sliding tile contains a tile of equal value, they will combine. 
+  + How would you know if tiles would collide?
+    - See above. If the tile sliding is of equal value to the adjacent tile, they will combine. 
+  + What happens when tiles collide?
+    - The previous tile that slid is replaced with an empty cell. The adjacent tile it slid into has a new score. Also, a new "2" or "4" tile appears randomly on the board. 
 - 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
@@ -1,12 +1,12 @@
+
 <!DOCTYPE html>
 <html>
   <head>
     <title>2048</title>
     <link rel="stylesheet" media="all" href="stylesheets/2048.css"/>
-    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
-    <script type="text/javascript" src="javascripts/2048.js"></script>
   </head>
   <body>
+  <!-- <button class="new-game">New Game</button> -->
     <div id="gameboard">
       <div class="cells">
         <div class="cell"></div>
@@ -26,7 +26,29 @@
         <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" id="0" data-row="r0" data-col="c0" data-val=""></div>
+      <div class="tile" id="1" data-row="r0" data-col="c1" data-val=""></div>
+      <div class="tile" id="2" data-row="r0" data-col="c2" data-val=""></div>
+      <div class="tile" id="3" data-row="r0" data-col="c3" data-val=""></div>
+      <div class="tile" id="4" data-row="r1" data-col="c0" data-val=""></div>
+      <div class="tile" id="5" data-row="r1" data-col="c1" data-val=""></div>
+      <div class="tile" id="6" data-row="r1" data-col="c2" data-val=""></div>
+      <div class="tile" id="7" data-row="r1" data-col="c3" data-val=""></div>
+      <div class="tile" id="8" data-row="r2" data-col="c0" data-val=""></div>
+      <div class="tile" id="9" data-row="r2" data-col="c1" data-val=""></div>
+      <div class="tile" id="10" data-row="r2" data-col="c2" data-val=""></div>
+      <div class="tile" id="11" data-row="r2" data-col="c3" data-val=""></div>
+      <div class="tile" id="12" data-row="r3" data-col="c0" data-val=""></div>
+      <div class="tile" id="13" data-row="r3" data-col="c1" data-val=""></div>
+      <div class="tile" id="14" data-row="r3" data-col="c2" data-val=""></div>
+      <div class="tile" id="15" data-row="r3" data-col="c3" data-val=""></div>
     </div>
   </body>
-</html>
+  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
+  <script src="./javascripts/2048.js"></script>
+  <script type="text/javascript">
+    $(document).on('ready', function() {
+      var game = new Game().initialize('#gameboard'); 
+    })
+  </script>
+</html>
diff --git a/index2.html b/index2.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>2048</title>
+    <link rel="stylesheet" media="all" href="stylesheets/2048.css"/>
+    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
+    <script type="text/javascript" src="javascripts/2048.js"></script>
+  </head>
+  <body>
+    <div id="gameboard">
+      <div class="cells">
+        <div class="cell"></div>
+        <div class="cell"></div>
+        <div class="cell"></div>
+        <div class="cell"></div>
+      </div>
+      <div class="tile" data-row="r0", data-col="c0" data-val="2">2</div>
+      <div class="tile" data-row="r0", data-col="c1" data-val="2">2</div>
+    </div>
+  </body>
+</html>
diff --git a/javascripts/2048.js b/javascripts/2048.js
@@ -1,36 +1,126 @@
-var Game = function() {
-  // Game logic and initialization here
-};
+function Game() {
+  var self = this; 
 
-Game.prototype.moveTile = function(tile, direction) {
-  // Game method here
+  this.gameOver = null;
+  this.container = null; 
+
+  this.initialize = function(selector) {
+    self.container = $(selector);
+    self.gameOver = false; 
+    self.newTile(); 
+    $('body').keydown(function(event){
+      var arrows = [37, 38, 39, 40]
+      if (arrows.indexOf(event.which) > -1) {
+        var tile = $('.tile')
+        self.moveTile(tile, event.which)
+      }
+    }) 
+  }
+
+  // generates a new tile anywhere on the board 
+  this.newTile = function() {
+    var randoCol = Math.floor((Math.random() * (4 - 0) + 0));
+    var randoRow = Math.floor((Math.random() * (4 - 0) + 0));
+
+    // get a random 2 or 4, 2s are more common than 4s  
+    var newVal = [2, 2, 2, 2, 4];
+    var randoVal = newVal[Math.floor(Math.random() * newVal.length)]
+    var id = (randoRow * 4) + randoCol
+    var randoTile = $('#' + id)
+    var emptyList = $('div.tile[data-val=""]')
+
+    // if id is in empty list, assign it to the board
+    // this loop needs to happen AFTER emptyList gets assigned
+    $.each(emptyList, function(index, value) {
+      if ($(value).attr('#id') === $(randoTile).attr('#id')) {
+        randoTile.attr('data-row', "r" + randoRow);
+        randoTile.attr('data-col', "c" + randoCol);
+        randoTile.attr('data-val', randoVal);
+        randoTile.text(randoVal); 
+        emptyList.splice(index, 1)
+      } 
+    })
+  }
+
+  // Thinking in vectors 
+  // R0, C0 is top left (start)
+  // Up is 1, 0 
+  // down is -1, 0 
+  // left is 0, -1
+  // right is 0, 1 
+
+ this.moveTile = function(tile, direction) {
+  var row = 0 
+  var column = 0 
   switch(direction) {
     case 38: //up
       console.log('up');
+      var row = 1
+      var column = 0 
+      self.moveAll(row, column)
+      self.newTile();
       break;
     case 40: //down
       console.log('down');
+      var row = -1
+      var column = 0 
+      self.moveAll(row, column)
+      self.newTile();
       break;
     case 37: //left
       console.log('left');
+      var row = 0
+      var column = -1 
+      self.moveAll(row, column)
+      self.newTile();
       break;
     case 39: //right
       console.log('right');
+      var row = 0
+      var column = 1 
+      self.moveAll(row, column)
+      self.newTile();
       break;
-  }
-};
-
-$(document).ready(function() {
-  console.log("ready to go!");
-  // Any interactive jQuery functionality
-  var game = new Game();
-
-  $('body').keydown(function(event){
-    var arrows = [37, 38, 39, 40];
-    if (arrows.indexOf(event.which) > -1) {
-      var tile = $('.tile');
-
-      game.moveTile(tile, event.which);
     }
-  });
-});
+  }
+
+  this.moveAll = function(row, column) {
+    // get all of the tiles on the board
+    var allFilledTiles = $('div.tile[data-val !=""]')
+    // maybe do some comparison with this
+    var allEmptyTiles = $('div.tile[data-val=""]')
+
+    $.each(allTiles, function(index, value) {
+      //coordinates omg 
+      console.log($(value).attr('data-col')[1])
+      console.log($(value).attr('data-row')[1])
+      if (row === 1 && column === 0) {
+        console.log('I am up')
+      } else if (row === -1 && column === 0) {
+        console.log('I am down')
+      } else if (row === 0 && column === -1) {
+        console.log('I am left')
+      } else {
+        console.log('I am right')
+      }
+
+      // if up
+        // check to see if the adjacent cell is empty or not
+        // subtract off of the row, do nothing to the column 
+        // worry about collisions later 
+      // if down
+        // check to see if the adjacent cell is empty or not
+        // add to the row, do nothing to the column 
+        // worry about collisions later 
+      // if left
+        // check to see if the adjacent cell is empty or not
+        // do nothing to the row, subtract off of the column 
+        // worry about collisions later 
+      // if right 
+        // check to see if the adjacent cell is empty or not
+        // do nothing to the row, add to the column 
+        // worry about collisions later 
+    })
+  }
+}
+