Add random shape to chords (#14)

src/components/ChordsList/ChordsList.tsx

@@ -1,12 +1,23 @@
 import { Chord } from "../../config";
 import { chordToString } from "../../services/chordService";
 
-export const ChordsList = ({ chords }: { chords: Chord[] }) => {
+export const ChordsList = ({
+  chords,
+  ShapeDecorator,
+}: {
+  chords: Chord[];
+  ShapeDecorator?: React.ReactNode;
+}) => {
   return (
-    <div className="flex flex-col md:flex-row md:gap-7 text-[35px] md:text-[75px] mb-6 font-bold">
-      {chords.map((chord: Chord, index: number) => (
-        <div key={index}>{chordToString(chord)}</div>
-      ))}
-    </div>
+    <>
+      <div className="text-[25px] md:text-[25px] font-bold text-neutral-500">
+        {ShapeDecorator}
+      </div>
+      <div className="flex flex-col md:flex-row md:gap-7 text-[35px] md:text-[75px] mb-6 font-bold">
+        {chords.map((chord: Chord, index: number) => (
+          <div key={index}>{chordToString(chord)}</div>
+        ))}
+      </div>
+    </>
   );
 };

src/config/Caged.ts

@@ -0,0 +1,13 @@
+import { Notes } from ".";
+
+export enum Caged {
+  Shape1 = `Shape ${Notes.C}`,
+  Shape2 = `Shape ${Notes.A}`,
+  Shape3 = `Shape ${Notes.G}`,
+  Shape4 = `Shape ${Notes.E}`,
+  Shape5 = `Shape ${Notes.D}`,
+}
+
+export type CagedType = keyof typeof Caged;
+
+export const cagedNotes = Object.values(Caged) as unknown as CagedType[];

src/config/index.ts

@@ -2,3 +2,4 @@ export * from "./Notes";
 export * from "./GuitarStrings";
 export * from "./Chords";
 export * from "./AppPages";
+export * from "./Caged";

src/pages/ChordsPage.tsx

@@ -5,24 +5,39 @@ import { FaPlus, FaMinus } from "react-icons/fa";
 
 import { ChordsList } from "../components";
 
-import { getListOfRandomChords, isValidChordCountList } from "../services";
+import {
+  getListOfRandomChords,
+  getRandomNoteFromCaged,
+  isValidChordCountList,
+} from "../services";
 import {
   DEFAULT_NUMBER_OF_CHORD,
   CHORDS_LIST_MAX,
   CHORDS_LIST_MIN,
 } from "../config/constants";
+import { CagedType } from "../config";
+import { MdBuild } from "react-icons/md";
 
 export const ChordsPage = () => {
   const [chords, setChords] = useState(
     getListOfRandomChords(DEFAULT_NUMBER_OF_CHORD)
   );
+  const [isShapeVisible, setIsShapeVisible] = useState(false);
+  const [cagedPosition, setCagedPosition] = useState<CagedType>(
+    getRandomNoteFromCaged()
+  );
 
   const [numberOfChordDisplayed, setNumberOfChordDisplayed] = useState(
     DEFAULT_NUMBER_OF_CHORD
   );
 
+  const toggleCagedVisible = () => {
+    setIsShapeVisible((prevState: boolean) => !prevState);
+  };
+
   const handleGetRandomChordOnClick = () => {
     setChords(getListOfRandomChords(numberOfChordDisplayed));
+    setCagedPosition(getRandomNoteFromCaged());
   };
 
   const handleChangeNumberOfChordDisplayed = (step: number) => {
@@ -35,12 +50,18 @@ export const ChordsPage = () => {
     });
   };
 
+  const ShapeDecorator: React.ReactNode = (
+    <div className={`${isShapeVisible ? "" : "invisible"}`}>
+      {cagedPosition}
+    </div>
+  );
+
   return (
     <div className="h-full flex flex-col items-center justify-center">
       <div className="text-lg font-semibold mb-10">RANDOM CHORDS GENERATOR</div>
       <div className="w-screen flex items-center justify-center">
         <div className="flex flex-col items-center">
-          <ChordsList chords={chords} />
+          <ChordsList chords={chords} ShapeDecorator={ShapeDecorator} />
           <div className="flex flex-col gap-1">
             <div className="flex gap-1">
               <IconButton
@@ -61,6 +82,13 @@ export const ChordsPage = () => {
                 disabled={numberOfChordDisplayed === CHORDS_LIST_MAX}
               />
             </div>
+            <Button
+              leftIcon={<MdBuild />}
+              variant="outline"
+              onClick={toggleCagedVisible}
+            >
+              Toggle shape complexity
+            </Button>
           </div>
         </div>
       </div>

src/services/noteService.ts

@@ -1,4 +1,5 @@
-import { Note, notes } from "../config";
+import { Note, notes, cagedNotes } from "../config";
+import { CagedType } from "../config/Caged";
 import { NOTES_LIST_MAX, NOTES_LIST_MIN } from "../config/constants";
 import { getRandomItemFrom } from "../utils/random";
 import { shuffle } from "../utils/shuffle";
@@ -16,3 +17,7 @@ export const isValidNoteCountList = (count: number): boolean => {
 export const getRandomNote = (): Note => {
   return getRandomItemFrom(notes);
 };
+
+export const getRandomNoteFromCaged = (): CagedType => {
+  return getRandomItemFrom(cagedNotes);
+}