Init win-condition branch

Bill-the-dev · Mar 30, 2022 · 0e33c6f · 0e33c6f
1 parent 87eac04
commit 0e33c6f
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 54 deletions.
diff --git a/dist/main.css b/dist/main.css
@@ -12,6 +12,7 @@ body {
   background-size: 400%;
   margin: 0px;
   background-position: center;
+  display: flex;
 }
 
 /* idea: animate 5s transition on turn flip */
@@ -47,15 +48,18 @@ body {
 }
 #container {
   width: 100%;
-  height: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 #game {
-  width: 100%;
-  height: 100%;
+  /* width: 100%;
+  height: 100%;  */
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   grid-template-rows: 0.1fr 1fr 2fr 1fr 0.25fr;
+  /* justify-items: stretch; */
   /* grid-auto-rows: minmax(100px, auto);  */
   /* flex-direction: column; */
 }
@@ -77,8 +81,10 @@ header {
   display: flex;
   justify-content: center;
   align-items: center;
-  grid-column: 2/4;
+  grid-column: 2/3;
   grid-row: 3/4;
+  /* justify-items: stretch; */
+  justify-content: stretch;
 }
 
 #board {
@@ -94,7 +100,7 @@ header {
 }
 
 .opponent-row {
-  grid-column: 2/4;
+  grid-column: 2;
   grid-row: 2/3;
   display: flex;
   align-items: center;
@@ -103,16 +109,16 @@ header {
 }
 
 .on-deck-row {
-  grid-column: 4;
+  grid-column: 3;
   grid-row: 3/4;
   display: flex;
   align-items: center;
-  justify-content: left;
+  justify-items: start;
   margin: 5px;
 }
 
 .player-row {
-  grid-column: 2/4;
+  grid-column: 2;
   grid-row: 4;
   display: flex;
   align-items: flex-start;
@@ -373,6 +379,7 @@ font-family: 'Quicksand', sans-serif;
   border-radius: 2px;
   margin-top: 4px;
   margin-bottom: 4px;
+  margin-left: 2rem;
   margin: 2px;
   box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2);
 }

diff --git a/dist/main.js b/dist/main.js
diff --git a/index.html b/index.html
@@ -29,14 +29,15 @@ <h1 class="title">Onitama</h1>
 
     <div id="game">
       <div class="menu-container">
+        <div class="menu-box"></div>
         <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="linkedin" class="menu">
-          <a href="https://www.linkedin.com/in/bill-camarco" target="_blank">LinkedIN</a>
+          <a href="https://www.linkedin.com/in/bill-camarco" target="_blank" class="link-tab">LinkedIN</a>
         </div>
         <div id="github" class="menu">
-          <a href="https://github.com/Bill-the-dev" target="_blank">GitHub</a>
+          <a href="https://github.com/Bill-the-dev" target="_blank" class="link-tab">GitHub</a>
         </div>
       </div>
       <!--grid layout for overall page, fr -->

diff --git a/notes_bugs.md b/notes_bugs.md
@@ -13,7 +13,7 @@
 
 
 *Turn transition background*
-- Start button template works! Now to figure out turn tracking to call red/blue alternate
+- Start button template works, alternate works.  Too harsh when color transition starts.
 
 *Turn transition card* 
 - Flip transluscent over to indicate blue/red turn. Above and below the onDeck.

diff --git a/src/scripts/game.js b/src/scripts/game.js
@@ -354,28 +354,3 @@ export default class 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();
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -10,6 +10,7 @@ body {
   background-size: 400%;
   margin: 0px; 
   background-position: center;
+  display: flex;
 }
 
 /* idea: animate 5s transition on turn flip */
@@ -48,16 +49,20 @@ body {
 
 #container {
   width: 100%;
-  height: 100%;   
+  height: 100vh;  
+  display: flex; 
+  flex-direction: column;
 } 
 
 
 #game {
-  width: 100%;
-  height: 100%; 
+  /* width: 100%;
+  height: 100%;  */
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: .1fr 1fr 2fr 1fr .25fr;
+  grid-template-columns: repeat(auto-fit, 3, 1fr);
+  grid-template-rows: repeat(auto-fit, 1fr);
+  /* grid-template-rows: auto-fit, .1fr 1fr 2fr 1fr .25fr; */
+  /* justify-items: stretch; */
   /* grid-auto-rows: minmax(100px, auto);  */
   /* flex-direction: column; */
 
@@ -81,8 +86,10 @@ header {
   display: flex;
   justify-content: center;
   align-items: center;
-  grid-column: 2 / 4;
+  grid-column: 2 / 3;
   grid-row: 3 / 4;
+  /* justify-items: stretch; */
+  justify-content: stretch;
 }
 
 #board {
@@ -93,11 +100,12 @@ header {
   /* 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-column: 2;
   grid-row: 2 / 3;
   display: flex;
   align-items: center;
@@ -107,16 +115,16 @@ header {
 }
 
 .on-deck-row {
-  grid-column: 4;
+  grid-column: 3;
   grid-row: 3/4;
   display:flex;
   align-items: center;
-  justify-content: left;
+  justify-items: start;
   margin: 5px;
 }
 
 .player-row{ 
-  grid-column: 2 / 4;
+  grid-column: 2;
   grid-row: 4; 
   display: flex; 
   align-items: flex-start;

diff --git a/src/styles/menu.css b/src/styles/menu.css
@@ -9,23 +9,29 @@
   justify-content: center;
   align-items: center;
   grid-column: 1 / 2;
-  grid-row: 3;  /* not moving, why? */
-  /* position: relative; */
+  grid-row: 3; 
   border-radius: 2px;
   margin-top: 4px;
   margin-bottom: 4px;
+  margin-left: 2rem;
   margin:2px;
   box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, .2)
 }
 
 .menu {
-  /* border: 1px solid gray; */
+  border: 1px solid gray;
   border-radius: 2px;
   box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, .2);
   width: 95%;
   align-self: flex-start;
   margin-top: 10px;
   text-align: center;
-  cursor: pointer;
-
-}
+  cursor: pointer;  
+}
+
+/* doesn't work... tried on div, id, a */
+.link-tab {
+  text-decoration: none;
+  color: inherit;
+}
+