fancy coin style :D

tsriram · Oct 11, 2023 · 5ce1348 · 5ce1348
1 parent a34acab
commit 5ce1348
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 26 deletions.
diff --git a/src/lib/components/GameBoard.svelte b/src/lib/components/GameBoard.svelte
@@ -99,17 +99,6 @@
  --row-gap: 20px;
  --grid-padding: 32px;
  --column-size: 80px;
- /* display: grid;
- padding: var(--grid-padding);
- width: fit-content;
- row-gap: var(--row-gap);
- column-gap: var(--column-gap);
- background-color: var(--board-bg-color);
- grid-template-rows: repeat(6, 1fr);
- grid-template-columns: repeat(7, var(--column-size));
- position: relative;
- box-shadow: 0px 0px 4px 4px var(--grid-border-color);
- border-radius: 8px; */
  }
  }
  .cell-button {
@@ -130,28 +119,44 @@
  }
  .coin.player1 {
  background-color: var(--player1-color);
+ border-color: var(--player1-border-color);
+ background-image: conic-gradient(
+ var(--player1-color),
+ var(--player1-border-color),
+ var(--player1-color),
+ var(--player1-border-color),
+ var(--player1-color),
+ var(--player1-border-color),
+ var(--player1-color),
+ var(--player1-border-color),
+ var(--player1-color),
+ var(--player1-border-color),
+ var(--player1-color)
+ );
  }
  .coin.player2 {
  background-color: var(--player2-color);
+ border-color: var(--player2-border-color);
+ background-image: conic-gradient(
+ var(--player2-color),
+ var(--player2-border-color),
+ var(--player2-color),
+ var(--player2-border-color),
+ var(--player2-color),
+ var(--player2-border-color),
+ var(--player2-color),
+ var(--player2-border-color),
+ var(--player2-color),
+ var(--player2-border-color),
+ var(--player2-color)
+ );
  }
- /* @keyframes fall-animation {
- from {
- transform: translateY(-300px);
- }
- to {
- transform: translateY(0);
- }
- } */
  .coin {
  height: var(--column-size);
  width: var(--column-size);
  border-radius: 50%;
- background-color: hotpink;
  position: absolute;
  display: inline-block;
- /* animation-name: fall-animation;
- animation-duration: 400ms;
- animation-timing-function: ease-in-out; */
- border: 2px dashed;
+ border: 4px solid;
  }
 </style>
diff --git a/src/lib/components/GameTurnIndicator.svelte b/src/lib/components/GameTurnIndicator.svelte
@@ -19,7 +19,8 @@
 </script>
 
 <div class="game-turn">
- Current turn: {turnPlayerName}
+ <span class="label">Current turn:</span>
+ {turnPlayerName}
  <!-- {#if turnPlayerName !== undefined}
  <HeaderCoin player={turnPlayer} />
  {/if} -->
@@ -31,4 +32,8 @@
  align-items: center;
  /* margin-right: -16px; */
  }
+ .label {
+ opacity: 80%;
+ margin-right: 1rem;
+ }
 </style>
diff --git a/src/lib/components/HeaderCoin.svelte b/src/lib/components/HeaderCoin.svelte
@@ -14,12 +14,40 @@
  height: 40px;
  border-radius: 50%;
  margin: 0 16px;
- border: 2px dashed;
+ border: 2px solid;
  }
  .header-coin.player1 {
  background-color: var(--player1-color);
+ border-color: var(--player1-border-color);
+ background-image: conic-gradient(
+ var(--player1-color),
+ var(--player1-border-color),
+ var(--player1-color),
+ var(--player1-border-color),
+ var(--player1-color),
+ var(--player1-border-color),
+ var(--player1-color),
+ var(--player1-border-color),
+ var(--player1-color),
+ var(--player1-border-color),
+ var(--player1-color)
+ );
  }
  .header-coin.player2 {
  background-color: var(--player2-color);
+ border-color: var(--player2-border-color);
+ background-image: conic-gradient(
+ var(--player2-color),
+ var(--player2-border-color),
+ var(--player2-color),
+ var(--player2-border-color),
+ var(--player2-color),
+ var(--player2-border-color),
+ var(--player2-color),
+ var(--player2-border-color),
+ var(--player2-color),
+ var(--player2-border-color),
+ var(--player2-color)
+ );
  }
 </style>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -24,7 +24,9 @@ html.dark {
  --grid-border-color: #3d5566;
  --cell-bg-color: #243447;
  --player1-color: #fde047;
+ --player1-border-color: #eab308;
  --player2-color: #ef4444;
+ --player2-border-color: #b91c1c;
  --logo-url: url('/images/connect4-logo-dark.png');
  --board-bg-color: #3d5566;
  --button-bg-color: #1b2836;
@@ -40,7 +42,9 @@ html.light {
  --grid-border-color: #655e56;
  --cell-bg-color: #f1f5f9;
  --player1-color: #fde047;
+ --player1-border-color: #eab308;
  --player2-color: #ef4444;
+ --player2-border-color: #b91c1c;
  --logo-url: url('/images/connect4-logo-light.png');
  --board-bg-color: #2563eb;
  --button-bg-color: #f1f5f9;