diff --git a/src/Game/Game.css b/src/Game/Game.css index 06827a8..a126e0b 100644 --- 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; } } } \ No newline at end of file diff --git a/src/Game/Piece.tsx b/src/Game/Piece.tsx index 1897cd1..bd60ce3 100644 --- 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 index 92670d0..119cc2f 100644 --- 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,7 +42,7 @@ 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]-- } @@ -53,14 +50,14 @@ export default function Game() { 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(); }, [])