Bug how to will not display text.

README.md

@@ -0,0 +1,112 @@
+# Onitama
+
+## Background
+
+Onitama is a strategy board game for two players. The player moves their pawns on a 5x5 grid using a set of five movement cards. The player may use a card to move any of their pawns in the pattern depicted, however, this card is then exchanged with a card outside the board. This allows both players rotating access to all 5 movement cards in play!
+
+The game is easy to learn thanks to its unique visual design.  It also allows for a high level of strategic gameplay with it's dynamic moveset. 
+
+---
+
+## Functionality
+
+In Onitama, users will be able to:
+  - Generate a random combination of (5) movement cards from the possible (16+)
+  - Select and move their pawns on the 5x5 grid
+  - Capture pawns (or be captured) as depicted in the movement cards
+  - Play against a CPU player or screen-shared player
+
+In addition, this project will include:
+  - How to play instructions (interactive visual and text)
+  - Production README
+
+---
+
+## Wireframes
+
+![Welcome Layout](Wireframes/wf_welcome.png)
+
+### Welcome Layout
+- Nav links include the project GitHub repo and LinkedIN
+- Single Player or Multiplayer selection with radio
+- Start Game not-interactive until player selection
+- Description includes brief overview of the game and project scope  
+<br>
+---
+<br>
+
+![Board Layout](Wireframes/wf_board_layout.png)
+
+### Board Layout
+- Start Game will be dynamic to show:
+    - "Reshuffle" at start to reselct random move cards
+    - "End Game" to stop play
+    - "Start Game" if play has been stopped
+- How To Play will bring up a visual and text based instructions
+    - GIFs or walkthrough possible?
+- Movement Cards will display all of the (16) possible move cards
+- Nav Links to the project GitHub repo and LinkedIN
+- Pawns (circle and triangle): select/deselect (*click*) pawn and *mouseover* their movement cards to highlight possible moves on the grid
+- Move Cards: select/deselct (*click*) movement card to lock their possible moves and select (click) among the hightlighted spaces to move
+
+<br>
+---
+<br> 
+
+![Board Layout](Wireframes/wf_card_layout.png)
+
+### Card Layout
+- One of (16+) movement cards
+- Left box will display card name and possible graphic
+- Right box shows possible movement pattern
+  - Dark box represents current position
+  - Colored boxes represent possible movement by pawn
+- Reverse will aid in card swap "sleight of hand" 
+
+[Wireframes](https://ninjamock.com/s/F41V1Jx)
+
+
+---
+
+## Technologies, Libraries, APIs
+This project will be implemented with the following technologies:
+- `Canvas API` to render the game board
+- `Webpack` to bundle the source JS code
+- `npm` to manage project dependencies
+- `animate.css` to assist in card flip and movement animations [link](https://animate.style/)
+
+---
+
+## Implementation Timeline
+
+**Friday, Saturday, Sunday** 
+- Setup webpack and file structure
+- Create `Board`, `Piece`, `Card`, and `Game` classes
+- Render grid with initial layout (CSS/canvas)
+- Write and mock-up tutorial 
+
+**Monday** 
+- `Card` and `Piece` underlying logic
+- All movement card function on piece position
+
+**Tuesday**
+- `Game` and any remaining `Board` logic for win conditions and start/end game states
+- User mouse controls to the pieces, cards, and board
+
+**Wednesday** 
+- Formatting and animation styling
+- If time allows, add welcome functionality, otherwise build into the single page nav 
+
+**Thursday**
+- Deploy to GitHub Pages with production README
+
+----
+
+## Bonus
+- Add additional movement cards from print game expansions
+- Add additional piece type and game modes from print game expansions
+- Add Multiplayer functionality (remote)
+- Add AI difficulty levels
+- Add card, piece capture, and game state animations
+- Add card movement quotes on play
+

dist/main.css

@@ -134,6 +134,37 @@ body {
   margin: 1px;
 }
 
+.modal__howTo {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.6);
+  margin: 0 auto;
+  visibility: hidden;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal {
+  display: flex;
+  background-color: #FFF;
+  height: 100%;
+  width: 60%;
+  padding: 1em;
+}
+
+.modal__fill {
+  font-family: "Nanum Brush Script", cursive;
+  font-size: 1.5em;
+  color: #302f2f;
+}
+
+.modal__fill-active {
+  visibility: visible;
+  z-index: 3;
+}
+
 /* Grid Layout help: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout */
 /*!*******************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/styles/cards.css ***!

index.html

@@ -14,19 +14,27 @@
   <title>Onitama JS</title>
 </head>
 <body>
+  <div class="modal__howTo">
+    <div class="modal">
+      <div class="modal__fill"></div>
+    </div>
+  </div>
   <div id="container">
     <header>
       <h1 class="title">Onitama</h1>
     </header>
 
-    <nav></nav>
     <div id="game">
       <div class="menu-container">
         <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</div>
-        <div id="linkedin" class="menu">LinkedIN</div>
-        <div id="github" class="menu">GitHub</div>
+        <div id="all-move-cards" class="menu">Movement Cards (WIP)</div>
+        <div id="linkedin" class="menu">
+          <a href="https://www.linkedin.com/in/bill-camarco" target="_blank">LinkedIN</a>
+        </div>
+        <div id="github" class="menu">
+          <a href="https://github.com/Bill-the-dev" target="_blank">GitHub</a>
+        </div>
       </div>
       <!--grid layout for overall page, fr -->
       <div id="board-container">

src/index.js

@@ -4,7 +4,8 @@ import "./styles/pieces.css";
 import "./styles/menu.css";
 import Game from "./scripts/game.js";
 import Board from "./scripts/board";
-
+import modalHowTo from "./scripts/modal";
+// import modal from "./scripts/modal__fill";
 document.addEventListener("DOMContentLoaded", () => {
 
   let game = new Game();
@@ -70,32 +71,23 @@ document.addEventListener("DOMContentLoaded", () => {
     game.viewMovePiece(posEndEle);
   })
 
-  // function checkHighlight() {
-  //   let allCards = document.querySelectorAll(".back");
-  //   let allPawns = document.querySelectorAll("#pawn");
-  //   allPawns.forEach(function (pawn) {
-  //     if (pawn.classList.contains("active-pawn")) {
-  //       this.activePawn = pawn;
-  //     }
-  //   });
-
-  //   allCards.forEach(function (card) {
-  //     if (card.classList.contains("active-card")) {
-  //       console.log("Found an active card!");
-  //       this.activeCard = card;
-  //     }
-  //   });
-
-  //   if (this.activePawn && this.activeCard) {
-  //     return [this.activePawn, this.activeCard];
-  //   } else {
-  //     return false;
-  //   }
-  // }
-
-  // let boundCheckHighlight = checkHighlight.bind(this);
+  const modalFill = document.getElementsByClassName("modal__howTo")[0];
 
+  // Modal How To on
+  addGlobalEventListener("click", "#how-to-play", e => {
+    e.preventDefault();
+    console.log("on")
+    let howToBtn = e.target;
+    modalFill.classList.add("modal__fill-active")
+  })
 
+  // Modal How To off
+  modalFill.addEventListener("click", e => {
+    e.preventDefault();
+    console.log("off")
+    let howToBtn = e.target;
+    modalFill.classList.remove("modal__fill-active")
+  })
 
   // Start / End game dynamic
   addGlobalEventListener("click", "#start", e => {
@@ -109,12 +101,6 @@ document.addEventListener("DOMContentLoaded", () => {
     } else {
       console.log("You clicked end game");
       history.go(0);
-
-      // resets activeGame, below not needed
-      // let startEle = document.querySelector("#start");
-      // startEle.classList.remove("start-active");
-      // startEle.classList.add("start-inactive");
-      // startEle.innerText = "Start Game";
     }
 
   });

src/scripts/deck.js

@@ -36,7 +36,7 @@ export default class Deck {
   }
 
   // toggle is_flipped for switch turn
-  viewToggleFlipTurn() {
+  async viewToggleFlipTurn() {
     let that = this;
     let turnCard = document.querySelector(".move-card .active-card");
     // debugger

src/scripts/game.js

@@ -36,7 +36,7 @@ export default class Game {
   }
 
   // always 0 or 1 using %
-  swapTurn() {
+  async swapTurn() {
     this.currentPlayerIdx = (this.currentPlayerIdx + 1) % 2;
     this.player = this.currentPlayer;
     window.player = this.player;
@@ -225,7 +225,7 @@ export default class Game {
     }, 2000);
   }
 
-  viewSwapUsedCard(playedCardEl, deckCardEl) {
+  async viewSwapUsedCard(playedCardEl, deckCardEl) {
     console.log("in swap used");
     let that = this;
     let currentHand = that.player.hand;
@@ -274,28 +274,31 @@ export default class Game {
 
     // hide used cards
     setTimeout(() => {
-      that.deck.viewToggleFlipTurn();
-
-      that.viewSwapUsedCard(playedCard, deckCard);
-      // debugger;
-      that.deck.viewToggleFlipTurn();
-
-      // debugger;
+      // flip used
+      that.deck.viewToggleFlipTurn().then(
+        setTimeout(() => {
+          // swap used
+          that.viewSwapUsedCard(playedCard, deckCard).then(
+            setTimeout(() => {
+              // flip back
+              that.deck.viewToggleFlipTurn().then(
+                setTimeout(() => {
+                  // rm highlight
+                  that.viewRemoveCardHighlight().then(
+                    // swap turn @ board
+                    that.swapTurn()
+                    )
+                }, 600)
+              )
+            }, 600)
+          )
+        }, 600)
+      )
     }, 1000);
-
-    // swap used card to on-deck
-
-    // that.viewRemoveCardHighlight();
-
-
-    // show used cards
-
-    // that.swapTurn(); // board swap
-
   }
 
   // card remove highlight
-  viewRemoveCardHighlight() {
+  async viewRemoveCardHighlight() {
     let allCards = document.querySelectorAll(".back");
     allCards.forEach(function (card) {
       card.classList.remove("active-card");