Small tweaks

ProLoser · May 17, 2024 · 5d73bcb · 5d73bcb
1 parent 564643d
commit 5d73bcb
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 25 deletions.
diff --git a/src/Game/Game.css b/src/Game/Game.css
@@ -101,7 +101,7 @@ order:
 
         &:nth-child(odd)::before {
             border-top-color: brown;
-            border-top-width: 30vh;
+            border-top-width: 40vh;
         }
     }
 
@@ -118,11 +118,14 @@ order:
 
         &:nth-child(even)::before {
             border-bottom-color: brown;
-            border-bottom-width: 30vh;
+            border-bottom-width: 40vh;
         }
 
-        &:hover::before {
-            border-bottom-color: blue !important;
+        &:nth-child(even):hover::before {
+            border-bottom-color: #2727ff !important;
+        }
+        &:nth-child(odd):hover::before {
+            border-bottom-color: rgb(128, 128, 211) !important;
         }
     }
 }
@@ -134,8 +137,12 @@ order:
     }
 
     .point {
-        &:hover::before {
-            border-left-color: blue !important;
+
+        &:nth-child(even):hover::before {
+            border-left-color: #2727ff !important;
+        }
+        &:nth-child(odd):hover::before {
+            border-left-color: rgb(128, 128, 211) !important;
         }
 
         &::before {
@@ -155,7 +162,7 @@ order:
 
         &:nth-child(odd)::before {
             border-left-color: lightcoral;
-            border-left-width: 30vw;
+            border-left-width: 40vw;
         }
     }
     /* bottom */
@@ -173,7 +180,7 @@ order:
 
         &:nth-child(even)::before {
             border-right-color: lightcoral;
-            border-right-width: 30vw;
+            border-right-width: 40vw;
         }
     }
 }
diff --git a/src/Game/Piece.tsx b/src/Game/Piece.tsx
@@ -14,6 +14,7 @@ export default function Piece({ color, position }: PieceProps) {
     const onDragStart: DragEventHandler = useCallback((event) => {
         switch (position) {
             case undefined:
+                event.preventDefault()
                 break;
             case -1:
                 event.dataTransfer?.setData('text', color)

diff --git a/src/Game/index.tsx b/src/Game/index.tsx
@@ -12,20 +12,17 @@ const DEFAULT_BOARD = [
     -5, 0, 0, 0, 3, 0, 5, 0, 0, 0, 0, -2,
 ]
 
+function rollDie() {
+    return Math.floor(Math.random() * 6) + 1
+}
+
 export default function Game() {
     const [blackHome, setBlackHome] = useState(0)
     const [whiteHome, setWhiteHome] = useState(0)
     const [blackBar, setBlackBar] = useState(0)
     const [whiteBar, setWhiteBar] = useState(0)
     const [board, setBoard] = useState(() => [...DEFAULT_BOARD])
-    const [dice, setDice] = useState(() => [6, 6])
-
-    const reset = useCallback(() => {
-        // TODO: skip confirmation if game is over?
-        if (!confirm('Are you sure you want to restart the game?')) { return; }
-
-        setBoard(DEFAULT_BOARD);
-    }, [])
+    const [dice, setDice] = useState(() => [rollDie(), rollDie()])
 
     // TODO: Validate moves against dice
     const move = useCallback((from: number | "white" | "black", to: number) => {
@@ -36,7 +33,7 @@ export default function Game() {
                 setBlackBar(bar => bar + 1)
                 nextBoard[to] = 0
             }
-            if (board[to] >= -1) {
+            if (board[to] >= -1) { // move
                 setWhiteBar(bar => bar - 1)
                 nextBoard[to]++
             }
@@ -45,22 +42,22 @@ export default function Game() {
                 setWhiteBar(bar => bar + 1)
                 nextBoard[to] = 0
             }
-            if (board[to] <= 1) {
+            if (board[to] <= 1) { // move
                 setBlackBar(bar => bar - 1)
                 nextBoard[to]--
             }
         } else {
             const offense = board[from];
             const defense = board[to];
 
-            if (!defense || Math.sign(defense) === Math.sign(offense)) { // move
-                nextBoard[to] += Math.sign(offense)
-            } else if (to === -1) { // bear off
+            if (defense === undefined) {  // bear off
                 if (offense > 0) {
                     setWhiteHome(count => count + 1)
                 } else {
                     setBlackHome(count => count + 1)
                 }
+            } else if (!defense || Math.sign(defense) === Math.sign(offense)) { // move
+                nextBoard[to] += Math.sign(offense)
             } else if (Math.abs(defense) === 1) { // hit
                 nextBoard[to] = -Math.sign(defense);
                 if (offense > 0)
@@ -74,14 +71,11 @@ export default function Game() {
             nextBoard[from] -= Math.sign(offense)
         }
 
-        console.log('moveend', nextBoard)
         setBoard([...nextBoard]);
     }, [board])
 
     const roll = useCallback(() => {
-        let first = Math.floor(Math.random() * 6) + 1;
-        let second = Math.floor(Math.random() * 6) + 1;
-        setDice([first, second])
+        setDice([rollDie(), rollDie()])
     }, [])
 
     const onDragOver: DragEventHandler = useCallback((event) => { event.preventDefault(); }, [])