Tone attributes update

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "deno.enable": true,
+    "deno.unstable": true
+}

app.js

@@ -1,21 +1,88 @@
 //@ts-check
-import React from "https://esm.sh/preact@10.11.3/compat";
+import * as TW   from "https://esm.sh/@twind/core@1.0.1";
+import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
+import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
+
+/** @type {TW.TwindConfig} */
+const Configure = {
+    theme:
+    {
+        extend:
+        {
+            keyframes:
+            {
+                flash:
+                {
+                      '0%': { opacity: 1.0 },
+                     '50%': { opacity: 0.3 },
+                    '100%': { opacity: 0.0 }
+                },
+                pulse:
+                {
+                      "0%": { opacity: 0.0 },
+                     "10%": { opacity: 0.0 },
+                     "12%": { opacity: 1.0 },
+                     "22%": { opacity: 1.0 },
+                     "42%": { opacity: 0.2 },
+                    "100%": { opacity: 0.0 }
+                }
+            },
+            animation:
+            {
+                flash: "flash 1s both"
+            },
+            strokeWidth:
+            {
+                "bold": "3px"
+            }
+        }
+    },
+    rules:
+    [
+        [
+            "stroke-draw",
+            {
+                "vector-effect": "non-scaling-stroke",
+                "stroke-linecap": "square",
+                "fill": "none"
+            },
+        ],
+        [
+            'shadow-glow-(.*)',
+            (match, context)=>
+            {
+                return { "box-shadow": `0px 0px 5px 2px ${context.theme().colors[match[1]]}` };
+            }
+        ],
+        [
+            'shadow-sss',
+            {
+                "box-shadow": "rgb(0 0 0 / 50%) 0px -3px 2px inset, rgb(255 255 255 / 50%) 0px 10px 10px inset"
+            }
+        ]
+    ],
+    presets: [TWPreTail(), TWPreAuto()]
+};
+const ShadowDOM = document.querySelector("#app").attachShadow({mode: "open"});
+const ShadowDiv = document.createElement("div");
+const ShadowCSS = document.createElement("style");
+ShadowDOM.append(ShadowCSS);
+ShadowDOM.append(ShadowDiv);
+TW.observe(TW.twind(Configure, TW.cssom(ShadowCSS)), ShadowDiv);
+
+import * as UI from "./ui.js";
+import {render}  from "https://esm.sh/preact@10.11.3/compat";
 import {html}    from "https://esm.sh/htm@3.1.1/preact";
-
+render(html`
-import TW from "https://esm.sh/@twind/core";
+    <${UI.Button} icon="+">hey!<//>
-import TWpreTailwind from "https://esm.sh/@twind/preset-tailwind@1.0.1";
+    <${UI.Button} light>Left<//>
-import preAutoprefix from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
+    <${UI.Button} inactive>Right<//>
-
+    <${UI.Button} disabled>Right<//>
-const root = document.querySelector("#app");
+    <${UI.Chart}>
-const rootShadow = root.attachShadow({mode: "open"});
+        <svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 bold draw)">
-const rootShadowRoot = document.createElement("strong");
+            <${UI.Mark} right=${true}  x=${"20%"} y="20%" />
-rootShadow.append(rootShadowRoot);
+            <${UI.Mark} right=${false} x=${"10%"} y="20%" response=${true} />
-*/
+            <${UI.Mark} right=${false}/>
-
+        </svg>
-install({presets:[preTailwind(), preAutoprefix()]});
+    <//>
-
+`, ShadowDiv);
-
-React.render(html`
-    <p class="p-4">suuupu</p>
-    <${UI.Button} label="Play Tone" icon=">" light/>
-`, root);

deno.json

@@ -0,0 +1,7 @@
+{
+    "tasks":
+    {
+        "fs": "deno run -A --no-lock https://deno.land/std@0.166.0/http/file_server.ts",
+        "test": "deno test 'store_test.js' --no-lock"
+    }
+}

index.html

@@ -1,39 +1,2 @@
-<p class="text-red-500 p-4">outside (should ignore classes and be unstyled)</p>
 <div id="app"></div>
