From 4897f7021f276bd3e856b0939146101fad055ebe Mon Sep 17 00:00:00 2001
From: Seth Trowbridge <seth111@gmail.com>
Date: Mon, 5 Dec 2022 09:55:34 -0500
Subject: [PATCH] cleanup

---
 deno.json    |  2 ++
 src/app.js   | 35 +++++++++++------------------------
 src/store.js |  4 ++--
 src/ui.js    | 30 ++++++++++++++----------------
 4 files changed, 29 insertions(+), 42 deletions(-)

diff --git a/deno.json b/deno.json
index 26d8a62..f11ff68 100644
--- a/deno.json
+++ b/deno.json
@@ -1,5 +1,7 @@
 {
     "compilerOptions": {"types":["/store.d.ts"]},
+    "lint": {"files": {"include": ["src/"]}},
+    "fmt": {"files": {"include": ["src/"]}},
     "tasks":
     {
         "fs": "deno run -A --no-lock https://deno.land/std@0.166.0/http/file_server.ts",
diff --git a/src/app.js b/src/app.js
index c4919d9..17c80d4 100644
--- a/src/app.js
+++ b/src/app.js
@@ -6,37 +6,30 @@ import {html} from "https://esm.sh/htm@3.1.1/preact";
 
 /** @type {preact.Context<Binding>} */
 const StoreContext = React.createContext([Initial, (_a)=>{}]);
-
-
 /** @type {(props:{children:preact.ComponentChildren})=>preact.VNode} */
 const StoreProvider =(props)=>
 {
-    const reducer = React.useReducer(Reducer, Initial);
+    const initialized = Reducer(Initial, {Name:"Test", Data:0})
+    const reducer = React.useReducer(Reducer, initialized);
     return html`<${StoreContext.Provider} value=${reducer}>${props.children}<//>`;
 }
-
 /** @typedef {[state:Store.State, dispatch:(inAction:Store.Action)=>void]} Binding */
 /** @type {()=>Binding} */
 const StoreConsumer =()=> React.useContext(StoreContext);
 
-const Deep =()=>
-{
-    const [State, Dispatch] = StoreConsumer();
-    return html`
-    <${UI.Button} onClick=${()=>Dispatch({Name:"Stim", Data:1})} disabled=${State.Stim.Value == State.Stim.Max}>
-        ${State.Stim.Value}
-    <//>`;
-}
-
 const Audiogram =()=>
 {
     const [State, Dispatch] = StoreConsumer();
+
+    const testL = State.Draw.TestL.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${false}/>`);
+    const testR = State.Draw.TestR.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${true} />`);
+    const userL = State.Draw.UserL.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${false}/>`);
+    const userR = State.Draw.UserR.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${true} />`);
+
     return html`
     <svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 bold draw)">
-        ${State.Draw}
-        <${UI.Mark} right=${false} x=${"10%"} y="20%" response=${true} />
-        <${UI.Mark} right=${false}/>
-        <line x1=${"10%"} y1=${"10%"} x2=${"50%"} y2=${"50%"} class="stroke-2 opacity-60" />
+        ${testL}
+        ${testR}
     </svg>
     `;
 }
@@ -55,14 +48,8 @@ React.render(html`
         <${UI.Button} light>Left<//>
         <${UI.Button} inactive>Right<//>
         <${UI.Button} disabled>Right<//>
-        <${Deep}/>
         <${UI.Chart}>
-            <svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 bold draw)">
-                <${UI.Mark} right=${true}  x=${"20%"} y="20%" />
-                <${UI.Mark} right=${false} x=${"10%"} y="20%" response=${true} />
-                <${UI.Mark} right=${false}/>
-                <line x1=${"10%"} y1=${"10%"} x2=${"50%"} y2=${"50%"} class="stroke-2 opacity-60" />
-            </svg>
+            <${Audiogram}/>
         <//>
     <//>
 `, ShadowDiv);
\ No newline at end of file
diff --git a/src/store.js b/src/store.js
index 0dca492..00f81d3 100644
--- a/src/store.js
+++ b/src/store.js
@@ -116,8 +116,8 @@ export function Congtiguous(inTest, inChan, inStim, inIsUser)
             {
                 /** @type {Store.DrawPoint} */
                 const point = {
-                    X: lookup[1]*100,
-                    Y: (mark.Stim - inStim.Min)/(inStim.Max - inStim.Min) * 100,
+                    X: lookup[1],
+                    Y: (mark.Stim - inStim.Min)/(inStim.Max - inStim.Min),
                     Mark: mark
                 };
                 output.Points.push(point);
diff --git a/src/ui.js b/src/ui.js
index 56f709a..10468b5 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -1,11 +1,10 @@
-//@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 } from "./store.js";
 
-/** @typedef {({children}:{children:React.ReactNode})=>JSX.Element} BasicElement */
+/** @typedef {({children}:{children?:preact.ComponentChildren})=>preact.VNode} BasicElement */
 
-/** @type {({children, icon, light, disabled, inactive, onClick}:{children:React.ReactNode, icon?:JSX.Element, light:boolean, disabled:boolean, inactive:boolean, onClick:()=>void})=>JSX.Element} */
+/** @type {({children, icon, light, disabled, inactive, onClick}:{children:preact.VNode, icon?:preact.VNode, light:boolean, disabled:boolean, inactive:boolean, onClick:()=>void})=>preact.VNode} */
 export function Button({children, icon, light, disabled, inactive, onClick})
 {
     const [FlashGet, FlashSet] = React.useState(0);
@@ -39,14 +38,15 @@ export function Button({children, icon, light, disabled, inactive, onClick})
 export function Chart({children})
 {
     const inset = 20;
-    /** @type {Array<JSX.Element>} */
+    /** @type {Array<preact.VNode>} */
     const rules = [];
     ColumnMapping.forEach(([label, position, normal])=>
     {
         rules.push(html`
         <span class="block absolute top-[-${inset}px] left-[${position*100}%] 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>`);
+        </span>`
+        );
     });
 
     const dbMin = -10;
@@ -56,8 +56,8 @@ export function Chart({children})
         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>
-        `);
+        </span>`
+        );
     }
     return html`
     <div class="relative w-full h-[600px] font(sans medium) text(xs)">
@@ -76,14 +76,13 @@ export function Chart({children})
                 </div>
             </div>
         </div>
-    </div>
-    `;
+    </div>`;
 }
 
 
 /** @type {Record<string, BasicElement>} */
 const Glyph = {
-    Arrow:({children})=> html`
+    Arrow:()=> 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>`,
@@ -99,14 +98,13 @@ const Glyph = {
     <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})
+/** @type {({right, response, x, y}:{right:boolean, response?:boolean, x:number, y:number})=>preact.VNode} */
+export const Mark =({right, response, x, y})=>
 {
     return html`
-    <svg x=${x} y=${y} width="20" height="20" class="overflow-visible">
+    <svg x=${(x*100) + "%"} y=${(y*100) + "%"} width="20" height="20" class="overflow-visible">
         <${ right ? Glyph.O : Glyph.X }>
-            ${ !response && html`<${Glyph.Arrow}/>`  }
+            ${ !response && html`<${Glyph.Arrow}/>` }
         <//>
-    </svg>
-    `;
+    </svg>`;
 }
\ No newline at end of file