Add custom modal to board container

Bill-the-dev · Apr 13, 2022 · a7b774f · a7b774f
1 parent f898a26
commit a7b774f
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 23 deletions.
diff --git a/dist/main.js b/dist/main.js
diff --git a/index.html b/index.html
@@ -40,6 +40,11 @@ <h1 class="title">Onitama</h1>
       </div>
       <!--grid layout for overall page, fr -->
       <div id="board-container">
+        <div class="modal__win">
+          <div class="win-color"></div>
+          <div class="win-type"></div>
+          <div class="btn-restart">Play Again</div>
+        </div>
         <div id="board">
           <div class="square inactive" id="[4,0]"></div>
           <div class="square inactive" id="[4,1]"></div>

diff --git a/src/index.js b/src/index.js
@@ -73,16 +73,10 @@ document.addEventListener("DOMContentLoaded", () => {
   let modalView = document.querySelector(".modal__fill");
   document.querySelector(".modal__fill").innerHTML = modalFill;
 
-  // const sanitizer = new Sanitizer(); 
-
   // Modal How To on
   addGlobalEventListener("click", "#how-to-play", e => {
     e.preventDefault();
     console.log("on");
-    // modalView.setHTML("Hellooooooo");
-    // modalView.innerHTML = modalFill;
-    // document.querySelector(".modal__fill").innerHTML = modalFill;
-    // document.querySelector(".modal__fill").innerHTML = modalFill;
     modalHowTo.classList.add("modal__fill-active");
   });
 

diff --git a/src/scripts/board.js b/src/scripts/board.js
@@ -60,7 +60,7 @@ export default class Board {
     let posStr = JSON.stringify(pos);
     let square = document.getElementById(posStr);
     let child = square.firstChild;
-    setTimeout(() => square.removeChild(child), 1700);
+    setTimeout(() => square.removeChild(child), 800);
   }
 
   placePiece(pos, piece) {
@@ -74,8 +74,11 @@ export default class Board {
 
 
   // win condition capture
-  checkWinStone(endPos, piece) {
-
+  checkWinStone() {
+    let masterRed = document.querySelector(".red-master-piece");
+    let masterBlue = document.querySelector(".blue-master-piece");
+    !masterBlue ? ["Red", "Stone"] : false
+    !masterRed ? ["Blue", "Stone"] : false
   }
 
   // win condition shrine
@@ -87,17 +90,18 @@ export default class Board {
     console.log(masterBlue);
     console.log(masterRed);
     if (masterRed.parentElement.id === "[0,2]") {
-      return this.gameWin("red", "stream");
+      return ["Red", "Stream"];
     } else if (masterBlue.parentElement.id === "[4,2]") {
-      return this.gameWin("blue", "stream");
+      return ["Blue", "Stream"];
     } else {
-      return console.log("nobody wins yet");
+      console.log("nobody wins yet");
+      return false 
     }
   }
-  gameWin(colorStr, typeStr) {
-    // probably want to end game in game instead...
-    return console.log(`${colorStr} wins by ${typeStr}!`)
-  }
+  // gameWin(colorStr, typeStr) {
+  //   console.log(`${colorStr} wins by ${typeStr}!`)
+  //   return [true, colorStr, typeStr] 
+  // }
 
   removePiece(pos) {
     return (this.grid[pos[0]][pos[1]] = null);

diff --git a/src/scripts/game.js b/src/scripts/game.js
@@ -7,6 +7,8 @@ export default class Game {
   constructor() {
     this.activeGame = false;
     this.gameWin = false;
+    this.gameWinType = '';
+    this.gameWinColor = '';
     this.targetPos = null;    // checkHighlight
     this.targetCard = null;
     this.targetMoves = null;
@@ -217,6 +219,15 @@ export default class Game {
     let piece = that.board.getPiece(posEnd); // Piece
     // debugger
     that.board.viewRemovePiece(posStart); // remove old pos
+
+    // WIN CHECK
+    debugger;
+    setTimeout(() => {
+      if (that.checkWin()) {
+        that.modalWin()
+      }
+    }, 1000);
+
     // TURN SWAP 
     setTimeout(() => {
       that.viewSwapTurn();
@@ -247,6 +258,36 @@ export default class Game {
     that.deck.viewDealSwap(newDeckCard, deckCardEl);
   }
 
+  checkWin() {
+    // returns [colorStr, typeStr]  || false
+    if (that.board.checkWinStone() !== false ){
+      let winResults = that.board.checkWinStone()
+      this.activeGame = false
+      this.gameWin = true 
+      this.gameWinType = winResults[1]
+      this.gameWinColor = winResults[0]
+      return true
+    }
+    if (that.board.checkWinStream() !== false) {
+      let winResults = that.board.checkWinStream()
+      this.activeGame = false
+      this.gameWin = true;
+      this.gameWinType = winResults[1];
+      this.gameWinColor = winResults[0];
+      return true
+    }
+    return false
+  }
+
+  modalWin() {
+    let modalWin = document.querySelector(".modal__win");
+    let winColor = `${this.gameWinColor} Wins!`
+    let winType = `Way of ${this.gameWinType}`
+    document.querySelector(".win-color").innerHTML = winColor;
+    document.querySelector(".win-type").innerHTML = winType;
+    modalWin.style.display = 'flex';
+  }
+
   // checkWinStream() {
   //   debugger;
   //   let that = this
@@ -278,9 +319,6 @@ export default class Game {
     let turnRedCircle = document.querySelector(".turn-red-circle");
     let turnBlueCircle = document.querySelector(".turn-blue-circle");
 
-    debugger
-    // that.board.checkWinStone();
-    that.board.checkWinStream();
 
     if (that.currentPlayerIdx === 0) {
       // body.classList.remove("turn-blue")

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -83,7 +83,8 @@ header {
   align-self: center;
   grid-column: 2 ;
   grid-row: 3 ;
-  place-items: center;}
+  place-items: center;
+}
 
 #board {
   display: grid;

diff --git a/src/styles/modal_win.scss b/src/styles/modal_win.scss
@@ -0,0 +1,25 @@
+.win-modal{
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+}
+
+// Board Styling:
+// justify-self: center;
+// align-self: center;
+// grid-column: 2;
+// grid-row: 3;
+// place-items: center;
+
+.win-color{
+
+}
+
+.win-type{
+
+}
+
+.btn-restart {
+
+}