start error ui

js/app.js

@@ -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>
     <//>

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,

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<//>
+                <p>Patient Error:</p>
-                <${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.Errs == 0.0} light=${State.Errs == 0.0} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Errs", Data:0.0})}>None<//>
-                <${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.Errs == 0.1} light=${State.Errs == 0.1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Errs", Data:0.1})}>Slight<//>
-                <${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Severe<//>
+                <${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] ">

ts/store.d.ts

@@ -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;