separate logic and view components

index.html

@@ -26,44 +26,7 @@ <h1 class="title">Onitama</h1>
       <div id="board-container">
         <!-- possible to iterate add squares? createElement?-->
         <!-- manual for now -->
-        <div id="board">
-          <div class="grid-row">
-            <!-- bottom row, starting left -->
-            <button class="square" data-square="[0, 4]"></button> 
-            <button class="square" data-square="[0, 3]"></button>
-            <button class="square" data-square="[0, 2]"></button>
-            <button class="square" data-square="[0, 1]"></button>
-            <button class="square" data-square="[0, 0]"></button>
-          </div>
-          <div class="grid-row">
-            <button class="square" data-square="[1, 4]"></button>
-            <button class="square" data-square="[1, 3]"></button>
-            <button class="square" data-square="[1, 2]"></button>
-            <button class="square" data-square="[1, 1]"></button>
-            <button class="square" data-square="[1, 0]"></button> 
-          </div>
-          <div class="grid-row">
-            <button class="square" data-square="[2, 0]"></button>
-            <button class="square" data-square="[2, 1]"></button>
-            <button class="square" data-square="[2, 2]"></button>
-            <button class="square" data-square="[2, 3]"></button>
-            <button class="square" data-square="[2, 4]"></button>
-          </div>
-          <div class="grid-row">
-            <button class="square" data-square="[3, 0]"></button>
-            <button class="square" data-square="[3, 1]"></button>
-            <button class="square" data-square="[3, 2]"></button>
-            <button class="square" data-square="[3, 3]"></button>
-            <button class="square" data-square="[3, 4]"></button>
-          </div>
-          <div class="grid-row">
-            <button class="square" data-square="[4, 0]"></button>
-            <button class="square" data-square="[4, 1]"></button>
-            <button class="square" data-square="[4, 2]"></button>
-            <button class="square" data-square="[4, 3]"></button>
-            <button class="square" data-square="[4, 4]"></button>
-          </div>
-        </div>
+        <div id="board"></div>
       </div>
 
       <div id="card-opp-container">

src/index.js

@@ -9,11 +9,37 @@ function addGlobalEventListener(type, selector, callback) {
 }
 
 
-// new
-const board = new Board('#board');
+function createGrid() {
+  const gameBoard = document.getElementById("board");
+
+  for (let i = 0; i < 5; i++) {
+    for (let j = 0; j < 5; j++) {
+      let square = document.createElement("div");
+      square.classList.add("square");
+      square.setAttribute("id", [i, j]);
+      // gameBoard.appendChild(square);
+    }   
+  }
+}
+
+createGrid();
 
+//   gameOver() {
+
+//   }
 
+//   swapMoveCards() {
 
+//   }
+
+//   swapTurn() {
+//     if (this.currentPlayer === 2) {
+//       this.currentPlayer === 1;
+//     } else {
+//       this.currentPlayer === 2;
+//     }
+//   }
+// }
 
 
 

src/scripts/board.js

