diff --git a/src/ui.js b/src/ui.js
index 1d33ac7..feb89f8 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -5,8 +5,8 @@ import * as Tone from "./tone.js";
/** @typedef {({children}:{children?:preact.ComponentChildren})=>preact.VNode} BasicElement */
-/** @type {({children, icon, light, disabled, inactive, onClick}:{children:preact.VNode, icon?:preact.VNode, light:boolean, disabled:boolean, inactive:boolean, onClick:()=>void})=>preact.VNode} */
-export function Button({children, icon, light, disabled, inactive, onClick})
+/** @type {({children, icon, light, disabled, inactive, onClick, classes}:{children:preact.VNode, icon?:preact.VNode, light:boolean, disabled:boolean, inactive:boolean, onClick:()=>void, classes?:string})=>preact.VNode} */
+export function Button({children, icon, light, disabled, inactive, onClick, classes})
{
const [FlashGet, FlashSet] = React.useState(0);
const handleClick =()=>
@@ -19,19 +19,19 @@ export function Button({children, icon, light, disabled, inactive, onClick})
return html`
`;
}
@@ -60,7 +60,7 @@ export const Grade =()=>
Complete: ${grade.Done} of ${grade.Total}
Accuracy: ${grade.Score}%
`
};
@@ -92,73 +92,106 @@ export const Controls =()=>
}, [playGet]);
+ const classRow = "flex items-center justify-end gap-1"
+ const classTitle = "flex-1"
+
return html`
<${Grade}/>
-
-
Channel
-
${State.Chan.Value}
- <${Button} light=${State.Chan.Value == 0} inactive=${State.Chan.Value == 0} onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>Left
- <${Button} light=${State.Chan.Value == 1} inactive=${State.Chan.Value == 1} onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Right
-
-
Frequency
-
${Store.ColumnMapping[State.Freq.Value][0]}
- <${Button} disabled=${State.Freq.Value == State.Freq.Min} onClick=${()=>Dispatch({Name:"Freq", Data:-1})}>-
- <${Button} disabled=${State.Freq.Value == State.Freq.Max} onClick=${()=>Dispatch({Name:"Freq", Data:1})}>+
-
-
Stimulus
-
${State.Stim.Value}
- <${Button} disabled=${State.Stim.Value == State.Stim.Min} onClick=${()=>Dispatch({Name:"Stim", Data:-1})}>-
- <${Button} disabled=${State.Stim.Value == State.Stim.Max} onClick=${()=>Dispatch({Name:"Stim", Data:1})}>+
-
-
Tone
- <${Button} onClick=${()=>{pulsedSet(true)}} light=${pulsedGet} inactive${pulsedGet}>Pulsed
- <${Button} onClick=${()=>{pulsedSet(false)}} light=${!pulsedGet} inactive${!pulsedGet}>Continuous
-
-
Present
-
- <${Button} onClick=${()=>playSet(1)} disabled=${playGet==1} icon=${html`
`}>Play
-
-
Mark
- <${Button} onClick=${()=>Dispatch({Name:"Mark", Data:true })} icon=${html`<${Mark} right=${State.Chan.Value} response=${true} x="0" y="0" classes="stroke(white 2 draw) w-2 h-2 translate-x-1/2 translate-y-1/2"/>`}>Response
- <${Button} onClick=${()=>Dispatch({Name:"Mark", Data:false})} icon=${html`<${Mark} right=${State.Chan.Value} response=${false} x="0" y="0" classes="stroke(white 2 draw) w-2 h-2 translate-x-1/2 translate-y-1/2"/>`}>No Response
- <${Button}
- icon=${html`
`}
- onClick=${()=>Dispatch({Name:"Mark", Data:null })}
- disabled=${State.Live.Mark == undefined}>Clear
+
+
+
Channel
+ <${Button} inactive=${State.Chan.Value == 0} light=${State.Chan.Value == 0} classes="" onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>Left
+ <${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Right
+
+
+
Frequency
+
${Store.ColumnMapping[State.Freq.Value][0]} Hz
+ <${Button} disabled=${State.Freq.Value == State.Freq.Min} onClick=${()=>Dispatch({Name:"Freq", Data:-1})}>-
+ <${Button} disabled=${State.Freq.Value == State.Freq.Max} onClick=${()=>Dispatch({Name:"Freq", Data:1})}>+
+
+
+
Stimulus
+
${State.Stim.Value} dbHL
+ <${Button} disabled=${State.Stim.Value == State.Stim.Min} onClick=${()=>Dispatch({Name:"Stim", Data:-1})}>-
+ <${Button} disabled=${State.Stim.Value == State.Stim.Max} onClick=${()=>Dispatch({Name:"Stim", Data:1})}>+
+
+
+
+
+
+ <${Button}
+ classes="w-full flex-1 self-center"
+ onClick=${()=>playSet(1)}
+ disabled=${playGet==1}
+ icon=${html`
`}
+ >
+ Present Tone
+
+
+ <${Button} onClick=${()=>{pulsedSet(true )}} light=${pulsedGet } inactive${pulsedGet } classes="flex-1 text(center xs)">Pulsed
+ <${Button} onClick=${()=>{pulsedSet(false)}} light=${!pulsedGet} inactive${!pulsedGet} classes="flex-1 text(center xs)">Continuous
+
+
+
+
+
+
Threshold
+
+ <${Button}
+ onClick=${()=>Dispatch({Name:"Mark", Data:true })}
+ classes="text-sm"
+ icon=${html`<${Mark} right=${State.Chan.Value} response=${true} x="0" y="0" classes="stroke(white 2 draw) w-2 h-2 translate-x-1/2 translate-y-1/2"/>`}
+ >
+ Accept
+
+ <${Button}
+ onClick=${()=>Dispatch({Name:"Mark", Data:false})}
+ classes="text-sm"
+ icon=${html`<${Mark} right=${State.Chan.Value} response=${false} x="0" y="0" classes="stroke(white 2 draw) w-2 h-2 translate-x-1/2 translate-y-1/2"/>`}
+ >
+ No Response
+
+ <${Button}
+ icon=${html`
+
+ `}
+ onClick=${()=>Dispatch({Name:"Mark", Data:null })}
+ classes="text-sm"
+ disabled=${State.Live.Mark == undefined}
+ >
+ Clear
+
+
+
`;
};