chart bar responsive

adaption tweaks

deno.json

@@ -4,6 +4,7 @@
     "@twind/": "https://esm.sh/@twind/",
     "react": "https://esm.sh/preact@10.11.3/compat",
     "htm": "https://esm.sh/htm@3.1.1/preact",
-    "app": "./js/app.js"
+    "app": "./js/app.js",
+    "$/": "./static/"
   }
 }

js/app.js

@@ -15,20 +15,23 @@ TW.Init(ShadowCSS, ShadowDiv);
 
 React.render(html`
     <${Store.Provider}>
-    <div class="max-w-[1170px] mx-auto">
+    <div class="max-w-[1270px] mx-auto font-sans text-[16px] text-black">
 
         <${UI.Header}/>
 
-        <div class="flex flex-col items-start lg:flex-row my-4">
+        <div class="flex flex-col items-start lg:flex-row mt-4 mb-24">
             <${UI.Controls}/>
-            <${UI.Chart}>
+            <div class="flex-1 self-stretch">
-                <${UI.Audiogram}/>
+                <${UI.Chart}>
-                <div class="absolute bottom-0 right-0"><${UI.Display}/></div>
+                    <${UI.Audiogram}/>
-            <//>
+                <//>
+                <div class="relative ml-10 mt-3 small-desktop:(ml-[100px] mr-[20px] -mt-[80px])">
+                    <${UI.Display}/>
+                </div>
+            </div>
+
         </div>
 
-        
-
     </div>
     <//>
 `, ShadowDiv);

js/store.js

@@ -77,12 +77,29 @@ export const Grade =(inTest)=>
 
 }
 
+
+const ErrorCol = 
+    [30,   25,   20,   15,   10,   5,    0,    -5,   -10,  -15 ]
+const ErrorLUT = [
+    [0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00],
+    [0.00, 0.00, 0.00, 0.00, 0.10, 0.15, 0.10, 0.10, 0.00, 0.00],
+    [0.00, 0.00, 0.02, 0.05, 0.15, 0.20, 0.30, 0.15, 0.05, 0.00],
+    [0.00, 0.02, 0.05, 0.10, 0.20, 0.40, 0.60, 0.30, 0.05, 0.00]
+];
+/** @type {(inState:Store.State)=>void} */
+const ErrorProbability =(inState)=>
+{
+    const miss = inState.Stim.Value - (inState.Live.Mark.Test?.Stim ?? inState.Stim.Value);
+    inState.Live.Mark.Errs = ErrorLUT[inState.Errs]?.[ErrorCol.indexOf(miss)] ?? 0;
+}
+
+
 /** Creates a new Store.Context object that contain the current selections 
  * @type {(inState:Store.State, inTest?:Store.Test)=>Store.Context} */
 const Reselect =(inState, inTest)=>
 {
     /** @type {Store.Context} */
-    const output = { Test:inTest??inState.Live.Test };
+    const output = { Test:inTest??inState.Live.Test, Mark:{User:undefined, Errs:0} };
     const column = ColumnMapping[inState.Freq.Value];
     if(column && output.Test)
     {
@@ -93,7 +110,8 @@ const Reselect =(inState, inTest)=>
             if(plot.Hz == hz)
             {
                 output.Freq = plot;
-                output.Mark = inState.Chan.Value ? plot.UserR : plot.UserL;
+                output.Mark.User = inState.Chan.Value ? plot.UserR : plot.UserL;
+                output.Mark.Test = inState.Chan.Value ? plot.TestR : plot.TestL;
                 break;
             }
         }
@@ -172,6 +190,7 @@ export function Reducer(inState, inAction)
                 TestR: Redraw(test, 1, clone.Stim, false)
             };
             test.Done = Grade(test);
+            SaveTests(clone);
         }
     }
     else if (Name == "Mark")
@@ -179,8 +198,8 @@ export function Reducer(inState, inAction)
         if(clone.Live.Test && clone.Live.Freq)
         {
             const key = clone.Chan.Value == 0 ? "UserL" : "UserR";
-            clone.Live.Mark = Data !== null ? {Stim:clone.Stim.Value, Resp:Data} : undefined;
+            clone.Live.Mark.User = Data !== null ? {Stim:clone.Stim.Value, Resp:Data} : undefined;
-            clone.Live.Freq[key] = clone.Live.Mark;
+            clone.Live.Freq[key] = clone.Live.Mark.User;
             clone.Draw[key] = Redraw(clone.Live.Test, clone.Chan.Value, clone.Stim, true);
             clone.Live.Test.Done = Grade(clone.Live.Test);
             SaveTests(clone);
@@ -227,8 +246,10 @@ export function Reducer(inState, inAction)
         clone.Show.Answer = Data;
     }
 
+    ErrorProbability(clone);
     SaveSettings(clone);
 
+    document.dispatchEvent(new CustomEvent("EarmarkUpdate", {detail:clone}));
     return clone;
 }
 
@@ -288,10 +309,41 @@ const TestDefault = [
         ]
     }
 ];
