From 3863a530780f5fd0e538b78f489372f3b44298e2 Mon Sep 17 00:00:00 2001
From: Cyril Gourgouillon <cyrilgour@gmail.com>
Date: Tue, 19 Dec 2023 16:47:18 -0500
Subject: [PATCH] Add colors (#34)

---
 src/components/NotesList.tsx     | 12 +++++++-----
 src/components/NotesSettings.tsx | 22 +++++++++++++++-------
 src/config/Notes.ts              | 20 ++++++++++++++++++++
 src/contexts/NoteContext.tsx     | 10 ++++++++++
 src/pages/NotesPage.tsx          |  4 ++--
 5 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/src/components/NotesList.tsx b/src/components/NotesList.tsx
index 26bdb98..b9b173b 100644
--- a/src/components/NotesList.tsx
+++ b/src/components/NotesList.tsx
@@ -1,25 +1,27 @@
-import { Note } from "../config";
+import { Note, noteColors } from '../config';
 
 export const NotesList = ({
   notes,
   GuitarStringDecorator,
   onClick,
+  isColored,
 }: {
   notes: Note[];
   GuitarStringDecorator?: React.ReactNode;
   onClick?: () => void;
+  isColored: boolean;
 }) => {
   return (
     <>
-      <div className="text-[25px] md:text-[25px] font-bold text-neutral-500">
-        {GuitarStringDecorator}
-      </div>
+      <div className="text-[25px] md:text-[25px] font-bold text-neutral-500">{GuitarStringDecorator}</div>
       <div
         onClick={onClick}
         className="flex flex-col flex-wrap md:flex-row md:gap-7 text-[35px] md:text-[75px] mb-6 font-bold cursor-pointer select-none"
       >
         {notes.map((note: Note, index: number) => (
-          <div key={index}>{note}</div>
+          <>
+            <div className={isColored ? noteColors[note] : ''} key={index}>{note}</div>
+          </>
         ))}
       </div>
     </>
diff --git a/src/components/NotesSettings.tsx b/src/components/NotesSettings.tsx
index 1ea8c93..5bb9372 100644
--- a/src/components/NotesSettings.tsx
+++ b/src/components/NotesSettings.tsx
@@ -8,7 +8,8 @@ import {
   PopoverBody,
   PopoverTrigger,
 } from '@chakra-ui/react';
-import { FaMinus, FaPlus } from 'react-icons/fa';
+import { FaMinus, FaPlus, FaGuitar } from 'react-icons/fa';
+import { BiSolidColor } from "react-icons/bi";
 import { MdBuild } from 'react-icons/md';
 import { NOTES_LIST_MIN, NOTES_LIST_MAX } from '../config/constants';
 import { AutoSkipper } from './AutoSkipper';
@@ -16,7 +17,7 @@ import { useNoteSettingsContext } from '../hooks';
 import { NoteSelector } from '.';
 
 export const NotesSettings = () => {
-  const { numberOfNoteDisplayed, getRandomNotesOnClick, changeNumberOfNoteDisplayed, toggleStringVisible } =
+  const { numberOfNoteDisplayed, getRandomNotesOnClick, changeNumberOfNoteDisplayed, toggleStringVisible, toggleColorVisible } =
     useNoteSettingsContext();
 
   return (
@@ -30,14 +31,16 @@ export const NotesSettings = () => {
         <PopoverArrow />
         <PopoverBody>
           <div className="flex flex-col gap-3 items-stretch w-full">
-            <ButtonGroup variant='outline' className="flex flex-row items-stretch justify-stretch">
+            <ButtonGroup variant="outline" className="flex flex-row items-stretch justify-stretch">
               <IconButton
                 aria-label="minus"
                 icon={<FaMinus />}
                 onClick={() => changeNumberOfNoteDisplayed(-1)}
                 disabled={numberOfNoteDisplayed === NOTES_LIST_MIN}
               />
-              <Button className='flex-grow' onClick={getRandomNotesOnClick}>Generate list of {numberOfNoteDisplayed} notes</Button>
+              <Button className="flex-grow" onClick={getRandomNotesOnClick}>
+                Generate list of {numberOfNoteDisplayed} notes
+              </Button>
               <IconButton
                 aria-label="plus"
                 icon={<FaPlus />}
@@ -45,9 +48,14 @@ export const NotesSettings = () => {
                 disabled={numberOfNoteDisplayed === NOTES_LIST_MAX}
               />
             </ButtonGroup>
-            <Button variant="outline" leftIcon={<MdBuild />} onClick={toggleStringVisible}>
-              Toggle string complexity
-            </Button>
+            <ButtonGroup variant="outline" className="flex flex-row items-stretch justify-stretch">
+              <Button className="flex-grow" variant="outline" leftIcon={<FaGuitar />} onClick={toggleStringVisible}>
+                Toggle string
+              </Button>
+              <Button className="flex-grow" variant="outline" leftIcon={<BiSolidColor />} onClick={toggleColorVisible}>
+                Toggle color
+              </Button>
+            </ButtonGroup>
             <NoteSelector />
             <AutoSkipper />
           </div>
diff --git a/src/config/Notes.ts b/src/config/Notes.ts
index 7ddfd33..d0a11c8 100644
--- a/src/config/Notes.ts
+++ b/src/config/Notes.ts
@@ -19,3 +19,23 @@ export const notes = [
 ] as const;
 
 export type Note = typeof notes[number];
+
+export const noteColors: Record<Note, string> = {
+  C: 'text-[#DA2A51]',
+  'C#': 'text-[#02AD9A]',
+  Db: 'text-[#02AD9A]',
+  D: 'text-[#F5892E]',
+  'D#': 'text-[#446BB1]',
+  Eb: 'text-[#446BB1]',
+  E: 'text-[#F3DD19]',
+  F: 'text-[#AE2C93]',
+  'F#': 'text-[#46B855]',
+  Gb: 'text-[#46B855]',
+  G: 'text-[#EE572E]',
+  'G#': 'text-[#019DDB]',
+  Ab: 'text-[#019DDB]',
+  A: 'text-[#FABD20]',
+  'A#': 'text-[#87499B]',
+  Bb: 'text-[#87499B]',
+  B: 'text-[#ACCF45]',
+};
diff --git a/src/contexts/NoteContext.tsx b/src/contexts/NoteContext.tsx
index 24c604c..5d89441 100644
--- a/src/contexts/NoteContext.tsx
+++ b/src/contexts/NoteContext.tsx
@@ -14,10 +14,12 @@ interface NoteSettingsContextProps {
   setAvailableNotes: Dispatch<SetStateAction<Note[]>>
   numberOfNoteDisplayed: number;
   isStringVisible: boolean;
+  isColorVisible: boolean;
   guitarString: GuitarString;
   getRandomNotesOnClick: () => void;
   changeNumberOfNoteDisplayed: (step: number) => void;
   toggleStringVisible: () => void;
+  toggleColorVisible: () => void;
 }
 
 export const NoteSettingsContext = createContext<
@@ -41,6 +43,8 @@ export const NoteSettingsContextProvider = ({
     getRandomString()
   );
 
+  const [isColorVisible, setIsColorVisible] = useState(false);
+
   const { speed, secondsElapsed, resetSecondsElapsed } = useSpeedContext();
 
   const changeNumberOfNoteDisplayed = (step: number) => {
@@ -57,6 +61,10 @@ export const NoteSettingsContextProvider = ({
     setIsStringVisible((prevState: boolean) => !prevState);
   };
 
+  const toggleColorVisible = () => {
+    setIsColorVisible((prevState: boolean) => !prevState);
+  };
+
   const getRandomNotesOnClick = useCallback(() => {
     setNotes(getListOfRandomNotes(numberOfNoteDisplayed, availableNotes));
     setGuitarString(getRandomString());
@@ -82,10 +90,12 @@ export const NoteSettingsContextProvider = ({
         setAvailableNotes,
         numberOfNoteDisplayed,
         isStringVisible,
+        isColorVisible,
         guitarString,
         getRandomNotesOnClick,
         changeNumberOfNoteDisplayed,
         toggleStringVisible,
+        toggleColorVisible,
       }}
     >
       {children}
diff --git a/src/pages/NotesPage.tsx b/src/pages/NotesPage.tsx
index f2c7cdb..f82ea31 100644
--- a/src/pages/NotesPage.tsx
+++ b/src/pages/NotesPage.tsx
@@ -2,7 +2,7 @@ import { NotesList, NotesSettings, TimerCue } from '../components';
 import { useNoteSettingsContext, useSpaceBarEffect, useSpeedContext } from '../hooks';
 
 export const NotesPage = () => {
-  const { notes, isStringVisible, guitarString, getRandomNotesOnClick } = useNoteSettingsContext();
+  const { notes, isStringVisible, guitarString, getRandomNotesOnClick, isColorVisible } = useNoteSettingsContext();
   const { resetSecondsElapsed } = useSpeedContext();
 
   const handleNotesListOnClick = () => {
@@ -20,7 +20,7 @@ export const NotesPage = () => {
     <div className="h-full flex flex-col items-center justify-center">
       <div className="w-screen flex items-center justify-center">
         <div className="flex flex-col items-center">
-          <NotesList notes={notes} GuitarStringDecorator={GuitarStringDecorator} onClick={handleNotesListOnClick} />
+          <NotesList notes={notes} GuitarStringDecorator={GuitarStringDecorator} onClick={handleNotesListOnClick} isColored={isColorVisible} />
           <TimerCue />
           <NotesSettings />
         </div>