From 7f09144c7c59e648241e4b147f65421197873d2c Mon Sep 17 00:00:00 2001
From: Tommy Parnell <tommy@terribledev.io>
Date: Tue, 7 May 2024 17:19:49 -0400
Subject: [PATCH] commit

---
 src/routes/+page.svelte | 180 ++++++++++++++++++++++------------------
 1 file changed, 99 insertions(+), 81 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 90e9689..ebdbbee 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,17 +2,19 @@
 	import { Game, type Score } from './interfaces';
 	import { storedGames } from './store';
 	export const ssr = false;
-	let gameEditing = "";
+	let gameEditing = '';
 	let scoreEditing = -1;
-	$: currentGameEditing = (gameEditing && $storedGames.find(g => g.gameId === gameEditing)) || $storedGames[$storedGames.length - 1];
+	$: currentGameEditing =
+		(gameEditing && $storedGames.find((g) => g.gameId === gameEditing)) ||
+		$storedGames[$storedGames.length - 1];
 	$: currentScoreEditing = scoreEditing > -1 ? currentGameEditing.scores[scoreEditing] : null;
-	$: gamesComplete = $storedGames.filter(g => g.isComplete);
+	$: gamesComplete = $storedGames.filter((g) => g.isComplete);
 	$: disableEditing = currentGameEditing.isComplete && scoreEditing === -1;
 	function isKill(score: Score | undefined | null) {
-		return score === "killHit6" || score === "killHit8" || score === "killMiss";
+		return score === 'killHit6' || score === 'killHit8' || score === 'killMiss';
 	}
 	function isDrop(score: Score | undefined | null) {
-		return score === "drop";
+		return score === 'drop';
 	}
 	function addScore(score: Score) {
 		const targetGame = currentGameEditing;
@@ -37,22 +39,21 @@
 		if (!currentGameEditing.isComplete) {
 			return;
 		}
-		const lastGame = $storedGames[$storedGames.length - 1]
-		if(lastGame !== currentGameEditing) {
+		const lastGame = $storedGames[$storedGames.length - 1];
+		if (lastGame !== currentGameEditing) {
 			$storedGames = [...$storedGames];
+		} else {
+			$storedGames = [...$storedGames, new Game()];
 		}
-		else {
-			$storedGames = [...$storedGames, new Game()]
-		}
-		gameEditing = "";
+		gameEditing = '';
 		scoreEditing = -1;
 	}
 	function calculateAverage(gamesToCalculate: Game[]): number {
-		if(gamesToCalculate.length < 1) {
+		if (gamesToCalculate.length < 1) {
 			return 0;
 		}
 		const totalScore = gamesToCalculate.reduce((acc, g) => acc + g.totalScore, 0);
-		return totalScore / (gamesToCalculate.length);
+		return totalScore / gamesToCalculate.length;
 	}
 	function calculateRating(gamesToCalculate: Game[]): number {
 		const totalGames = gamesToCalculate.length;
@@ -60,13 +61,13 @@
 		if (totalGames === 0) {
 			return 0; // Return 0 if there are no completed games
 		}
-		
+
 		const average = calculateAverage(gamesToCalculate);
 		const hitPercent = calculateHitPercentage(gamesToCalculate);
 		const killsHit = calculateKillsHit(gamesToCalculate);
 
 		// Apply weights and combine according to the formula
-		const rating = (average) * 8 + hitPercent * 500 + killsHit * 2;
+		const rating = average * 8 + hitPercent * 500 + killsHit * 2;
 
 		return rating;
 	}
@@ -83,13 +84,13 @@
 			}
 		}
 
-		return (totalHits / totalThrows); // Calculate hit percentage
+		return totalHits / totalThrows; // Calculate hit percentage
 	}
 
 	function calculateKillsHit(games: Game[]) {
 		return games.reduce((accum: number, current) => {
 			return current.stats.totalEightKills + current.stats.totalSixKills + accum;
-		}, 0)
+		}, 0);
 	}
 	function getLabelForScore(score: Score) {
 		if (typeof score === 'number') {
@@ -102,8 +103,8 @@
 				return 'Kill 8';
 			case 'killMiss':
 				return 'Miss';
-			case "drop":
-				return "Drop";
+			case 'drop':
+				return 'Drop';
 		}
 	}
 	function deleteAllGames() {
@@ -117,8 +118,7 @@
 </svelte:head>
 <h1 class="center">WATL rating simulator</h1>
 <section>
-		<p>Current Game Score {currentGameEditing.totalScore}
-		</p>
+	<p>Current Game Score {currentGameEditing.totalScore}</p>
 	<div class="flexrow">
 		{#each currentGameEditing.scores as score, scoreIndex}
 			<div>
@@ -153,116 +153,131 @@
 		}}>1</button
 	>
 	<button
-	class="flexrowButton"
+		class="flexrowButton"
 		disabled={disableEditing}
 		on:click={() => {
 			setScore(2);
 		}}>2</button
 	>
 	<button
-	class="flexrowButton"
+		class="flexrowButton"
 		disabled={disableEditing}
 		on:click={() => {
 			setScore(3);
 		}}>3</button
 	>
 	<button
-	class="flexrowButton"
+		class="flexrowButton"
 		disabled={disableEditing}
 		on:click={() => {
 			setScore(4);
 		}}>4</button
 	>
 	<button
-	class="flexrowButton"
+		class="flexrowButton"
 		disabled={disableEditing}
 		on:click={() => {
 			setScore(5);
 		}}>5</button
 	>
 	<button