+
+let PreviewData = false;
+const PreviewText = atob(new URL(window.location.href).searchParams.get("test")||"");
+if(PreviewText)
+{
+    try
+    {
+        PreviewData = JSON.parse(PreviewText);
+    }
+    catch(e)
+    {
+        alert(`Could not read test data`);
+        PreviewData = false;
+    }    
+}
+
+const AppVersion = `0.0.0`;
+const savedVersion = localStorage.getItem("app-version");
+if(savedVersion && (AppVersion > savedVersion))
+{
+    console.log(`New version "${AppVersion}"; clearing saved session.`);
+    localStorage.clear();
+}
+localStorage.setItem("app-version", AppVersion);
+
 /** @type {Store.Test[]} */
-const TestActual = JSON.parse(localStorage.getItem("app-tests")||"false") || TestDefault;
+const TestActual = PreviewData ? PreviewData : JSON.parse(localStorage.getItem("app-tests")||"false") || TestDefault;
 /**@type {(inState:Store.State)=>void} */
-const SaveTests =(inState)=> localStorage.setItem("app-tests", JSON.stringify(inState.Test));
+const SaveTests =(inState)=>
+{
+    if(!PreviewData)
+    {
+        localStorage.setItem("app-tests", JSON.stringify(inState.Test));
+    }
+}
 
 /** @type {Store.StatePartSimple} */
 const SettingsDefault =
@@ -304,20 +356,23 @@ const SettingsDefault =
     Show: { Cursor:true, Answer:false }
 };
 /** @type {Store.StatePartSimple} */
