dao-game / commit

A few design updates:

9b517ee1b0321e6176adbee5009abbacf09b7b79 · Pavel Safronov · 2022-02-27 11:27:40 -0800 · parents 59f47b1264b4

A few design updates:
- added "template" pieces to html, and these are now being cloned to create the board pieces (no more HTML in the JS!)
- parametrized piece sizes in CSS, now there's a single spot for size updates
- starting to parametrize the colors, but need to rename players to Player1 and Player2 internally

 game.js      |  9 +++++++--
 index.html   | 17 ++++++++++++-----
 styles.css   | 57 ++++++++++++++++++++++++++++++++++-----------------------
 yin-yang.svg |  6 ++++++
 4 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/game.js b/game.js
index 8d2b3a3..74909e5 100644
--- a/game.js
+++ b/game.js
@@ -86,12 +86,17 @@ for (let r = 0; r < rows; r++) {
     isWhite = !isWhite;
 }
 // DOM references
+const defaultRedPiece = document.getElementById('default-red-piece');
+const defaultBluePiece = document.getElementById('default-blue-piece');
 const cells = () => Array.from(document.querySelectorAll("td"));
 
 board.forEach((value, index) => {
     if (value !== null) {
-        const pieceColor = value < 4 ? 'red-piece' : 'blue-piece';
-        cells()[index].innerHTML = `<p class='${pieceColor}' id='${value}'></p>`
+        const isRed = value < 4;
+        const defaultPiece = isRed ? defaultRedPiece : defaultBluePiece;
+        const newPiece = defaultPiece.cloneNode(true);
+        newPiece.id = value;
+        cells()[index].appendChild(newPiece);
     }
 });
 
diff --git a/index.html b/index.html
index b84ca5a..64b6d31 100644
--- a/index.html
+++ b/index.html
@@ -5,21 +5,21 @@
         <meta charset="utf-8">
         <title>Dao Game</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="icon" href="/yin-yang.svg" type="image/svg+xml">
         <link rel="stylesheet" href="styles.css" />
         <script defer type="module" src="game.js"></script>
     </head>
 
     <body>
+        <div class="invisible">
+            <p class='piece red-piece' id='default-red-piece'></p>
+            <p class='piece blue-piece' id='default-blue-piece'></p>
+        </div>
         <main>
             <div class="red-turn-text mobile">
                 Red's turn
             </div>
 
-            <div class="title">
-                <a
-                    href='https://en.wikipedia.org/wiki/Dao_(game)'
-                    target='_blank'>Board game Dao</a>.
-            </div>
             <table id="table">
             </table>
 
@@ -38,6 +38,13 @@
             </div>
         </main>
         <hr />
+        <div class="title">
+            <p>
+                Board game <a
+                    href='https://en.wikipedia.org/wiki/Dao_(game)'
+                    target='_blank'>Dao</a>.
+            </p>
+        </div>
         <div class="info">
             The game consists of only one simple rule and three ways
             to
diff --git a/styles.css b/styles.css
index 89d37b8..72bd1b6 100644
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,10 @@
+:root {
+    --default-size: 5px;
+    --active-size: 40px;
+    /* --p1-color: crimson;
+    --p2-color: mediumblue; */
+}
+
 * {
     margin: auto;
 }
@@ -23,6 +30,10 @@ div {
     flex: 1; */
 }
 
+.invisible {
+    display: none;
+}
+
 .title {
     text-align: center;
     font-family: "open sans";
@@ -71,26 +82,26 @@ td {
     background-color: burlywood;
 }
 
-.red-piece {
-    width: 20px;
-    height: 20px;
+.piece {
+    width: var(--default-size);
+    height: var(--default-size);
     padding: 10px;
-    background-color: crimson;
     border-radius: 50px;
     animation: activeToDisabled 1s 1;
 }
+
+.red-piece {
+    background-color: crimson;
+    /* background-image: url(yin-yang.svg); */
+}
 .blue-piece {
-    width: 20px;
-    height: 20px;
-    padding: 10px;
     background-color: mediumblue;
-    border-radius: 50px;
-    animation: activeToDisabled 1s 1;
+    /* background-image: url(yin-yang.svg); */
 }
 
 .active-player-piece {
-    width: 35px;
-    height: 35px;
+    width: var(--active-size);
+    height: var(--active-size);
     animation: disabledToActive 1s 1;
 }
 
@@ -119,22 +130,22 @@ td {
 
 @keyframes disabledToActive {
     from {
-        width: 20px;
-        height: 20px;
+        width: var(--default-size);
+        height: var(--default-size);
     }
     to {
-        width: 35px;
-        height: 35px;
+        width: var(--active-size);
+        height: var(--active-size);
     }
 }
 @keyframes activeToDisabled {
     from {
-        width: 35px;
-        height: 35px;
+        width: var(--active-size);
+        height: var(--active-size);
     }
     to {
-        width: 20px;
-        height: 20px;
+        width: var(--default-size);
+        height: var(--default-size);
     }
 }
 
@@ -144,16 +155,16 @@ td {
 } */
 @keyframes activePulsing {
     from {
-        width: 35px;
-        height: 35px;
+        width: var(--active-size);
+        height: var(--active-size);
     }
     50% {
         width: 25px;
         height: 25px;
     }
     to {
-        width: 35px;
-        height: 35px;
+        width: var(--active-size);
+        height: var(--active-size);
     }
 }
 
diff --git a/yin-yang.svg b/yin-yang.svg
new file mode 100644
index 0000000..a23a30f
--- /dev/null
+++ b/yin-yang.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-40 -40 80 80">
+  <circle r="39"/>
+  <path fill="#fff" d="M0,38a38,38 0 0 1 0,-76a19,19 0 0 1 0,38a19,19 0 0 0 0,38"/>
+  <circle r="5" cy="19" fill="#fff"/>
+  <circle r="5" cy="-19"/>
+</svg>
\ No newline at end of file