feat: update eightball ui

src/lib/components/PlayerColorButton.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { getCssPropertyValue } from '$lib/colors';
+	import { tweened } from 'svelte/motion';
+	import { interpolateLab } from 'd3-interpolate';
+	import type { Player } from '$lib/types';
+	import { createEventDispatcher } from 'svelte';
+
+	export let player: Player
+	export let disabled: boolean;
+	export let dispatchEvent: string;
+	export let isTurnButton: boolean = false;
+
+	const dispatch = createEventDispatcher();
+
+	function handleClick() {
+		dispatch(dispatchEvent);
+	}	
+
+	const fromColor = tweened(getCssPropertyValue(player.color.gradient.stops[0]), {
+		interpolate: interpolateLab
+	});
+
+	const toColor = tweened(getCssPropertyValue(player.color.gradient.stops[1]), {
+		interpolate: interpolateLab
+	});
+
+	$: [$fromColor, $toColor] = player.color.gradient.stops.map(getCssPropertyValue);
+</script>
+
+<button
+	aria-label="switch innings button"
+	class="rounded-xl py-2 w-full mb-2 bg-gradient-to-b {player.color
+		.border} {isTurnButton ? 'h-12' : ''} border transition-all"
+	style:--tw-gradient-stops="{$fromColor}, {$toColor}"
+	on:click={handleClick}
+	{disabled}
+>
+	<slot />
+</button>

src/lib/components/PlayerForm.svelte

@@ -6,17 +6,17 @@
 	import { BALL_COLORS } from '$lib/common/ball';
 	import { dev } from '$app/environment';
 
+	export let selectedGame: GameType;
+
 	export let playerFormData = {
 		playerOneName: dev ? 'Shane Van Boening' : '',
 		playerTwoName: dev ? 'Adam Stanley' : '',
-		playerOneHandicap: dev ? 9 : NaN,
-		playerTwoHandicap: dev ? 1 : NaN,
+		playerOneHandicap: dev ? selectedGame === "8ball" ? 7 : 9 : NaN,
+		playerTwoHandicap: dev ? selectedGame === "8ball" ? 2 : 1 : NaN,
 		playerOneColor: BALL_COLORS.find((color) => color.label === 'red')!,
 		playerTwoColor: BALL_COLORS.find((color) => color.label === 'blue')!
 	};
