dgore7 · oodtoon · Jun 8, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/lib/components/Accordion.svelte b/src/lib/components/Accordion.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import RightArrow from './icons/RightArrow.svelte';
+	import EditIcon from './icons/EditIcon.svelte';
+
+	let isOpen = false;
+
+	function toggle() {
+		isOpen = !isOpen;
+	}
+
+	function handleEdit() {
+		console.log('edit');
+	}
+</script>
+
+<div class="py-2 accordion">
+	<div class="flex justify-between">
+		<slot name="header" />
+		<button on:click={toggle} class="transition" class:rotate={isOpen} transition:slide>
+			<RightArrow />
+		</button>
+	</div>
+	{#if isOpen}
+		<div class="grid grid-cols-5" transition:slide>
+			<div class="col-span-4">
+				<slot name="info" />
+			</div>
+			<button class="self-start justify-self-end" on:click={handleEdit}><EditIcon /></button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.accordion {
+		border-bottom: 1px solid grey;
+	}
+
+	.rotate {
+		transform: rotate(90deg);
+	}
+</style>
diff --git a/src/lib/components/PlayerHead.svelte b/src/lib/components/PlayerHead.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Player } from '$lib/nine-ball';
+
+	export let player: Player;
+	export let playerNumber: number;
+</script>
+
+<div>
+	Player {playerNumber}: {player.name}
+</div>
+<div>
+	Score: {player.score}
+	Required Score: {player.scoreRequired}
+</div>
diff --git a/src/lib/components/PlayerInfo.svelte b/src/lib/components/PlayerInfo.svelte
@@ -0,0 +1,8 @@
+<script lang="ts"></script>
+
+<div>Deadballs:</div>
+<div>Safeties:</div>
+<div>Timeouts used:</div>
+<div>Break and Runs:</div>
+<div>Golden Break:</div>
+<div>Longest Run:</div>
diff --git a/src/lib/components/RackHeader.svelte b/src/lib/components/RackHeader.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	export let rack;
+	export let rackNumber;
+</script>
+
+<div>Rack {rackNumber}:</div>
+<div>Points per player: {rack.scores[0]}-{rack.scores[1]}</div>
diff --git a/src/lib/components/RackInfo.svelte b/src/lib/components/RackInfo.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import Ball from './Ball.svelte';
+	import EightBallIcon from './icons/EightBallIcon.svelte';
+	import SkullIcon from './icons/SkullIcon.svelte';
+	import { slide } from 'svelte/transition';
+
+	export let rack;
+
+	let isOpen = false;
+
+	function toggle() {
+		isOpen = !isOpen;
+	}
+</script>
+
+<div>Innings: {rack.innings}</div>
+<div>Timeouts used:</div>
+<div class="flex items-center gap-4">
+	Dead Balls: {rack.deadBalls.length}
+	<button on:click={toggle}>
+		{#if isOpen}
+			<SkullIcon />
+		{:else}
+			<EightBallIcon />
+		{/if}
+	</button>
+</div>
+
+<div>
+	{#if isOpen}
+		<div class="grid grid-cols-9 h-8" transition:slide>
+			{#each rack.deadBalls as ball}
+				<Ball size={'small'} {ball} />
+			{/each}
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/ScoreSheetTitle.svelte b/src/lib/components/ScoreSheetTitle.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let padding;
+</script>
+
+<div class="flex m-auto text-2xl w-full title {padding}">
+	<slot />
+</div>
+
+<style>
+	.title {
+		border-bottom: 2px solid white;
+	}
+</style>
diff --git a/src/lib/components/icons/DownArrow.svelte b/src/lib/components/icons/DownArrow.svelte
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 12 12"
+	><path
+		fill="#FFF"
+		d="M5.214 10.541a.903.903 0 0 0 1.572 0l4.092-7.169C11.226 2.762 10.789 2 10.09 2H1.91c-.698 0-1.135.762-.787 1.372z"
+	/></svg
+>
diff --git a/src/lib/components/icons/EditIcon.svelte b/src/lib/components/icons/EditIcon.svelte
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
+	><path
+		fill="currentColor"
+		d="M6 2c-1.11 0-2 .89-2 2v16a2 2 0 0 0 2 2h4v-1.91L12.09 18H6v-2h8.09l2-2H6v-2h12.09L20 10.09V8l-6-6zm7 1.5L18.5 9H13zm7.15 9.5a.55.55 0 0 0-.4.16l-1.02 1.02l2.09 2.08l1.02-1.01c.21-.22.21-.58 0-.79l-1.3-1.3a.54.54 0 0 0-.39-.16m-2.01 1.77L12 20.92V23h2.08l6.15-6.15z"
+	/></svg
+>
diff --git a/src/lib/components/icons/EightBallIcon.svelte b/src/lib/components/icons/EightBallIcon.svelte
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
+	><path
+		fill="currentColor"
+		d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 4a6 6 0 1 0 0 12a6 6 0 0 0 0-12m0 1.75a2.5 2.5 0 0 1 1.88 4.148c.565.456.92 1.117.92 1.852c0 1.38-1.254 2.5-2.8 2.5c-1.546 0-2.8-1.12-2.8-2.5c0-.735.355-1.396.92-1.853A2.5 2.5 0 0 1 12 7.75m0 5c-.754 0-1.3.488-1.3 1s.547 1 1.3 1c.754 0 1.3-.488 1.3-1s-.546-1-1.3-1m0-3.5a1 1 0 1 0 0 2a1 1 0 0 0 0-2"
+	/></svg
+>
diff --git a/src/lib/components/icons/RightArrow.svelte b/src/lib/components/icons/RightArrow.svelte
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"
+	><path
+		fill="#FFF"
+		d="M27.317 18.846c2.242-1.235 2.242-4.457 0-5.693L7.82 2.403C5.653 1.21 3 2.777 3 5.25v21.492c0 2.473 2.652 4.04 4.818 2.846z"
+	/></svg
+>
diff --git a/src/lib/components/icons/SkullIcon.svelte b/src/lib/components/icons/SkullIcon.svelte
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
+	><g fill="none" fill-rule="evenodd"
+		><path
+			d="M24 0v24H0V0zM12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036c-.01-.003-.019 0-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"
+		/><path
+			fill="currentColor"
+			d="M12 2a9 9 0 0 1 5.5 16.125c-.34.262-.5.59-.5.875a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2c0-.284-.16-.613-.5-.875A9 9 0 0 1 12 2m0 2a7 7 0 0 0-4.48 12.378l.204.164C8.433 17.091 9 17.96 9 19h.75v-1a1 1 0 1 1 2 0v1h.5v-1a1 1 0 1 1 2 0v1H15c0-.971.494-1.793 1.137-2.344l.14-.114A7 7 0 0 0 12 4M8.5 9a2.5 2.5 0 1 1 0 5a2.5 2.5 0 0 1 0-5m7 0a2.5 2.5 0 1 1 0 5a2.5 2.5 0 0 1 0-5m-7 2a.5.5 0 1 0 0 1a.5.5 0 0 0 0-1m7 0a.5.5 0 1 0 0 1a.5.5 0 0 0 0-1"
+		/></g
+	></svg
+>
diff --git a/src/lib/nine-ball/index.ts b/src/lib/nine-ball/index.ts
@@ -43,6 +43,10 @@ export class NineBallGame {
 		return this.racks.reduce((n, { innings }) => n + innings, 0);
 	}
 
+	get totalDeadBalls() {
+		return this.racks.reduce((n, { deadBalls }) => n + deadBalls.length, 0);
+	}
+
 	get currentRack() {
 		const rack = this.racks.at(-1);
 		if (!rack) throw new AssertionError('current rack should always be defined');

diff --git a/src/routes/score-sheet/+layout.svelte b/src/routes/score-sheet/+layout.svelte
@@ -0,0 +1,5 @@
+<script lang="ts"></script>
+
+<div class="container flex flex-col gap-2">
+	<slot />
+</div>
diff --git a/src/routes/score-sheet/+page.svelte b/src/routes/score-sheet/+page.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import ScoreSheetTitle from '$lib/components/ScoreSheetTitle.svelte';
+	import Accordion from '$lib/components/Accordion.svelte';
+	import PlayerHead from '$lib/components/PlayerHead.svelte';
+	import PlayerInfo from '$lib/components/PlayerInfo.svelte';
+	import RackHeader from '$lib/components/RackHeader.svelte';
+	import RackInfo from '$lib/components/RackInfo.svelte';
+
+	export let data;
+
+	const { game } = data;
+</script>
+
+<ScoreSheetTitle padding={'p-4'}>
+	<h1 class="m-auto">9 Ball Score Sheet</h1>
+</ScoreSheetTitle>
+
+<ScoreSheetTitle padding={'p-2'}>
+	<h2 class="m-auto">Match Totals:</h2>
+</ScoreSheetTitle>
+
+{#if $game?.winner}
+	<div>Winner: {$game?.winner.name}</div>
+{/if}
+<div>
+	Score: {$game?.player1.score}-{$game?.player2.score}
+</div>
+<div>Total Innings: {$game?.totalInnings}</div>
+<div>Total Safeties: {$game?.player1.safeties}-{$game?.player2.safeties}</div>
+<div>Total Dead Balls: {$game?.totalDeadBalls}</div>
+
+<ScoreSheetTitle padding={'p-2'}>
+	<h2 class="m-auto">Player Break Down:</h2>
+</ScoreSheetTitle>
+
+{#each $game?.players as player, i}
+	<Accordion>
+		<div slot="header">
+			<PlayerHead {player} playerNumber={i + 1} />
+		</div>
+		<div slot="info">
+			<PlayerInfo />
+		</div>
+	</Accordion>
+{/each}
+
+<ScoreSheetTitle padding={'p2'}>
+	<h2 class="m-auto">Rack Break Downs:</h2>
+</ScoreSheetTitle>
+
+{#each $game?.racks as rack, i}
+	<Accordion>
+		<div slot="header">
+			<RackHeader {rack} rackNumber={i + 1} />
+		</div>
+		<div slot="info">
+			<RackInfo {rack} />
+		</div>
+	</Accordion>
+{/each}
+
+<style>
+</style>