-	class="flexrowButton"
+		class="flexrowButton"
 		disabled={disableEditing}
 		on:click={() => {
 			setScore(6);
 		}}>6</button
 	>
 	<button
-	class="flexrowButton"
-		disabled={disableEditing || (!currentGameEditing.KillEnabled && !isKill(currentScoreEditing) && !isDrop(currentScoreEditing))}
+		class="flexrowButton"
+		disabled={disableEditing ||
+			(!currentGameEditing.KillEnabled &&
+				!isKill(currentScoreEditing) &&
+				!isDrop(currentScoreEditing))}
 		on:click={() => {
 			setScore('killHit6');
 		}}>{getLabelForScore('killHit6')}</button
 	>
 	<button
-	class="flexrowButton"
-		disabled={disableEditing || (!currentGameEditing.KillEnabled && !isKill(currentScoreEditing) && !isDrop(currentScoreEditing))}
+		class="flexrowButton"
+		disabled={disableEditing ||
+			(!currentGameEditing.KillEnabled &&
+				!isKill(currentScoreEditing) &&
+				!isDrop(currentScoreEditing))}
 		on:click={() => {
 			setScore('killHit8');
 		}}>{getLabelForScore('killHit8')}</button
 	>
 	<button
-	class="flexrowButton"
-		disabled={disableEditing || (!currentGameEditing.KillEnabled && !isKill(currentScoreEditing) && !isDrop(currentScoreEditing))}
+		class="flexrowButton"
+		disabled={disableEditing ||
+			(!currentGameEditing.KillEnabled &&
+				!isKill(currentScoreEditing) &&
+				!isDrop(currentScoreEditing))}
 		on:click={() => {
 			setScore('killMiss');
 		}}>{getLabelForScore('killMiss')}</button
 	>
 	<button
-	class="flexrowButton"
-	disabled={disableEditing}
-	on:click={() => {
-		setScore('drop');
-	}}>{getLabelForScore('drop')}</button
->
+		class="flexrowButton"
+		disabled={disableEditing}
+		on:click={() => {
+			setScore('drop');
+		}}>{getLabelForScore('drop')}</button
+	>
 </section>
 <section>
 	<h2>Past Games</h2>
 	<button on:click={deleteAllGames}>Delete All</button>
-	<p>Rating: {calculateRating(gamesComplete)} Average: {calculateAverage(gamesComplete)} total kills: {calculateKillsHit(gamesComplete)}</p>
-	<table class="striped">
-		<thead>
-			<tr>
-				<th>Game</th>
-				<th>Score</th>
-				<th>Bulls</th>
-				<th>Kills 8</th>
-				<th>Kills 6</th>
-				<th>Drops</th>
-				<th></th>
-			</tr>
-		</thead>
-		<tbody>
-			{#each $storedGames as game, gameIndex}
+	<p>
+		Rating: {calculateRating(gamesComplete)} Average: {calculateAverage(gamesComplete)} total kills:
+		{calculateKillsHit(gamesComplete)}
+	</p>
+	<div class="overflow-auto">
+		<table class="striped">
+			<thead>
+				<tr>
+					<th>Game</th>
+					<th>Score</th>
+					<th>Bulls</th>
+					<th>Kills 8</th>
+					<th>Kills 6</th>
+					<th>Drops</th>
+					<th></th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each $storedGames as game, gameIndex}
 					<tr>
-						<td>{gameIndex + 1}</td>
-						<td>{game.totalScore}</td>
-						<td>{game.stats.bulls}</td>
-						<td>{game.stats.totalEightKills}</td>
-						<td>{game.stats.totalSixKills}</td>
-						<td>{game.stats.drops}</td>
-						<td><button
-							disabled={game === currentGameEditing}
-							on:click={() => {
-								gameEditing = game.gameId;
-							}}
-							>Edit</button>
+						<td class="tdSmall">{gameIndex + 1}</td>
+						<td class="tdSmall">{game.totalScore}</td>
+						<td class="tdSmall">{game.stats.bulls}</td>
+						<td class="tdSmall">{game.stats.totalEightKills}</td>
+						<td class="tdSmall">{game.stats.totalSixKills}</td>
+						<td class="tdSmall">{game.stats.drops}</td>
+						<td
+							><button
+								disabled={game === currentGameEditing}
+								on:click={() => {
+									gameEditing = game.gameId;
+								}}>Edit</button
+							>
 							<button
-							disabled={game === currentGameEditing}
-							on:click={() => {
-								const newGames = $storedGames = $storedGames.filter((g, i) => i !== gameIndex);
-								if(newGames.length < 1) {
-									newGames.push(new Game())
-								}
-								$storedGames = newGames;
-								gameEditing = "";
-							}}
-							>Delete</button>
+								disabled={game === currentGameEditing}
+								on:click={() => {
+									const newGames = ($storedGames = $storedGames.filter((g, i) => i !== gameIndex));
+									if (newGames.length < 1) {
+										newGames.push(new Game());
+									}
+									$storedGames = newGames;
+									gameEditing = '';
+								}}>Delete</button
+							>
 						</td>
 					</tr>
-			{/each}
-		</tbody>
-	</table>
+				{/each}
+			</tbody>
+		</table>
+	</div>
 </section>
 
 <style>
@@ -276,7 +291,10 @@
 		gap: 0.5rem;
 		min-height: 3.1rem;
 	}
-	.flexrowButton {
-		margin-bottom: 1rem;
-	}
+	/* mobile only */
+	/* @media (max-width: 600px) {
+		.flexrowButton {
+			margin-bottom: 1rem;
+		}
+	} */
 </style>