diff --git a/index.html b/index.html
index 601fcf6..904fa1f 100644
--- a/index.html
+++ b/index.html
@@ -1,2 +1,4 @@
+
+
\ 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``);
+ const testLinesR = State.Draw.TestR.Paths.map( p=>html``);
+
+ 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``);
+ const userLinesR = State.Draw.UserR.Paths.map( p=>html``);
return html`
- `;
+
+
+
+ `;
};
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 = {
${children}`
};
-/** @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`
-