chore: reduce font size for note name and simplify jsx conditions

gregjopa · Apr 1, 2023 · aa17989 · aa17989
1 parent f7be23b
commit aa17989
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 13 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -174,6 +174,10 @@ function App() {
     playNote(noteValue, octave);
   }
 
+  const waitingForGuess =
+    gameState === GameState.WaitingForGuess ||
+    gameState === GameState.NotStarted;
+
   return (
     <>
       <div className="mx-auto h-[900px] max-w-2xl bg-slate-50 px-8 pb-8 text-lg text-slate-600 md:border-x md:border-b md:border-solid md:border-gray-500">
@@ -186,22 +190,13 @@ function App() {
           <NoteSelector
             selectedNote={guessedNoteName}
             onNoteNameChange={handleGuess}
-            isDisabled={
-              gameState !== GameState.WaitingForGuess &&
-              gameState !== GameState.NotStarted
-            }
-            shouldFocus={
-              gameState === GameState.WaitingForGuess ||
-              gameState === GameState.NotStarted
-            }
+            isDisabled={!waitingForGuess}
+            shouldFocus={waitingForGuess}
           />
           <StaveNote
             note={actualNote}
             onClick={handleStaveNoteClick}
-            shouldDisplayNoteName={
-              gameState !== GameState.WaitingForGuess &&
-              gameState !== GameState.NotStarted
-            }
+            shouldDisplayNoteName={!waitingForGuess}
           />
           <div>Score: {countOfCorrectGuesses}</div>
 

diff --git a/src/components/StaveNote.tsx b/src/components/StaveNote.tsx
@@ -89,7 +89,7 @@ function draw({
     .setLine(11)
     .setFont(
       '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
-      12,
+      10,
       400
     );