-
-	export let selectedGame: GameType;
-
+
 	export let step: number;
 
 	function swapPlayers() {

src/lib/components/eight-ball/AssignedBall.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Game, Player } from '$lib/types';
+	import Ball from '../Ball.svelte';
+
+	export let game: Game;
+	export let team: string | null;
+</script>
+
+<div class="absolute scale-100 -right-4 -top-2.5">
+	{#each game.currentRack.gameBalls as ball, i}
+		{#if (team === 'stripes' && game.currentPlayer.color === ball.color && i > 8) || (team !== 'stripes' && game.currentPlayer.color === ball.color && i < 8)}
+			<Ball {ball} />
+		{/if}
+	{/each}
+</div>

src/lib/components/eight-ball/BallSelect.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Ball as BallModel } from '$lib/common/ball';
+	import { createEventDispatcher } from 'svelte';
+	import Ball from '../Ball.svelte';
+	import type { BallType } from '$lib/eight-ball';
+
+	export let game;
+
+	let dispatch = createEventDispatcher<{ ballSelect: BallType }>();
+
+	function handleBallAssignment(ball: BallModel) {
+		dispatch('ballSelect', ball.isStripe ? 'stripes' : 'solids');
+	}
+</script>
+
+<div class="flex gap-4 justify-center items-top">
+	{#each game.currentRack.gameBalls as ball}
+		{#if ball.color === game.currentPlayer.color}
+			<button class="flex flex-col" on:click={() => handleBallAssignment(ball)}>
+				<div class="text-sm">
+					{#if ball.number < 8}
+						Solids
+					{:else}
+						Stripes
+					{/if}
+				</div>
+				<div class="h-10 w-10 mx-auto">
+					<Ball {ball} />
+				</div>
+			</button>
+		{/if}
+	{/each}
+</div>

src/lib/components/eight-ball/EightBallButton.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+  import { tweened } from 'svelte/motion';
+  import { interpolateLab } from 'd3-interpolate';
+  import { getCssPropertyValue } from '$lib/colors';
+	import { BALL_COLORS } from '$lib/common/ball';
+  import BallComponent from '../Ball.svelte';
+	import { Ball } from '$lib/common/ball';
+
+	const dispatch = createEventDispatcher();
+
+	export let detail: string;
+
+	function handleClick() {
+		dispatch("lose", detail);
+	}
+
+	const blackColor = BALL_COLORS[BALL_COLORS.length - 1];
+
+  console.log(blackColor)
+
+  const fromColor = tweened(getCssPropertyValue(blackColor!.gradient.stops[0]), {
+		interpolate: interpolateLab
+	});
+
+	const toColor = tweened(getCssPropertyValue(blackColor!.gradient.stops[1]), {
+		interpolate: interpolateLab
+	});
+
+  $: [$fromColor, $toColor] = blackColor.gradient.stops.map(getCssPropertyValue);
+</script>
+
+<button
+	aria-label="8 ball lose button"
+	class="rounded-xl py-1 w-full mb-2 bg-gradient-to-b {blackColor?.border} border relative overflow-hidden"
+	style:--tw-gradient-stops="{$fromColor}, {$toColor}"
+	on:click={handleClick}
+>
+  <div class="h-10 w-10 absolute -top-1 -left-2">
+    <BallComponent ball={Ball.fromNumber(8)}/>
+  </div>
+  <div class="flex ml-10">
+    <slot />
+  </div>
+</button>

src/lib/components/eight-ball/EightBallControlPad.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import ControlButtons from '../nine-ball/ControlButtons.svelte';
-	import type { EightBallGame } from '$lib/eight-ball';
-	import { cva } from 'class-variance-authority';
+	import type { EightBallGame, EndGameCase } from '$lib/eight-ball';
+	import PlayerColorButton from '../PlayerColorButton.svelte';
+	import EightBallButton from './EightBallButton.svelte';
 
 	export let isGameOver: boolean;
 	export let game: EightBallGame;
 
 	let dispatch = createEventDispatcher();
-	const endGameButtons = cva(['rounded-xl', 'text-2xl', 'w-full']);
-	const turnButton = cva(['flex', 'justify-center', 'rounded-xl', 'py-4', 'text-2xl']);
 
 	function handleMiss() {
 		dispatch('miss');
@@ -23,8 +22,8 @@
 		}
 	}
 
-	function handleLose() {
-		dispatch('lose');
+	function handleLose(e: CustomEvent<EndGameCase>) {
+		dispatch('lose', e.detail);
 	}
 
 	function handleUndo() {
@@ -40,33 +39,32 @@
 	}
 </script>
 
-<button
-	class={turnButton({
-		class: isGameOver ? 'bg-slate-400' : game.currentPlayer.color
-	})}
-	on:click={handleMiss}
-	disabled={isGameOver}>End {game.currentPlayer.name}'s Turn</button
+<PlayerColorButton
+	player={game.currentPlayer}
+	disabled={isGameOver}
+	dispatchEvent={'miss'}
+	on:miss={handleMiss}
+	isTurnButton>End {game.currentPlayer.name}'s Turn</PlayerColorButton
 >
 
 <div class="flex justify-center gap-6">
-	<button
-		class={endGameButtons({
-			class: ['text-black', isGameOver ? 'bg-slate-400' : 'bg-green-400']
-		})}
-		on:click={handleWin}
+	<PlayerColorButton
+		player={game.currentPlayer}
 		disabled={isGameOver}
+		dispatchEvent="win"
+		on:win={handleWin}
 	>
 		{game.currentPlayer.name} Won!
-	</button>
-	<button
-		class={endGameButtons({
-			class: [isGameOver ? 'bg-slate-400' : 'bg-rose-600']
-		})}
-		on:click={handleLose}
-		disabled={isGameOver}
-	>
+	</PlayerColorButton>
+
+	<div>
+		<EightBallButton detail="S8" on:lose={handleLose}>Scratch</EightBallButton>
+		<EightBallButton detail="E8" on:lose={handleLose}>Early</EightBallButton>
+		<EightBallButton detail="W8" on:lose={handleLose}>Wrong Pocket</EightBallButton>
+	</div>
+	<!-- <PlayerColorButton player={game.previousPlayer} disabled={isGameOver} dispatchEvent="lose" on:lose={handleLose}>
 		{game.currentPlayer.name} Lost...
-	</button>
+	</PlayerColorButton> -->
 </div>
 
 <div

src/lib/components/eight-ball/LoseDialog.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import PlayerColorButton from '../PlayerColorButton.svelte';
+	import InfoBox from '../score-sheet/InfoBox.svelte';
+	import type { Condition, EndGameCase } from '$lib/eight-ball';
+	import type { Game } from '$lib/types';
+	import BallComponent from '../Ball.svelte';
+	import { Ball } from '$lib/common/ball';
+
+	const dispatch = createEventDispatcher<{
+		submitDialog: EndGameCase;
+		cancelDialog: undefined;
+	}>();
+
+	export let message: string;
+	export let conditions: Condition[];
+	export let game: Game;
+
+	let selectedCondition: Condition | null = null;
+
+	function handleSubmit() {
+		dispatch('submitDialog', selectedCondition!.id);
+	}
+
+	function handleCancel() {
+		dispatch('cancelDialog');
+	}
+</script>
+
+<div class="fixed left-5 right-5 top-1/3 max-w-xl h-[50svh] rounded-lg z-10">
+	<InfoBox>
+		<h2 class="text-2xl">{message}</h2>
+		<div class="w-3/4 m-auto">
+			{#each conditions as condition}
+				<div class=" p-2 has-[:checked]:bg-[#131318] flex gap-2 rounded">
+					<div class="grid place-items-center">
+						<input
+							type="radio"
+							class="appearance-none peer shrink-0 w-4 h-4 border-2 rounded-full bg-white col-start-1 row-start-1"
+							id={condition.id}
+							bind:group={selectedCondition}
+							value={condition.id}
+						/>
+						<div class="col-start-1 row-start-1 w-3.5 h-3.5 hidden peer-checked:block">
+							<BallComponent ball={Ball.fromNumber(8)} />
+						</div>
+					</div>
+					<label for={condition.id} class="w-full border-b-2 border-solid border-b-white"
+						>{condition.message}</label
+					>
+				</div>
+			{/each}
+		</div>
+
+		<div>
+			<PlayerColorButton
+				player={game.currentPlayer}
+				dispatchEvent="submit"
+				on:submit={handleSubmit}
+				disabled={selectedCondition === null}
+			>
+				Submit
+			</PlayerColorButton>
+			<PlayerColorButton
+				player={game.previousPlayer}
+				dispatchEvent="cancel"
+				on:cancel={handleCancel}
+				disabled={false}
+			>
+				Cancel
+			</PlayerColorButton>
+		</div>
+	</InfoBox>
+</div>