-const SettingsActual = JSON.parse(localStorage.getItem("app-settings")||"false") || SettingsDefault;
+const SettingsActual = PreviewData ? SettingsDefault : JSON.parse(localStorage.getItem("app-settings")||"false") || SettingsDefault;
 /**@type {(inState:Store.State)=>void} */
 const SaveSettings =(inState)=>
 {
-    /** @type {Store.StatePartSimple} */
+    if(!PreviewData)
-    const clone = {
+    {
-        Chan:inState.Chan,
+        /** @type {Store.StatePartSimple} */
-        Freq:inState.Freq,
+        const clone = {
-        Stim:inState.Stim,
+            Chan:inState.Chan,
-        Errs:inState.Errs,
+            Freq:inState.Freq,
-        Pick:inState.Pick,
+            Stim:inState.Stim,
-        Show:inState.Show
+            Errs:inState.Errs,
-    };
+            Pick:inState.Pick,
-    localStorage.setItem("app-settings", JSON.stringify(clone));
+            Show:inState.Show
+        };
+        localStorage.setItem("app-settings", JSON.stringify(clone));      
+    }
 };
 
 export const Initial = Reducer(
@@ -328,7 +383,7 @@ export const Initial = Reducer(
     {
         Test: undefined,
         Freq: undefined,
-        Mark: undefined
+        Mark: {User: undefined, Errs:0}
     },
     Draw:
     {

js/twind.js

@@ -8,6 +8,10 @@ export const Configure = {
     {
         extend:
         {
+            screens:
+            {
+                "small-desktop": '1100px'
+            },
             // @ts-ignore: typings for keyframes are missing in twind
             keyframes:
             {
@@ -67,12 +71,15 @@ export const Configure = {
         [
             'shadow-sss',
             {
-                "box-shadow": "rgb(0 0 0 / 50%) 0px -2px 3px inset, rgb(255 255 255 / 50%) 0px 10px 10px inset"
+                "box-shadow": "rgb(0 0 0 / 30%) 0px -2px 3px inset, rgb(255 255 255 / 10%) 0px 10px 10px inset"
             }
         ],
         [
             'text-shadow-lcd', {"text-shadow": "0px 1px 1px #00000055"}
         ],
+        [
+            'text-shadow-emboss', {"text-shadow": "0px -1px 1px #00000033, 0px 1px 2px #ffffff"}
+        ],
         [ 'box-notch', "border-t(1 [#ffffff]) border-r(1 [#ffffff]) border-b(1 [#00000033]) border-l(1 [#00000033]) flex items-center justify-end gap-1 p-2" ],
         [ "box-buttons", "flex gap-1 items-center p-2 rounded-lg bg-gradient-to-b from-[#00000022] border-b(1 [#ffffff]) border-t(1 [#00000033])"]
     ],

js/ui.js

@@ -5,8 +5,8 @@ import * as Tone from "./tone.js";
 
 /** @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} */
+/** @type {({children, icon, light, disabled, inactive, onClick, classes, classesActive}:{children:preact.VNode, icon?:preact.VNode, light:boolean, disabled:boolean, inactive:boolean, onClick:()=>void, classes?:string, classesActive?:string})=>preact.VNode} */
-export function Button({children, icon, light, disabled, inactive, onClick, classes})
+export function Button({children, icon, light, disabled, inactive, onClick, classes, classesActive})
 {
     const [FlashGet, FlashSet] = React.useState(0);
     const handleClick =()=>
@@ -19,7 +19,7 @@ export function Button({children, icon, light, disabled, inactive, onClick, clas
     return html`
     <button
         onClick=${handleClick}
-        class="relative flex items-stretch rounded-lg text(lg white) border-t(1 solid [#00000011]) border-b(2 solid [#ffffff]) ring-inset ring-black font-sans group transition-all duration-500 ${classes} ${disabled ? "bg-zinc-400" : "bg-earmark"} ${(inactive||disabled) && "cursor-default"}"
+        class="relative flex items-stretch shadow-sss rounded-md text(lg white) border-t(1 solid [#00000011]) border-b(2 solid [#ffffff]) ring-inset ring-black group transition-all duration-500 ${classes} ${disabled ? "bg-zinc-400" : (classesActive||"bg-earmark")} ${(inactive||disabled) && "cursor-default"}"
     >
         <span class="absolute top-0 left-0 w-full h-full rounded-lg bg-black transition-opacity duration-300 opacity-0 ${(!inactive && !disabled) && "group-hover:opacity-50"}"></span>
         ${ FlashGet > 0 && html`<span key=${FlashGet} class="absolute top-0 left-0 w-full h-full rounded-lg bg-green-400 shadow-glow-green-300 animate-flash"></span>` }
@@ -28,13 +28,15 @@ export function Button({children, icon, light, disabled, inactive, onClick, clas
             <span class="absolute top-0 left-0 w-full h-full bg-black rounded(tl-lg bl-lg) ${disabled ? "opacity-20" : "opacity-50"}"></span>
             <span class="relative">${icon}</span>
         </span>` }
-        <div class="flex-1 flex items-center justify-center text-center px-3 py-2 relative border-l(1 [#ffffff22])">
+        <div class="flex-1 flex items-center justify-center text-center font-bold px-3 py-2 relative border-l(1 [#ffffff22])">
             <span class="absolute shadow-glow-yellow-500 top-0 left-1/2 w-6 h-[6px] bg-white rounded-full translate(-x-1/2 -y-1/2) transition-all duration-500 ${light ? "opacity-100" : "opacity-0 scale-y-0"}"></span>
             ${children}
         </div>
     </button>`;
 }
 
+const staticPath = await import.meta.resolve("$/");
+
 /** @type {BasicElement} */
 export const Header =()=>
 {
@@ -42,40 +44,54 @@ export const Header =()=>
     const grade = State.Live.Test?.Done || {Marks:0, Total:0, Score:0};
 
     /** @type {(e:Event)=>void} */
-    const handleChange =(e)=> Dispatch({Name:"Test", Data:parseInt(/** @type {HTMLSelectElement}*/(e.target).value)});
+    const handleChangeCondition =(e)=> Dispatch({Name:"Test", Data:parseInt(/** @type {HTMLSelectElement}*/(e.target).value)});
+    /** @type {(e:Event)=>void} */
+    const handleChangeReliability =(e)=> Dispatch({Name:"Errs", Data:parseInt(/** @type {HTMLSelectElement}*/(e.target).value)});
 
     return html`
-    <div class="flex flex-row items-stretch bg-metal rounded-lg overflow-hidden shadow-md font-sans">
+    <div class="flex flex-col lg:flex-row">
 
-        <div class="p-4">
+        <div class="p-4 box-border w-full lg:w-[350px] self-stretch">
-            <img class="h-auto max-w-[200px]" src="./logo.png"/>
+            <img class="h-24 w-full object-contain object-center lg:object-left" src=${staticPath+"logo.png"}/>
         </div>
 
-        <div class="p-4 flex-1">
+        <div class="bg-metal rounded-lg shadow-md flex-1 lg:self-end">
-            <div class="box-buttons w-full">
+            <p class="text(center shadow-emboss slate-900) uppercase font-bold py-2">Test Patient</p>
-                <select id="test-select" class="w-full px-2 py-2 rounded-lg border(1 slate-200) font-bold text(xl white) cursor-pointer bg-earmark" value=${State.Pick} onChange=${handleChange}>
+            <div class="border-y-1 border-t-slate-300 border-b-white"></div>
-                    ${State.Test.map((t, i)=>html`<option class="text-black" value=${i}>${t.Name}</option>`)}
-                </select>
-            </div>
-            <div class="box-buttons w-full mt-2">
-                <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>
 
-        <div class="p-4">
+            <div class="flex flex-col md:flex-row">
-            <div class="box-buttons flex-col w-[200px] h-full justify-center">
+                <div class="p-2 lg:pr-0 flex-1">
-                <div>Complete: ${grade.Marks} of ${grade.Total}</div>
+                    <div class="flex flex-wrap flex-row items-stretch box-buttons">
-                <div class="w-full h-4 bg-zinc-400 rounded-full overflow-hidden">
+                        <p class="px-2 self-center text(center sm) font-bold lg:w-auto">Condition:</p>
-                    <div class="h-full w-[${grade.Marks/grade.Total*100}%] bg-earmark"></div>
+                        <select id="test-select" class="flex-1 px-2 py-2 rounded-lg border(1 slate-200) font-bold text(md white center) cursor-pointer bg-earmark" value=${State.Pick} onChange=${handleChangeCondition}>
+                            ${State.Test.map((t, i)=>html`<option class="text-black" value=${i}>${t.Name}</option>`)}
+                        </select>
+                    </div>
+                </div>
+                <div class="p-2 flex-2">
+                    <div class="flex flex-wrap flex-row items-stretch box-buttons">
+                        <p class="px-2 self-center text(center sm) font-bold lg:w-auto">Reliability:</p>
+                        <select class="flex-1 px-2 py-2 rounded-lg border(1 slate-200) font-bold text(md white center) cursor-pointer bg-earmark" value=${State.Errs} onChange=${handleChangeReliability}>
+                            <option class="text-black" value=${0}>Perfect (Training Mode)</option>
+                            <option class="text-black" value=${1}>Good</option>
+                            <option class="text-black" value=${2}>Reduced</option>
+                            <option class="text-black" value=${3}>Poor</option>
+                        </select>
+                        <!--
+                        <${Button} inactive=${State.Errs == 0} light=${State.Errs == 0} classes="basis-[calc(50%-2px)] md:flex-1 lg:flex-[1.5] text-xs" classesActive="bg-green-600"   onClick=${()=>Dispatch({Name:"Errs", Data:0})}><strong class="mr-1">Perfect</strong><span>(Training Mode)</span><//>
+                        <${Button} inactive=${State.Errs == 1} light=${State.Errs == 1} classes="basis-[calc(50%-2px)] md:flex-1  font-bold   text-xs"  classesActive="bg-yellow-600" onClick=${()=>Dispatch({Name:"Errs", Data:1})}>Good<//>
+                        <${Button} inactive=${State.Errs == 2} light=${State.Errs == 2} classes="basis-[calc(50%-2px)] md:flex-1  font-bold   text-xs"  classesActive="bg-orange-700" onClick=${()=>Dispatch({Name:"Errs", Data:2})}>Reduced<//>
+                        <${Button} inactive=${State.Errs == 3} light=${State.Errs == 3} classes="basis-[calc(50%-2px)] md:flex-1  font-bold   text-xs"  classesActive="bg-red-800"     onClick=${()=>Dispatch({Name:"Errs", Data:3})}>Poor<//>
+                        -->
+                    </div>
                 </div>
-                <div class="text-sm">Accuracy: ${grade.Score}%</div>
-                <${Button} disabled=${grade.Marks == 0} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Kill", Data:0})}>Start Over<//>
             </div>
+
+
         </div>
+
+
+
     </div>`;
 }
 
@@ -83,18 +99,33 @@ export const Header =()=>
 export const Display =()=>
 {
     const [State, Dispatch] = Store.Consumer();
+    const grade = State.Live.Test?.Done || {Marks:0, Total:0, Score:0};
     return html`
-    <div class="flex justify-end">
+    
-        <div class="bg-metal rounded-lg overflow-hidden shadow-md p-4">
+        <div class="flex flex-col sm:flex-row bg-metal rounded-lg overflow-hidden shadow-md">
-            <div class="box-buttons">
+            <div class="p-2 flex-2">
-                <${Button} light=${State.Show.Cursor} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"ShowCursor", Data:!State.Show.Cursor})}>Cursor<//>
+                <div class="box-buttons">
-                <${Button} light=${State.Show.Answer} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"ShowAnswer", Data:!State.Show.Answer})}>Answer<//>
+                    <p class="text-sm mr-1">Show:</p>
+                    <${Button} light=${State.Show.Cursor} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"ShowCursor", Data:!State.Show.Cursor})}>Cursor<//>
+                    <${Button} light=${State.Show.Answer} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"ShowAnswer", Data:!State.Show.Answer})}>Answer<//>
+                </div>
+            </div>
+            <div class="p-2 flex-1">
+                <div class="box-buttons flex flex-col sm:flex-row justify-center">
+                    <div class="px-2 font-bold">Complete: ${grade.Marks} of ${grade.Total}</div>
+                    <div class="flex-1 h-4 bg-zinc-400 rounded-full overflow-hidden">
+                        <div class="h-full w-[${grade.Marks/grade.Total*100}%] bg-earmark"></div>
+                    </div>
+                    <div class="px-2 text-sm">Accuracy: ${grade.Score}%</div>
+                    <${Button} disabled=${grade.Marks == 0} classes="text-xs" onClick=${()=>Dispatch({Name:"Kill", Data:0})}>Start Over<//>
+                </div>
             </div>
         </div>
