feat: ui tweaks

mateuszsokola · Aug 31, 2024 · 8fdd5ed · 8fdd5ed
1 parent 1eedd7b
commit 8fdd5ed
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 22 deletions.
diff --git a/context/game-context.tsx b/context/game-context.tsx
@@ -65,24 +65,10 @@ export default function GameProvider({ children }: PropsWithChildren) {
     [dispatch],
   );
 
-  // const startGame = () => {
-  //   dispatch({ type: "reset_game" });
-  //   dispatch({ type: "create_tile", tile: { position: [0, 1], value: 2 } });
-  //   dispatch({ type: "create_tile", tile: { position: [0, 2], value: 2 } });
-  // };
-
   const startGame = () => {
     dispatch({ type: "reset_game" });
-    // Filling all tiles with non-combinable values
-    const tiles = [
-      { position: [0, 0], value: 4 }, { position: [0, 1], value: 2 }, { position: [0, 2], value: 4 },
-      { position: [1, 0], value: 4 }, { position: [1, 1], value: 8 }, { position: [1, 2], value: 4 }, { position: [1, 3], value: 8 },
-      { position: [2, 0], value: 2 }, { position: [2, 1], value: 4 }, { position: [2, 2], value: 2 }, { position: [2, 3], value: 4 },
-      { position: [3, 0], value: 4 }, { position: [3, 1], value: 8 }, { position: [3, 2], value: 4 }, { position: [3, 3], value: 8 },
-    ];
-
-    // Dispatching actions to create all tiles
-    tiles.forEach(tile => dispatch({ type: "create_tile", tile }));
+    dispatch({ type: "create_tile", tile: { position: [0, 1], value: 2 } });
+    dispatch({ type: "create_tile", tile: { position: [0, 2], value: 2 } });
   };
 
   const checkGameState = () => {

diff --git a/styles/globals.css b/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;
 

diff --git a/styles/splash.module.css b/styles/splash.module.css
@@ -10,12 +10,12 @@
   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 {
   background: rgba(237, 194, 46, 0.6);
-  color: white;
+  color: white
 }
 
 .splash > div {
@@ -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) * .5) calc(var(--pixel-size) * 2);
   font-weight: bold;
-  color: var(--tile-text-color);
+  color: white;
   cursor: pointer;
 }