feat: support game lost (#17)

* feat: support game lost

* feat: ui tweaks

* chore: clean up

Signed-off-by: mateusz <[email protected]>

* chore: clean up

Signed-off-by: mateusz <[email protected]>

* chore: clean up

Signed-off-by: mateusz <[email protected]>

---------

Signed-off-by: mateusz <[email protected]>

Author: mateuszsokola

components/board.tsx

@@ -87,7 +87,8 @@ export default function Board() {
   return (
     <MobileSwiper onSwipe={handleSwipe}>
       <div className={styles.board}>
-        {status === "won" && <Splash heading="You won!" />}
+        {status === "won" && <Splash heading="You won!" type="won" />}
+        {status === "lost" && <Splash heading="You lost!" />}
         <div className={styles.tiles}>{renderTiles()}</div>
         <div className={styles.grid}>{renderGrid()}</div>
       </div>

components/splash.tsx

@@ -2,11 +2,11 @@ import { GameContext } from "@/context/game-context";
 import styles from "@/styles/splash.module.css";
 import { useContext } from "react";
 
-export default function Splash({ heading = "You won!" }) {
+export default function Splash({ heading = "You won!", type = "" }) {
   const { startGame } = useContext(GameContext);
 
   return (
-    <div className={`${styles.splash} ${styles.win}`}>
+    <div className={`${styles.splash} ${type === "won" && styles.win}`}>
       <div>
         <h1>{heading}</h1>
         <button className={styles.button} onClick={startGame}>

context/game-context.tsx

@@ -78,19 +78,50 @@ export default function GameProvider({ children }: PropsWithChildren) {
 
     if (isWon) {
       dispatch({ type: "update_status", status: "won" });
+      return;
     }
+
+    const { tiles, board } = gameState;
+
+    const maxIndex = tileCountPerDimension - 1;
+    for (let x = 0; x < maxIndex; x += 1) {
+      for (let y = 0; y < maxIndex; y += 1) {
+        if (
+          isNil(gameState.board[x][y]) ||
+          isNil(gameState.board[x + 1][y]) ||
+          isNil(gameState.board[x][y + 1])
+        ) {
+          return;
+        }
+
+        if (tiles[board[x][y]].value === tiles[board[x + 1][y]].value) {
+          return;
+        }
+
+        if (tiles[board[x][y]].value === tiles[board[x][y + 1]].value) {
+          return;
+        }
+      }
+    }
+
+    dispatch({ type: "update_status", status: "lost" });
   };
 
   useEffect(() => {
     if (gameState.hasChanged) {
       setTimeout(() => {
         dispatch({ type: "clean_up" });
         appendRandomTile();
-        checkGameState();
       }, mergeAnimationDuration);
     }
   }, [gameState.hasChanged]);
 
+  useEffect(() => {
+    if (!gameState.hasChanged) {
+      checkGameState();
+    }
+  }, [gameState.hasChanged]);
+
   return (
     <GameContext.Provider
       value={{

reducers/game-reducer.ts

@@ -3,7 +3,7 @@ import { uid } from "uid";
 import { tileCountPerDimension } from "@/constants";
 import { Tile, TileMap } from "@/models/tile";
 
-type GameStatus = "ongoing" | "won";
+type GameStatus = "ongoing" | "won" | "lost";
 
 type State = {
   board: string[][];

styles/globals.css

@@ -3,8 +3,8 @@
 
   /* Backgrounds */
   --primary-background: #faf8ef;
-  --secondary-background: #bbada0;
-  --cell-background: #cac1b5;
+  --secondary-background: #b59d87;
+  --cell-background: #cebda6;
   --tile-background: #eee4da;
   --button-background: #8f7a66;
 

styles/splash.module.css

@@ -10,7 +10,7 @@
   right: 0;
   bottom: 0;
   border-radius: calc(var(--pixel-size) * 0.75);
-  background: rgba(238, 228, 218, 0.6);
+  background: rgba(181, 157, 135, 0.6);
 }
 
 .win {
@@ -26,13 +26,18 @@
   margin: calc(var(--pixel-size) * 3) auto;
 }
 
+.splash > div > h1 {
+  color: rgba(240, 240, 240, 1);
+}
+
 .button {
   background: var(--button-background);
-  border: calc(var(--pixel-size) * 0.5) solid var(--button-background);
+  border: calc(var(--pixel-size) * 0.125) solid var(--primary-background);
   border-radius: calc(var(--pixel-size) * 0.5);
   font-size: calc(var(--pixel-size) * 2);
   line-height: calc(var(--pixel-size) * 4);
+  padding: calc(var(--pixel-size) * 0.5) calc(var(--pixel-size) * 2);
   font-weight: bold;
-  color: var(--tile-text-color);
+  color: white;
   cursor: pointer;
 }