Make canvas size dynamic, fix arpeggiator bug

package.json

@@ -13,6 +13,7 @@
     "@gsap/react": "^2.1.1",
     "@pixi/events": "^7.4.2",
     "@pixi/react": "^7.1.2",
+    "@react-hook/window-size": "^3.1.1",
     "@shoelace-style/shoelace": "^2.15.1",
     "@types/lodash": "^4.17.6",
     "gsap": "^3.12.5",

src/components/AllSteps.tsx

@@ -24,7 +24,6 @@ export const AllSteps = () => {
     const [tempo, setTempo] = React.useState<number>(120)
 
     useEffect(() => {
-        console.log(tempo)
         const transport = getTransport()
         transport.bpm.rampTo(tempo, 2)
     }, [tempo])

src/components/RhythmSelector.tsx

@@ -33,7 +33,6 @@ export const RhythmSelector = (props: Props) => {
                         value={d}
                         selected={isSelected}
                         onClick={() => {
-                            console.log(d)
                             setSelectedRhythm(d)
                         }}
                     >

src/components/WorkflowContext.tsx

@@ -13,7 +13,7 @@ export const WorkflowContext = createContext(initialWorkflow);
 export const WorkflowDispatchContext = createContext<React.Dispatch<WorkflowAction> | null>(null);
 
 function workflowReducer(workflow: Workflow, action: WorkflowAction) {
-    console.log(workflow)
+    // console.log(workflow)
     switch (action.type) {
         case "setStep": {
             const areDrumsEnabled = action.step === WorkflowStep.DRUMS ? true : workflow.areDrumsEnabled

src/components/canvas/Chords.tsx

@@ -1,11 +1,11 @@
 import { Container, Graphics, Text } from "@pixi/react"
-import { HEIGHT, WIDTH } from "./constants"
 import { ComponentProps, useCallback, useState } from "react"
 
 import '@pixi/events'
 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"
+import { useCanvasWidth } from "./utils"
 
 type ChordSetProps = {
     chordList: ChordSymbol[]
@@ -17,6 +17,8 @@ type ChordSetProps = {
 
 export const Chords = (props: ChordSetProps) => {
     const { chordList, setChordList, useSeventh, setUseSeventh } = props
+    const width = useCanvasWidth()
+
     const totalChords = chordList.length
 
     const getUpdateChordInListFunction = (i: number) => {
@@ -34,16 +36,15 @@ export const Chords = (props: ChordSetProps) => {
             setUseSeventh((prevList) => {
                 const newList = [...prevList]
                 newList[i] = !newList[i]
-                console.log(newList)
                 return newList
             })
         }
     }
 
     return (
         <Container
-            x={WIDTH / 2}
-            y={HEIGHT / 2}
+            x={width / 2}
+            y={width / 2}
             anchor={0.5}
         >
             {chordList.map((c, i) =>
@@ -62,7 +63,7 @@ export const Chords = (props: ChordSetProps) => {
     )
 }
 
-const RADIUS = 200
+const RADIUS = 150
 
 type ChordProps = {
     chord: ChordSymbol
@@ -76,16 +77,18 @@ type ChordProps = {
 type GraphicsArg = Parameters<NonNullable<React.ComponentProps<typeof Graphics>["draw"]>>[0]
 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
-    const yRatio = WIDTH < HEIGHT ? 1 : ellipsisRatio
+    const width = useCanvasWidth()
+    const radius = RADIUS * (width / 500)
+    const ellipsisRatio = Math.min(width, width) / Math.max(width, width)
+    const xRatio = width > width ? 1 : ellipsisRatio
+    const yRatio = width < width ? 1 : ellipsisRatio
 
     const halfAngle = (1 / totalChords) * Math.PI
     const startOffset = Math.PI / 4
     const startAngle = ((index / totalChords) * Math.PI * 2) - halfAngle - startOffset
     const endAngle = (((index + 1) / totalChords) * Math.PI * 2) - halfAngle - startOffset
     const centerPoint = new Point(0, 0)
-    const chordArc = new Arc(centerPoint, RADIUS, startAngle, endAngle)
+    const chordArc = new Arc(centerPoint, radius, startAngle, endAngle)
     const { x, y } = chordArc.middle()
     const a = x * xRatio
     const b = y * yRatio
@@ -103,14 +106,14 @@ export const Chord = ({ chord, useSeventh, setChord, setSeventh, index, totalCho
         g.clear()
         g.lineStyle(1, "white")
         g.alpha = .7
-        g.arc(0, 0, RADIUS / 2, startAngle, endAngle)
+        g.arc(0, 0, radius / 2, startAngle, endAngle)
 
         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.arc(0, 0, radius + 50, endAngle, startAngle, true)
+        g.arc(0, 0, radius / 2, startAngle, endAngle)
         g.endFill()
-    }, [chord, index, totalChords])
+    }, [chord, index, radius, totalChords])
 
     const [hoverLeft, setHoverLeft] = useState(false)
     const [hoverRight, setHoverRight] = useState(false)

src/components/canvas/Octo.tsx

@@ -2,11 +2,12 @@ import { Container, Text, useTick } from "@pixi/react"
 import { ComponentProps, useState } from "react"
 import { getTransport } from "tone"
 
-import { HEIGHT, WIDTH } from "./constants"
 import { ZINDEX } from "../../utils/zIndex"
+import { useCanvasWidth } from "./utils"
 
 export const Octo = () => {
     const [octoAngle, setOctoAngle] = useState(0)
+    const width = useCanvasWidth()
     useTick(() => {
         const transport = getTransport()
         if (transport.state === 'started') {
@@ -16,8 +17,8 @@ export const Octo = () => {
 
     return (
         <Container
-            x={WIDTH / 2}
-            y={HEIGHT / 2}
+            x={width / 2}
+            y={width / 2}
             anchor={0.5}
             angle={octoAngle}
             zIndex={ZINDEX.OCTOPUS}

src/components/canvas/OctoStage.tsx

@@ -1,10 +1,11 @@
 import { Container, Stage } from '@pixi/react';
 // import '@pixi/events';
 
-import { HEIGHT, WIDTH } from './constants';
+// import { HEIGHT, WIDTH } from './constants';
 import { Octo } from './Octo';
 import { Chords } from './Chords';
 import { ChordSymbol } from '../../utils/basicChords';
+import { useCanvasWidth } from './utils';
 
 type OctoStageProps = {
     chordList: ChordSymbol[]
@@ -15,11 +16,13 @@ type OctoStageProps = {
 }
 export const OctoStage = ({ chordList, setChordList, useSeventh, setUseSeventh }: OctoStageProps) => {
     // const scale = window.innerHeight < 900 ? 0.75 : 1;
+    // const width = Math.min(window.innerHeight, 500)
+    const width = useCanvasWidth()
     return (
         <Stage
-            width={WIDTH}
-            height={HEIGHT}
-            options={{ background: 'transparent', backgroundAlpha: 0 }}
+            width={width}
+            height={width}
+            options={{ background: 'transparent', backgroundAlpha: 0, width, height: width }}
         >
             <Container sortableChildren>
                 {/* <Container anchor={0.5} x={(WIDTH * scale) / 2} y={(HEIGHT * scale) / 2}> */}

src/hooks/useChordPart.ts

@@ -16,8 +16,9 @@ const updateChordPart = (part: ChordPart, i: number, chordNumeral: ChordSymbol,
     part.clear()
     const triads = scaleToTriads(DEFAULT_SCALE_OPTIONS)
     const seventhChords = scaleToSevenths(DEFAULT_SCALE_OPTIONS)
-    const chord = useSeventh ? seventhChords[CHORD_TO_INDEX[chordNumeral]]?.notes || ['C4'] : triads[CHORD_TO_INDEX[chordNumeral]]?.notes || ['C4']
-    console.log(arpPattern)
+    const chord = useSeventh ?
+        seventhChords[CHORD_TO_INDEX[chordNumeral]]?.notes || ['C4'] :
+        triads[CHORD_TO_INDEX[chordNumeral]]?.notes || ['C4']
     const newValue = fillChordPattern(i, chord, chordPattern, arpPattern || undefined)
     newValue.forEach((v) => {
         part.at(v.time, v)
@@ -111,7 +112,6 @@ export const useChordPart = (options: ChordPartOptions) => {
                         chord: c
                     })
                     part.start(0)
-                    console.log(part)
                 }
 
                 updateChordPart(chordPartRefs.current[i].part, i, c, chordPattern, arpPattern, useSeventh[i])

src/hooks/useDrumPart.ts

@@ -7,7 +7,6 @@ type DrumPart = Part<DrumEvent>
 
 const updateRhythmPart = (part: DrumPart, drumPreset: DrumPreset) => {
     const newValue = fillDrumPreset(drumPreset)
-    console.log(newValue)
     newValue.forEach((v) => {
         const { time } = v
         part.at(time, v)

src/utils/chordPatterns.ts

@@ -25,8 +25,10 @@ export const fillChordPattern = (
     const generator = patternName ? PatternGenerator(chord.length, patternName) : null
     for (let q = 0; q < 4; q += 1) {
         for (let s = 0; s < 4; s += 1) {
-            const notes = generator ? [chord[generator.next().value]] : chord
+
             if (currentTime && `${0}:${q}:${s}` === Time(currentTime).toBarsBeatsSixteenths()) {
+                const notes = generator ? [chord[generator.next().value]] : chord
+
                 filledPattern.push({
                     time: `${bar}:${q}:${s}`,
                     notes,
@@ -46,17 +48,20 @@ export const fillChordPattern = (
 
 }
 
-export type ChordPattern = 'DDDD' | 'DDUUDU' | 'DDDDU'
+export type ChordPattern = 'DDDD' | 'DDUUDU' | 'DDDDU' | 'DUDUDUDU'
+
 export const CHORD_PATTERNS_LIST = [
     'DDDD',
     'DDUUDU',
-    'DDDDU'
+    'DDDDU',
+    'DUDUDUDU',
 ] as const
 
 export const CHORD_PATTERN_LABELS = {
     DDDD: 'xoxoxoxo',
     DDUUDU: 'xoxxoxxx',
-    DDDDU: 'xoxoxoxx'
+    DDDDU: 'xoxoxoxx',
+    DUDUDUDU: 'xxxxxxxx'
 }
 
 const DDDD = [
@@ -83,11 +88,22 @@ const DDDDU = [
     '0:3:2',
 ]
 
+const DUDUDUDU = [
+    '0:0',
+    '0:0:2',
+    '0:1',
+    '0:1:2',
+    '0:2:0',
+    '0:2:2',
+    '0:3:0',
+    '0:3:2'
+]
 
 export const CHORD_PATTERNS = {
     DDDD,
     DDUUDU,
     DDDDU,
+    DUDUDUDU
 }
 
 export const ARP_PATTERNS_LIST = [
@@ -108,7 +124,7 @@ export const ARP_PATTERN_LABELS = {
     "randomWalk": 'Walk Around'
 }
 
-export type ArpPattern = 
+export type ArpPattern =
     false |
     "up" |
     "downUp" |