chore: applying PR feedback

Author: elimanzo

workspaces/simon-game/src/app/components/App.tsx

@@ -1,43 +1,15 @@
 import React from "react";
-import { buttonSoundConfig } from "../constants.ts";
-import { playSound } from "../util/playSound.ts";
 
 import { Box } from "./Box.tsx";
-
-let audioContext: AudioContext | null = null;
+import { playNote } from "../util/playNote.ts";
+import { config } from "../constants.ts";
 
 export function App() {
-  const handleOnClick = (freq: number) =>
-    playSound(
-      (audioContext ??= new AudioContext()),
-      freq,
-      buttonSoundConfig.duration,
-      buttonSoundConfig.volume,
-    );
-
   return (
     <div style={{ display: "flex", gap: 10 }}>
-      <Box
-        color="red"
-        handleClick={() => handleOnClick(buttonSoundConfig.frequencies.red)}
-      />
-      <Box
-        color={
-          // cobalt blue
-          "#0050B5"
-        }
-        handleClick={() =>
-          handleOnClick(buttonSoundConfig.frequencies.cobaltBlue)
-        }
-      />
-      <Box
-        color="green"
-        handleClick={() => handleOnClick(buttonSoundConfig.frequencies.green)}
-      />
-      <Box
-        color="yellow"
-        handleClick={() => handleOnClick(buttonSoundConfig.frequencies.yellow)}
-      />
+      {config.boxes.map((box) => (
+        <Box color={box.color} onClick={() => playNote(box.frequency)} />
+      ))}
     </div>
   );
 }

workspaces/simon-game/src/app/components/Box.tsx

@@ -5,28 +5,28 @@ type Props = {
   height?: number;
   width?: number;
   margin?: number;
-  handleClick: () => void;
+  onClick: () => void;
 };
 
 export function Box({
   color = "lightblue",
   height = 100,
   width = 100,
   margin,
-  handleClick,
+  onClick,
 }: Props) {
   return (
     <button
       style={{
         backgroundColor: color,
-        height: height,
-        width: width,
+        height,
+        width,
         borderRadius: 20, // rounded corners
-        margin: margin, // spaces between boxes
+        margin, // spaces between boxes
         cursor: "pointer",
         border: 0,
       }}
-      onClick={handleClick}
+      onClick={onClick}
     />
   );
 }

workspaces/simon-game/src/app/constants.ts

@@ -1,10 +1,22 @@
-export const buttonSoundConfig = {
-  duration: 300,
-  volume: 0.1,
-  frequencies: {
-    red: 261.63,
-    cobaltBlue: 329.63,
-    green: 392.0,
-    yellow: 523.25,
-  },
+export const config = {
+  soundDurationMs: 300,
+  volumePct: 0.1,
+  buttons: [
+    {
+      color: "red",
+      frequency: 261.63,
+    },
+    {
+      color: "#0050B5", // cobalt blue
+      frequency: 329.63,
+    },
+    {
+      color: "green",
+      frequency: 392.0,
+    },
+    {
+      color: "yellow",
+      frequency: 523.25,
+    },
+  ],
 };

workspaces/simon-game/src/app/util/playNote.ts

@@ -0,0 +1,5 @@
+import { config } from "../constants.ts";
+import { playSound } from "./playSound.ts";
+
+export const playNote = (freq: number) =>
+  playSound(freq, config.soundDurationMs, config.volumePct);

workspaces/simon-game/src/app/util/playSound.ts

@@ -1,45 +1,51 @@
+let audioContext: AudioContext | null = null;
+
 /**
  * Plays a sound using the Web Audio API.
  *
  * @param context - The audio context to use for generating the sound.
  * @param frequency - The frequency of the sound in Hertz
- * @param duration - The duration of the sound in milliseconds.
+ * @param durationMs - The duration of the sound in milliseconds.
  * @param volume - The volume of the sound, typically between 0 and 1.
  */
 export const playSound = (
-  context: AudioContext,
   frequency: number,
-  duration: number,
-  volume: number,
+  durationMs: number,
+  volumePct: number,
 ) => {
   if (frequency <= 0) {
     throw new Error("Frequency must be a positive number.");
   }
 
-  if (duration <= 0) {
+  if (durationMs <= 0) {
     throw new Error("Duration must be a positive number.");
   }
 
-  if (volume < 0 || volume > 1) {
+  if (volumePct < 0 || volumePct > 1) {
     throw new Error("Volume must be between 0 and 1.");
   }
 
-  const oscillatorNode = context.createOscillator();
-  oscillatorNode.frequency.setValueAtTime(frequency, context.currentTime);
+  audioContext ??= new AudioContext();
+
+  const oscillatorNode = audioContext.createOscillator();
+  oscillatorNode.frequency.setValueAtTime(frequency, audioContext.currentTime);
 
-  const gainNode = context.createGain();
-  gainNode.gain.setValueAtTime(volume, context.currentTime);
+  const gainNode = audioContext.createGain();
+  gainNode.gain.setValueAtTime(volumePct, audioContext.currentTime);
 
   // Creates the smooth fades-in / fade-out sound effect (Avoids the popping sounds)
-  gainNode.gain.linearRampToValueAtTime(volume, context.currentTime + 0.01);
+  gainNode.gain.linearRampToValueAtTime(
+    volumePct,
+    audioContext.currentTime + 0.01,
+  );
   gainNode.gain.linearRampToValueAtTime(
     0,
-    context.currentTime + duration / 1000 - 0.01,
+    audioContext.currentTime + durationMs / 1000 - 0.01,
   );
 
   oscillatorNode.connect(gainNode);
-  gainNode.connect(context.destination);
+  gainNode.connect(audioContext.destination);
 
   oscillatorNode.start();
-  oscillatorNode.stop(context.currentTime + duration / 1000);
+  oscillatorNode.stop(audioContext.currentTime + durationMs / 1000);
 };