dao-game / commit

Minor styling changes:

f73c95d8bbe1c5b462d13354e9f62be5fb288ecb · Pavel Safronov · 2022-03-01 01:44:27 -0800 · parents 550d4a053a8d

Minor styling changes:
- made buttons look like tiles
- added button animation

 game.js    |  8 ++++++++
 index.html | 16 +++++++++-------
 styles.css | 15 +++++++++++++--
 3 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/game.js b/game.js
index 365b8d3..f830476 100644
--- a/game.js
+++ b/game.js
@@ -327,6 +327,14 @@ const nextMove = () => {
         redTurnText().forEach(t => t.classList.add(constants.selectedPlayerTextClassName));
     }
 
+    if (player.moveHistory.length === 0) {
+        undoButton.disabled = true;
+        resetButton.disabled = true;
+    } else {
+        undoButton.disabled = false;
+        resetButton.disabled = false;
+    }
+
     player.selectedPieceId = undefined;
     resetBoard();
     setActivePlayerPieces();
diff --git a/index.html b/index.html
index db50b20..e7285c8 100644
--- a/index.html
+++ b/index.html
@@ -16,14 +16,20 @@
             <p class='piece blue-piece' id='default-blue-piece'></p>
         </div>
         <main>
-            <table id="table">
-            </table>
-
             <div class="controls">
                 <span class="red-turn-text">
                     Red's turn
                 </span>
                 <span class="divider">|</span>
+                <span class="blue-turn-text">
+                    Blue's turn
+                </span>
+            </div>
+
+            <table id="table">
+            </table>
+
+            <div class="controls">
                 <button type="button" class="button" id="undo-button">
                     Undo
                 </button>
@@ -31,10 +37,6 @@
                 <button type="button" class="button" id="reset-button">
                     Reset
                 </button>
-                <span class="divider">|</span>
-                <span class="blue-turn-text">
-                    Blue's turn
-                </span>
             </div>
         </main>
         <hr />
diff --git a/styles.css b/styles.css
index 1cd85a7..76c2ca8 100644
--- a/styles.css
+++ b/styles.css
@@ -70,6 +70,9 @@ td {
     /* border: 1px solid black; */
     border-radius: 10px;
     padding: 10px;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
 }
 
 .red-turn-text.selected-player-text {
@@ -87,15 +90,23 @@ td {
 .button {
     border-radius: 10px;
     padding: 10px;
-    background-color: darkseagreen;
+    background-color: orange;
     font-size: 60px;
+    border-color: transparent;
+    transition: .2s all;
+}
+.button:active {
+    transform: scale(0.98);
+    /* Scaling button to 0.98 to its original size */
+    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
+    /* Lowering the shadow */
 }
 
 .white {
     background-color: orange;
 }
 .black {
-    background-color: burlywood;
+    background-color: wheat;
 }
 
 .piece {