Scaffold for melody step, pause/play on drum step

wrenhawth · Jul 14, 2024 · 5c1a0ba · 5c1a0ba
1 parent 160553e
commit 5c1a0ba
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 20 deletions.
diff --git a/src/App.css b/src/App.css
@@ -101,7 +101,7 @@ sl-button:hover>sl-icon {
 .preset-select::part(form-control-label) {
   color: white;
   font-weight: bold;
-  font-size: 18px;
+  font-size: calc(10px + 2vmin);
 }
 
 .preset-select::part(display-input) {
@@ -305,6 +305,10 @@ sl-select::part(base) {
   background-color: var(--sl-color-emerald-500);
 }
 
+.melody-tab::part(base) {
+  background-color: var(--sl-color-teal-500);
+}
+
 sl-tab[active]::part(base) {
   font-weight: bolder;
   text-decoration: underline;
@@ -317,15 +321,15 @@ sl-tab[active]::part(base) {
   /* width: 100%; */
   flex: auto auto;
   flex-direction: row;
-  padding: 16px;
+  /* padding: 12px; */
   align-items: center;
 }
 
 .tempo-selector {
   flex-direction: column;
   display: flex;
   align-items: center;
-  padding: 16px;
+  padding: 12px;
 }
 
 .step-header {

diff --git a/src/components/AllSteps.tsx b/src/components/AllSteps.tsx
@@ -86,7 +86,7 @@ const parseArpPatternParam = (param: string | null) => {
 
 export const AllSteps = () => {
     const urlParams = new URLSearchParams(window.location.search);
-    const { isStarted, step, areDrumsEnabled, areChordsEnabled } = useContext(WorkflowContext)
+    const { isStarted, step, areDrumsEnabled, areChordsEnabled, isMelodyEnabled } = useContext(WorkflowContext)
     const dispatch = useContext(WorkflowDispatchContext)
     const [title, setTitle] = React.useState(urlParams.get('title') || '')
     const [tempo, setTempo] = React.useState<number>(Number.parseInt(urlParams.get('tempo') || `${DEFAULT_TEMPO}`) ?? DEFAULT_TEMPO)
@@ -180,6 +180,15 @@ export const AllSteps = () => {
 
                     >3: Chords
                     </SlTab>
+                    <SlTab
+                        className="tab melody-tab"
+                        slot="nav"
+                        active={step === WorkflowStep.MELODY}
+                        disabled={!isMelodyEnabled}
+                        onClick={() => isMelodyEnabled && dispatch?.({ type: "setStep", step: WorkflowStep.MELODY })}
+
+                    >4: Sing
+                    </SlTab>
                 </SlTabGroup>
             </div>
 

diff --git a/src/components/ChordStep.tsx b/src/components/ChordStep.tsx
@@ -6,6 +6,9 @@ import { ArpPattern, ChordPattern } from "../utils/chordPatterns"
 import { OctoStage } from "./canvas/OctoStage"
 import { ChordPatternSelector } from "./ChordPatternSelector";
 import { ArpPatternSelector } from "./ArpPatternSelector";
+import { WorkflowDispatchContext } from "./WorkflowContext";
+import { useContext } from "react";
+import { WorkflowStep } from "../utils/workflow";
 
 type ChordStepProps = {
     title: string
@@ -20,10 +23,26 @@ type ChordStepProps = {
 }
 
 export const ChordStep = ({ title, chordList, setChordList, chordPattern, setChordPattern, arpPattern, setArpPattern, useSeventh, setUseSeventh }: ChordStepProps) => {
+    const dispatch = useContext(WorkflowDispatchContext)
+
     return (
         <div>
-
-            <h3 className="step-header"><span className="step-num">Step 3</span>: Chords</h3>
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr 1fr', alignItems: 'center', width: '80%', margin: 'auto'}}>
+                <SlButton 
+                size="small" 
+                style={{justifySelf: 'center'}}
+                 onClick={() => {
+                    dispatch?.({
+                        type: 'setStep',
+                        step: WorkflowStep.DRUMS
+                    })
+                 }}>
+                    <SlIcon name="rewind" slot="prefix"></SlIcon>🥁 Drums
+                </SlButton>
+                <h3 className="step-header">
+                    <span className="step-num">Step 3</span>: Chords
+                </h3>
+            </div>
             <div className="hint">
                 <ul className="hint-list">
                     <li>
@@ -41,7 +60,7 @@ export const ChordStep = ({ title, chordList, setChordList, chordPattern, setCho
                 </ul>
             </div>
 
-            <h4 className="title" style={{ margin: 0 }}>Song: {title}</h4>
+            <h4 className="title" style={{ margin: 0 }}>Song: <span className="emphasize">{title}</span></h4>
 
             <OctoStage
                 chordList={chordList}

diff --git a/src/components/DrumStep.tsx b/src/components/DrumStep.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import React, { useContext, useState } from "react"
 
 import SlButton from "@shoelace-style/shoelace/dist/react/button/index.js";
 import SlIcon from "@shoelace-style/shoelace/dist/react/icon/index.js"
@@ -8,6 +8,8 @@ import { RhythmSelector } from "./RhythmSelector"
 import { DrumPreset } from "../utils/drumPresets"
 import { WorkflowStep } from "../utils/workflow";
 import { WorkflowDispatchContext } from "./WorkflowContext";
+import { PlayButton } from "./PlayButton";
+import { getTransport } from "tone";
 
 type DrumStepProps = {
     drumPreset: DrumPreset,
@@ -19,19 +21,31 @@ type DrumStepProps = {
 
 export const DrumStep = (props: DrumStepProps) => {
     const { drumPreset, setDrumPreset, title, tempo, setTempo } = props
-
+    const [isPlaying, setIsPlaying] = useState(true)
     const dispatch = useContext(WorkflowDispatchContext)
 
 
     return (
         <div className="step">
-            <h2 style={{ margin: 0 }}>
-                ✨Help the Octopus Make A New Song✨
-            </h2>
             <h3 className="step-header"><span className="step-num">Step 2</span>: Rhythm</h3>
-            <h2 className="title" style={{ margin: 0 }}>Song: {title}</h2>
-            <div className="beat-select">
+            <h2 className="title" style={{ margin: 12 }}>Song: <span className="emphasize">{title}</span></h2>
+            {/* <div> */}
+            <PlayButton
+                isPlaying={isPlaying}
+                onClick={() => {
+                    const transport = getTransport()
+                    if (transport.state === 'started') {
+                        setIsPlaying(false)
+                        transport.pause()
+                    } else {
+                        setIsPlaying(true)
+                        transport.start()
+                    }
+                }} /
+            >
+            {/* </div> */}
 
+            <div className="beat-select">
                 {/* <div style={{ display: 'flex' }}> */}
                 <div className="tempo-selector">
 

diff --git a/src/components/PlayButton.tsx b/src/components/PlayButton.tsx
@@ -11,12 +11,13 @@ type Props = {
 const PB = (props: Props) => {
     const { isPlaying, onClick } = props
 
-    return <div className="play-button">
-        <SlButton onClick={onClick} variant="default">
+    return (
+        <SlButton onClick={onClick} variant="default" size="large" style={{padding: 12}}>
             {isPlaying ? <SlIcon slot="prefix" name="pause-fill"></SlIcon> : <SlIcon slot="prefix" name="play-fill"></SlIcon>}
             {isPlaying ? `Pause` : `Play`}
         </SlButton>
-    </div>
+    )
+    // </div>
 
 }
 

diff --git a/src/components/WorkflowContext.tsx b/src/components/WorkflowContext.tsx
@@ -5,7 +5,8 @@ const initialWorkflow: Workflow = {
     step: WorkflowStep.NEW_SONG,
     isStarted: false,
     areDrumsEnabled: false,
-    areChordsEnabled: false
+    areChordsEnabled: false,
+    isMelodyEnabled: false,
 }
 
 export const WorkflowContext = createContext(initialWorkflow);
@@ -17,10 +18,12 @@ function workflowReducer(workflow: Workflow, action: WorkflowAction) {
         case "setStep": {
             const areDrumsEnabled = action.step === WorkflowStep.DRUMS ? true : workflow.areDrumsEnabled
             const areChordsEnabled = action.step === WorkflowStep.CHORDS ? true : workflow.areChordsEnabled
+            const isMelodyEnabled = action.step === WorkflowStep.MELODY ? true : workflow.isMelodyEnabled
             return {
                 ...workflow,
                 areDrumsEnabled,
                 areChordsEnabled,
+                isMelodyEnabled,
                 step: action.step,
             }
         }
@@ -36,6 +39,7 @@ type Workflow = {
     isStarted: boolean
     areDrumsEnabled: boolean
     areChordsEnabled: boolean
+    isMelodyEnabled: boolean
 }
 
 type WorkflowAction = {

diff --git a/src/components/canvas/PlayPause.tsx b/src/components/canvas/PlayPause.tsx
@@ -52,7 +52,7 @@ export const PlayPause = () => {
                     }
                 }}
                 style={{
-                    fontSize: 32,
+                    fontSize: 48,
                     stroke: '#ffffff',
                     fill: iconFill,
                     // fill: iconFill,

diff --git a/src/utils/workflow.ts b/src/utils/workflow.ts
@@ -1,5 +1,6 @@
 export enum WorkflowStep {
     NEW_SONG,
     DRUMS,
-    CHORDS
+    CHORDS,
+    MELODY,
 }