-    </div>
+    
     `;
 };
 
+
 /** @type {BasicElement} */
 export const Controls =()=>
 {
@@ -113,27 +144,14 @@ export const Controls =()=>
 
             if(State.Live.Freq)
             {
-                const testMark = State.Live.Freq[/** @type {"TestL"|"TestR"}*/(`Test${State.Chan.Value ? "R":"L"}`)];
+                const audible = State.Stim.Value >= (State.Live.Mark.Test?.Stim??0);
-                const audible = State.Stim.Value >= testMark.Stim;
 
-                const error = State.Stim.Value - testMark.Stim;
+                const errorScaled = State.Live.Mark.Errs;
-                let errorMapped = error;
-                     if(error >= 30){ errorMapped = 0.0; }
-                else if(error >= 25){ errorMapped = 0.1; }
-                else if(error >= 20){ errorMapped = 0.2; }
-                else if(error >= 15){ errorMapped = 0.3; }
-                else if(error >= 10){ errorMapped = 0.5; }
-                else if(error >=  5){ errorMapped = 0.7; }
-                else if(error ==  0){ errorMapped = 1.0; }
-                else if(error >= -5){ errorMapped = 0.5; }
-                else if(error >=-10){ errorMapped = 0.1; }
-                else if(error >=-15){ errorMapped = 0.0; }
-
-                const errorScaled = State.Errs*errorMapped;
                 const errorSampled = Math.random() < errorScaled;
-                const percieved = errorSampled ? !audible : audible
+                const percieved = errorSampled ? !audible : audible;
+
                 const handler = percieved ? ()=>playSet(2) : ()=>playSet(0);
-                console.log("Error:", error, "Error Mapped:", errorMapped, "Error Scaled:", errorScaled, "Error Sampled:", errorSampled);
+                console.log("Audible:", audible, "Error Scaled:", errorScaled, "Error Sampled:", errorSampled, "Percieved", percieved);
                 timer = setTimeout(handler, 800 + Math.random()*1300);
             }
         }
@@ -144,114 +162,143 @@ export const Controls =()=>
     const classTitle = "flex-1 text-sm"
 
     return html`
