From bf4762ce65ebb654a6b0567b37a59cd3b858f158 Mon Sep 17 00:00:00 2001
From: Seth Trowbridge <seth111@gmail.com>
Date: Tue, 6 Dec 2022 23:37:39 -0500
Subject: [PATCH] chart drawing

---
 index.html    |  2 ++
 src/app.js    | 27 ++++++++++++++++++---------
 src/store.js  |  4 ++--
 src/twind.js  |  2 +-
 src/ui.js     |  6 +++---
 store.d.ts    |  2 +-
 store.test.ts |  6 ++++++
 7 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 601fcf6..904fa1f 100644
--- a/index.html
+++ b/index.html
@@ -1,2 +1,4 @@
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <div id="app"></div>
 <script type="module" src="src/app.js"></script>
\ No newline at end of file
diff --git a/src/app.js b/src/app.js
index 402a0a7..16cc514 100644
--- a/src/app.js
+++ b/src/app.js
@@ -12,20 +12,29 @@ ShadowDOM.append(ShadowDiv);
 
 TW.Init(ShadowCSS, ShadowDiv);
 
+
+
 const Audiogram =()=>
 {
-    const [State, Dispatch] = Store.Consumer();
+    const [State] = Store.Consumer();
 
-    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} />`);
+    /** @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 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 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 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 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`
-    <svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 bold draw)">
-        ${testL}
-        ${testR}
-    </svg>`;
+    <svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 bold draw) opacity-50">${testMarksL}${testLinesL}</svg>
+    <svg class="absolute top-0 w-full h-full overflow-visible stroke(red-700 bold draw)  opacity-50">${testMarksR}${testLinesR}</svg>
+    <svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 2 draw)">${userMarksL}${userLinesL}</svg>
+    <svg class="absolute top-0 w-full h-full overflow-visible stroke(red-700 2 draw)">${userMarksR}${userLinesR}</svg>`;
 };
 
 React.render(html`
diff --git a/src/store.js b/src/store.js
index b5fe329..fb80c3d 100644
--- a/src/store.js
+++ b/src/store.js
@@ -55,8 +55,8 @@ export const Initial =
             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 } }
+                { 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 } }
             ]
         }
     ]
diff --git a/src/twind.js b/src/twind.js
index 0d28464..226342d 100644
--- a/src/twind.js
+++ b/src/twind.js
@@ -32,7 +32,7 @@ export const Configure = {
             },
             strokeWidth:
             {
-                "bold": "3px"
+                "bold": "4px"
             }
         }
     },
diff --git a/src/ui.js b/src/ui.js
index 10468b5..232a91b 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -98,11 +98,11 @@ 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:number, y:number})=>preact.VNode} */
-export const Mark =({right, response, x, y})=>
+/** @type {({right, response, x, y, classes}:{right:boolean, response?:boolean, x:number|string, y:number|string, classes:string})=>preact.VNode} */
+export const Mark =({right, response, x, y, classes})=>
 {
     return html`
-    <svg x=${(x*100) + "%"} y=${(y*100) + "%"} width="20" height="20" class="overflow-visible">
+    <svg x=${x} y=${y} width="20" height="20" class=${`overflow-visible ${classes}`}>
         <${ right ? Glyph.O : Glyph.X }>
             ${ !response && html`<${Glyph.Arrow}/>` }
         <//>
diff --git a/store.d.ts b/store.d.ts
index 9aecda1..c9cec84 100644
--- a/store.d.ts
+++ b/store.d.ts
@@ -47,7 +47,7 @@ declare namespace Store {
   type PlotKeyTest = "TestL" | "TestR";
   type PlotKey = PlotKeyUser | PlotKeyTest;
 
-  type DrawPoint = { X: number|string; Y: number|string; Mark: TestFrequencySample };
+  type DrawPoint = { X: number; Y: number; Mark: TestFrequencySample };
   type DrawLine = { Head:DrawPoint, Tail:DrawPoint};
   type DrawGroup = { Points: Array<DrawPoint>; Paths: Array<DrawLine> };
   type DrawChart = { Left: DrawGroup; Right: DrawGroup };
diff --git a/store.test.ts b/store.test.ts
index 0b46df9..829a9d9 100644
--- a/store.test.ts
+++ b/store.test.ts
@@ -98,5 +98,11 @@ Deno.test("Make Marks", async(t)=>
         assertEquals(state.Live.Mark?.Stim, state.Stim.Value);
     });
 
+    await t.step("Check Draw output", ()=>
+    {
+        assertEquals(state.Draw.TestL.Points.length, 2);
+        assertEquals(state.Draw.TestL.Paths.length, 1);
+    });
+
     console.log(state.Draw);
 });
\ No newline at end of file