-
+<script type="module" src="app.js"></script>
-<script type="module">
-import React  from "https://esm.sh/preact@10.11.3/compat";
-import {html} from "https://esm.sh/htm@3.1.1/preact";
-
-import * as TW   from "https://esm.sh/@twind/core@1.0.1";
-import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
-import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
-
-const styles = document.createElement("style");
-const root = document.querySelector("#app");
-
-const appShadow = root.attachShadow({mode: "open"});
-const appShadowRoot = document.createElement("div");
-appShadow.append(styles);
-appShadow.append(appShadowRoot);
-
-const inst = TW.twind({presets:[TWPreTail(), TWPreAuto()]}, TW.cssom(styles));
-TW.observe(inst, appShadowRoot);
-
-const El =()=>
-{
-    const [StateGet, StateSet] = React.useState(false);
-    return html`
-    <div class=${StateGet ? "text-white bg-black": "text-red"} onClick=${e=>StateSet(!StateGet)}>
-        click
-    </div>
-    `;
-}
-
-React.render(html`
-<p class="text(yellow-500 lg) p-4 font(sans black)">
-    inside (should be styled)
-    <${El}/>
-</p>`, appShadowRoot);
-
-</script>

store.js

@@ -1,31 +1,155 @@
 //@ts-check
-/** @typedef {[f1:ListEntry, f2:ListEntry, f3:ListEntry, f4:ListEntry, f5:ListEntry, f6:ListEntry, f7:ListEntry]} FreqList */
-/** @typedef {number|TestMark} ListEntry */
-/** @typedef {{Name:string, Sample:{Left:FreqList, Right:FreqList}, Answer?:{Left:FreqList, Right:FreqList}}} Test */
-/** @typedef {{Stim:number|null, Resp:boolean}|null} TestMark*/
 
