Complete deck library modal and turn transition styling

Bill-the-dev · Apr 14, 2022 · 0703a34 · 0703a34
1 parent dc49aac
commit 0703a34
Show file tree

Hide file tree

Showing 11 changed files with 2,765 additions and 74 deletions.
diff --git a/dist/main.css b/dist/main.css
diff --git a/dist/main.js b/dist/main.js
diff --git a/index.html b/index.html
@@ -21,19 +21,28 @@
 </head>
 
 <body class="body">
-  <!-- <div class="modal__howTo">
+  <!-- MODAL ABOUT / HOW TO PLAY -->
+  <!-- filled by modal.js -->
+  <div class="modal__howTo">
     <div class="modal">
       <div class="modal__fill" ></div>
     </div>
-  </div> -->
+  </div>
+  <!-- MODAL ALL CARDS -->
+  <!-- filled by modal.js -->
+  <div class="modal__allCards" style="visibility: none">
+    <div class="modal">
+      <div class="modal__cards"></div>
+    </div>
+  </div>
   <div id="container">    
     <div id="game">
       <h1 class="title">Onitama</h1>
       <div class="menu-container">
         <div class="menu-box">
           <div id="start" class="menu start-inactive">Start Game</div>
           <div id="how-to-play" class="menu">How to Play</div>
-          <div id="all-move-cards" class="menu">Movement Cards (WIP)</div>
+          <div id="all-move-cards" class="menu">The Deck</div>
           <div id="linkedin" class="menu">
             <a href="https://www.linkedin.com/in/bill-camarco" target="_blank" class="link-tab">LinkedIN</a>
           </div>
@@ -79,42 +88,36 @@ <h1 class="title">Onitama</h1>
       </div>
 
       <div class="opponent-row">
-        <div class="move-card" data-card="5">
+        <div class="move-card game-card" data-card="5">
           <div class="front">O</div>
           <div class="back inactive-card" id="back5"></div>
         </div>
-        <div class="move-card" data-card="4">
+        <div class="move-card game-card" data-card="4">
           <div class="front">O</div>
           <div class="back inactive-card" id="back4"></div>
         </div>
       </div>           
       <div class="on-deck-row">
         <div class="turn-circle turn-red-circle">Red's Turn!</div>
-        <div class="move-card" id="on-deck-card" data-card="3">
+        <div class="move-card game-card" id="on-deck-card" data-card="3">
           <div class="front">O</div>
           <div class="back inactive-card" id="back3"></div>
         </div>
         <div class="turn-circle turn-blue-circle">Blue's Turn!</div>
       </div>
       <div class="player-row">
-        <div class="move-card" data-card="2">
+        <div class="move-card game-card" data-card="2">
           <div class="front">O</div>
           <div class="back inactive-card" id="back2"></div>
         </div>
-        <div class="move-card" data-card="1">
+        <div class="move-card game-card" data-card="1">
           <div class="front">O</div>
           <div class="back inactive-card" id="back1"></div>
         </div>
       </div>
     </div>
   </div>
 
-  <!-- MODAL ABOUT / HOW TO PLAY -->
-  <!-- filled by modal.js -->
-  <div class="modal__howTo" style="visibility: none">
-    <div class="modal">
-      <div class="modal__fill" style="list-style: circle"></div>
-    </div>
-  </div>
+
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,11 +1,12 @@
 import "./index.scss"
 import Game from "./scripts/game.js";
 import Board from "./scripts/board";
