diff --git a/package-lock.json b/package-lock.json index 96d6780..bfd339a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,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", @@ -1445,6 +1446,57 @@ "url": "^0.11.0" } }, + "node_modules/@react-hook/debounce": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@react-hook/debounce/-/debounce-3.0.0.tgz", + "integrity": "sha512-ir/kPrSfAzY12Gre0sOHkZ2rkEmM4fS5M5zFxCi4BnCeXh2nvx9Ujd+U4IGpKCuPA+EQD0pg1eK2NGLvfWejag==", + "dependencies": { + "@react-hook/latest": "^1.0.2" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/@react-hook/event": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/@react-hook/event/-/event-1.2.6.tgz", + "integrity": "sha512-JUL5IluaOdn5w5Afpe/puPa1rj8X6udMlQ9dt4hvMuKmTrBS1Ya6sb4sVgvfe2eU4yDuOfAhik8xhbcCekbg9Q==", + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/@react-hook/latest": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@react-hook/latest/-/latest-1.0.3.tgz", + "integrity": "sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg==", + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/@react-hook/throttle": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@react-hook/throttle/-/throttle-2.2.0.tgz", + "integrity": "sha512-LJ5eg+yMV8lXtqK3lR+OtOZ2WH/EfWvuiEEu0M3bhR7dZRfTyEJKxH1oK9uyBxiXPtWXiQggWbZirMCXam51tg==", + "dependencies": { + "@react-hook/latest": "^1.0.2" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/@react-hook/window-size": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@react-hook/window-size/-/window-size-3.1.1.tgz", + "integrity": "sha512-yWnVS5LKnOUIrEsI44oz3bIIUYqflamPL27n+k/PC//PsX/YeWBky09oPeAoc9As6jSH16Wgo8plI+ECZaHk3g==", + "dependencies": { + "@react-hook/debounce": "^3.0.0", + "@react-hook/event": "^1.2.1", + "@react-hook/throttle": "^2.2.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.18.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz", diff --git a/package.json b/package.json index 3d2e7b1..8d5f750 100644 --- a/package.json +++ b/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", diff --git a/src/components/AllSteps.tsx b/src/components/AllSteps.tsx index a8f9bd5..56275c2 100644 --- a/src/components/AllSteps.tsx +++ b/src/components/AllSteps.tsx @@ -24,7 +24,6 @@ export const AllSteps = () => { const [tempo, setTempo] = React.useState(120) useEffect(() => { - console.log(tempo) const transport = getTransport() transport.bpm.rampTo(tempo, 2) }, [tempo]) diff --git a/src/components/RhythmSelector.tsx b/src/components/RhythmSelector.tsx index ed4dae2..a733f92 100644 --- a/src/components/RhythmSelector.tsx +++ b/src/components/RhythmSelector.tsx @@ -33,7 +33,6 @@ export const RhythmSelector = (props: Props) => { value={d} selected={isSelected} onClick={() => { - console.log(d) setSelectedRhythm(d) }} > diff --git a/src/components/WorkflowContext.tsx b/src/components/WorkflowContext.tsx index af0a0cf..c7591b2 100644 --- a/src/components/WorkflowContext.tsx +++ b/src/components/WorkflowContext.tsx @@ -13,7 +13,7 @@ export const WorkflowContext = createContext(initialWorkflow); export const WorkflowDispatchContext = createContext | 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 diff --git a/src/components/canvas/Chords.tsx b/src/components/canvas/Chords.tsx index 9c1ee99..4fe7c9a 100644 --- a/src/components/canvas/Chords.tsx +++ b/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,7 +36,6 @@ export const Chords = (props: ChordSetProps) => { setUseSeventh((prevList) => { const newList = [...prevList] newList[i] = !newList[i] - console.log(newList) return newList }) } @@ -42,8 +43,8 @@ export const Chords = (props: ChordSetProps) => { return ( {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["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) diff --git a/src/components/canvas/Octo.tsx b/src/components/canvas/Octo.tsx index 0fd83c1..a0f44d7 100644 --- a/src/components/canvas/Octo.tsx +++ b/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 ( { // const scale = window.innerHeight < 900 ? 0.75 : 1; + // const width = Math.min(window.innerHeight, 500) + const width = useCanvasWidth() return ( {/* */} diff --git a/src/hooks/useChordPart.ts b/src/hooks/useChordPart.ts index 3ccadfa..91b5bfe 100644 --- a/src/hooks/useChordPart.ts +++ b/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]) diff --git a/src/hooks/useDrumPart.ts b/src/hooks/useDrumPart.ts index bd17dd0..ea652f2 100644 --- a/src/hooks/useDrumPart.ts +++ b/src/hooks/useDrumPart.ts @@ -7,7 +7,6 @@ type DrumPart = Part const updateRhythmPart = (part: DrumPart, drumPreset: DrumPreset) => { const newValue = fillDrumPreset(drumPreset) - console.log(newValue) newValue.forEach((v) => { const { time } = v part.at(time, v) diff --git a/src/utils/chordPatterns.ts b/src/utils/chordPatterns.ts index 3ed1807..dcecd77 100644 --- a/src/utils/chordPatterns.ts +++ b/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" |