From ce0f7f47c57bcd934cd9733c61c60a8d41dfa267 Mon Sep 17 00:00:00 2001
From: Teemu Koivisto <tkoivisto456@gmail.com>
Date: Thu, 18 Jan 2024 17:21:40 +0200
Subject: [PATCH] show result

---
 packages/client/src/components/MidiInfo.svelte | 10 ++++++----
 packages/client/src/routes/(site)/+page.svelte | 13 ++++++++-----
 packages/client/src/stores/game.ts             |  8 ++++++--
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/components/MidiInfo.svelte b/packages/client/src/components/MidiInfo.svelte
index ffac8f30..73e2d238 100644
--- a/packages/client/src/components/MidiInfo.svelte
+++ b/packages/client/src/components/MidiInfo.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
-  import { onMount } from 'svelte'
+  import { midiActions, midiInput, midiRange } from '$stores/midi'
+  import { getNote } from '$utils/midi'
 
-  import { midiActions, midiInput } from '$stores/midi'
+  let rangeMin = getNote($midiRange[0]).absolute
+  let rangeMax = getNote($midiRange[1]).absolute
 
   function handleSetRange() {
     // prompt -> press the lowest note in your MIDI device
@@ -23,9 +25,9 @@
       <div class="flex flex-col">
         <label class="font-bold" for="range_min">Range</label>
         <div class="my-1 flex">
-          <input class="w-10" id="range_min" value={'C4'} />
+          <input class="w-10" id="range_min" bind:value={rangeMin} />
           <span class="mx-2">-</span>
-          <input class="w-10" id="range_max" value={'C5'} />
+          <input class="w-10" id="range_max" bind:value={rangeMax} />
         </div>
         <div>
           <button class="btn primary" on:click={handleSetRange}>Use MIDI</button>
diff --git a/packages/client/src/routes/(site)/+page.svelte b/packages/client/src/routes/(site)/+page.svelte
index 1231cffb..5e533fe7 100644
--- a/packages/client/src/routes/(site)/+page.svelte
+++ b/packages/client/src/routes/(site)/+page.svelte
@@ -16,7 +16,7 @@
   let targetNote = 0
   let playedNote = 0
   let timeout: ReturnType<typeof setTimeout> | undefined
-  let guessState: 'waiting' | 'correct' | 'wrong'
+  let guessState: 'waiting' | 'correct' | 'wrong' | 'ended'
 
   onMount(() => {
     handlePromptMIDI()
@@ -44,15 +44,15 @@
       setPlayedNote(value, correct)
       timeout = setTimeout(() => {
         if ($currentGame?.ended) {
-          gameActions.endGame()
           setTargetNote()
+          guessState = 'ended'
         } else if ($currentGame) {
           setTargetNote($currentGame.current)
+          guessState = 'waiting'
         }
         setPlayedNote()
-        guessState = 'waiting'
         timeout = undefined
-      }, 20000000)
+      }, 2000)
     }
   }
 
@@ -82,7 +82,6 @@
 
   function setTargetNote(value?: number) {
     if (value === undefined) {
-      gameActions.endGame()
       targetEl.style.display = 'none'
       targetNote = 0
     } else {
@@ -173,6 +172,10 @@
       {#if guessState === 'correct' || guessState === 'wrong'}
         <div>Target: {getNote(targetNote).absolute}</div>
         <div class="ml-8">Played: {getNote(playedNote).absolute}</div>
+      {:else if guessState === 'ended'}
+        <div>
+          Result: {$currentGame.correct} / {$currentGame.notes.length}
+        </div>
       {/if}
     </div>
   {:else}
diff --git a/packages/client/src/stores/game.ts b/packages/client/src/stores/game.ts
index 875b52d8..f28b4d52 100644
--- a/packages/client/src/stores/game.ts
+++ b/packages/client/src/stores/game.ts
@@ -6,6 +6,7 @@ import { persist } from './persist'
 
 class GuessGame {
   notes: number[]
+  correct = 0
   idx = 0
   constructor(notes: number[]) {
     this.notes = notes
@@ -14,10 +15,13 @@ class GuessGame {
     return this.notes[this.idx]
   }
   get ended() {
-    return this.notes.length === this.idx - 1
+    return this.notes.length === this.idx + 1
   }
   guess(note: number) {
     const result = this.current === note
+    if (result) {
+      this.correct += 1
+    }
     this.idx += 1
     return result
   }
@@ -42,7 +46,7 @@ export const gameActions = {
     currentGame.set(game)
     return game
   },
-  endGame() {
+  clearGame() {
     currentGame.set(undefined)
   }
 }