Additional chord options, some instructional text

src/App.css

@@ -3,8 +3,8 @@
 #root {
   max-width: 1280px;
   width: 100%;
-  margin: 0 auto;
-  padding: 2rem;
+  /* margin: 0 auto;
+  padding: 2rem; */
   text-align: center;
   background-color: indigo;
 }
@@ -108,6 +108,16 @@ sl-button:hover>sl-icon {
   text-align: center;
 }
 
+.hint {
+  background-color: hsla(220, 100%, 30%, .8);
+  border-radius: 25%;
+  padding: 8px;
+  margin: 8px;
+
+  p {
+    margin: 2px;
+  }
+}
 /* .form-control__label {
   color: white;
 }
@@ -121,8 +131,16 @@ sl-select::part(base) {
   color: white
 }
 
+.step {
+  background-color: hsla(220, 100%, 30%, .8);
+  border-radius: 10%;
+  padding: 8px;
+  margin: 8px;
+}
+
 .main {
-  background-color: hsla(220, 100%, 30%, .9);
+  background-image: url(assets/freepik_ocean_background.jpg);
+  background-size: cover;
   /* max-height: 100vh; */
   min-height: 400px;
   min-width: 100%;
@@ -258,8 +276,10 @@ sl-tab[active]::part(base) {
 
 .beat-select {
   display: flex;
-  justify-content: space-between;
-  width: 100%;
+  justify-content: center;
+  flex-wrap: wrap;
+  /* width: 100%; */
+  flex: auto auto;
   flex-direction: row;
   padding: 16px;
   align-items: center;

src/components/AllSteps.tsx

@@ -12,7 +12,7 @@ import { useDrumPart } from "../hooks/useDrumPart"
 import { useDrumSampler } from '../hooks/useDrumSampler';
 import { useChordSynth } from "../hooks/useChordSynth"
 import { ChordSymbol, INITIAL_CHORD_LIST } from "../utils/basicChords"
-import { ChordPattern } from "../utils/chordPatterns"
+import { ArpPattern, ChordPattern } from "../utils/chordPatterns"
 import { useChordPart } from "../hooks/useChordPart"
 import { ChordStep } from "./ChordStep"
 import { NewSongStep } from "./NewSongStep"
@@ -36,9 +36,10 @@ export const AllSteps = () => {
 
     const chordSynth = useChordSynth(isStarted)
     const [chordList, setChordList] = React.useState<ChordSymbol[]>(INITIAL_CHORD_LIST)
+    const [useSeventh, setUseSeventh] = React.useState<boolean[]>(Array.from({length: INITIAL_CHORD_LIST.length}, () => false))
     const [chordPattern, setChordPattern] = React.useState<ChordPattern>('DDDD')
-
-    useChordPart({ chordList, chordPattern, chordSynth, isStarted, playChords: areChordsEnabled })
+    const [arpPattern, setArpPattern] = React.useState<ArpPattern | false>(false)
+    useChordPart({ chordList, chordPattern, arpPattern, chordSynth, isStarted, playChords: areChordsEnabled, useSeventh })
 
     return (
         <>
@@ -62,6 +63,10 @@ export const AllSteps = () => {
                             setChordList={setChordList}
                             chordPattern={chordPattern}
                             setChordPattern={setChordPattern}
+                            arpPattern={arpPattern}
+                            setArpPattern={setArpPattern}
+                            useSeventh={useSeventh}
+                            setUseSeventh={setUseSeventh}
                         />
                     }
                 </main>

src/components/ChordPatternSelector.tsx

@@ -16,8 +16,8 @@ export const ChordPatternSelector = (props: Props) => {
         return <SlIcon key={`${selectedPattern}-${i}`} name={c === 'x' ? "music-note" : "circle"}></SlIcon>
     })
     return <div className="rhythm-preset-select">
-        <h3 style={{ marginBottom: 0 }}>❔↓ Mix It Up ↓❔</h3>
-        <SlButton onClick={() => {
+        {/* <h3 style={{ marginBottom: 0 }}>❔↓ Mix It Up ↓❔</h3> */}
+        <SlButton size="small" onClick={() => {
             setSelectedPattern((prevPattern) => {
                 const prevIndex = CHORD_PATTERNS_LIST.indexOf(prevPattern)
                 const nextIndex = prevIndex + 1 < CHORD_PATTERNS_LIST.length ? prevIndex + 1 : 0

src/components/ChordStep.tsx

@@ -1,25 +1,89 @@
+import SlButton from "@shoelace-style/shoelace/dist/react/button/index.js";
+import SlIcon from "@shoelace-style/shoelace/dist/react/icon/index.js"
+
 import { ChordSymbol } from "../utils/basicChords"
-import { ChordPattern } from "../utils/chordPatterns"
+import { ArpPattern, ChordPattern } from "../utils/chordPatterns"
 import { OctoStage } from "./canvas/OctoStage"
+import { ChordPatternSelector } from "./ChordPatternSelector";
+import { ArpPatternSelector } from "./ArpPatternSelector";
 
 type ChordStepProps = {
     chordList: ChordSymbol[]
     setChordList: React.Dispatch<React.SetStateAction<ChordSymbol[]>>
     chordPattern: ChordPattern
     setChordPattern: React.Dispatch<React.SetStateAction<ChordPattern>>
+    useSeventh: boolean[]
+    setUseSeventh: React.Dispatch<React.SetStateAction<boolean[]>>
+    arpPattern: ArpPattern
+    setArpPattern: React.Dispatch<React.SetStateAction<ArpPattern>>
 }
 
-export const ChordStep = ({ chordList, setChordList }: ChordStepProps) => {
+export const ChordStep = ({ chordList, setChordList, chordPattern, setChordPattern, arpPattern, setArpPattern, useSeventh, setUseSeventh }: ChordStepProps) => {
     return (
         <div>
             <h3 className="step-header"><span className="step-num">Step 3</span>: Chords</h3>
-            <p>
-                Each has a different mood
-            </p>
+            <div className="hint">
+
+                <p>
+                    Chords are sets of notes played together
+                </p>
+                <p>
+                    Different types have different feelings
+                </p>
+                <p>
+                    Try the arrows
+                </p>
+            </div>
+
+
             <OctoStage
                 chordList={chordList}
                 setChordList={setChordList}
+                useSeventh={useSeventh}
+                setUseSeventh={setUseSeventh}
             />
+            <div className="hint">
+                <div style={{ display: 'flex', justifyContent: 'center', gap: 4 }}>
+
+                    <SlButton
+                        size="small"
+                        onClick={() => {
+                            const newList = [...chordList]
+                            newList.pop()
+                            setChordList(newList)
+                        }}
+                    >
+                        <SlIcon slot="prefix" name="dash-lg"></SlIcon>
+                    </SlButton>
+                    {chordList.length} Bars
+                    <SlButton
+                        size="small"
+                        onClick={() => {
+                            // getTransport().loopEnd = `${chordList.length - 1}m`
+                            setChordList([...chordList, 'I'])
+                        }}
+                    >
+                        <SlIcon slot="prefix" name="plus-lg"></SlIcon>
+                    </SlButton>
+
+                </div>
+            </div>
+            <div className="hint">
+
+                <p>These change how the chords are played</p>
+                <div style={{ display: 'flex', justifyContent: 'space-around' }}>
+
+                    <ChordPatternSelector
+                        selectedPattern={chordPattern}
+                        setSelectedPattern={setChordPattern}
+                    />
+                    <ArpPatternSelector
+                        selectedArp={arpPattern}
+                        setSelectedArp={setArpPattern}
+                    />
+                </div>
+
+            </div>
         </div>
     )
 }

src/components/DrumStep.tsx

@@ -24,7 +24,7 @@ export const DrumStep = (props: DrumStepProps) => {
 
 
     return (
-        <div>
+        <div className="step">
             <h2 style={{ margin: 0 }}>
                 ✨Help the Octopus Make A New Song✨
             </h2>

src/components/NewSongStep.tsx

@@ -14,7 +14,7 @@ import { getContext, getTransport } from "tone";
 export const NewSongStep = () => {
     const dispatch = useContext(WorkflowDispatchContext)
 
-    return <div>
+    return <div className="step">
         <h2 style={{ margin: 0 }}>
             ✨Help the Octopus Make A New Song✨
         </h2>

src/components/canvas/Chords.tsx

@@ -3,17 +3,20 @@ import { HEIGHT, WIDTH } from "./constants"
 import { ComponentProps, useCallback, useState } from "react"
 
 import '@pixi/events'
-import { CHORD_TO_EMOJI, CHORD_TO_EMOJI_SIZE, CHORD_TO_MOOD_IMAGE, ChordSymbol, MOVE_CHORD_LEFT, MOVE_CHORD_MOOD, MOVE_CHORD_RIGHT } from "../../utils/basicChords"
+import { CHORD_TO_EMOJI, CHORD_TO_EMOJI_SIZE, CHORD_TO_HUE, CHORD_TO_MOOD_IMAGE, ChordSymbol, MOVE_CHORD_LEFT, MOVE_CHORD_MOOD, MOVE_CHORD_RIGHT } from "../../utils/basicChords"
 import { Arc, Point } from "@flatten-js/core"
 import { TextStyle } from "pixi.js"
 
 type ChordSetProps = {
     chordList: ChordSymbol[]
     setChordList: React.Dispatch<React.SetStateAction<ChordSymbol[]>>
+
+    useSeventh: boolean[]
+    setUseSeventh: React.Dispatch<React.SetStateAction<boolean[]>>
 }
 
 export const Chords = (props: ChordSetProps) => {
-    const { chordList, setChordList } = props
+    const { chordList, setChordList, useSeventh, setUseSeventh } = props
     const totalChords = chordList.length
 
     const getUpdateChordInListFunction = (i: number) => {
@@ -25,6 +28,18 @@ export const Chords = (props: ChordSetProps) => {
             })
         }
     }
+
+    const getUpdateSeventhInListFunction = (i: number) => {
+        return () => {
+            setUseSeventh((prevList) => {
+                const newList = [...prevList]
+                newList[i] = !newList[i]
+                console.log(newList)
+                return newList
+            })
+        }
+    }
+
     return (
         <Container
             x={WIDTH / 2}
@@ -36,8 +51,10 @@ export const Chords = (props: ChordSetProps) => {
                     index={i}
                     key={`${c}-${i}`}
                     chord={c}
+                    useSeventh={useSeventh[i]}
                     totalChords={totalChords}
                     setChord={getUpdateChordInListFunction(i)}
+                    setSeventh={getUpdateSeventhInListFunction(i)}
                 />
             )}
             {/* {_.times(totalChords, (i) => <Chord index={i} key={i} totalChords={totalChords} />)} */}
@@ -47,16 +64,17 @@ export const Chords = (props: ChordSetProps) => {
 
 const RADIUS = 200
 
-
 type ChordProps = {
     chord: ChordSymbol
+    useSeventh: boolean
     setChord: (c: ChordSymbol) => void;
+    setSeventh: () => void;
     index: number
     totalChords: number
 }
 
 type GraphicsArg = Parameters<NonNullable<React.ComponentProps<typeof Graphics>["draw"]>>[0]
-export const Chord = ({ chord, setChord, index, totalChords }: ChordProps) => {
+export const Chord = ({ chord, useSeventh, setChord, setSeventh, index, totalChords }: ChordProps) => {
     // const progressThrough = index / totalChords
     const ellipsisRatio = Math.min(WIDTH, HEIGHT) / Math.max(WIDTH, HEIGHT)
     const xRatio = WIDTH > HEIGHT ? 1 : ellipsisRatio
@@ -75,6 +93,7 @@ export const Chord = ({ chord, setChord, index, totalChords }: ChordProps) => {
     // const b = Math.cos(Math.PI * progressThrough * 2) * (RADIUS * -1 * yRatio)
 
     const draw = useCallback((g: GraphicsArg) => {
+        const hue = CHORD_TO_HUE[chord]
         const halfAngle = (1 / totalChords) * Math.PI
         const startOffset = Math.PI / 4
         const startAngle = ((index / totalChords) * Math.PI * 2) - halfAngle - startOffset
@@ -83,15 +102,15 @@ export const Chord = ({ chord, setChord, index, totalChords }: ChordProps) => {
         // console.log(`Start: ${startAngle}, End: ${endAngle}`)
         g.clear()
         g.lineStyle(1, "white")
-        g.alpha = .5
+        g.alpha = .7
         g.arc(0, 0, RADIUS / 2, startAngle, endAngle)
 
-        // g.beginFill(['green', 'yellow', 'red', 'blue'][index])
+        g.beginFill(`hsl(${hue}deg 90% 60%)`)
 
         g.arc(0, 0, RADIUS + 50, endAngle, startAngle, true)
         g.arc(0, 0, RADIUS / 2, startAngle, endAngle)
         g.endFill()
-    }, [index, totalChords])
+    }, [chord, index, totalChords])
 
     const [hoverLeft, setHoverLeft] = useState(false)
     const [hoverRight, setHoverRight] = useState(false)
@@ -124,7 +143,7 @@ export const Chord = ({ chord, setChord, index, totalChords }: ChordProps) => {
             >
 
 
-                <Text
+                {/* <Text
                     text={chord}
                     x={0}
                     y={-50}
@@ -139,15 +158,16 @@ export const Chord = ({ chord, setChord, index, totalChords }: ChordProps) => {
                         stroke: '#ffffff',
                         fill: ['#ffffff', '#eeeeee']
                     } as ComponentProps<typeof Text>['style']}
-                />
+                /> */}
                 <Text
                     text={CHORD_TO_EMOJI[chord]}
                     x={0}
                     y={0}
                     anchor={0.5}
+                    angle={useSeventh ? 15 : 0}
                     eventMode='static'
                     pointerdown={() => {
-                        console.log(index)
+                        setSeventh()
                     }}
 
                     style={{

src/components/canvas/Octo.tsx

@@ -23,15 +23,16 @@ export const Octo = () => {
             zIndex={ZINDEX.OCTOPUS}
             >
             <Text
-                text="⬆"
+                text="▲"
                 // y={HEIGHT / 2 - 50}
-                y={-75}
+                y={-50}
                 anchor={0.5}
                 eventMode='static'
                 style={{
-                    fontSize: 48,
+                    fontSize: 32,
                     stroke: '#ffffff',
-                    fill: ['#ffffff', '#eeeeee']
+                    fill: '#ffffff',
+                    // fill: ['#ffffff', '#eeeeee']
                 } as ComponentProps<typeof Text>['style']}
             />
             <Text

src/components/canvas/OctoStage.tsx

@@ -9,18 +9,24 @@ import { ChordSymbol } from '../../utils/basicChords';
 type OctoStageProps = {
     chordList: ChordSymbol[]
     setChordList: React.Dispatch<React.SetStateAction<ChordSymbol[]>>
-}
-export const OctoStage = ({chordList, setChordList}: OctoStageProps) => {
 
+    useSeventh: boolean[]
+    setUseSeventh: React.Dispatch<React.SetStateAction<boolean[]>>
+}
+export const OctoStage = ({ chordList, setChordList, useSeventh, setUseSeventh }: OctoStageProps) => {
+    // const scale = window.innerHeight < 900 ? 0.75 : 1;
     return (
         <Stage
             width={WIDTH}
             height={HEIGHT}
-            options={{ background: 'hsla(220, 100%, 30%, .9)' }}
+            options={{ background: 'transparent', backgroundAlpha: 0 }}
         >
             <Container sortableChildren>
-                <Octo /> 
-                <Chords chordList={chordList} setChordList={setChordList} />
+                {/* <Container anchor={0.5} x={(WIDTH * scale) / 2} y={(HEIGHT * scale) / 2}> */}
+                <Octo />
+                <Chords chordList={chordList} setChordList={setChordList} useSeventh={useSeventh} setUseSeventh={setUseSeventh} />
+                {/* </Container> */}
+
             </Container>
         </Stage>
     )