-/** @type FreqList */
+const size = 100/6;
-export const Frequencies = [500, 1000, 2000, 3000, 4000, 6000, 8000];
+/** @typedef {[frequency:number, position:number, normal:boolean]} ColumnMapping  */
-/** @type Array<Test> */
+/** @type {Array<ColumnMapping>} */
-export const Tests = [
+export const ColumnMapping = [
-    {
+    [ 125, size*0.0, true ],
-        Name: "Patient A  Asymmetric Notch",
+    [ 250, size*1.0, true ],
-        Sample:{
+    [ 500, size*2.0, true ],
-             Left:[15, 10, 15, 30, 40, 35, 20],
+    [1000, size*3.0, true ],
-            Right:[10, 10, 20, 40, 55, 40, 15]
+    [2000, size*4.0, true ],
-        }
+    [3000, size*4.5, false],
-    }
+    [4000, size*5.0, true ],
+    [6000, size*5.5, false],
+    [8000, size*6.0, true ]
 ];
-
+/** @type {(inFrequency:number)=>ColumnMapping|false} */
-export const Controls =
+export const ColumnLookup =(inFrequency)=>
 {
-    Test:0,
+    for(let i=0; i<ColumnMapping.length; i++)
-    Channel: "left",
+    {
-    Frequency: 1,
+        const map = ColumnMapping[i];
-    Stimulus: 30
+        if(map[0] == inFrequency){ return map; }
+    }
+    return false;
 };
 
-function Reducer(inState, inAction)
+/** @typedef {{Min:number, Max:number}} Limit */
+/** @type {Record<string, Limit>} */
+export const ToneLimit =
 {
-
+    Freq: { Min: 0,   Max: ColumnMapping.length-1 },
+    Stim: { Min: -10, Max: 120 },
+    Chan: { Min: 0,   Max: 1},
+};
+/** @type {(inValue:number, inLimit:Limit)=>number} */
+export const ApplyLimit =(inValue, inLimit)=>
+{
+    if(inValue < inLimit.Min){ return inLimit.Min; }
+    else if(inValue > inLimit.Max) { return inLimit.Max; }
+    else{ return inValue; }
+}
+
+/** @typedef {(freq:TestFrequency, chan:number)=>TestFrequencySample|undefined} MarkLookup */
+/** @type {Record<string, MarkLookup>} */
+export const ChanMark =
+{
+    User: (freq, chan)=> chan == 0 ? freq.UserL : freq.UserR,
+    Test: (freq, chan)=> chan == 0 ? freq.TestL : freq.TestR
+};
+
+
+/** @typedef {{Stim:number, Resp:boolean}} TestFrequencySample */
+/** @typedef {{Hz:number, TestL:TestFrequencySample, TestR:TestFrequencySample, UserL?:TestFrequencySample, UserR?:TestFrequencySample}} TestFrequency */
+/** @typedef {{Name:string, Plot:Array<TestFrequency>}} Test */
+/** @typedef {{Test?:Test, Freq?:TestFrequency, Mark?:TestFrequencySample}} Context */
+/** @typedef {{Chan:number, Freq:number, Stim:number, Live:Context, Tests:Array<Test>}} State */
+/** @type {State} */
+export const Initial =
+{
+    Chan: 0,
+    Freq: 3,
+    Stim: 30,
+    Live:
+    {
+        Test: undefined,
+        Freq: undefined,
+        Mark: undefined
+    },
+    Tests: [
+        {
+            Name: "Patient A  Asymmetric Notch",
+            Plot:
+            [
+                { Hz: 500,  TestL: { Stim: 30, Resp: true }, TestR: { Stim: 50, Resp: true } },
+                { Hz: 1000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } }
+            ]
+        }
+    ]
+};
+
+/** @typedef {{Name:"Mark", Data:boolean|null}} ActionMark */
+/** @typedef {{Name:"Test", Data:number}} ActionTest */
+/** @typedef {{Name:"Chan", Data:number}} ActionChan */
+/** @typedef {{Name:"Freq", Data:number}} ActionFreq */
+/** @typedef {{Name:"Stim", Data:number}} ActionStim */
+/** @typedef {ActionMark|ActionTest|ActionChan|ActionFreq|ActionStim} Action */
+/** @typedef {(inState:State, inAction:Action)=>State} Reducer */
+/** @typedef {(inState:State)=>boolean} SelectionUpdater */
+/** @type {Record<string, SelectionUpdater>} */
+const Update =
+{
+    Freq(inState)
+    {
+        const column = ColumnMapping[inState.Freq];
+        if(column && inState.Live.Test)
+        {
+            const hz = column[0];
+            inState.Live.Freq = undefined;
+            for(let i=0; i<inState.Live.Test.Plot.length; i++)
+            {
+                const plot = inState.Live.Test.Plot[i];
+                if(plot.Hz == hz)
+                {
+                    inState.Live.Freq = plot;
+                    return true;
+                }
+            }
+        }
+        return false;
+    },
+    Mark(inState)
+    {
+        const freq = inState.Live.Freq;
+        if(freq)
+        {
+            inState.Live.Mark = inState.Chan == 0 ? freq.UserL : freq.UserR;
+            return true;
+        }
+        return false;
+    }
+};
+/** @type {Reducer} */
+export function Reducer(inState, inAction)
+{
+    const clone = {...inState};
+    const {Name, Data} = inAction;
+
+    if(Name == "Test")
+    {
+        clone.Live.Test = clone.Tests[Data];
+        Update.Freq(clone);
+        Update.Mark(clone);
+    }
+    else if (Name == "Mark")
+    {
+        if(clone.Live.Freq)
+        {
+            const channelKey = clone.Chan == 0 ? "UserL" : "UserR";
+            const channelVal = Data !== null ? {Stim:clone.Stim, Resp:Data} : undefined;
+            clone.Live.Mark = clone.Live.Freq[channelKey] = channelVal;
+        }
+    }
+    else if( Name=="Stim" || Name=="Chan" || Name=="Freq")
+    {
+        clone[Name] = ApplyLimit(Data, ToneLimit[Name]);
+        if(Name != "Stim")
+        {
+            Update.Freq(clone);
+            Update.Mark(clone);
+        }
+    }
+
+    return clone;
 }

store_test.js

