From 2490b33ff29ea7dbfa84fcb0971d29fc7358d889 Mon Sep 17 00:00:00 2001
From: Eli Manzo <96manzo.eli@gmail.com>
Date: Sun, 27 Oct 2024 22:09:56 -0700
Subject: [PATCH 01/12] feat: added playSound function to simons game

---
 .../simon-game/src/app/util/playSound.ts       | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 workspaces/simon-game/src/app/util/playSound.ts

diff --git a/workspaces/simon-game/src/app/util/playSound.ts b/workspaces/simon-game/src/app/util/playSound.ts
new file mode 100644
index 00000000..1bfaafd6
--- /dev/null
+++ b/workspaces/simon-game/src/app/util/playSound.ts
@@ -0,0 +1,18 @@
+export const playSound = (
+  context: BaseAudioContext,
+  frequency: number,
+  duration: number,
+  volume: number,
+) => {
+  const oscillatorNode = context.createOscillator();
+  oscillatorNode.frequency.setValueAtTime(frequency, context.currentTime);
+
+  const gainNode = context.createGain();
+  gainNode.gain.setValueAtTime(volume, context.currentTime);
+
+  oscillatorNode.connect(gainNode);
+  gainNode.connect(context.destination);
+
+  oscillatorNode.start();
+  oscillatorNode.stop(context.currentTime + duration / 1000);
+};

From d1feaeec52104fc776d332a29fe23ed92409d3c9 Mon Sep 17 00:00:00 2001
From: Eli Manzo <96manzo.eli@gmail.com>
Date: Sun, 27 Oct 2024 22:15:29 -0700
Subject: [PATCH 02/12] chore: added some error handling

---
 .../simon-game/src/app/util/playSound.ts      | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/workspaces/simon-game/src/app/util/playSound.ts b/workspaces/simon-game/src/app/util/playSound.ts
