This commit is contained in:
Tommy Parnell
2024-05-07 17:19:49 -04:00
parent 1dfbaf64b4
commit 7f09144c7c

View File

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