@@ -0,0 +1,110 @@
+import { assertEquals } from "https://deno.land/std@0.166.0/testing/asserts.ts";
+import { Initial, Reducer, ColumnMapping } from "./store.js";
+
+const States = {
+    list:[Initial],
+    get latest()
+    {
+        return this.list[this.list.length-1];
+    },
+    set latest(input)
+    {
+        this.list.push(input);
+    }
+};
+
+Deno.test("Initial State", async (t)=>
+{
+    await t.step("Selections are empty", ()=>
+    {
+        assertEquals(States.latest.Live.Test, undefined);
+        assertEquals(States.latest.Live.Freq, undefined);
+        assertEquals(States.latest.Live.Mark, undefined);
+    });
+
+    await t.step("Frequency index maps to 1k hz", ()=>
+    {
+        assertEquals(States.latest.Freq, 3);
+        assertEquals(ColumnMapping[States.latest.Freq][0], 1000);
+    });
+
+    await t.step("The first test has its 2nd plot at 1k hz", ()=>
+    {
+        const plot = States.latest.Tests[0].Plot[1];
+        assertEquals(plot.Hz, 1000);
+    });
+})
+
+Deno.test("Select First Test", async (t)=>
+{
+    await t.step("dispatch action", ()=>
+    {
+        States.latest = Reducer(States.latest, {Name:"Test", Data:0});
+    });
+    
+    await t.step("check selections: test and freq, but no mark", ()=>
+    {
+        const s = States.latest;
+        assertEquals(s.Live.Test, s.Tests[0]);
+        assertEquals(s.Live.Freq, s.Tests[0].Plot[1]);
+        assertEquals(s.Live.Mark, undefined);
+    });
+});
+
+Deno.test("Make Marks", async (t)=>
+{
+    let s;
+    await t.step("Left channel selected", ()=>
+    {
+        assertEquals(States.latest.Chan, 0);
+    });
+    await t.step("Dispatch Mark action", ()=>
+    {
+        States.latest = Reducer(States.latest, {Name:"Mark", Data:true});
+    });
+    s = States.latest;
+
+    await t.step("Check selections: test, freq, and mark", ()=>
+    {
+        assertEquals(s.Live.Test, s.Tests[0]);
+        assertEquals(s.Live.Freq, s.Tests[0].Plot[1]);
+        assertEquals(s.Live.Mark, s.Tests[0].Plot[1].UserL);
+    });
+
+    await t.step("Check marked value", ()=>
+    {
+        assertEquals(s.Live.Mark.Stim, s.Stim);
+        assertEquals(s.Live.Mark.Resp, true);
+    });
+
+    await t.step("Dispatch Mark delete action", ()=>
+    {
+        States.latest = Reducer(States.latest, {Name:"Mark", Data:null});
+    });
+    s = States.latest;
+
+    await t.step("Check marked value", ()=>
+    {
+        assertEquals(States.latest.Live.Mark, undefined);
+    });
+
+});
+
+
+Deno.test("Update Tone State", async(t)=>
+{
+    await t.step("all three", ()=>
+    {
+        States.latest = Reducer(States.latest, {Name:"Freq", Data:2});
+        States.latest = Reducer(States.latest, {Name:"Stim", Data:25});
+        States.latest = Reducer(States.latest, {Name:"Chan", Data:1});
+    });
+
+    await t.step("check tone values", ()=>
+    {
+        
+        assertEquals(States.latest.Stim, 25);
+        assertEquals(States.latest.Freq, 2);
+        assertEquals(States.latest.Chan, 1);
+    });
+});

ui.js

@@ -1,26 +1,113 @@
 //@ts-check
 import React from "https://esm.sh/preact@10.11.3/compat";
 import { html } from "https://esm.sh/htm@3.1.1/preact";
+import { ColumnMapping, ColumnLookup } from "./store.js";
 
+/** @typedef {({children}:{children:React.ReactNode})=>JSX.Element} BasicElement */
 