-    <div class="flex flex-col w-full md:w-[320px] font-sans justify-center gap-4">
+    <div class="grid grid-cols-6 gap-4 w-full lg:w-[300px]">
-        <div class="flex-col bg-metal rounded-lg overflow-hidden shadow-md">
+
-            <div class="p-4 pb-1">
+        <div class="col-start-1 col-end-7 md:col-end-4 lg:col-end-7  flex-col bg-metal rounded-lg overflow-hidden shadow-md">
+            <p class="text(center shadow-emboss slate-900) uppercase font-bold py-2">Controls</p>
+            <div class="border-y-1 border-t-slate-300 border-b-white"></div>
+            <div class="p-2 pb-1">
                 <div class="box-buttons min-w-[50%]">
-                    <${Button} inactive=${State.Chan.Value == 0} light=${State.Chan.Value == 0} classes="flex-1" onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>Left<//>
+                    <p class="text(sm ) mx-2">Channel</p>
-                    <${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Right<//>
+                    <${Button} inactive=${State.Chan.Value == 0} light=${State.Chan.Value == 0} classes="flex-1 text-sm" onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>Left<//>
+                    <${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1 text-sm" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Right<//>
                 </div>
             </div>
-            <div class="p-4 py-1">
+            <div class="p-2 py-1">
                 <div class="box-buttons min-w-[50%]">
-                    <div class="flex-1 text-center text-shadow-lcd"><strong>${Store.ColumnMapping[State.Freq.Value][0]}</strong> Hz</div>
+                    <div class="flex-1 text-center">
+                        <p class="text-sm">Frequency <strong>${Store.ColumnMapping[State.Freq.Value][0]}</strong> (Hz) </p>
+                    </div>
                     <${Button} disabled=${State.Freq.Value == State.Freq.Min} onClick=${()=>Dispatch({Name:"Freq", Data:-1})}>
-                        <svg class="my-1 h-3 w-3 overflow-visible stroke(white 2)">
+                        <svg class="my-1 h-2 w-2 overflow-visible stroke(white 2)">
                             <${Glyph.Minus}/>
                         </svg>
                     <//>
                     <${Button} disabled=${State.Freq.Value == State.Freq.Max} onClick=${()=>Dispatch({Name:"Freq", Data:1})}>
-                        <svg class="my-1 h-3 w-3 overflow-visible stroke(white 2)">
+                        <svg class="my-1 h-2 w-2 overflow-visible stroke(white 2)">
                             <${Glyph.Plus}/>
                         </svg>
                     <//>
                 </div>
             </div>
-            <div class="p-4 pt-2">
+            <div class="p-2 pt-2">
                 <div class="box-buttons min-w-[50%]">
-                    <div class="flex-1 text-center text-shadow-lcd"><strong>${State.Stim.Value}</strong> dbHL</div>
+                    <div class="flex-1 text-center">
+                        <p class="text-sm">Hearing Level <strong>${State.Stim.Value}</strong> (dBHL)</p>
+                    </div>
                     <${Button} disabled=${State.Stim.Value == State.Stim.Min} onClick=${()=>Dispatch({Name:"Stim", Data:-1})}>
-                    <svg class="my-1 h-3 w-3 overflow-visible stroke(white 2)">
+                    <svg class="my-1 h-2 w-2 overflow-visible stroke(white 2)">
                             <${Glyph.Minus}/>
                         </svg>
                     <//>
                     <${Button} disabled=${State.Stim.Value == State.Stim.Max} onClick=${()=>Dispatch({Name:"Stim", Data:1})}>
-                        <svg class="my-1 h-3 w-3 overflow-visible stroke(white 2)">
+                        <svg class="my-1 h-2 w-2 overflow-visible stroke(white 2)">
                             <${Glyph.Plus}/>
                         </svg>
                     <//>
                 </div>
             </div>
-            
         </div>
 
-        <div class="flex-col bg-metal rounded-lg overflow-hidden shadow-md">
+        <div class="col-start-1 col-end-7 md:col-start-4 lg:col-start-1  flex-col bg-metal rounded-lg overflow-hidden shadow-md">
-            <div class="p-4 pb-0">
+            <p class="text(center shadow-emboss slate-900) uppercase font-bold py-2">Tone</p>
+            <div class="border-y-1 border-t-slate-300 border-b-white"></div>
+            <div class="p-2">
                 <div class="box-buttons flex-1">
                     <div class="flex-1">
-                        <${Button}
+                        <div class="flex gap-1 mb-2">
-                            classes="w-full flex-1 self-center"
-                            onClick=${()=>playSet(1)}
-                            disabled=${playGet==1}
-                            icon=${html`<svg class="w-3 h-3 mx-1" viewBox="0 0 20 20">
-                                <polygon points="0,0 20,10 0,20" fill="#ffffff" stroke="none"></polygon>
-                            </svg>`}
-                        >
-                            <span class="py-2">Present Tone</span>
-                        <//>
-                        <div class="flex gap-1 mt-2">
                             <${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<//>
                         </div>
+                        <div class="flex items-start">
+                            <${Button}
+                                classes="w-full flex-2"
+                                onClick=${()=>playSet(1)}
+                                disabled=${playGet==1}
+                                icon=${html`<svg class="w-3 h-3 mx-1" viewBox="0 0 20 20">
+                                    <polygon points="0,0 20,10 0,20" fill="#ffffff" stroke="none"></polygon>
+                                </svg>`}
+                            >
+                                <span class="py-2 text-sm leading-none">Present Tone</span>
+                            <//>
+                        </div>
+                    </div>
+                    <div class="">
+                        <p class="text(center sm shadow-emboss) mt-2 -mb-2 font-bold">Response:</p>
+                        <svg width="80" height="80" preserveAspectRatio="none" viewBox="0 0 79 79" fill="none" class="mx-auto mt-2">
+                            <circle fill="url(#metal)" cx="39" cy="40" r="35"></circle>
+                            <circle fill="url(#metal)" cx="39.5" cy="39.5" r="29.5" transform="rotate(180 39.5 39.5)"></circle>
+                            <circle fill="url(#metal)" cx="39" cy="40" r="27"></circle>
+                            <circle fill="url(#backwall)" cx="39" cy="40" r="25"></circle>
+                            <ellipse fill="url(#clearcoat)" cx="39" cy="33" rx="20" ry="16"></ellipse>
+                            ${playGet == 2 && html`<circle fill="url(#light)" cx="39.5" cy="39.5" r="36" class="animate-pulse"></circle>`}
+                            <defs>
+                                <linearGradient id="metal" x1="39.5" y1="1" x2="39.5" y2="78" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.0" stop-color="#C4C4C4" stop-opacity="1.0"></stop>
+                                    <stop offset="1.0" stop-color="#F2F2F2" stop-opacity="1.0"></stop>
+                                </linearGradient>
+                                <radialGradient id="backwall" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(39 56) rotate(-90) scale(45.5 74.4907)">
+                                    <stop offset="0.0" stop-color="#AAAAAA" stop-opacity="1.0"></stop>
+                                    <stop offset="1.0" stop-color="#333333" stop-opacity="1.0"></stop>
+                                </radialGradient>
+                                <radialGradient id="clearcoat" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(39 38.5) rotate(90) scale(50.5 71.9394)">
+                                    <stop offset="0.0" stop-color="#ffffff" stop-opacity="0.0"></stop>
+                                    <stop offset="0.7" stop-color="#ffffff" stop-opacity="1.0"></stop>
+                                </radialGradient>
+                                <radialGradient id="light" cx="0" cy="0" r="1.0" gradientUnits="userSpaceOnUse" gradientTransform="translate(39.5 39.5) rotate(90) scale(39.5)">
+                                    <stop offset="0.2" stop-color="#ffffff" stop-opacity="1.0"></stop>
+                                    <stop offset="0.5" stop-color="#ff8800" stop-opacity="1.6"></stop>
+                                    <stop offset="0.9" stop-color="#ffffff" stop-opacity="0.0"></stop>
+                                </radialGradient>
+                            </defs>
+                        </svg>
                     </div>
                 </div>
-                <svg width="80" height="80" preserveAspectRatio="none" viewBox="0 0 79 79" fill="none" class="mx-auto mt-2">
-                    <circle fill="url(#metal)" cx="39" cy="40" r="35"></circle>
-                    <circle fill="url(#metal)" cx="39.5" cy="39.5" r="29.5" transform="rotate(180 39.5 39.5)"></circle>
-                    <circle fill="url(#metal)" cx="39" cy="40" r="27"></circle>
-                    <circle fill="url(#backwall)" cx="39" cy="40" r="25"></circle>
-                    <ellipse fill="url(#clearcoat)" cx="39" cy="33" rx="20" ry="16"></ellipse>
-                    ${playGet == 2 && html`<circle fill="url(#light)" cx="39.5" cy="39.5" r="36" class="animate-pulse"></circle>`}
-                    <defs>
-                        <linearGradient id="metal" x1="39.5" y1="1" x2="39.5" y2="78" gradientUnits="userSpaceOnUse">
-                            <stop offset="0.0" stop-color="#C4C4C4" stop-opacity="1.0"></stop>
-                            <stop offset="1.0" stop-color="#F2F2F2" stop-opacity="1.0"></stop>
-                        </linearGradient>
-                        <radialGradient id="backwall" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(39 56) rotate(-90) scale(45.5 74.4907)">
-                            <stop offset="0.0" stop-color="#AAAAAA" stop-opacity="1.0"></stop>
-                            <stop offset="1.0" stop-color="#333333" stop-opacity="1.0"></stop>
-                        </radialGradient>
-                        <radialGradient id="clearcoat" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(39 38.5) rotate(90) scale(50.5 71.9394)">
-                            <stop offset="0.0" stop-color="#ffffff" stop-opacity="0.0"></stop>
-                            <stop offset="0.7" stop-color="#ffffff" stop-opacity="1.0"></stop>
-                        </radialGradient>
-                        <radialGradient id="light" cx="0" cy="0" r="1.0" gradientUnits="userSpaceOnUse" gradientTransform="translate(39.5 39.5) rotate(90) scale(39.5)">
-                            <stop offset="0.2" stop-color="#ffffff" stop-opacity="1.0"></stop>
-                            <stop offset="0.5" stop-color="#ff8800" stop-opacity="1.6"></stop>
-                            <stop offset="0.9" stop-color="#ffffff" stop-opacity="0.0"></stop>
-                        </radialGradient>
-                    </defs>
-                </svg>
             </div>
         </div>
-        <div class="flex-col bg-metal rounded-lg overflow-hidden shadow-md">
+
-            <div class="p-4">
+        <div class="col-start-1 col-end-7  flex-col bg-metal rounded-lg overflow-hidden shadow-md">
-                <div class="box-buttons flex-col gap-2 min-w-[50%]">
+            <p class="text(center shadow-emboss slate-900) uppercase font-bold py-2">Thresholds</p>
+            <div class="border-y-1 border-t-slate-300 border-b-white"></div>
+            <div class="p-2">
+                <div class="box-buttons flex-col md:flex-row flex-wrap gap-2 items-stretch min-w-[50%]">
                     <${Button}
                         onClick=${()=>Dispatch({Name:"Mark", Data:true })}
-                        classes="text-md w-full"
+                        classes="text-sm flex-1"
                         icon=${html`
-                            <svg class="h-2 w-2 mx-1 overflow-visible stroke(white 2)">
+                            <svg class="h-2 w-2 overflow-visible stroke(white 2)">
                                 <${State.Chan.Value ? Glyph.O : Glyph.X}/>
                             </svg>`}
                     >
                         Accept
                     <//>
                     <${Button}
-                        onClick=${()=>Dispatch({Name:"Mark", Data:false})}
+                        onClick=${()=>Dispatch({Name:"Mark", Data:null })}
-                        classes="text-sm w-full"
+                        classes="text-sm flex-1"
                         icon=${html`
-                            <svg class="h-2 w-2 mx-1 overflow-visible stroke(white 2)">
+                        <svg class="h-2 w-2 overflow-visible stroke(white 2)">
+                            <${Glyph.Null}/>
+                        </svg>
+                        `}
+                        disabled=${State.Live.Mark.User == undefined}
+                    >
+                        Clear
+                    <//>
+                    <${Button}
+                        onClick=${()=>Dispatch({Name:"Mark", Data:false})}
+                        classes="mt-1 text-xs flex-1 leading-none"
+                        icon=${html`
+                            <svg class="h-[6px] w-[6px] overflow-visible stroke(white 2)">
                                 <${State.Chan.Value ? Glyph.O : Glyph.X}>
                                     <${Glyph.Arrow}/>
                                 <//>
@@ -259,18 +306,6 @@ export const Controls =()=>
                     >
                         No Response
                     <//>
-                    <${Button}
-                        icon=${html`
-                        <svg class="h-2 w-2 mx-1 overflow-visible stroke(white 2)">
-                            <${Glyph.Null}/>
-                        </svg>
-                        `}
-                        onClick=${()=>Dispatch({Name:"Mark", Data:null })}
-                        classes="text-sm w-full"
-                        disabled=${State.Live.Mark == undefined}
-                    >
-                        Clear
-                    <//>
                 </div>
             </div>
         </div>
@@ -284,9 +319,9 @@ export const Audiogram =()=>
     const [State] = Store.Consumer();
 
     const testMarksL = State.Draw.TestL.Points.map(p=>html`<${Mark} x=${p.X} y=${p.Y} response=${p.Mark?.Resp} right=${false}/>`);
-    const userMarksL = State.Draw.UserL.Points.map(p=>html`<${Mark} x=${p.X} y=${p.Y} response=${p.Mark?.Resp} right=${false} classes=${State.Live.Mark == p.Mark ? "stroke-bold":""}/>`);
+    const userMarksL = State.Draw.UserL.Points.map(p=>html`<${Mark} x=${p.X} y=${p.Y} response=${p.Mark?.Resp} right=${false} classes=${State.Live.Mark.User == p.Mark ? "stroke-bold":""}/>`);
     const testMarksR = State.Draw.TestR.Points.map(p=>html`<${Mark} x=${p.X} y=${p.Y} response=${p.Mark?.Resp} right=${true} />`);
-    const userMarksR = State.Draw.UserR.Points.map(p=>html`<${Mark} x=${p.X} y=${p.Y} response=${p.Mark?.Resp} right=${true} classes=${State.Live.Mark == p.Mark ? "stroke-bold":""}/>`);
+    const userMarksR = State.Draw.UserR.Points.map(p=>html`<${Mark} x=${p.X} y=${p.Y} response=${p.Mark?.Resp} right=${true} classes=${State.Live.Mark.User == p.Mark ? "stroke-bold":""}/>`);
 
     const testLinesL = State.Draw.TestL.Paths.map( p=>html`<line class="opacity-60" x1=${p.Head.X} y1=${p.Head.Y} x2=${p.Tail.X} y2=${p.Tail.Y} />`);
     const userLinesL = State.Draw.UserL.Paths.map( p=>html`<line class="opacity-60" x1=${p.Head.X} y1=${p.Head.Y} x2=${p.Tail.X} y2=${p.Tail.Y} />`);
@@ -305,8 +340,8 @@ export const Audiogram =()=>
     ${
         State.Show.Cursor && html`
         <svg class="absolute top-0 w-1 h-1 overflow-visible transition-all duration-500" style=${{top:State.Draw.Cross?.Y, left:State.Draw.Cross?.X}}>
-            <ellipse cx="0" cy="0" rx="8" ry="30" fill="url(#glow)"></ellipse>
+            <ellipse cx="0" cy="0" rx="5" ry="30" fill="url(#glow)"></ellipse>
-            <ellipse cx="0" cy="0" rx="30" ry="8" fill="url(#glow)"></ellipse>
+            <ellipse cx="0" cy="0" rx="30" ry="5" fill="url(#glow)"></ellipse>
             <defs>
                 <radialGradient id="glow">
                     <stop stop-color=${State.Chan.Value ? "red" : "blue"} stop-opacity="0.6" offset="0.0"></stop>
@@ -330,7 +365,7 @@ export function Chart({children})
     {
         rules.push(html`
         <span class="block absolute top-[-${inset}px] left-[${position*100}%] w-0 h-[calc(100%+${inset*2}px)] border-r(1 zinc-400) ${!normal && "border-dashed"}">
-            <span class="block absolute top-0 left-0 -translate-x-1/2 -translate-y-full pb-${normal ? 4 : 1}">${label}</span>
+            <span class="block text-[10px] absolute top-0 left-0 -translate-x-1/2 -translate-y-full pb-${normal ? 4 : 1}">${label}</span>
         </span>`
         );
     });
@@ -339,17 +374,17 @@ export function Chart({children})
     {
         rules.push(html`
         <span class="block absolute  left-[-${inset}px]   top-[${((db-State.Stim.Min) / (State.Stim.Max-State.Stim.Min))*100}%]   h-0 w-[calc(100%+${inset*2}px)] border-b(${db == 0 ? "2 black" : "1 zinc-400"})">
-            <span class="block absolute top-0 left-0 -translate-x-full -translate-y-1/2 pr-2">${db}</span>
+            <span class="block text-[10px] absolute top-0 left-0 -translate-x-full -translate-y-1/2 pr-2">${db}</span>
         </span>`
         );
     }
     return html`
-    <div class="relative w-full pb-[calc(55%+70px)] font(sans medium) text(xs) self-start">
+    <div class="relative w-full pb-[calc(90%+70px)] md:pb-[calc(65%+70px)] lg: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)">
+        <div class="absolute right-0 bottom-0 w-[calc(100%-80px)] 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="block        absolute top-[-65px] left-0  w-full      text(sm center)     font-black">Frequency (Hz)</span>
             <span class="inline-block absolute top-[50%]   left-[-50px] ">
                 <span class="inline-block -rotate-90 origin-top -translate-x-1/2 text(sm center) font-black">
-                    Hearing Level (dbHL)
+                    Hearing Level (dBHL)
                 </span>
             </span>
             <div class=${`relative top-[${inset}px] left-[${inset}px] w-[calc(100%-${inset*2}px)] h-[calc(100%-${inset*2}px)]`}>

ts/store.d.ts

@@ -21,7 +21,12 @@ declare namespace Store {
   type Context = {
     Test?: Test;
     Freq?: TestFrequency;
-    Mark?: TestFrequencySample;
+    Mark:
+    {
+      User?: TestFrequencySample,
+      Test?: TestFrequencySample,
+      Errs : number
+    }
   };
   
   type StatePartSimple =