Merge branch 'main' of https://github.com/cyrilgourgouillon/random-notes

cyrilgourgouillon · Dec 19, 2023 · a188eb9 · a188eb9
2 parents 0f2a2c7 + 3863a53
commit a188eb9
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 14 deletions.
diff --git 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
@@ -8,15 +8,16 @@ 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';
 import { useNoteSettingsContext } from '../hooks';
 import { NoteSelector } from '.';
 
 export const NotesSettings = () => {
-  const { numberOfNoteDisplayed, getRandomNotesOnClick, changeNumberOfNoteDisplayed, toggleStringVisible } =
+  const { numberOfNoteDisplayed, getRandomNotesOnClick, changeNumberOfNoteDisplayed, toggleStringVisible, toggleColorVisible } =
     useNoteSettingsContext();
 
   return (
@@ -30,24 +31,31 @@ 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 />}
                 onClick={() => changeNumberOfNoteDisplayed(1)}
                 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
@@ -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
@@ -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
@@ -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>