@@ -1,20 +1,17 @@
-import "./card.js";
 
 class Board {
-  constructor(selector) {
-    this.element = document.querySelector(selector);
-    console.log(this.element);
-    this.grid = Board.makeGrid();
-  }
-
-  isEmpty(pos) {
-    if (!Board.validPos(pos)) {
-      throw new Error('That position is not valid');
+  constructor() {
+    this.grid = [];
+    for (let i = 0; i < 5; i++) {
+      let row = [];
+      for (let j = 0; j < 5; j++) {
+        let col = null;
+        row.push(col);
+      }
+      this.grid.push(row);
     }
-    return (this.grid[pos[0], pos[1]] === null);  // t or f
   }
 
-  // movePiece()  ?
 
   validPos(pos) {       // static?
     if (pos[0] < 0 || pos[0] > 4) return false;
@@ -23,23 +20,45 @@ class Board {
     return true;
   }
 
-  static makeGrid() {          // static?
-    let grid = [];
-    for (let i = 0; i < 5; i++) {
-      grid.push([]);
-      for (let j = 0; j < 5; j++) {
-        grid[i].push(null);
-      }
+
+  getPiece(pos) {
+    return this.grid[pos[0]][pos[1]];
+    // check empty elsewhere? 
+  }
+
+  isEmpty(pos) {
+    if (!Board.validPos(pos)) {
+      throw new Error('That position is not valid');
     }
-    return grid;
+    return (this.grid[pos[0], pos[1]] === null);  // t or f
   }
 
 
-}
 
-export default Board;
+}
+//confirmed by printing below with fill: let col = [`[${i},${j}]`];
+let board1 = new Board();
 
+// this.grid[1][1] = 'hello' // assign
+console.log(board1.grid);
+console.log(board1.grid[0][0]);
+console.log(board1.grid[4][4]);
+console.log(board1.grid[1][3]);
+if (validPos([1, 1])) {
+  console.log('valid!');  //valid
+} else {
+  console.log('invalid!');
+}
+this.grid.getPiece([1, 1]);
 
+// export default Board;
 
 
-// makeGrid as static method? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#static_methods_and_properties
+// Board should appear: 
+//  TOP           OPPONENT
+// [4, 0]  [4, 1]  [4, 2]  [4, 3]  [4, 4]  
+// [3, 0]  [3, 1]  [3, 2]  [3, 3]  [3, 4]  
+// [2, 0]  [2, 1]  [2, 2]  [2, 3]  [2, 4]  
+// [1, 0]  [1, 1]  [1, 2]  [1, 3]  [1, 4]  
+// [0, 0]  [0, 1]  [0, 2]  [0, 3]  [0, 4]  
+// BOTTOM          PLAYER

src/scripts/card.js

@@ -1,21 +1,13 @@
-class Card {
-  constructor() {
-
-  }
 
-  makeMoveCards() {  
-    const moveCards = [];
-    while (moveCards.length !== 5) {
-      let card = allCards.random();
-      if (!moveCards.includes(card)) moveCards.push(card);
-    }
-    return moveCards;
+class Card {
+  constructor(){
+
   }
-
-
-
+
 }
 
+// this will have move data versus current position? belongs to? 
+
 const tiger = [[-1, 0], [2, 0]];                        // tiger
 const dragon = [[-1, 1], [-1, -1], [1, 2], [1, -2]];    // dragon
 const frog = [[1, -1], [0, -2], [-1, 1]];               // frog
@@ -33,17 +25,6 @@ const boar = [[1, 0], [0, -1], [0, 1]];                 // boar
 const eel = [[1, -1], [-1, -1], [0, 1]];                // eel
 const cobra = [[0, -1], [1, 1], [-1, 1]];               // cobra
 
-const allCards = [tiger, dragon, frog, rabbit, crab, elephant, goose, rooster, monkey, mantis, horse, ox, crane, boar, eel, cobra]
-
-
-
-
-
-let card1 = document.querySelector("[data-card-back='1']")
-
-
-
-
+// const allCards = [tiger, dragon, frog, rabbit, crab, elephant, goose, rooster, monkey, mantis, horse, ox, crane, boar, eel, cobra]
 
-// each card should visualize the grid move and title
-// Visual too small?
+export default Card;

src/scripts/deck.js

@@ -0,0 +1,39 @@
+import Card from './card.js';
+
+class Deck {
+  constructor() {
+    this.moveCards = Card.allCards;
+    this.currentCards = [];
+    for (let i = 0; i < 16; i++) {
+      this.cards.push(new Card());
+    }
+  }
+
+  makeCards() {
+    while (this.cards.length < Card.allCards.length) {
+
+    }
+  }
+
+  getCard() {
+    let cardIdx = Math.floor(Math.random * this.cards.length);
+    return this.cards[cardIdx];
+  }
+  deal() {
+    let card = getCard();
+    this.currentCards.push(card);
+    return card;
+  }
+
+
+
+}
+  // shuffle and card.pop() ?
+  // Game obj should be in charge of getting the card and giving it to the player 
+
+export default Deck;
+
+
+
+// should deal() a random card and remove from deck
+// dealtCards should include the card

src/scripts/game.js

@@ -1,27 +1,66 @@
-import Board from "./board";
+import Player from './player';
+import Deck from './deck';
+import Board from './board';
 
 class Game {
   constructor() {
-    this.board = new Board()
-    // this.currentPlayer = ?
+    this.activeGame = false;
+    this.currentPlayerIdx = 0;  // to aid with dealing cards
+    this.players = [new Player(), new Player()];
+    this.deck = new Deck();
+    this.board = new Board();
   }
-
-  gameOver() {
 
+  get currentPlayer() {
+    return this.players[this.currentPlayerIdx];
   }
+  // getter, accessed like a property
 
-  swapMoveCards() {
+  swapTurn() {
+    this.currentPlayerIdx = (this.currentPlayerIdx + 1) % 2;
+    // ensures always 0 or 1 !
+  }
 
+  dealCard() {
+    this.currentPlayer.dealCard(this.deck.deal());  // calling itself?
+    this.swapTurn(); // deals to each player until 4 cards dealt
   }
 
-  swapTurn() {
-    if (this.currentPlayer === 2) {
-      this.currentPlayer === 1
-    } else {
-      this.currentPlayer === 2
+  start() {
+    for (let i = 0; i < 4; i++) {
+      this.dealCard();
     }
+    this.onDeckCard = this.deck.deal();
+    this.activeGame = true;
   }
 }
 
+export default Game;
+
+
+// consider adding a KEY:value list of variables like pawn, master, or player 
+// also where to keep card objects?
+
+
+
+// function addGlobalEventListener(type, selector, callback) {
+//   document.addEventListener(type, e => {
+//     if (e.target.matches(selector)) callback(e);
+//   });
+// }
+
+
+// function createGrid() {
+//   const gameBoard = document.getElementById("board");
 
+//   for (let i = 0; i < 5; i++) {
+//     for (let j = 0; j < 5; j++) {
+//       let square = document.createElement("div");
+//       square.classList.add("square");
+//       square.setAttribute("id", [i, j]);
+//       // gameBoard.appendChild(square);
+//     }
+//   }
+// }
 
+// createGrid();

src/scripts/piece.js

@@ -1,7 +1,12 @@
 
 
 class Piece {
-  constructor() {
-
+  constructor(type, color) {
+    this.type = type;
+    this.color = color;
   }
-}
+}
+
+// piece types: student or master
+
+export default Piece;

src/scripts/player.js

@@ -0,0 +1,13 @@
+
+class Player {
+  constructor() {
+    this.hand = [];  // possible object? array okay for two things.
+  }
+
+  dealCard(card) {
+    this.hand.push(card);
+  }
+
+}
+
+export default Player;