From 5ce13481729cdd57c40d8720c738a300219960fd Mon Sep 17 00:00:00 2001
From: Sriram Thiagarajan <sri.sjc@gmail.com>
Date: Wed, 11 Oct 2023 23:06:33 +0530
Subject: [PATCH] fancy coin style :D

---
 src/lib/components/GameBoard.svelte         | 53 +++++++++++----------
 src/lib/components/GameTurnIndicator.svelte |  7 ++-
 src/lib/components/HeaderCoin.svelte        | 30 +++++++++++-
 src/styles/global.css                       |  4 ++
 4 files changed, 68 insertions(+), 26 deletions(-)

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;
 	}
 </style>
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 @@
 </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
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)
+		);
 	}
 </style>
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;