diff --git a/src/lib/components/GameBoard.svelte b/src/lib/components/GameBoard.svelte index 82e8e5f..89032a7 100644 --- 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; } diff --git a/src/lib/components/GameTurnIndicator.svelte b/src/lib/components/GameTurnIndicator.svelte index 3e8faf5..0965ad3 100644 --- a/src/lib/components/GameTurnIndicator.svelte +++ b/src/lib/components/GameTurnIndicator.svelte @@ -19,7 +19,8 @@
- Current turn: {turnPlayerName} + Current turn: + {turnPlayerName} @@ -31,4 +32,8 @@ align-items: center; /* margin-right: -16px; */ } + .label { + opacity: 80%; + margin-right: 1rem; + } diff --git a/src/lib/components/HeaderCoin.svelte b/src/lib/components/HeaderCoin.svelte index e71666f..1c3907d 100644 --- 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) + ); } diff --git a/src/styles/global.css b/src/styles/global.css index c360492..c31776d 100644 --- 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;