feature/layout-updates #1
@ -23,10 +23,11 @@ React.render(html`
|
||||
<${UI.Controls}/>
|
||||
<${UI.Chart}>
|
||||
<${UI.Audiogram}/>
|
||||
<div class="absolute bottom-0 right-0"><${UI.Display}/></div>
|
||||
<//>
|
||||
</div>
|
||||
|
||||
<${UI.Display}/>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<//>
|
||||
|
17
js/store.js
17
js/store.js
@ -148,6 +148,22 @@ export function Reducer(inState, inAction)
|
||||
clone.Live = Reselect(clone);
|
||||
}
|
||||
}
|
||||
else if (Name == "Errs")
|
||||
{
|
||||
clone.Errs = Data;
|
||||
}
|
||||
else if (Name == "Kill")
|
||||
{
|
||||
console.log(clone.Live.Test);
|
||||
clone.Live.Test && clone.Live.Test.Plot.forEach(freq=>
|
||||
{
|
||||
freq.UserL = undefined;
|
||||
freq.UserR = undefined;
|
||||
});
|
||||
clone.Draw["UserL"] = Redraw(clone.Live.Test, clone.Chan.Value, clone.Stim, true);
|
||||
clone.Draw["UserR"] = Redraw(clone.Live.Test, clone.Chan.Value, clone.Stim, true);
|
||||
SaveTests(clone);
|
||||
}
|
||||
else if (Name == "ShowCursor")
|
||||
{
|
||||
clone.Show.Cursor = Data;
|
||||
@ -245,6 +261,7 @@ export const Initial = Reducer(
|
||||
Chan: { Min:0, Max:1, Value:0, Step:1 },
|
||||
Freq: { Min:2, Max:8, Value:3, Step:1 },
|
||||
Stim: { Min:-10, Max:120, Value:30, Step:5 },
|
||||
Errs: 0,
|
||||
Live:
|
||||
{
|
||||
Test: undefined,
|
||||
|
16
js/ui.js
16
js/ui.js
@ -3,7 +3,7 @@ import { html } from "htm";
|
||||
import * as Store from "./store.js";
|
||||
import * as Tone from "./tone.js";
|
||||
|
||||
/** @typedef {({children}:{children?:preact.ComponentChildren})=>preact.VNode} BasicElement */
|
||||
/** @typedef {({children, classes}:{children?:preact.ComponentChildren, classes?:string})=>preact.VNode} BasicElement */
|
||||
|
||||
/** @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})
|
||||
@ -58,10 +58,11 @@ export const Header =()=>
|
||||
</select>
|
||||
</div>
|
||||
<div class="box-buttons w-full mt-2">
|
||||
<${Button} inactive=${State.Chan.Value == 0} light=${State.Chan.Value == 0} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>None<//>
|
||||
<${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Slight<//>
|
||||
<${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Moderate<//>
|
||||
<${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Severe<//>
|
||||
<p>Patient Error:</p>
|
||||
<${Button} inactive=${State.Errs == 0.0} light=${State.Errs == 0.0} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Errs", Data:0.0})}>None<//>
|
||||
<${Button} inactive=${State.Errs == 0.1} light=${State.Errs == 0.1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Errs", Data:0.1})}>Slight<//>
|
||||
<${Button} inactive=${State.Errs == 0.3} light=${State.Errs == 0.3} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Errs", Data:0.3})}>Moderate<//>
|
||||
<${Button} inactive=${State.Errs == 0.6} light=${State.Errs == 0.6} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Errs", Data:0.6})}>Severe<//>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -72,8 +73,11 @@ export const Header =()=>
|
||||
<div class="h-full w-[${grade.Done/grade.Total*100}%] bg-earmark"></div>
|
||||
</div>
|
||||
<div class="text-sm">Accuracy: ${grade.Score}%</div>
|
||||
<${Button} disabled=${grade.Done == 0} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Kill", Data:0})}>Start Over<//>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>`;
|
||||
}
|
||||
|
||||
@ -323,7 +327,7 @@ export function Chart({children})
|
||||
);
|
||||
}
|
||||
return html`
|
||||
<div class="relative w-full pb-[calc(55%+60px)] font(sans medium) text(xs) self-start">
|
||||
<div class="relative w-full pb-[calc(55%+70px)] font(sans medium) text(xs) self-start">
|
||||
<div class="absolute right-0 bottom-0 w-[calc(100%-60px)] h-[calc(100%-70px)] border(1 zinc-300)">
|
||||
<span class="block absolute top-[-65px] left-0 w-full text(sm center) font-black">Frequency in Hz</span>
|
||||
<span class="inline-block absolute top-[50%] left-[-50px] ">
|
||||
|
5
ts/store.d.ts
vendored
5
ts/store.d.ts
vendored
@ -24,6 +24,7 @@ declare namespace Store {
|
||||
Chan: Range;
|
||||
Freq: Range;
|
||||
Stim: Range;
|
||||
Errs: number;
|
||||
Live: Context;
|
||||
Draw: DrawChart;
|
||||
Show: {Cursor:boolean, Answer:boolean}
|
||||
@ -36,9 +37,11 @@ declare namespace Store {
|
||||
type ActionChan = { Name: "Chan"; Data: number };
|
||||
type ActionFreq = { Name: "Freq"; Data: number };
|
||||
type ActionStim = { Name: "Stim"; Data: number };
|
||||
type ActionErrs = { Name: "Errs"; Data: number };
|
||||
type ActionKill = { Name: "Kill"; Data: number };
|
||||
type ActionShowCursor = {Name: "ShowCursor", Data:boolean};
|
||||
type ActionShowAnswer = {Name: "ShowAnswer", Data:boolean};
|
||||
type Action = ActionMark | ActionTest | ActionChan | ActionFreq | ActionStim | ActionShowCursor | ActionShowAnswer;
|
||||
type Action = ActionMark | ActionTest | ActionChan | ActionFreq | ActionStim | ActionErrs | ActionKill | ActionShowCursor | ActionShowAnswer;
|
||||
type Reducer = (inState: State, inAction: Action) => State;
|
||||
type ContextUpdater = (inState: State) => boolean;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user