-import { modalFill } from "./scripts/modal";
+import { modalFill, modalCards } from "./scripts/modal";
 document.addEventListener("DOMContentLoaded", () => {
 
   let game = new Game();
   let board = new Board();
+  let modalLoaded = false;
 
   // let deck = Deck;
   // let piece = Piece;
@@ -70,8 +71,11 @@ document.addEventListener("DOMContentLoaded", () => {
 
   // Modal consts
   let modalHowTo = document.querySelector(".modal__howTo");
+  let modalAllCards = document.querySelector(".modal__allCards");
   let modalView = document.querySelector(".modal__fill");
   document.querySelector(".modal__fill").innerHTML = modalFill;
+  document.querySelector(".modal__cards").innerHTML = modalCards;
+
 
   // Modal How To on
   addGlobalEventListener("click", "#how-to-play", e => {
@@ -87,6 +91,29 @@ document.addEventListener("DOMContentLoaded", () => {
     modalHowTo.classList.remove("modal__fill-active");
   });
 
+  // Modal All Cards on
+  addGlobalEventListener("click", "#all-move-cards", e => {
+    e.preventDefault();
+    // console.log("on");
+    modalAllCards.classList.add("modal__cards-active");
+    if (!modalLoaded) {
+      game.deck.modalDealCards();
+      modalLoaded = true;
+      game.deck.modalToggleFlipAll();
+    } else {
+      game.deck.modalToggleFlipAll();
+    }
+    // deals multiple times...
+  });
+  // Modal All Cards off
+  addGlobalEventListener("click", ".modal__allCards", e => {
+    e.preventDefault();
+    // console.log("on");
+    game.deck.modalToggleFlipAll()
+    modalAllCards.classList.remove("modal__cards-active");
+  });
+
+
   // Start / End game dynamic
   addGlobalEventListener("click", "#start", e => {
     let body = document.querySelector(".body");

diff --git a/src/scripts/deck.js b/src/scripts/deck.js
@@ -38,21 +38,29 @@ export default class Deck {
 
   // toggle is_flipped on/off
   viewToggleFlipAll() {
-    let allCards = document.querySelectorAll(".move-card");
+    let allCards = document.querySelectorAll(".game-card");
     allCards.forEach(function (card) {
       card.classList.toggle("is_flipped");
     });
   }
 
+  modalToggleFlipAll() {
+    let allCards = document.querySelectorAll(".modal-card");
+    allCards.forEach( (card, index) => {
+      setTimeout(() => {
+        card.classList.toggle("is_flipped");
+      }, (50 * index));
+    });
+  }
+
   // toggle is_flipped for switch turn
   async viewToggleFlipTurn() {
     let that = this;
+
     let turnCard = document.querySelector(".move-card .active-card");
-
     turnCard.parentElement.classList.toggle("is_flipped");
 
     let deckCard = document.querySelector("#on-deck-card");
-
     deckCard.classList.toggle("is_flipped");
   }
 
@@ -146,10 +154,41 @@ export default class Deck {
   }
 
 
+  // modal deal
+  modalDealCards() {
+    debugger
+    // if () {
+      for (let i = 0; i < allCards.length; i++) {
+        debugger
+        let card = allCards[i];
+        let name = card[0].toLowerCase();
+        let nameShow = name[0].toUpperCase() + name.substring(1)
+        let imgSource = imgSourcesObj[name]
+        let whichCard = document.getElementById(`modal-back-${i+1}`);
+
+        // h2 name
+        let setBackName = document.createElement("h2");
+        setBackName.className = "back-name";
+        setBackName.innerHTML = nameShow;
+        whichCard.appendChild(setBackName);
+
+        // img and src
+        let setBackImg = document.createElement("img");
+        setBackImg.className = "grid-graphic";
+        setBackImg.src = imgSource;
+        whichCard.appendChild(setBackImg);
+
+      }
+    // }
+
+  }
+} 
+
+
+
 
 
 
-}
 // opponent, iterate (map) over (slice(1)) array => ele * -1
 const tiger = ["Tiger", [-1, 0], [2, 0]];                        // tiger
 const dragon = ["Dragon", [-1, 1], [-1, -1], [1, 2], [1, -2]];    // dragon
@@ -170,6 +209,25 @@ const cobra = ["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];
 
+const imgSourcesObj = {
+  boar: "assets/onitama_grids/tpng/tgrid_boar.png",
+  cobra: "assets/onitama_grids/tpng/tgrid_cobra.png",
+  crab: "assets/onitama_grids/tpng/tgrid_crab.png",
+  crane: "assets/onitama_grids/tpng/tgrid_crane.png",
+  dragon: "assets/onitama_grids/tpng/tgrid_dragon.png",
+  eel: "assets/onitama_grids/tpng/tgrid_eel.png",
+  elephant: "assets/onitama_grids/tpng/tgrid_elephant.png",
+  frog: "assets/onitama_grids/tpng/tgrid_frog.png",
+  goose: "assets/onitama_grids/tpng/tgrid_goose.png",
+  horse: "assets/onitama_grids/tpng/tgrid_horse.png",
+  mantis: "assets/onitama_grids/tpng/tgrid_mantis.png",
+  monkey: "assets/onitama_grids/tpng/tgrid_monkey.png",
+  ox: "assets/onitama_grids/tpng/tgrid_ox.png",
+  rabbit: "assets/onitama_grids/tpng/tgrid_rabbit.png",
+  rooster: "assets/onitama_grids/tpng/tgrid_rooster.png",
+  tiger: "assets/onitama_grids/tpng/tgrid_tiger.png"
+};
+
 const imgSources = [
   "assets/onitama_grids/tpng/tgrid_boar.png",
   "assets/onitama_grids/tpng/tgrid_cobra.png",
@@ -191,7 +249,6 @@ const imgSources = [
 
 
 
-
 const pngBoar = "assets/onitama_grids/tpng/tgrid_boar.png";
 const pngCobra = "assets/onitama_grids/tpng/tgrid_cobra.png";
 const pngCrab = "assets/onitama_grids/tpng/tgrid_crab.png";

diff --git a/src/scripts/game.js b/src/scripts/game.js
@@ -55,16 +55,21 @@ export default class Game {
 
   // event handled in index.js 
   start() {
+    let body = document.querySelector(".body");
+    let turnBlueCircle = document.querySelector(".turn-blue-circle");
     let cards = this.deck.deal()
     for (let i = 0; i < 4; i++) {
       this.dealCard(cards[i]);
     }
     this.onDeckCard = cards[4];
     this.activeGame = true;
     this.board.setBoard();
+
+    // Initial turn indicator
+    body.classList.add("turn-blue")
+    turnBlueCircle.style.visibility = 'visible';
+    turnBlueCircle.style.opacity = '1'
     this.swapClickEvents("red");
-    // this.deck.viewToggleFlipAll();
-    // console.log(this.deck.currentCards)
   }
 
   // all moves
@@ -315,14 +320,24 @@ export default class Game {
 
     if (that.currentPlayerIdx === 0) {
       body.classList.replace("turn-blue", "turn-red");
+
       turnBlueCircle.style.visibility = 'hidden';
+      turnBlueCircle.style.opacity = '0';
+
       turnRedCircle.style.visibility = 'visible';
+      turnRedCircle.style.opacity = '1';
+
       that.swapClickEvents("blue");
 
     } else {
       body.classList.replace("turn-red", "turn-blue");
+
       turnRedCircle.style.visibility = 'hidden';
+      turnRedCircle.style.opacity = '0' 
+
       turnBlueCircle.style.visibility = 'visible';
+      turnBlueCircle.style.opacity = '1'
+
       that.swapClickEvents("red");
     }
 

diff --git a/src/scripts/modal.js b/src/scripts/modal.js
@@ -95,3 +95,78 @@ export const modalFill =
         </div>
   `;
 
+  export const modalCards = 
+  `
+    <div class="all-cards-container">
+      <h1 class="all-cards-title">Movement Cards</h1>
+      <h3 class="all-cards-subtitle">Each game, a set of 5 cards will be selected at random.  More to come!</h3>
+
+      <div class="move-cards-list"> 
+        <div class="move-card modal-card">
+          <div class="front">O</div>
+          <div class="back inactive-card" id="modal-back-1"></div>
+        </div>
+        <div class="move-card modal-card">
+          <div class="front">O</div>
+          <div class="back inactive-card" id="modal-back-2"></div>
+        </div>
+        <div class="move-card modal-card">
+          <div class="front">O</div>
+          <div class="back inactive-card" id="modal-back-3"></div>
+        </div>
+        <div class="move-card modal-card">
+          <div class="front">O</div>
+          <div class="back inactive-card" id="modal-back-4"></div>
+        </div>
+        <div class="move-card modal-card">
+          <div class="front">O</div>
+          <div class="back inactive-card" id="modal-back-5"></div>
+        </div>
+        <div class="move-card modal-card">
+          <div class="front">O</div>
+          <div class="back inactive-card" id="modal-back-6"></div>
+        </div>
+        <div class="move-card modal-card">
+          <div class="front">O</div>
+          <div class="back inactive-card" id="modal-back-7"></div>
+        </div>
+        <div class="move-card modal-card">
+          <div class="front">O</div>
+          <div class="back inactive-card" id="modal-back-8"></div>
+        </div>
+        <div class="move-card modal-card">
+          <div class="front">O</div>
+          <div class="back inactive-card" id="modal-back-9"></div>
+        </div>
+        <div class="move-card modal-card">
+          <div class="front">O</div>
+          <div class="back inactive-card" id="modal-back-10"></div>
+        </div>
+        <div class="move-card modal-card">
+          <div class="front">O</div>
+          <div class="back inactive-card" id="modal-back-11"></div>
+        </div>
+        <div class="move-card modal-card">
+          <div class="front">O</div>
+          <div class="back inactive-card" id="modal-back-12"></div>
+        </div>
+        <div class="move-card modal-card">
+          <div class="front">O</div>
+          <div class="back inactive-card" id="modal-back-13"></div>
+        </div>
+        <div class="move-card modal-card">
+          <div class="front">O</div>
+          <div class="back inactive-card" id="modal-back-14"></div>
+        </div>
+        <div class="move-card modal-card">
+          <div class="front">O</div>
+          <div class="back inactive-card" id="modal-back-15"></div>
+        </div>
+        <div class="move-card modal-card">
+          <div class="front">O</div>
+          <div class="back inactive-card" id="modal-back-16"></div>
+        </div>
+      </div>
+    </div>
+  `;
+