better style for the board 🎉

tsriram · Oct 13, 2023 · 0e7738e · 0e7738e
1 parent 85ca948
commit 0e7738e
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 10 deletions.
diff --git a/src/lib/components/GameBoard.svelte b/src/lib/components/GameBoard.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import GridOverlay from '$lib/components/GridOverlay.svelte';
+  import { BOARD_VALUE_FOR_PLAYER1, BOARD_VALUE_FOR_PLAYER2 } from '$lib/constants';
   import { GAME_STATUS, type GameState } from '$lib/types';
   import { beforeUpdate } from 'svelte';
 
@@ -13,6 +14,8 @@
   export let handleClick: (colIndex: number) => void;
 
   export let transformSpring: Spring<number>;
+  const isPlayer1 = currentUserId === gameState.player1.id;
+  const isPlayer2 = currentUserId === gameState.player2.id;
 
   let showOverlay: boolean = false;
   let isMyTurn = true;
@@ -33,25 +36,25 @@
     <h2>Disconnected from the server. Trying to reconnect...</h2>
   {/if}
   {#if gameState?.status != GAME_STATUS.INITIAL}
-    <div class="grid" style="cursor: {isMyTurn ? 'default' : 'not-allowed'};">
+    <div
+      class="grid"
+      class:disabled={!isMyTurn}
+      class:player1={isPlayer1}
+      class:player2={isPlayer2}
+    >
       {#each gameState.board as row, rowIndex}
         {#each row as col, colIndex}
           <button class="cell-button" on:click={() => handleClick(colIndex)}>
-            <span
-              class="cell"
-              class:player1={col === 1}
-              class:player2={col === 2}
-              style="cursor: {isMyTurn ? 'pointer' : 'not-allowed'};"
-            >
+            <span class="cell" style="cursor: {isMyTurn ? 'pointer' : 'not-allowed'};">
               <!-- {`${rowIndex}, ${colIndex} - ${col}`} -->
-              {#if col === 1}
+              {#if col === BOARD_VALUE_FOR_PLAYER1}
                 {#if rowIndex === gameState.newCoinRow && colIndex === gameState.newCoinCol}
                   <span class="coin player1" style="transform: translateY({$transformSpring}px);" />
                   <!-- <span class="coin player1" /> -->
                 {:else}
                   <span class="coin player1" />
                 {/if}
-              {:else if col === 2}
+              {:else if col === BOARD_VALUE_FOR_PLAYER2}
                 {#if rowIndex === gameState.newCoinRow && colIndex === gameState.newCoinCol}
                   <span class="coin player2" style="transform: translateY({$transformSpring}px);" />
                   <!-- <span class="coin player2" /> -->
@@ -92,6 +95,21 @@
     position: relative;
     box-shadow: 0px 0px 4px 4px var(--grid-border-color);
     border-radius: 8px;
+    position: relative;
+    margin-top: calc(var(--column-size) + var(--column-gap) + 1rem);
+  }
+  .grid.player1 {
+    --coin-color: var(--player1-color);
+    --coin-border-color: var(--player1-border-color);
+  }
+  .grid.player2 {
+    --coin-color: var(--player2-color);
+    --coin-border-color: var(--player2-border-color);
+  }
+  .grid.disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.9;
   }
   @media (min-width: 720px) {
     .grid {
@@ -117,6 +135,38 @@
     align-items: center;
     justify-content: center;
   }
+  .cell:hover::before {
+    content: '';
+    position: absolute;
+    top: calc((var(--column-size) * -1) + (var(--column-gap) * -1));
+    width: var(--column-size);
+    height: var(--column-size);
+    border-radius: 50%;
+    background-color: var(--coin-color);
+    border-color: var(--coin-border-color);
+    background-image: conic-gradient(
+      var(--coin-color),
+      var(--coin-border-color),
+      var(--coin-color),
+      var(--coin-border-color),
+      var(--coin-color),
+      var(--coin-border-color),
+      var(--coin-color),
+      var(--coin-border-color),
+      var(--coin-color),
+      var(--coin-border-color),
+      var(--coin-color)
+    );
+  }
+  .cell:hover::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    width: calc(var(--column-size) + var(--column-gap));
+    height: 100%;
+    background-color: var(--board-bg-color);
+    opacity: 0.3;
+  }
   .coin.player1 {
     background-color: var(--player1-color);
     border-color: var(--player1-border-color);

diff --git a/src/lib/components/GameHeader.svelte b/src/lib/components/GameHeader.svelte
@@ -20,7 +20,7 @@
     flex-direction: column;
     gap: 2rem;
     align-items: center;
-    margin: 2rem 0;
+    margin: 1rem 0;
     font-size: 1.5rem;
   }
   @media (min-width: 720px) {

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -1 +1,3 @@
 export const THEME_KEY = 'connect4:theme';
+export const BOARD_VALUE_FOR_PLAYER1 = 1;
+export const BOARD_VALUE_FOR_PLAYER2 = 2;