hmm
This commit is contained in:
@@ -3,11 +3,9 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<main class="container-fluid">
|
<main class="container-fluid">
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@@ -9,7 +9,9 @@
|
|||||||
$storedGames[$storedGames.length - 1];
|
$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);
|
||||||
|
$: completedStats = calculateTotalGameStats(gamesComplete);
|
||||||
$: disableEditing = currentGameEditing.isComplete && scoreEditing === -1;
|
$: disableEditing = currentGameEditing.isComplete && scoreEditing === -1;
|
||||||
|
$: storedGames;
|
||||||
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';
|
||||||
}
|
}
|
||||||
@@ -92,6 +94,39 @@
|
|||||||
return current.stats.totalEightKills + current.stats.totalSixKills + accum;
|
return current.stats.totalEightKills + current.stats.totalSixKills + accum;
|
||||||
}, 0);
|
}, 0);
|
||||||
}
|
}
|
||||||
|
// function calculateBullsHit(games: Game[]) {
|
||||||
|
// return games.reduce((accum: number, current) => {
|
||||||
|
// return current.stats.bulls + accum;
|
||||||
|
// }, 0);
|
||||||
|
// }
|
||||||
|
// function calculateTotalScore(games: Game[]) {
|
||||||
|
// return games.reduce((accum: number, current) => {
|
||||||
|
// return current.totalScore + accum;
|
||||||
|
// }, 0);
|
||||||
|
// }
|
||||||
|
function calculateTotalGameStats(gamesToCalc: Game[]) {
|
||||||
|
const stats = gamesToCalc.reduce(
|
||||||
|
(accum, current) => {
|
||||||
|
return {
|
||||||
|
bulls: current.stats.bulls + accum.bulls,
|
||||||
|
kills: current.stats.totalEightKills + current.stats.totalSixKills + accum.kills,
|
||||||
|
drops: current.stats.drops + accum.drops,
|
||||||
|
totalScore: current.totalScore + accum.totalScore
|
||||||
|
};
|
||||||
|
},
|
||||||
|
{ bulls: 0, kills: 0, drops: 0, totalScore: 0 } as {
|
||||||
|
bulls: number;
|
||||||
|
kills: number;
|
||||||
|
drops: number;
|
||||||
|
totalScore: number;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
return {
|
||||||
|
...stats,
|
||||||
|
average: stats.totalScore && gamesToCalc.length ? stats.totalScore / gamesToCalc.length : 0,
|
||||||
|
rating: calculateRating(gamesToCalc)
|
||||||
|
};
|
||||||
|
}
|
||||||
function getLabelForScore(score: Score) {
|
function getLabelForScore(score: Score) {
|
||||||
if (typeof score === 'number') {
|
if (typeof score === 'number') {
|
||||||
return score.toString();
|
return score.toString();
|
||||||
@@ -118,7 +153,10 @@
|
|||||||
</svelte:head>
|
</svelte:head>
|
||||||
<h1 class="center">WATL rating simulator</h1>
|
<h1 class="center">WATL rating simulator</h1>
|
||||||
<section>
|
<section>
|
||||||
<div class="stats"><div>Score {currentGameEditing.totalScore}</div> <div>Throw: {currentGameEditing.scores.length}</div></div>
|
<div class="stats">
|
||||||
|
<div>Score {currentGameEditing.totalScore}</div>
|
||||||
|
<div>Throw: {currentGameEditing.scores.length + 1}</div>
|
||||||
|
</div>
|
||||||
<div class="flexrow">
|
<div class="flexrow">
|
||||||
{#each currentGameEditing.scores as score, scoreIndex}
|
{#each currentGameEditing.scores as score, scoreIndex}
|
||||||
<div>
|
<div>
|
||||||
@@ -130,7 +168,9 @@
|
|||||||
}}>Cancel</button
|
}}>Cancel</button
|
||||||
>
|
>
|
||||||
{:else}
|
{:else}
|
||||||
<button class="outline secondary" on:click={() => (scoreEditing = scoreIndex)}>{getLabelForScore(score)}</button>
|
<button class="outline secondary" on:click={() => (scoreEditing = scoreIndex)}
|
||||||
|
>{getLabelForScore(score)}</button
|
||||||
|
>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
@@ -227,7 +267,9 @@
|
|||||||
}}>{getLabelForScore('drop')}</button
|
}}>{getLabelForScore('drop')}</button
|
||||||
>
|
>
|
||||||
<!-- {#if currentGameEditing.isComplete} -->
|
<!-- {#if currentGameEditing.isComplete} -->
|
||||||
<button disabled={!currentGameEditing.isComplete} class="contrast" on:click={saveGame}>Save Game</button>
|
<button disabled={!currentGameEditing.isComplete} class="contrast" on:click={saveGame}
|
||||||
|
>New Game</button
|
||||||
|
>
|
||||||
<!-- {/if} -->
|
<!-- {/if} -->
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -236,11 +278,14 @@
|
|||||||
<h2>Past Games</h2>
|
<h2>Past Games</h2>
|
||||||
<button on:click={deleteAllGames}>Delete All</button><br /><br />
|
<button on:click={deleteAllGames}>Delete All</button><br /><br />
|
||||||
<p>
|
<p>
|
||||||
Rating: {calculateRating(gamesComplete)} <br /> Average: {calculateAverage(gamesComplete)} <br /> total kills:
|
Rating: {completedStats.rating} <br />
|
||||||
{calculateKillsHit(gamesComplete)}
|
Average: {completedStats.average} <br />
|
||||||
|
Kills: {completedStats.kills} <br />
|
||||||
|
Bulls: {completedStats.bulls} <br />
|
||||||
|
Score: {completedStats.totalScore}
|
||||||
</p>
|
</p>
|
||||||
<div class="overflow-auto">
|
<div class="overflow-auto">
|
||||||
<table class="striped">
|
<table class="">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Game</th>
|
<th>Game</th>
|
||||||
@@ -255,6 +300,7 @@
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#each $storedGames as game, gameIndex}
|
{#each $storedGames as game, gameIndex}
|
||||||
|
{#if game.isComplete || (!game.isComplete && currentGameEditing !== game)}
|
||||||
<tr>
|
<tr>
|
||||||
<td class="tdSmall">{gameIndex + 1}</td>
|
<td class="tdSmall">{gameIndex + 1}</td>
|
||||||
<td class="tdSmall">{game.totalScore}</td>
|
<td class="tdSmall">{game.totalScore}</td>
|
||||||
@@ -274,7 +320,9 @@
|
|||||||
<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());
|
||||||
}
|
}
|
||||||
@@ -284,6 +332,7 @@
|
|||||||
>
|
>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
@@ -294,7 +343,6 @@
|
|||||||
.stats {
|
.stats {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
}
|
}
|
||||||
.center {
|
.center {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -1,5 +1,11 @@
|
|||||||
export type Score = 8 | 6 | 5 | 4 | 3 | 2 | 1 | 0 | "drop" | "killHit8" | "killHit6" | "killMiss";
|
export type Score = 8 | 6 | 5 | 4 | 3 | 2 | 1 | 0 | 'drop' | 'killHit8' | 'killHit6' | 'killMiss';
|
||||||
export interface GameStats { totalSixKills: number; totalEightKills: number; killAttempts: number, drops: number, bulls: number}
|
export interface GameStats {
|
||||||
|
totalSixKills: number;
|
||||||
|
totalEightKills: number;
|
||||||
|
killAttempts: number;
|
||||||
|
drops: number;
|
||||||
|
bulls: number;
|
||||||
|
}
|
||||||
export interface IStoredGame {
|
export interface IStoredGame {
|
||||||
scores: Score[];
|
scores: Score[];
|
||||||
stats: GameStats;
|
stats: GameStats;
|
||||||
@@ -11,17 +17,17 @@ export class Game implements IStoredGame {
|
|||||||
public stats: GameStats = this.GenerateStats();
|
public stats: GameStats = this.GenerateStats();
|
||||||
public addScore(score: Score) {
|
public addScore(score: Score) {
|
||||||
this.scores.push(score);
|
this.scores.push(score);
|
||||||
this.scores = [...this.scores]
|
this.scores = [...this.scores];
|
||||||
this.stats = this.GenerateStats();
|
this.stats = this.GenerateStats();
|
||||||
}
|
}
|
||||||
public removeScore(scoreNumber: number) {
|
public removeScore(scoreNumber: number) {
|
||||||
this.scores.splice(scoreNumber, 1);
|
this.scores.splice(scoreNumber, 1);
|
||||||
this.scores = [...this.scores]
|
this.scores = [...this.scores];
|
||||||
this.stats = this.GenerateStats();
|
this.stats = this.GenerateStats();
|
||||||
}
|
}
|
||||||
public replaceScore(scoreNumber: number, score: Score) {
|
public replaceScore(scoreNumber: number, score: Score) {
|
||||||
this.scores[scoreNumber] = score;
|
this.scores[scoreNumber] = score;
|
||||||
this.scores = [...this.scores]
|
this.scores = [...this.scores];
|
||||||
this.stats = this.GenerateStats();
|
this.stats = this.GenerateStats();
|
||||||
}
|
}
|
||||||
public get isComplete() {
|
public get isComplete() {
|
||||||
@@ -57,26 +63,31 @@ export class Game implements IStoredGame {
|
|||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
public GenerateStats(): { totalSixKills: number; totalEightKills: number; killAttempts: number, drops: number, bulls: number} {
|
public GenerateStats(): {
|
||||||
const data = { totalSixKills: 0, totalEightKills: 0, killAttempts: 0, drops: 0, bulls: 0}
|
totalSixKills: number;
|
||||||
this.scores.forEach(score => {
|
totalEightKills: number;
|
||||||
|
killAttempts: number;
|
||||||
|
drops: number;
|
||||||
|
bulls: number;
|
||||||
|
} {
|
||||||
|
const data = { totalSixKills: 0, totalEightKills: 0, killAttempts: 0, drops: 0, bulls: 0 };
|
||||||
|
this.scores.forEach((score) => {
|
||||||
if (score === 6) {
|
if (score === 6) {
|
||||||
data.bulls += 1
|
data.bulls += 1;
|
||||||
}
|
}
|
||||||
if(score === "drop") {
|
if (score === 'drop') {
|
||||||
data.drops += 1;
|
data.drops += 1;
|
||||||
}
|
}
|
||||||
if( score === "killHit6" || score === "killHit8" || score === "killMiss") {
|
if (score === 'killHit6' || score === 'killHit8' || score === 'killMiss') {
|
||||||
data.killAttempts += 1;
|
data.killAttempts += 1;
|
||||||
}
|
}
|
||||||
if(score === "killHit6") {
|
if (score === 'killHit6') {
|
||||||
data.totalSixKills += 1;
|
data.totalSixKills += 1;
|
||||||
}
|
}
|
||||||
if(score === "killHit8") {
|
if (score === 'killHit8') {
|
||||||
data.totalEightKills += 1;
|
data.totalEightKills += 1;
|
||||||
}
|
}
|
||||||
|
});
|
||||||
})
|
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,20 +1,25 @@
|
|||||||
|
import { writable } from 'svelte/store';
|
||||||
import { writable } from "svelte/store";
|
import { Game, type IStoredGame } from './interfaces';
|
||||||
import { Game, type IStoredGame } from "./interfaces";
|
import { browser } from '$app/environment';
|
||||||
import { browser } from "$app/environment";
|
const DATASTORAGEKEY = 'WATLCALC';
|
||||||
const DATASTORAGEKEY = "WATLCALC";
|
|
||||||
const gamesFromLocalStorage = browser ? localStorage.getItem(DATASTORAGEKEY) : null;
|
const gamesFromLocalStorage = browser ? localStorage.getItem(DATASTORAGEKEY) : null;
|
||||||
const parsedGamesFromLocalStorage: IStoredGame[] | undefined | null = gamesFromLocalStorage ? JSON.parse(gamesFromLocalStorage) : null;
|
const parsedGamesFromLocalStorage: IStoredGame[] | undefined | null = gamesFromLocalStorage
|
||||||
|
? JSON.parse(gamesFromLocalStorage)
|
||||||
|
: null;
|
||||||
let gamesParsed: Game[] = [];
|
let gamesParsed: Game[] = [];
|
||||||
if (!parsedGamesFromLocalStorage || parsedGamesFromLocalStorage?.length === 0) {
|
if (!parsedGamesFromLocalStorage || parsedGamesFromLocalStorage?.length === 0) {
|
||||||
gamesParsed = [new Game()];
|
gamesParsed = [new Game()];
|
||||||
}
|
}
|
||||||
if(parsedGamesFromLocalStorage && Array.isArray(parsedGamesFromLocalStorage) && parsedGamesFromLocalStorage.length > 0) {
|
if (
|
||||||
gamesParsed = parsedGamesFromLocalStorage.map(i => deserializeGames(i));
|
parsedGamesFromLocalStorage &&
|
||||||
|
Array.isArray(parsedGamesFromLocalStorage) &&
|
||||||
|
parsedGamesFromLocalStorage.length > 0
|
||||||
|
) {
|
||||||
|
gamesParsed = parsedGamesFromLocalStorage.map((i) => deserializeGames(i));
|
||||||
}
|
}
|
||||||
|
|
||||||
export const storedGames = writable<Game[]>(gamesParsed);
|
export const storedGames = writable<Game[]>(gamesParsed);
|
||||||
storedGames.subscribe(value => {
|
storedGames.subscribe((value) => {
|
||||||
browser && localStorage.setItem(DATASTORAGEKEY, JSON.stringify(value));
|
browser && localStorage.setItem(DATASTORAGEKEY, JSON.stringify(value));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -12,10 +12,10 @@ const config = {
|
|||||||
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
|
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
|
||||||
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
||||||
adapter: adapter({
|
adapter: adapter({
|
||||||
fallback: 'index.html',
|
fallback: 'index.html'
|
||||||
}),
|
}),
|
||||||
paths: {
|
paths: {
|
||||||
base: process.env.NODE_ENV === 'production' ? '/WATLRatingCalculator' : '',
|
base: process.env.NODE_ENV === 'production' ? '/WATLRatingCalculator' : ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user