-
+/** @type {({children, icon, light, disabled, inactive}:{children:React.ReactNode, icon?:JSX.Element, light:boolean, disabled:boolean, inactive:boolean})=>JSX.Element} */
-export default {
+export function Button({children, icon, light, disabled, inactive})
-    Button({label, icon, light, disabled})
 {
-        return html`<button class="flex bg-red-500 text-white rounded">
+    const [LightGet, LightSet] = React.useState(light);
-            ${ icon && html`<span class="p-2">${icon}</span>` }
+    const [FlashGet, FlashSet] = React.useState(0);
-            <span class="p-2 relative">
+    const handleClick =()=>
-                <span class="absolute top-0 left-1/2 w-14 h-4 bg-red-500 translate(-x-1/2 -y-1/2) rounded-full border(4 white solid)"></span>
+    {
-                ${label}
+        if(inactive||disabled){ return; }
+        LightSet(!LightGet);
+        FlashSet(FlashGet+1);
+    };
+
+    return html`
+    <button
+        onClick=${handleClick}
+        class="shadow-sss relative flex rounded-lg text(lg white) font-sans group transition-all ${disabled ? "scale-90 bg-gray-400" : "bg-emerald-500"} ${(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>` }
+        
+        ${ icon && html`<span class="block relative p-2 border-r(1 [#00000066])">
+            <span class="absolute top-0 left-0 w-full h-full bg-black rounded(tl-lg bl-lg) opacity-20"></span>
+            <span class="relative">${icon}</span>
+        </span>` }
+        <span class="p-2 relative border-l(1 [#ffffff44])">
+            <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 ${LightGet ? "opacity-100" : "opacity-0 scale-y-0"}"></span>
+            ${children}
         </span>
     </button>`;
-    },
+}
-    Chart()
+
+/** @type {BasicElement} */
+export function Chart({children})
 {
+    const inset = 20;
+    /** @type {Array<JSX.Element>} */
+    const rules = [];
+    ColumnMapping.forEach(([label, position, normal])=>
+    {
+        rules.push(html`
+        <span class="block absolute top-[-${inset}px] left-[${position}%] w-0 h-[calc(100%+${inset*2}px)] border-r(1 slate-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>`);
+    });
+
+    const dbMin = -10;
+    const dbMax = 120;
+    for(let db = dbMin; db <= dbMax; db+=10)
+    {
+        rules.push(html`
+        <span class="block absolute  left-[-${inset}px]   top-[${((db-dbMin) / (dbMax-dbMin))*100}%]   h-0 w-[calc(100%+${inset*2}px)] border-b(${db == 0 ? "2 black" : "1 slate-400"})">
+            <span class="block absolute top-0 left-0 -translate-x-full -translate-y-1/2 pr-2">${db}</span>
+        </span>
+        `);
+    }
     return html`
-        <div class="relative w-full h-[600px]">
+    <div class="relative w-full h-[600px] font(sans medium) text(xs)">
-            <div class="absolute right-0 bottom-0 w-[calc(100%-100px)] h-[calc(100%-100px)]"></div>
+        <div class="absolute right-0 bottom-0 w-[calc(100%-100px)] h-[calc(100%-100px)] border(1 slate-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-[-65px] ">
+                <span class="inline-block -rotate-90 origin-top -translate-x-1/2 text(sm center) font-black">
+                    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)]`}>
+                <span class="block absolute top-0 left-[-${inset}px] w-[calc(100%+${inset*2}px)] h-[27%] bg-black opacity-10"></span>
+                ${ rules }
+                <div class="absolute top-0 left-0 w-full h-full">
+                    ${ children }
+                </div>
+            </div>
+        </div>
     </div>
     `;
 }
+
+
+/** @type {Record<string, BasicElement>} */
+const Glyph = {
+    Arrow:({children})=> html`
+    <line vector-effect="non-scaling-stroke" x1="100%" y1="100%" x2="0%"   y2="0%"  ></line>
+    <line vector-effect="non-scaling-stroke" x1="100%" y1="100%" x2="25%"  y2="100%"></line>
+    <line vector-effect="non-scaling-stroke" x1="100%" y1="100%" x2="100%" y2="25%" ></line>`,
+
+    //style="transform: translate(50%, 50%) rotate(-15deg) scale(0.5);"
+    X: ({children})=> html`
+    <line x1="-50%" y1="-50%" x2="50%" y2="50%" ></line>
+    <line x1="-50%" y1="50%"  x2="50%" y2="-50%"></line>
+    <g class="scale-50 translate(x-1/2 y-1/2) rotate-[-15deg]">${children}</g>`,
+
+    O: ({children})=> html`
+    <ellipse rx="50%" ry="50%"></ellipse>
+    <g style="transform: translate(-35.35%, 35.35%) rotate(96deg) scale(0.5);">${children}</g>`
+};
+
+/** @type {({right, response, x, y}:{right:boolean, response?:boolean, x:string|number, y:string|number})=>JSX.Element} */
+export function Mark({right, response, x, y})
+{
+    return html`
+    <svg x=${x} y=${y} width="20" height="20" class="overflow-visible">
+        <${ right ? Glyph.O : Glyph.X }>
+            ${ !response && html`<${Glyph.Arrow}/>`  }
+        <//>
+    </svg>
+    `;
 }