index 1bfaafd6..30f677a3 100644
--- a/workspaces/simon-game/src/app/util/playSound.ts
+++ b/workspaces/simon-game/src/app/util/playSound.ts
@@ -1,9 +1,29 @@
+/**
+ * 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 volume - The volume of the sound, typically between 0 and 1.
+ */
 export const playSound = (
   context: BaseAudioContext,
   frequency: number,
   duration: number,
   volume: number,
 ) => {
+  if (frequency <= 0) {
+    throw new Error("Frequency must be a positive number.");
+  }
+
+  if (duration <= 0) {
+    throw new Error("Duration must be a positive number.");
+  }
+
+  if (volume < 0 || volume > 1) {
+    throw new Error("Volume must be between 0 and 1.");
+  }
+
   const oscillatorNode = context.createOscillator();
   oscillatorNode.frequency.setValueAtTime(frequency, context.currentTime);
 

From 4af3aef21067dce431560e5977b0191f38bf74ce Mon Sep 17 00:00:00 2001
From: Eli Manzo <96manzo.eli@gmail.com>
Date: Sun, 27 Oct 2024 22:38:38 -0700
Subject: [PATCH 03/12] chore: using AudioContext instead of BaseAudioContext
 as per guideline

---
 workspaces/simon-game/src/app/util/playSound.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/workspaces/simon-game/src/app/util/playSound.ts b/workspaces/simon-game/src/app/util/playSound.ts
index 30f677a3..bbf7d111 100644
--- a/workspaces/simon-game/src/app/util/playSound.ts
+++ b/workspaces/simon-game/src/app/util/playSound.ts
@@ -7,7 +7,7 @@
  * @param volume - The volume of the sound, typically between 0 and 1.
  */
 export const playSound = (
-  context: BaseAudioContext,
+  context: AudioContext,
   frequency: number,
   duration: number,
   volume: number,

From 3c7a842d5277647870b11313e8deaeb357589233 Mon Sep 17 00:00:00 2001
From: Eli Manzo <96manzo.eli@gmail.com>
Date: Mon, 28 Oct 2024 21:12:11 -0700
Subject: [PATCH 04/12] feat: added some freq buttons to test the playSound
 function

---
 .../simon-game/src/app/components/App.tsx     | 24 +++++++++++++++++++
 workspaces/simon-game/src/app/constants.ts    |  5 ++++
 .../simon-game/src/app/util/playSound.ts      |  6 ++---
 3 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 workspaces/simon-game/src/app/constants.ts

diff --git a/workspaces/simon-game/src/app/components/App.tsx b/workspaces/simon-game/src/app/components/App.tsx
index 895d9015..e049c44b 100644
--- a/workspaces/simon-game/src/app/components/App.tsx
+++ b/workspaces/simon-game/src/app/components/App.tsx
@@ -1,10 +1,34 @@
 import React from "react";
+import { buttonSoundConfig } from "../constants.ts";
+import playSound from "../util/playSound.ts";
 
 import { Box } from "./Box.tsx";
 
 export function App() {
+  let audioContext: AudioContext | null = null;
+
+  const handleFreqClick = (freq: number) => {
+    if(!audioContext) {
+      audioContext = new window.AudioContext();
+    }
+    playSound(
+      audioContext,
+      freq,
+      buttonSoundConfig.duration,
+      buttonSoundConfig.volume,
+    )
+  }
+
   return (
     <div>
+      {buttonSoundConfig.frequencies.map((freq, index) => (
+        <button
+          key={index}
+          onClick={() => handleFreqClick(freq)}
+        >
+          {freq}
+        </button>
+      ))}
       <Box color="red" />
       <Box
         color={
diff --git a/workspaces/simon-game/src/app/constants.ts b/workspaces/simon-game/src/app/constants.ts
new file mode 100644
index 00000000..722da027
--- /dev/null
+++ b/workspaces/simon-game/src/app/constants.ts
@@ -0,0 +1,5 @@
+export const buttonSoundConfig = {
+  duration: 300,
+  volume: 0.1,
+  frequencies: [261.63, 329.63, 392.0, 523.25],
+};
diff --git a/workspaces/simon-game/src/app/util/playSound.ts b/workspaces/simon-game/src/app/util/playSound.ts
index bbf7d111..f4c99609 100644
--- a/workspaces/simon-game/src/app/util/playSound.ts
+++ b/workspaces/simon-game/src/app/util/playSound.ts
@@ -6,12 +6,12 @@
  * @param duration - The duration of the sound in milliseconds.
  * @param volume - The volume of the sound, typically between 0 and 1.
  */
-export const playSound = (
+export default function playSound(
   context: AudioContext,
   frequency: number,
   duration: number,
   volume: number,
-) => {
+) {
   if (frequency <= 0) {
     throw new Error("Frequency must be a positive number.");
   }
@@ -35,4 +35,4 @@ export const playSound = (
 
   oscillatorNode.start();
   oscillatorNode.stop(context.currentTime + duration / 1000);
-};
+}

From eefe6ad2727fbe71f3a823bd203089eb6a742d20 Mon Sep 17 00:00:00 2001
From: Eli Manzo <96manzo.eli@gmail.com>
Date: Mon, 28 Oct 2024 21:24:19 -0700
Subject: [PATCH 05/12] chore: applying feedback

---
 .../simon-game/src/app/components/App.tsx     | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/workspaces/simon-game/src/app/components/App.tsx b/workspaces/simon-game/src/app/components/App.tsx
index e049c44b..65786fde 100644
--- a/workspaces/simon-game/src/app/components/App.tsx
+++ b/workspaces/simon-game/src/app/components/App.tsx
@@ -6,25 +6,19 @@ import { Box } from "./Box.tsx";
 
 export function App() {
   let audioContext: AudioContext | null = null;
-
-  const handleFreqClick = (freq: number) => {
-    if(!audioContext) {
-      audioContext = new window.AudioContext();
-    }
-    playSound(
-      audioContext,
-      freq,
-      buttonSoundConfig.duration,
-      buttonSoundConfig.volume,
-    )
-  }
-
   return (
     <div>
       {buttonSoundConfig.frequencies.map((freq, index) => (
         <button
           key={index}
-          onClick={() => handleFreqClick(freq)}
+          onClick={() =>
+            playSound(
+              (audioContext ??= new AudioContext()),
+              freq,
+              buttonSoundConfig.duration,
+              buttonSoundConfig.volume,
+            )
+          }
         >
           {freq}
         </button>

From 68c8772821153cb3a323c1264554a3729c22b46d Mon Sep 17 00:00:00 2001
From: Eli Manzo <96manzo.eli@gmail.com>
Date: Mon, 28 Oct 2024 21:43:04 -0700
Subject: [PATCH 06/12] chore: adding audio context out of render

---
 workspaces/simon-game/src/app/components/App.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/workspaces/simon-game/src/app/components/App.tsx b/workspaces/simon-game/src/app/components/App.tsx
index 65786fde..62201e37 100644
--- a/workspaces/simon-game/src/app/components/App.tsx
+++ b/workspaces/simon-game/src/app/components/App.tsx
@@ -4,8 +4,9 @@ import playSound from "../util/playSound.ts";
 
 import { Box } from "./Box.tsx";
 
+let audioContext: AudioContext | null = null;
+
 export function App() {
-  let audioContext: AudioContext | null = null;
   return (
     <div>
       {buttonSoundConfig.frequencies.map((freq, index) => (

From 064314d16063b4726bc6ce032e53ecddd26e4e66 Mon Sep 17 00:00:00 2001
From: Eli Manzo <96manzo.eli@gmail.com>
Date: Tue, 29 Oct 2024 00:30:11 -0700
Subject: [PATCH 07/12] feat: implementing sounds on click + fixed popping
 sounds from the playSound

---
 .../simon-game/src/app/components/App.tsx     | 45 ++++++++++---------
 .../simon-game/src/app/components/Box.tsx     | 22 ++++++---
 workspaces/simon-game/src/app/constants.ts    |  7 ++-
 .../simon-game/src/app/util/playSound.ts      | 13 ++++--
 4 files changed, 57 insertions(+), 30 deletions(-)

diff --git a/workspaces/simon-game/src/app/components/App.tsx b/workspaces/simon-game/src/app/components/App.tsx
index 62201e37..416463b5 100644
--- a/workspaces/simon-game/src/app/components/App.tsx
+++ b/workspaces/simon-game/src/app/components/App.tsx
@@ -1,38 +1,43 @@
 import React from "react";
 import { buttonSoundConfig } from "../constants.ts";
-import playSound from "../util/playSound.ts";
+import { playSound } from "../util/playSound.ts";
 
 import { Box } from "./Box.tsx";
 
 let audioContext: AudioContext | null = null;
 
 export function App() {
+  const handleOnClick = (freq: number) =>
+    playSound(
+      (audioContext ??= new AudioContext()),
+      freq,
+      buttonSoundConfig.duration,
+      buttonSoundConfig.volume,
+    );
+
   return (
-    <div>
-      {buttonSoundConfig.frequencies.map((freq, index) => (
-        <button
-          key={index}
-          onClick={() =>
-            playSound(
-              (audioContext ??= new AudioContext()),
-              freq,
-              buttonSoundConfig.duration,
-              buttonSoundConfig.volume,
-            )
-          }
-        >
-          {freq}
-        </button>
-      ))}
-      <Box color="red" />
+    <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)}
       />
-      <Box color="green" />
-      <Box color="yellow" />
     </div>
   );
 }
diff --git a/workspaces/simon-game/src/app/components/Box.tsx b/workspaces/simon-game/src/app/components/Box.tsx
index 41032b28..5c9194e5 100644
--- a/workspaces/simon-game/src/app/components/Box.tsx
+++ b/workspaces/simon-game/src/app/components/Box.tsx
@@ -5,18 +5,28 @@ type Props = {
   height?: number;
   width?: number;
   margin?: number;
+  handleClick: () => void;
 };
 
-export function Box(props: Props) {
+export function Box({
+  color = "lightblue",
+  height = 100,
+  width = 100,
+  margin,
+  handleClick,
+}: Props) {
   return (
-    <div
+    <button
       style={{
-        backgroundColor: props.color ?? "lightblue",
-        height: props.height ?? 100,
-        width: props.width ?? 100,
+        backgroundColor: color,
+        height: height,
+        width: width,
         borderRadius: 20, // rounded corners
-        margin: props.margin, // spaces between boxes
+        margin: margin, // spaces between boxes
+        cursor: "pointer",
+        border: 0,
       }}
+      onClick={handleClick}
     />
   );
 }
diff --git a/workspaces/simon-game/src/app/constants.ts b/workspaces/simon-game/src/app/constants.ts
index 722da027..ff3d3842 100644
--- a/workspaces/simon-game/src/app/constants.ts
+++ b/workspaces/simon-game/src/app/constants.ts
@@ -1,5 +1,10 @@
 export const buttonSoundConfig = {
   duration: 300,
   volume: 0.1,
-  frequencies: [261.63, 329.63, 392.0, 523.25],
+  frequencies: {
+    red: 261.63,
+    cobaltBlue: 329.63,
+    green: 392.0,
+    yellow: 523.25,
+  },
 };
diff --git a/workspaces/simon-game/src/app/util/playSound.ts b/workspaces/simon-game/src/app/util/playSound.ts
index f4c99609..1b1cd78b 100644
--- a/workspaces/simon-game/src/app/util/playSound.ts
+++ b/workspaces/simon-game/src/app/util/playSound.ts
@@ -6,12 +6,12 @@
  * @param duration - The duration of the sound in milliseconds.
  * @param volume - The volume of the sound, typically between 0 and 1.
  */
-export default function playSound(
+export const playSound = (
   context: AudioContext,
   frequency: number,
   duration: number,
   volume: number,
-) {
+) => {
   if (frequency <= 0) {
     throw new Error("Frequency must be a positive number.");
   }
@@ -30,9 +30,16 @@ export default function playSound(
   const gainNode = context.createGain();
   gainNode.gain.setValueAtTime(volume, context.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(
+    0,
+    context.currentTime + duration / 1000 - 0.01,
+  );
+
   oscillatorNode.connect(gainNode);
   gainNode.connect(context.destination);
 
   oscillatorNode.start();
   oscillatorNode.stop(context.currentTime + duration / 1000);
-}
+};

From 6997466164b59e4558115cb4aac05e45a062d9fe Mon Sep 17 00:00:00 2001
From: Eli Manzo <96manzo.eli@gmail.com>
Date: Tue, 29 Oct 2024 00:34:38 -0700
Subject: [PATCH 08/12] fix: linting

---
 workspaces/simon-game/src/app/components/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/workspaces/simon-game/src/app/components/App.tsx b/workspaces/simon-game/src/app/components/App.tsx
index 416463b5..9a2a0ed5 100644
--- a/workspaces/simon-game/src/app/components/App.tsx
+++ b/workspaces/simon-game/src/app/components/App.tsx
@@ -16,7 +16,7 @@ export function App() {
     );
 
   return (
-    <div style={{display: "flex", gap: 10}}>
+    <div style={{ display: "flex", gap: 10 }}>
       <Box
         color="red"
         handleClick={() => handleOnClick(buttonSoundConfig.frequencies.red)}

From 707c315a2ae41fef6e636e61d6b8b209bbdfd1f5 Mon Sep 17 00:00:00 2001
From: Eli Manzo <96manzo.eli@gmail.com>
Date: Tue, 29 Oct 2024 23:39:51 -0700
Subject: [PATCH 09/12] chore: applying PR feedback

---
 .../simon-game/src/app/components/App.tsx     | 38 +++----------------
 .../simon-game/src/app/components/Box.tsx     | 12 +++---
 workspaces/simon-game/src/app/constants.ts    | 30 ++++++++++-----
 .../simon-game/src/app/util/playNote.ts       |  5 +++
 .../simon-game/src/app/util/playSound.ts      | 34 ++++++++++-------
 5 files changed, 57 insertions(+), 62 deletions(-)
 create mode 100644 workspaces/simon-game/src/app/util/playNote.ts

diff --git a/workspaces/simon-game/src/app/components/App.tsx b/workspaces/simon-game/src/app/components/App.tsx
index 9a2a0ed5..4a5c06dc 100644
--- a/workspaces/simon-game/src/app/components/App.tsx
+++ b/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>
   );
 }
diff --git a/workspaces/simon-game/src/app/components/Box.tsx b/workspaces/simon-game/src/app/components/Box.tsx
index 5c9194e5..64e989ab 100644
--- a/workspaces/simon-game/src/app/components/Box.tsx
+++ b/workspaces/simon-game/src/app/components/Box.tsx
@@ -5,7 +5,7 @@ type Props = {
   height?: number;
   width?: number;
   margin?: number;
-  handleClick: () => void;
+  onClick: () => void;
 };
 
 export function Box({
@@ -13,20 +13,20 @@ export function Box({
   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}
     />
   );
 }
diff --git a/workspaces/simon-game/src/app/constants.ts b/workspaces/simon-game/src/app/constants.ts
index ff3d3842..2d77a27c 100644
--- a/workspaces/simon-game/src/app/constants.ts
+++ b/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,
+    },
+  ],
 };
diff --git a/workspaces/simon-game/src/app/util/playNote.ts b/workspaces/simon-game/src/app/util/playNote.ts
new file mode 100644
index 00000000..245e04f3
--- /dev/null
+++ b/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);
diff --git a/workspaces/simon-game/src/app/util/playSound.ts b/workspaces/simon-game/src/app/util/playSound.ts
index 1b1cd78b..0e3c13db 100644
--- a/workspaces/simon-game/src/app/util/playSound.ts
+++ b/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);
 };

From ee9ac117fedf1952698083129b3ad9ac5f98daa2 Mon Sep 17 00:00:00 2001
From: Eli Manzo <96manzo.eli@gmail.com>
Date: Tue, 29 Oct 2024 23:40:55 -0700
Subject: [PATCH 10/12] chore: added missing file changes

---
 workspaces/simon-game/src/app/constants.ts      | 2 +-
 workspaces/simon-game/src/app/util/playSound.ts | 7 ++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/workspaces/simon-game/src/app/constants.ts b/workspaces/simon-game/src/app/constants.ts
index 2d77a27c..59317da3 100644
--- a/workspaces/simon-game/src/app/constants.ts
+++ b/workspaces/simon-game/src/app/constants.ts
@@ -1,7 +1,7 @@
 export const config = {
   soundDurationMs: 300,
   volumePct: 0.1,
-  buttons: [
+  boxes: [
     {
       color: "red",
       frequency: 261.63,
diff --git a/workspaces/simon-game/src/app/util/playSound.ts b/workspaces/simon-game/src/app/util/playSound.ts
index 0e3c13db..8bd61aef 100644
--- a/workspaces/simon-game/src/app/util/playSound.ts
+++ b/workspaces/simon-game/src/app/util/playSound.ts
@@ -6,7 +6,7 @@ let audioContext: AudioContext | null = null;
  * @param context - The audio context to use for generating the sound.
  * @param frequency - The frequency of the sound in Hertz
  * @param durationMs - The duration of the sound in milliseconds.
- * @param volume - The volume of the sound, typically between 0 and 1.
+ * @param volumePct - The volume of the sound, typically between 0 and 1.
  */
 export const playSound = (
   frequency: number,
@@ -34,10 +34,7 @@ export const playSound = (
   gainNode.gain.setValueAtTime(volumePct, audioContext.currentTime);
 
   // Creates the smooth fades-in / fade-out sound effect (Avoids the popping sounds)
-  gainNode.gain.linearRampToValueAtTime(
-    volumePct,
-    audioContext.currentTime + 0.01,
-  );
+  gainNode.gain.linearRampToValueAtTime(volumePct, audioContext.currentTime + 0.01);
   gainNode.gain.linearRampToValueAtTime(
     0,
     audioContext.currentTime + durationMs / 1000 - 0.01,

From 68fbb845df032d1874fd4526bf2a6e78727cc52f Mon Sep 17 00:00:00 2001
From: Eli Manzo <96manzo.eli@gmail.com>
Date: Wed, 30 Oct 2024 00:16:14 -0700
Subject: [PATCH 11/12] fix: fixing lint

---
 workspaces/simon-game/src/app/util/playSound.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/workspaces/simon-game/src/app/util/playSound.ts b/workspaces/simon-game/src/app/util/playSound.ts
index 8bd61aef..a8e215bd 100644
--- a/workspaces/simon-game/src/app/util/playSound.ts
+++ b/workspaces/simon-game/src/app/util/playSound.ts
@@ -34,7 +34,10 @@ export const playSound = (
   gainNode.gain.setValueAtTime(volumePct, audioContext.currentTime);
 
   // Creates the smooth fades-in / fade-out sound effect (Avoids the popping sounds)
-  gainNode.gain.linearRampToValueAtTime(volumePct, audioContext.currentTime + 0.01);
+  gainNode.gain.linearRampToValueAtTime(
+    volumePct,
+    audioContext.currentTime + 0.01,
+  );
   gainNode.gain.linearRampToValueAtTime(
     0,
     audioContext.currentTime + durationMs / 1000 - 0.01,

From f54e08d420f20376bb492b261f15f6ca60316036 Mon Sep 17 00:00:00 2001
From: Eli Manzo <96manzo.eli@gmail.com>
Date: Thu, 31 Oct 2024 14:53:31 -0700
Subject: [PATCH 12/12] chore: apply pr feedback

---
 .../simon-game/src/app/util/playNote.ts       |  3 ++-
 .../simon-game/src/app/util/playSound.ts      | 22 +++++++++++--------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/workspaces/simon-game/src/app/util/playNote.ts b/workspaces/simon-game/src/app/util/playNote.ts
index 245e04f3..f33e716a 100644
--- a/workspaces/simon-game/src/app/util/playNote.ts
+++ b/workspaces/simon-game/src/app/util/playNote.ts
@@ -1,5 +1,6 @@
 import { config } from "../constants.ts";
 import { playSound } from "./playSound.ts";
 
-export const playNote = (freq: number) =>
+export function playNote(freq: number): void {
   playSound(freq, config.soundDurationMs, config.volumePct);
+}
diff --git a/workspaces/simon-game/src/app/util/playSound.ts b/workspaces/simon-game/src/app/util/playSound.ts
index a8e215bd..5c37e4be 100644
--- a/workspaces/simon-game/src/app/util/playSound.ts
+++ b/workspaces/simon-game/src/app/util/playSound.ts
@@ -1,5 +1,9 @@
+import { MS_IN_SEC } from "@code-chronicles/util/timeConstants";
+
 let audioContext: AudioContext | null = null;
 
+const FADE_DURATION = 0.01;
+
 /**
  * Plays a sound using the Web Audio API.
  *
@@ -8,21 +12,21 @@ let audioContext: AudioContext | null = null;
  * @param durationMs - The duration of the sound in milliseconds.
  * @param volumePct - The volume of the sound, typically between 0 and 1.
  */
-export const playSound = (
+export function playSound(
   frequency: number,
   durationMs: number,
   volumePct: number,
-) => {
+): void {
   if (frequency <= 0) {
-    throw new Error("Frequency must be a positive number.");
+    throw new RangeError("Frequency must be a positive number.");
   }
 
   if (durationMs <= 0) {
-    throw new Error("Duration must be a positive number.");
+    throw new RangeError("Duration must be a positive number.");
   }
 
   if (volumePct < 0 || volumePct > 1) {
-    throw new Error("Volume must be between 0 and 1.");
+    throw new RangeError("Volume must be between 0 and 1.");
   }
 
   audioContext ??= new AudioContext();
@@ -36,16 +40,16 @@ export const playSound = (
   // Creates the smooth fades-in / fade-out sound effect (Avoids the popping sounds)
   gainNode.gain.linearRampToValueAtTime(
     volumePct,
-    audioContext.currentTime + 0.01,
+    audioContext.currentTime + FADE_DURATION,
   );
   gainNode.gain.linearRampToValueAtTime(
     0,
-    audioContext.currentTime + durationMs / 1000 - 0.01,
+    audioContext.currentTime + durationMs / MS_IN_SEC - FADE_DURATION,
   );
 
   oscillatorNode.connect(gainNode);
   gainNode.connect(audioContext.destination);
 
   oscillatorNode.start();
-  oscillatorNode.stop(audioContext.currentTime + durationMs / 1000);
-};
+  oscillatorNode.stop(audioContext.currentTime + durationMs / MS_IN_SEC);
+}