controls

src/app.js

@@ -12,22 +12,52 @@ ShadowDOM.append(ShadowDiv);
 
 TW.Init(ShadowCSS, ShadowDiv);
 
+const Controls =()=>
+{
+    const [State, Dispatch] = Store.Consumer();
 
+    return html`
+    <div class="flex">
+        <div>Channel</div>
+        <div>${State.Chan.Value}</div>
+        <${UI.Button} light=${State.Chan.Value == 0} inactive=${State.Chan.Value == 0} onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>Left<//>
+        <${UI.Button} light=${State.Chan.Value == 1} inactive=${State.Chan.Value == 1} onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Right<//>
+    </div>
+    <div class="flex">
+        <div>Frequency</div>
+        <div>${Store.ColumnMapping[State.Freq.Value][0]}</div>
+        <${UI.Button} disabled=${State.Freq.Value == State.Freq.Min} onClick=${()=>Dispatch({Name:"Freq", Data:-1})}>-<//>
+        <${UI.Button} disabled=${State.Freq.Value == State.Freq.Max} onClick=${()=>Dispatch({Name:"Freq", Data:1})}>+<//>
+    </div>
+    <div class="flex">
+        <div>Stimulus</div>
+        <div>${State.Stim.Value}</div>
+        <${UI.Button} disabled=${State.Stim.Value == State.Stim.Min} onClick=${()=>Dispatch({Name:"Stim", Data:-1})}>-<//>
+        <${UI.Button} disabled=${State.Stim.Value == State.Stim.Max} onClick=${()=>Dispatch({Name:"Stim", Data:1})}>+<//>
+    </div>
+    <div class="flex">
+        <div>Mark</div>
+        <${UI.Button} onClick=${()=>Dispatch({Name:"Mark", Data:true })}>Response<//>
+        <${UI.Button} onClick=${()=>Dispatch({Name:"Mark", Data:false})}>No Response<//>
+        <${UI.Button} onClick=${()=>Dispatch({Name:"Mark", Data:null })} disabled=${State.Live.Mark == undefined}>Clear<//>
+    </div>
+    `;
+};
 
 const Audiogram =()=>
 {
     const [State] = Store.Consumer();
-
+    
     /** @type {(inAmount:number)=>string} */ const Perc =(inAmount)=> (inAmount*100)+"%";
 
     const testMarksL = State.Draw.TestL.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${false}/>`);
+    const userMarksL = State.Draw.UserL.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${false} classes=${State.Live.Mark == p.Mark ? "stroke-bold":""}/>`);
     const testMarksR = State.Draw.TestR.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${true} />`);
-    const testLinesL = State.Draw.TestL.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
+    const userMarksR = State.Draw.UserR.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${true} classes=${State.Live.Mark == p.Mark ? "stroke-bold":""}/>`);
-    const testLinesR = State.Draw.TestR.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
 
-    const userMarksL = State.Draw.UserL.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${false}/>`);
+    const testLinesL = State.Draw.TestL.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
-    const userMarksR = State.Draw.UserR.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${true} />`);
     const userLinesL = State.Draw.UserL.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
+    const testLinesR = State.Draw.TestR.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
     const userLinesR = State.Draw.UserR.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
 
     return html`
@@ -39,10 +69,7 @@ const Audiogram =()=>
 
 React.render(html`
     <${Store.Provider}>
-        <${UI.Button} icon="+">hey!<//>
+        <${Controls}/>
-        <${UI.Button} light>Left<//>
-        <${UI.Button} inactive>Right<//>
-        <${UI.Button} disabled>Right<//>
         <${UI.Chart}>
             <${Audiogram}/>
         <//>

src/store.js

@@ -55,8 +55,13 @@ export const Initial =
             Name: "Patient A  Asymmetric Notch",
             Plot:
             [
-                { Hz: 500,  TestL: { Stim: 30, Resp: true }, TestR: { Stim: 50, Resp: true }, UserL: { Stim: 55, Resp: true }, UserR: { Stim: 50, Resp: true } },
+                { Hz: 500,  TestL: { Stim: 30, Resp: true }, TestR: { Stim: 50, Resp: true } },
-                { Hz: 1000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true }, UserL: { Stim: 50, Resp: true }, UserR: { Stim: 30, Resp: true } }
+                { Hz: 1000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } },
+                { Hz: 2000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } },
+                { Hz: 3000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } },
+                { Hz: 4000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } },
+                { Hz: 6000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } },
+                { Hz: 8000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } }
             ]
         }
     ]
@@ -153,15 +158,16 @@ export function Reducer(inState, inAction)
             TestL: Congtiguous(clone.Live.Test, 0, clone.Stim, false),
             TestR: Congtiguous(clone.Live.Test, 1, clone.Stim, false)
         };
+        clone.Live = {...clone.Live};
     }
     else if (Name == "Mark")
     {
         if(clone.Live.Test && clone.Live.Freq)
         {
             clone.Live.Mark = MarkSet(clone.Live.Freq, clone.Chan.Value, Data !== null ? {Stim:clone.Stim.Value, Resp:Data} : undefined);
-
-            clone.Draw = {...clone.Draw};
             clone.Draw[clone.Chan.Value == 0 ? "UserL" : "UserR"] = Congtiguous(clone.Live.Test, clone.Chan.Value, clone.Stim, true);
+            clone.Live = {...clone.Live};
+            clone.Draw = {...clone.Draw};
         }
     }
     else if( Name=="Stim" || Name=="Chan" || Name=="Freq")
@@ -175,6 +181,7 @@ export function Reducer(inState, inAction)
         {
             Update.Freq(clone);
             Update.Mark(clone);
+            clone.Live = {...clone.Live};
         }
     }
 

store.test.ts

@@ -1,7 +1,34 @@
 import { assertEquals } from "https://deno.land/std@0.166.0/testing/asserts.ts";
 import { Reducer, ColumnMapping, Initial } from "./src/store.js";
 
-let state = {...Initial};
+let state:Store.State = {
+    Chan: { Min:0,   Max:1,   Value:0,  Step:1 },
+    Freq: { Min:2,   Max:8,   Value:2,  Step:1 },
+    Stim: { Min:-10, Max:120, Value:30, Step:5 },
+    Live:
+    {
+        Test: undefined,
+        Freq: undefined,
+        Mark: undefined
+    },
+    Draw:
+    {
+        UserL:{Points:[], Paths:[]},
+        UserR:{Points:[], Paths:[]},
+        TestL:{Points:[], Paths:[]},
+        TestR:{Points:[], Paths:[]}
+    },
+    Tests: [
+        {
+            Name: "Patient A  Asymmetric Notch",
+            Plot:
+            [
+                { Hz: 500,  TestL: { Stim: 30, Resp: true }, TestR: { Stim: 50, Resp: true }, UserL: { Stim: 55, Resp: true }, UserR: { Stim: 50, Resp: true } },
+                { Hz: 1000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true }, UserL: { Stim: 50, Resp: true }, UserR: { Stim: 30, Resp: true } }
+            ]
+        }
+    ]
+};
 
 Deno.test("Initialize", async(t)=>
 {