add win conditions to board, found bug in board piece movement

Bill-the-dev · Feb 13, 2022 · fc781d3 · fc781d3
1 parent 573725f
commit fc781d3
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 60 deletions.
diff --git a/dist/main.css b/dist/main.css
@@ -7,15 +7,6 @@
 }
 
 body {
-  /* background: rgb(236,190,70);
-  background: radial-gradient(circle, rgba(170, 168, 161, 0.942) 6%, rgb(241, 236, 225) 90%); */
-  /* background-color: #EEEE; */
-  /* background-color: #b8c6db;
-  background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 74%); */
-  /* background-color: #ffffff;
-  background-image: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%); */
-  /* background-color: #2f4353;
-  background-image: linear-gradient(315deg, #2f4353 0%, #d2ccc4 74%); */
   background-color: #aee1f9;
   background-image: linear-gradient(315deg, #aee1f9 0%, #f6ebe6 74%);
   margin: 1px;
@@ -60,8 +51,8 @@ header {
 #board {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
-  /* five equal 'fractioned' tracks */
-  box-sizing: border-box;
+  /* equal 'fractioned' tracks */
+  box-sizing: content-box;
   /*within container */
   padding: 0px;
   /* border: 2px solid black; */
@@ -145,7 +136,7 @@ header {
 
 .modal__howTo {
   height: 100%;
-  width: 100%;
+  max-width: 100%;
   display: flex;
   position: fixed;
   background-color: rgba(0, 0, 0, 0.25);
@@ -169,7 +160,7 @@ header {
   font-size: 1rem;
   color: #302f2f;
   z-index: 4;
-  overflow-y: scroll;
+  overflow: auto;
 }
 
 .modal__fill-active {

diff --git a/dist/main.js b/dist/main.js
diff --git a/index.html b/index.html
@@ -19,7 +19,7 @@
 <body>
   <div class="modal__howTo">
     <div class="modal">
-      <div class="modal__fill"></div>
+      <div class="modal__fill" style="list-style: circle"></div>
     </div>
   </div>
   <div id="container">

diff --git a/notes_bugs.md b/notes_bugs.md
@@ -1,7 +1,13 @@
-## Known Bugs 
+## Known Bugs && WIP
 
+`grid.placePiece` and `grid.removePiece`
+  - possible error, does not remove opposite color object if capture?
 
 
+`grid.winStone` and `grid.winStream`
+  - designed to set grid attr to the winning color on true
+  - have not decided where to call, issue with place and remove methods need resolution first
+
 
 
 

diff --git a/src/scripts/board.js b/src/scripts/board.js
@@ -4,7 +4,7 @@ import Piece from "./piece";
 export default class Board {
   constructor() {
     // this.player = currentPlayer;
-    this.grid = [];
+    this.grid = [];   
     for (let i = 0; i < 5; i++) {
       let row = [];
       for (let j = 0; j < 5; j++) {
@@ -14,6 +14,10 @@ export default class Board {
       }
       this.grid.push(row);
     }
+    this.redShrine = this.grid[4][2];
+    this.blueShrine = this.grid[0][2];
+    this.winStone = null;
+    this.winStream = null;
     window.Piece = Piece;  // add to window
   }
 
@@ -53,16 +57,10 @@ export default class Board {
   // after move gets rid of piece view
   viewRemovePiece(pos) {
     let that = this;
-    // debugger;
     let posStr = JSON.stringify(pos);
     let square = document.getElementById(posStr);
     let child = square.firstChild;
-
-    // setTimeout(() => square.child.style = 'opacity = 0.5' , 500);
-    // setTimeout(() => square.child.style = 'opacity = 0.3' , 1000);
-    // setTimeout(() => square.child.style = 'opacity = 0.2' , 2000);
-    setTimeout(() => square.removeChild(child), 3000);
-
+    setTimeout(() => square.removeChild(child), 2000);
   }
 
   placePiece(pos, piece) {
@@ -71,8 +69,21 @@ export default class Board {
       that.viewPlacePiece(pos, piece);
       piece.position = pos;
       return (that.grid[pos[0]][pos[1]] = piece);
-    } else {
-      throw new Error('That position is not valid');
+    }
+  }
+
+
+  // win condition capture
+  winStone(endPos, piece) {
+
+  }
+
+  // win condition shrine
+  winStream(endPos, piece) {
+    if (piece.type === "master" && piece.color === "blue" && pos === this.redShrine) { 
+      this.winStream === "blue";
+    } else if (piece.type === "master" && piece.color === "red" && pos === this.blueShrine) {
+      this.winStream === "red";
     }
   }
 
@@ -81,11 +92,6 @@ export default class Board {
   }
 
   movePiece(posStart, posEnd) {
-    // posStart = clicked piece
-    // posEnd = clicked space (highlighted)
-    // if current player color = selected piece color
-    // if selected end position = valid (highlighted)
-    // if move options include (highlighted)
     let pawn = this.getPiece(posStart);
     this.removePiece(posStart);
     return this.placePiece(posEnd, pawn);

diff --git a/src/scripts/game.js b/src/scripts/game.js
@@ -57,7 +57,6 @@ export default class Game {
     this.onDeckCard = this.deck.deal();
     this.activeGame = true;
     this.board.setBoard();
-
   }
 
   // all moves

diff --git a/src/scripts/modal.js b/src/scripts/modal.js
@@ -1,11 +1,12 @@
 export const modalFill = 
 `
   <h2>How to Play Onitama</h2>
-
+  <br>
   <p>
     Onitama is simple and quick variation on chess.  Games typically take 5-15 minutes.
-
+  <br>
   <h3>Setup and the Board</h3>
+    <br>
     <ul>
       <li>Press the <u>Start Game</u> button.</li>
 
@@ -23,9 +24,9 @@ export const modalFill =
 
       <li>Player 1 goes first!</li>
     </ul> 
-
+<br>
   <h3>1. Move and Attack</h3>
-
+<br>
     <ul>
       <li>Select (click) one of your pawns. Selected pawns will highlight yellow. </li>
       <li>Select (click) one of your cards. Selected cards will highlight yellow.</li>
@@ -34,23 +35,23 @@ export const modalFill =
       <li>If the tile contains an enemy pawn, it will be 'captured' and removed from the board.</li>
     </ul>
 
-
+<br>
     <h3>2. Swap Turns and Cards</h3>
-
+<br>
     <ul>
       <li>The move card you used will flip and be exchanged for the move card outside the board, a new movement for next turn!</li>
       <li>Be careful! At the end of your opponents turn they will also exchange, and gain the move you just used!</li>
     </ul>
-
+<br>
     <h3>3. Win the Game</h3>
-
+<br>
     There are two ways to win the game:
     <ol>
       <li><b>Way of the Stone:</b> win by capturing your opponent's 'Master' pawn.</li>
       <li><b>Way of the Stream:</b> win by moving your own 'Master' into your opponents 'Temple Arch' space (the 'Master' starting space).</li>
     </ol>
 
-
+<br>
     <h3>About</h3>
     Onitama is a two-player chess variant where the player moves pawns across a 5x5 grid using a set of five movement cards.
     <br>

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -5,25 +5,14 @@
 }
 
 body {
-  /* background: rgb(236,190,70);
-  background: radial-gradient(circle, rgba(170, 168, 161, 0.942) 6%, rgb(241, 236, 225) 90%); */
-  /* background-color: #EEEE; */
-  /* background-color: #b8c6db;
-  background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 74%); */
-  /* background-color: #ffffff;
-  background-image: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%); */
-  /* background-color: #2f4353;
-  background-image: linear-gradient(315deg, #2f4353 0%, #d2ccc4 74%); */
   background-color: #aee1f9;
   background-image: linear-gradient(315deg, #aee1f9 0%, #f6ebe6 74%);
-
   margin: 1px; 
 }
 
 #container {
   width: 100%;
-  height: 100%; 
-
+  height: 100%;   
 } 
 
 
@@ -62,16 +51,15 @@ header {
 
 #board {
   display: grid;
-  grid-template-columns: repeat(5, 1fr); /* five equal 'fractioned' tracks */
-  box-sizing: border-box;  /*within container */
+  grid-template-columns: repeat(5, 1fr); /* equal 'fractioned' tracks */
+  box-sizing: content-box;  /*within container */
   padding: 0px;
   /* border: 2px solid black; */
   border-radius: 6px;
   box-shadow: 0px, 3px, 18px, rgba(0, 0, 0, 0.5);
 }
 
 
-
 .opponent-row {
   grid-column: 2 / 4;
   grid-row: 2 / 3;
@@ -149,7 +137,7 @@ header {
 
 .modal__howTo {
   height: 100%;
-  width: 100%;
+  max-width: 100%;
   display: flex;
   position: fixed;
   background-color: rgba(0, 0, 0, 0.25);
@@ -173,7 +161,7 @@ header {
   font-size: 1rem;
   color: #302f2f;
   z-index: 4; 
-  overflow-y: scroll
+  overflow: auto;
 }
 
 .modal__fill-active {