Compare commits
35 Commits
a4ab8a79df
...
4954105d1b
| Author | SHA1 | Date | |
|---|---|---|---|
| 4954105d1b | |||
| 34b9297306 | |||
| ed49a67933 | |||
| 576df32946 | |||
| 3af4718cdb | |||
| 6c6220e5db | |||
| 54d8928d11 | |||
| de986f131b | |||
| 8b217c8ce4 | |||
| 671e8d5ca5 | |||
| d220e3f509 | |||
| 6175ab1a25 | |||
| 26826d44f2 | |||
| cee7a02277 | |||
| 2018b8210a | |||
| 346ad930b5 | |||
| d33117200d | |||
| 3c1d10eabe | |||
| 27ad6eb9bd | |||
| f1c1e947fb | |||
| b6f990f266 | |||
| 5a6415b6fe | |||
| 78049da309 | |||
| da9f569308 | |||
| e5d73147b6 | |||
| 85f0e32cac | |||
| 7b969e0bfa | |||
| 2c4d506f40 | |||
| bf4762ce65 | |||
| 4167a0a4f5 | |||
| 142c72eb14 | |||
| 4897f7021f | |||
| 20f4a2ac47 | |||
| b905f92c06 | |||
| d93daf81ea |
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
deno.lock
|
||||
7
.vscode/settings.json
vendored
7
.vscode/settings.json
vendored
@ -1,9 +1,4 @@
|
||||
{
|
||||
"deno.enable": true,
|
||||
"deno.unstable": true,
|
||||
"deno.codeLens.testArgs": [
|
||||
"--allow-all",
|
||||
"--no-check",
|
||||
"--no-lock"
|
||||
]
|
||||
"deno.unstable": true
|
||||
}
|
||||
11
deno.json
11
deno.json
@ -1,8 +1,9 @@
|
||||
{
|
||||
"tasks":
|
||||
{
|
||||
"fs": "deno run -A --no-lock https://deno.land/std@0.166.0/http/file_server.ts",
|
||||
"test": "deno test --no-lock --watch test/store_test.js",
|
||||
"test-debug": "deno test --no-lock --inspect-brk test/store_test.js"
|
||||
"compilerOptions": { "types": ["*.d.ts"], "checkJs": true },
|
||||
"imports": {
|
||||
"@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"
|
||||
}
|
||||
}
|
||||
12
index.html
12
index.html
@ -1,2 +1,12 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="src/app.js"></script>
|
||||
<script type="importmap-shim" src="./deno.json"></script>
|
||||
<script type="module-shim">import "app";</script>
|
||||
<script async src="https://unpkg.com/es-module-shims@0.13.1/dist/es-module-shims.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
34
js/app.js
Normal file
34
js/app.js
Normal file
@ -0,0 +1,34 @@
|
||||
import React from "react";
|
||||
import {html} from "htm";
|
||||
import * as TW from "./twind.js";
|
||||
import * as UI from "./ui.js";
|
||||
import * as Store from "./store.js";
|
||||
|
||||
// @ts-ignore:
|
||||
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.Init(ShadowCSS, ShadowDiv);
|
||||
|
||||
React.render(html`
|
||||
<${Store.Provider}>
|
||||
<div class="max-w-[1170px] mx-auto">
|
||||
|
||||
<${UI.Header}/>
|
||||
|
||||
<div class="flex flex-col items-start lg:flex-row my-4">
|
||||
<${UI.Controls}/>
|
||||
<${UI.Chart}>
|
||||
<${UI.Audiogram}/>
|
||||
<div class="absolute bottom-0 right-0"><${UI.Display}/></div>
|
||||
<//>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<//>
|
||||
`, ShadowDiv);
|
||||
354
js/store.js
Normal file
354
js/store.js
Normal file
@ -0,0 +1,354 @@
|
||||
import React from "react";
|
||||
|
||||
const size = 1/6;
|
||||
/** @type {Array<Store.ColumnMapping>} */
|
||||
export const ColumnMapping = [
|
||||
[ 125, size*0.0, true ],
|
||||
[ 250, size*1.0, true ],
|
||||
[ 500, size*2.0, true ],
|
||||
[1000, size*3.0, true ],
|
||||
[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 ]
|
||||
];
|
||||
/** Looks up a frequency in ColumnMapping
|
||||
* @type {(inFrequency:number)=>Store.ColumnMapping|false} */
|
||||
export const ColumnLookup =(inFrequency)=>
|
||||
{
|
||||
for(let i=0; i<ColumnMapping.length; i++)
|
||||
{
|
||||
const map = ColumnMapping[i];
|
||||
if(map[0] == inFrequency){ return map; }
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
/** @type {(inDecimal:number)=>string} */
|
||||
const Perc =(inDecimal)=> `${inDecimal*100}%`;
|
||||
|
||||
/** @type {(inTest:Store.Test)=>Store.Grade} */
|
||||
export const Grade =(inTest)=>
|
||||
{
|
||||
/** @type {Store.Grade} */
|
||||
const output = { Total:0, Marks:0, Score:0 };
|
||||
|
||||
/** @type {(inGoal:number, inResult:number)=>number} */
|
||||
const Mapper =(inGoal, inResult)=>
|
||||
{
|
||||
const err = Math.abs(inGoal-inResult);
|
||||
if(err == 0){ return 1; }
|
||||
else if(err > 0 && err <= 5){ return 0.9; }
|
||||
else if(err > 5 && err <= 10){ return 0.7; }
|
||||
else if(err > 10 && err <= 15){ return 0.2; }
|
||||
else{ return 0; }
|
||||
}
|
||||
|
||||
|
||||
for(let i=0; i<inTest.Plot.length; i++)
|
||||
{
|
||||
const {TestL, TestR, UserL, UserR} = inTest.Plot[i];
|
||||
if(TestL)
|
||||
{
|
||||
output.Total ++;
|
||||
if(UserL)
|
||||
{
|
||||
output.Marks++;
|
||||
output.Score += Mapper(TestL.Stim, UserL.Stim);
|
||||
}
|
||||
}
|
||||
if(TestR)
|
||||
{
|
||||
output.Total ++;
|
||||
if(UserR)
|
||||
{
|
||||
output.Marks++;
|
||||
output.Score += Mapper(TestR.Stim, UserR.Stim);
|
||||
}
|
||||
}
|
||||
}
|
||||
if(output.Marks > 0)
|
||||
{
|
||||
output.Score = Math.floor((output.Score/output.Marks) * 10000)/100;
|
||||
}
|
||||
|
||||
return output;
|
||||
|
||||
}
|
||||
|
||||
/** 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 column = ColumnMapping[inState.Freq.Value];
|
||||
if(column && output.Test)
|
||||
{
|
||||
const hz = column[0];
|
||||
for(let i=0; i<output.Test.Plot.length; i++)
|
||||
{
|
||||
const plot = output.Test.Plot[i];
|
||||
if(plot.Hz == hz)
|
||||
{
|
||||
output.Freq = plot;
|
||||
output.Mark = inState.Chan.Value ? plot.UserR : plot.UserL;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return output;
|
||||
};
|
||||
|
||||
/** Creates a new Store.DrawGroup object for the given Test and settings
|
||||
* @type {(inTest:Store.Test|undefined, inChan:number, inStim:Store.Range, inIsUser:boolean)=>Store.DrawGroup} */
|
||||
const Redraw =(inTest, inChan, inStim, inIsUser)=>
|
||||
{
|
||||
/** @type {Store.DrawGroup} */
|
||||
const output = {Points:[], Paths:[]};
|
||||
|
||||
if(inTest)
|
||||
{
|
||||
let plot;
|
||||
for(let i=0; i<inTest.Plot.length; i++)
|
||||
{
|
||||
plot = inTest.Plot[i];
|
||||
const mark = plot[`${inIsUser ? "User" : "Test"}${inChan ? "R" : "L"}`]
|
||||
if(mark)
|
||||
{
|
||||
const lookup = ColumnLookup(plot.Hz);
|
||||
if(lookup)
|
||||
{
|
||||
/** @type {Store.DrawPoint} */
|
||||
const point = {
|
||||
X: Perc(lookup[1]),
|
||||
Y: Perc((mark.Stim - inStim.Min)/(inStim.Max - inStim.Min)),
|
||||
Mark: mark
|
||||
};
|
||||
output.Points.push(point);
|
||||
}
|
||||
}
|
||||
}
|
||||
for(let i=1; i<output.Points.length; i++)
|
||||
{
|
||||
/** @type {Store.DrawLine} */
|
||||
const line = {Head:output.Points[i-1], Tail:output.Points[i]};
|
||||
if(line.Head.Mark?.Resp && line.Tail.Mark?.Resp)
|
||||
{
|
||||
output.Paths.push(line);
|
||||
}
|
||||
}
|
||||
}
|
||||
return output;
|
||||
};
|
||||
|
||||
/** Create a new cursor position from the state
|
||||
* @type {(inState:Store.State)=>Store.DrawPoint} */
|
||||
const Reposition =(inState)=> ({
|
||||
X: Perc(ColumnMapping[inState.Freq.Value][1]),
|
||||
Y: Perc((inState.Stim.Value - inState.Stim.Min)/(inState.Stim.Max - inState.Stim.Min))
|
||||
});
|
||||
|
||||
/** @type {Store.Reducer} */
|
||||
export function Reducer(inState, inAction)
|
||||
{
|
||||
const clone = {...inState};
|
||||
const {Name, Data} = inAction;
|
||||
|
||||
if(Name == "Test")
|
||||
{
|
||||
const test = clone.Test[Data];
|
||||
if(test)
|
||||
{
|
||||
clone.Pick = Data;
|
||||
clone.Live = Reselect(clone, test);
|
||||
clone.Draw =
|
||||
{
|
||||
Cross: Reposition(clone),
|
||||
UserL: Redraw(test, 0, clone.Stim, true ),
|
||||
UserR: Redraw(test, 1, clone.Stim, true ),
|
||||
TestL: Redraw(test, 0, clone.Stim, false),
|
||||
TestR: Redraw(test, 1, clone.Stim, false)
|
||||
};
|
||||
test.Done = Grade(test);
|
||||
}
|
||||
}
|
||||
else if (Name == "Mark")
|
||||
{
|
||||
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.Freq[key] = clone.Live.Mark;
|
||||
clone.Draw[key] = Redraw(clone.Live.Test, clone.Chan.Value, clone.Stim, true);
|
||||
clone.Live.Test.Done = Grade(clone.Live.Test);
|
||||
SaveTests(clone);
|
||||
}
|
||||
}
|
||||
else if( Name=="Stim" || Name=="Chan" || Name=="Freq")
|
||||
{
|
||||
const tone = clone[Name];
|
||||
tone.Value += Data*tone.Step;
|
||||
tone.Value = Math.max(tone.Value, tone.Min);
|
||||
tone.Value = Math.min(tone.Value, tone.Max);
|
||||
|
||||
clone.Draw.Cross = Reposition(clone);
|
||||
if(Name != "Stim")
|
||||
{
|
||||
clone.Live = Reselect(clone);
|
||||
}
|
||||
}
|
||||
else if (Name == "Errs")
|
||||
{
|
||||
clone.Errs = Data;
|
||||
}
|
||||
else if (Name == "Kill")
|
||||
{
|
||||
if(clone.Live.Test)
|
||||
{
|
||||
clone.Live.Test.Plot.forEach(freq=>
|
||||
{
|
||||
freq.UserL = undefined;
|
||||
freq.UserR = undefined;
|
||||
});
|
||||
clone.Draw["UserL"] = Redraw(clone.Live.Test, clone.Chan.Value, clone.Stim, true);
|
||||
clone.Draw["UserR"] = Redraw(clone.Live.Test, clone.Chan.Value, clone.Stim, true);
|
||||
clone.Live.Test.Done = Grade(clone.Live.Test);
|
||||
SaveTests(clone);
|
||||
}
|
||||
}
|
||||
else if (Name == "ShowCursor")
|
||||
{
|
||||
clone.Show.Cursor = Data;
|
||||
}
|
||||
else if (Name == "ShowAnswer")
|
||||
{
|
||||
clone.Show.Answer = Data;
|
||||
}
|
||||
|
||||
SaveSettings(clone);
|
||||
|
||||
return clone;
|
||||
}
|
||||
|
||||
|
||||
/** @type {Store.Test[]} */
|
||||
const TestDefault = [
|
||||
{
|
||||
Name: "Patient A Asymmetric Notch",
|
||||
Plot:
|
||||
[
|
||||
{ Hz: 500, TestL: { Stim: 15, Resp: true }, TestR: { Stim: 10, Resp: true } },
|
||||
{ Hz: 1000, TestL: { Stim: 10, Resp: true }, TestR: { Stim: 10, Resp: true } },
|
||||
{ Hz: 2000, TestL: { Stim: 15, Resp: true }, TestR: { Stim: 20, Resp: true } },
|
||||
{ Hz: 3000, TestL: { Stim: 30, Resp: true }, TestR: { Stim: 40, Resp: true } },
|
||||
{ Hz: 4000, TestL: { Stim: 40, Resp: true }, TestR: { Stim: 55, Resp: true } },
|
||||
{ Hz: 6000, TestL: { Stim: 35, Resp: true }, TestR: { Stim: 40, Resp: true } },
|
||||
{ Hz: 8000, TestL: { Stim: 20, Resp: true }, TestR: { Stim: 15, Resp: true } }
|
||||
]
|
||||
},
|
||||
{
|
||||
Name: "Patient B High Freq Hearing Loss",
|
||||
Plot:
|
||||
[
|
||||
{ Hz: 500, TestL: { Stim: 10, Resp: true }, TestR: { Stim: 10, Resp: true } },
|
||||
{ Hz: 1000, TestL: { Stim: 15, Resp: true }, TestR: { Stim: 10, Resp: true } },
|
||||
{ Hz: 2000, TestL: { Stim: 10, Resp: true }, TestR: { Stim: 15, Resp: true } },
|
||||
{ Hz: 3000, TestL: { Stim: 25, Resp: true }, TestR: { Stim: 20, Resp: true } },
|
||||
{ Hz: 4000, TestL: { Stim: 35, Resp: true }, TestR: { Stim: 35, Resp: true } },
|
||||
{ Hz: 6000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } },
|
||||
{ Hz: 8000, TestL: { Stim: 80, Resp: true }, TestR: { Stim: 75, Resp: true } }
|
||||
]
|
||||
},
|
||||
{
|
||||
Name: "Patient C Unilateral Hearing Loss",
|
||||
Plot:
|
||||
[
|
||||
{ Hz: 500, TestL: { Stim: 15, Resp: true }, TestR: { Stim: 40, Resp: true } },
|
||||
{ Hz: 1000, TestL: { Stim: 15, Resp: true }, TestR: { Stim: 50, Resp: true } },
|
||||
{ Hz: 2000, TestL: { Stim: 20, Resp: true }, TestR: { Stim: 65, Resp: true } },
|
||||
{ Hz: 3000, TestL: { Stim: 15, Resp: true }, TestR: { Stim: 70, Resp: true } },
|
||||
{ Hz: 4000, TestL: { Stim: 20, Resp: true }, TestR: { Stim: 65, Resp: true } },
|
||||
{ Hz: 6000, TestL: { Stim: 25, Resp: true }, TestR: { Stim: 60, Resp: true } },
|
||||
{ Hz: 8000, TestL: { Stim: 20, Resp: true }, TestR: { Stim: 45, Resp: true } }
|
||||
]
|
||||
},
|
||||
{
|
||||
Name: "Patient D Normal Hearing",
|
||||
Plot:
|
||||
[
|
||||
{ Hz: 500, TestL: { Stim: 5, Resp: true }, TestR: { Stim: 10, Resp: true } },
|
||||
{ Hz: 1000, TestL: { Stim: 0, Resp: true }, TestR: { Stim: 5, Resp: true } },
|
||||
{ Hz: 2000, TestL: { Stim: 5, Resp: true }, TestR: { Stim: 5, Resp: true } },
|
||||
{ Hz: 3000, TestL: { Stim: 15, Resp: true }, TestR: { Stim: 10, Resp: true } },
|
||||
{ Hz: 4000, TestL: { Stim: 15, Resp: true }, TestR: { Stim: 15, Resp: true } },
|
||||
{ Hz: 6000, TestL: { Stim: 5, Resp: true }, TestR: { Stim: 10, Resp: true } },
|
||||
{ Hz: 8000, TestL: { Stim: 0, Resp: true }, TestR: { Stim: 5, Resp: true } }
|
||||
]
|
||||
}
|
||||
];
|
||||
/** @type {Store.Test[]} */
|
||||
const TestActual = JSON.parse(localStorage.getItem("app-tests")||"false") || TestDefault;
|
||||
/**@type {(inState:Store.State)=>void} */
|
||||
const SaveTests =(inState)=> localStorage.setItem("app-tests", JSON.stringify(inState.Test));
|
||||
|
||||
/** @type {Store.StatePartSimple} */
|
||||
const SettingsDefault =
|
||||
{
|
||||
Chan: { Min:0, Max:1, Value:0, Step:1 },
|
||||
Freq: { Min:2, Max:8, Value:3, Step:1 },
|
||||
Stim: { Min:-10, Max:120, Value:30, Step:5 },
|
||||
Errs: 0,
|
||||
Pick: 0,
|
||||
Show: { Cursor:true, Answer:false }
|
||||
};
|
||||
/** @type {Store.StatePartSimple} */
|
||||
const SettingsActual = JSON.parse(localStorage.getItem("app-settings")||"false") || SettingsDefault;
|
||||
/**@type {(inState:Store.State)=>void} */
|
||||
const SaveSettings =(inState)=>
|
||||
{
|
||||
/** @type {Store.StatePartSimple} */
|
||||
const clone = {
|
||||
Chan:inState.Chan,
|
||||
Freq:inState.Freq,
|
||||
Stim:inState.Stim,
|
||||
Errs:inState.Errs,
|
||||
Pick:inState.Pick,
|
||||
Show:inState.Show
|
||||
};
|
||||
localStorage.setItem("app-settings", JSON.stringify(clone));
|
||||
};
|
||||
|
||||
export const Initial = Reducer(
|
||||
{
|
||||
...SettingsActual,
|
||||
Test: TestActual,
|
||||
Live:
|
||||
{
|
||||
Test: undefined,
|
||||
Freq: undefined,
|
||||
Mark: undefined
|
||||
},
|
||||
Draw:
|
||||
{
|
||||
UserL:{Points:[], Paths:[]},
|
||||
UserR:{Points:[], Paths:[]},
|
||||
TestL:{Points:[], Paths:[]},
|
||||
TestR:{Points:[], Paths:[]}
|
||||
}
|
||||
}, {Name:"Test", Data:SettingsActual.Pick});
|
||||
|
||||
|
||||
export const Context = React.createContext(/** @type {Store.Binding} */([Initial, (_a)=>{}]));
|
||||
|
||||
/** @type {(props:{children:preact.ComponentChildren})=>preact.VNode} */
|
||||
export const Provider =(props)=>
|
||||
{
|
||||
/** @type {Store.Binding} */
|
||||
const reducer = React.useReducer(Reducer, Initial);
|
||||
return React.createElement(Context.Provider, {value:reducer, children:props.children});
|
||||
};
|
||||
|
||||
/** @type {()=>Store.Binding} */
|
||||
export const Consumer =()=> React.useContext(Context);
|
||||
65
js/tone.js
Normal file
65
js/tone.js
Normal file
@ -0,0 +1,65 @@
|
||||
// setup audio context
|
||||
const AudioContextConstructor = window.AudioContext || window.webkitAudioContext;
|
||||
const Context = new AudioContextConstructor();
|
||||
|
||||
// create audio nodes
|
||||
const Oscillator = Context.createOscillator();
|
||||
const GainVolume = Context.createGain();
|
||||
const GainBeep = Context.createGain();
|
||||
const GainLeft = Context.createGain();
|
||||
const GainRight = Context.createGain();
|
||||
const ChannelMerge = Context.createChannelMerger(2);
|
||||
|
||||
// wire up audio nodes
|
||||
Oscillator.connect(GainVolume);
|
||||
GainVolume.connect(GainBeep);
|
||||
GainBeep.connect(GainLeft);
|
||||
GainBeep.connect(GainRight);
|
||||
GainLeft.connect(ChannelMerge, 0, 0);
|
||||
GainRight.connect(ChannelMerge, 0, 1);
|
||||
ChannelMerge.connect(Context.destination);
|
||||
|
||||
// start
|
||||
GainBeep.gain.value = 0;
|
||||
GainLeft.gain.value = 0;
|
||||
GainRight.gain.value = 0;
|
||||
GainVolume.gain.value = 0;
|
||||
Oscillator.start(Context.currentTime+0.0);
|
||||
|
||||
const pad = 0.0015;
|
||||
|
||||
/** @type {(inNode:AudioParam, inValue:number, inDelay:number)=>AudioParam} */
|
||||
const change = (inNode, inValue, inDelay) => inNode.linearRampToValueAtTime(inValue, Context.currentTime+inDelay);
|
||||
|
||||
/** @type {(inNode:AudioParam, inStart:number, inDuration:number)=>void} */
|
||||
const pulse = (inNode, inStart, inDuration) =>
|
||||
{
|
||||
change(inNode, 0, inStart);
|
||||
change(inNode, 1, inStart+pad);
|
||||
change(inNode, 1, (inStart+inDuration)-pad );
|
||||
change(inNode, 0, (inStart+inDuration) );
|
||||
};
|
||||
|
||||
/** @type {(inContinuous:boolean, inChannel:number, inFreq:number, indBHL:number)=>void} */
|
||||
export const Play = (inContinuous, inChannel, inFreq, indBHL) =>
|
||||
{
|
||||
Context.resume();
|
||||
GainBeep.gain.cancelScheduledValues(Context.currentTime);
|
||||
GainBeep.gain.setValueAtTime(0, Context.currentTime);
|
||||
|
||||
change(GainLeft.gain, 1-inChannel, pad);
|
||||
change(GainRight.gain, inChannel, pad);
|
||||
change(Oscillator.frequency, inFreq, pad);
|
||||
change(GainVolume.gain, indBHL, pad);
|
||||
|
||||
if (inContinuous)
|
||||
{
|
||||
pulse(GainBeep.gain, 0.01, 0.8);
|
||||
}
|
||||
else
|
||||
{
|
||||
pulse(GainBeep.gain, 0.01, 0.2);
|
||||
pulse(GainBeep.gain, 0.33, 0.2);
|
||||
pulse(GainBeep.gain, 0.66, 0.2);
|
||||
}
|
||||
};
|
||||
86
js/twind.js
Normal file
86
js/twind.js
Normal file
@ -0,0 +1,86 @@
|
||||
import * as TW from "@twind/core@1.0.1";
|
||||
import TWPreTail from "@twind/preset-tailwind@1.0.1";
|
||||
import TWPreAuto from "@twind/preset-autoprefix@1.0.1";
|
||||
|
||||
/** @type {TW.TwindUserConfig} */
|
||||
export const Configure = {
|
||||
theme:
|
||||
{
|
||||
extend:
|
||||
{
|
||||
// @ts-ignore: typings for keyframes are missing in twind
|
||||
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",
|
||||
pulse: "pulse 3s ease-in-out 0s 1 both"
|
||||
},
|
||||
strokeWidth:
|
||||
{
|
||||
"bold": "4px"
|
||||
}
|
||||
}
|
||||
},
|
||||
rules:
|
||||
[
|
||||
[
|
||||
"stroke-draw",
|
||||
{
|
||||
"vector-effect": "non-scaling-stroke",
|
||||
"stroke-linecap": "square",
|
||||
"fill": "none"
|
||||
},
|
||||
],
|
||||
[
|
||||
"bg-metal",
|
||||
{
|
||||
"background": "linear-gradient(159deg, rgb(228, 228, 228) 0%, rgb(243, 243, 243) 25%, rgb(236, 236, 236) 100%)"
|
||||
},
|
||||
],
|
||||
[
|
||||
"bg-earmark", "bg-gradient-to-b from-[#107c79] to-[#115e67]"
|
||||
],
|
||||
[
|
||||
'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 -2px 3px inset, rgb(255 255 255 / 50%) 0px 10px 10px inset"
|
||||
}
|
||||
],
|
||||
[
|
||||
'text-shadow-lcd', {"text-shadow": "0px 1px 1px #00000055"}
|
||||
],
|
||||
[ '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])"]
|
||||
],
|
||||
presets: [TWPreTail(), TWPreAuto()]
|
||||
};
|
||||
|
||||
/** @type {(elStyle:HTMLStyleElement, elDiv:HTMLDivElement)=>void} */
|
||||
export const Init =(elStyle, elDiv)=>
|
||||
{
|
||||
TW.observe(TW.twind(Configure, TW.cssom(elStyle)), elDiv);
|
||||
};
|
||||
404
js/ui.js
Normal file
404
js/ui.js
Normal file
@ -0,0 +1,404 @@
|
||||
import React from "react";
|
||||
import { html } from "htm";
|
||||
import * as Store from "./store.js";
|
||||
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} */
|
||||
export function Button({children, icon, light, disabled, inactive, onClick, classes})
|
||||
{
|
||||
const [FlashGet, FlashSet] = React.useState(0);
|
||||
const handleClick =()=>
|
||||
{
|
||||
if(inactive||disabled){ return; }
|
||||
FlashSet(FlashGet+1);
|
||||
onClick();
|
||||
};
|
||||
|
||||
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"}"
|
||||
>
|
||||
<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="flex items-center block relative px-2 border-r(1 [#00000088])">
|
||||
<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])">
|
||||
<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>`;
|
||||
}
|
||||
|
||||
/** @type {BasicElement} */
|
||||
export const Header =()=>
|
||||
{
|
||||
const [State, Dispatch] = Store.Consumer();
|
||||
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)});
|
||||
|
||||
return html`
|
||||
<div class="flex flex-row items-stretch bg-metal rounded-lg overflow-hidden shadow-md font-sans">
|
||||
|
||||
<div class="p-4">
|
||||
<img class="h-auto max-w-[200px]" src="./logo.png"/>
|
||||
</div>
|
||||
|
||||
<div class="p-4 flex-1">
|
||||
<div class="box-buttons w-full">
|
||||
<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}>
|
||||
${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="box-buttons flex-col w-[200px] h-full justify-center">
|
||||
<div>Complete: ${grade.Marks} of ${grade.Total}</div>
|
||||
<div class="w-full 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="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>`;
|
||||
}
|
||||
|
||||
/** @type {BasicElement} */
|
||||
export const Display =()=>
|
||||
{
|
||||
const [State, Dispatch] = Store.Consumer();
|
||||
return html`
|
||||
<div class="flex justify-end">
|
||||
<div class="bg-metal rounded-lg overflow-hidden shadow-md p-4">
|
||||
<div class="box-buttons">
|
||||
<${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>
|
||||
`;
|
||||
};
|
||||
|
||||
/** @type {BasicElement} */
|
||||
export const Controls =()=>
|
||||
{
|
||||
const [State, Dispatch] = Store.Consumer();
|
||||
|
||||
const [pulsedGet, pulsedSet] = React.useState(true);
|
||||
const [playGet, playSet] = React.useState(0);
|
||||
React.useEffect(()=>
|
||||
{
|
||||
/** @type {number|undefined} */
|
||||
let timer;
|
||||
if(playGet == 1)
|
||||
{
|
||||
const volNorm = (State.Stim.Value-State.Stim.Min)/(State.Stim.Max-State.Stim.Min);
|
||||
Tone.Play(!pulsedGet, State.Chan.Value, Store.ColumnMapping[State.Freq.Value][0], (volNorm*0.8) + 0.1);
|
||||
|
||||
if(State.Live.Freq)
|
||||
{
|
||||
const testMark = State.Live.Freq[/** @type {"TestL"|"TestR"}*/(`Test${State.Chan.Value ? "R":"L"}`)];
|
||||
const audible = State.Stim.Value >= testMark.Stim;
|
||||
|
||||
const error = State.Stim.Value - testMark.Stim;
|
||||
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 handler = percieved ? ()=>playSet(2) : ()=>playSet(0);
|
||||
console.log("Error:", error, "Error Mapped:", errorMapped, "Error Scaled:", errorScaled, "Error Sampled:", errorSampled);
|
||||
timer = setTimeout(handler, 800 + Math.random()*1300);
|
||||
}
|
||||
}
|
||||
return () => clearTimeout(timer);
|
||||
|
||||
}, [playGet]);
|
||||
|
||||
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="flex-col bg-metal rounded-lg overflow-hidden shadow-md">
|
||||
<div class="p-4 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<//>
|
||||
<${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Right<//>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 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>
|
||||
<${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)">
|
||||
<${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)">
|
||||
<${Glyph.Plus}/>
|
||||
</svg>
|
||||
<//>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 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>
|
||||
<${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)">
|
||||
<${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)">
|
||||
<${Glyph.Plus}/>
|
||||
</svg>
|
||||
<//>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex-col bg-metal rounded-lg overflow-hidden shadow-md">
|
||||
<div class="p-4 pb-0">
|
||||
<div class="box-buttons flex-1">
|
||||
<div class="flex-1">
|
||||
<${Button}
|
||||
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>
|
||||
</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="box-buttons flex-col gap-2 min-w-[50%]">
|
||||
<${Button}
|
||||
onClick=${()=>Dispatch({Name:"Mark", Data:true })}
|
||||
classes="text-md w-full"
|
||||
icon=${html`
|
||||
<svg class="h-2 w-2 mx-1 overflow-visible stroke(white 2)">
|
||||
<${State.Chan.Value ? Glyph.O : Glyph.X}/>
|
||||
</svg>`}
|
||||
>
|
||||
Accept
|
||||
<//>
|
||||
<${Button}
|
||||
onClick=${()=>Dispatch({Name:"Mark", Data:false})}
|
||||
classes="text-sm w-full"
|
||||
icon=${html`
|
||||
<svg class="h-2 w-2 mx-1 overflow-visible stroke(white 2)">
|
||||
<${State.Chan.Value ? Glyph.O : Glyph.X}>
|
||||
<${Glyph.Arrow}/>
|
||||
<//>
|
||||
</svg>`}
|
||||
>
|
||||
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>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
/** @type {BasicElement} */
|
||||
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 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 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} />`);
|
||||
const testLinesR = State.Draw.TestR.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 userLinesR = State.Draw.UserR.Paths.map( p=>html`<line class="opacity-60" x1=${p.Head.X} y1=${p.Head.Y} x2=${p.Tail.X} y2=${p.Tail.Y} />`);
|
||||
|
||||
return html`
|
||||
${
|
||||
State.Show.Answer && html`
|
||||
<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>
|
||||
${
|
||||
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="30" ry="8" fill="url(#glow)"></ellipse>
|
||||
<defs>
|
||||
<radialGradient id="glow">
|
||||
<stop stop-color=${State.Chan.Value ? "red" : "blue"} stop-opacity="0.6" offset="0.0"></stop>
|
||||
<stop stop-color=${State.Chan.Value ? "red" : "blue"} stop-opacity="0.3" offset="0.2"></stop>
|
||||
<stop stop-color=${State.Chan.Value ? "red" : "blue"} stop-opacity="0.0" offset="1.0"></stop>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>`
|
||||
}`;
|
||||
};
|
||||
|
||||
|
||||
/** @type {BasicElement} */
|
||||
export function Chart({children})
|
||||
{
|
||||
const [State] = Store.Consumer();
|
||||
const inset = 20;
|
||||
/** @type {Array<preact.VNode>} */
|
||||
const rules = [];
|
||||
Store.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 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>`
|
||||
);
|
||||
});
|
||||
|
||||
for(let db = State.Stim.Min; db <= State.Stim.Max; db+=10)
|
||||
{
|
||||
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>`
|
||||
);
|
||||
}
|
||||
return html`
|
||||
<div class="relative w-full 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)">
|
||||
<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-[-50px] ">
|
||||
<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-5"></span>
|
||||
${ rules }
|
||||
<div class="absolute top-0 left-0 w-full h-full">
|
||||
${ children }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
/** @type {Record<string, BasicElement>} */
|
||||
export const Glyph = {
|
||||
Arrow:()=> html`
|
||||
<line class="stroke-draw" x1="100%" y1="100%" x2="0%" y2="0%" ></line>
|
||||
<line class="stroke-draw" x1="100%" y1="100%" x2="25%" y2="100%"></line>
|
||||
<line class="stroke-draw" x1="100%" y1="100%" x2="100%" y2="25%" ></line>`,
|
||||
|
||||
X: ({children})=> html`
|
||||
<line class="stroke-draw" x1="0%" y1="0%" x2="100%" y2="100%"></line>
|
||||
<line class="stroke-draw" x1="0%" y1="100%" x2="100%" y2="0%" ></line>
|
||||
<g class="scale-50 translate(x-full y-full) rotate-[-15deg]">${children}</g>`,
|
||||
|
||||
O: ({children})=> html`
|
||||
<ellipse class="stroke-draw" cx="50%" cy="50%" rx="60%" ry="60%"></ellipse>
|
||||
<g class="scale-50 rotate-[96deg] translate(-x-[0%] y-full)">${children}</g>`,
|
||||
|
||||
Minus:()=>html` <line class="stroke-draw" x1="0%" y1="50%" x2="100%" y2="50%"></line>`,
|
||||
Plus:()=>html` <line class="stroke-draw" x1="0%" y1="50%" x2="100%" y2="50%"></line>
|
||||
<line class="stroke-draw" y1="0%" x1="50%" y2="100%" x2="50%"></line>`,
|
||||
|
||||
Null:()=>html`
|
||||
<ellipse class="stroke-draw" cx="50%" cy="50%" rx="70%" ry="70%"></ellipse>
|
||||
<line class="stroke-draw" x1="0%" y1="0%" x2="100%" y2="100%"></line>
|
||||
`
|
||||
|
||||
};
|
||||
|
||||
/** @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} y=${y} width="20" height="20" class="overflow-visible ${classes}">
|
||||
<g class="translate(-x-1/2 -y-1/2)">
|
||||
<${ right ? Glyph.O : Glyph.X }>
|
||||
${ !response && html`<${Glyph.Arrow}/>` }
|
||||
<//>
|
||||
</g>
|
||||
</svg>`;
|
||||
};
|
||||
114
src/app.js
114
src/app.js
@ -1,114 +0,0 @@
|
||||
//@ts-check
|
||||
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";
|
||||
|
||||
import * as UI from "./ui.js";
|
||||
import { Reducer, Initial } from "./store.js";
|
||||
import React from "https://esm.sh/preact@10.11.3/compat";
|
||||
import {html} from "https://esm.sh/htm@3.1.1/preact";
|
||||
|
||||
|
||||
/** @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);
|
||||
|
||||
|
||||
const StoreContext = React.createContext(null);
|
||||
const StoreProvider =(props)=>
|
||||
{
|
||||
const reducer = React.useReducer(Reducer, Initial);
|
||||
return html`<${StoreContext.Provider} value=${reducer}>${props.children}<//>`;
|
||||
}
|
||||
const StoreConsumer =()=> React.useContext(StoreContext);
|
||||
|
||||
|
||||
const Deep =()=>
|
||||
{
|
||||
const [State, Dispatch] = React.useContext(StoreContext);
|
||||
return html`
|
||||
<${UI.Button} onClick=${()=>Dispatch({Name:"Stim", Data:1})} disabled=${State.Stim.Value == State.Stim.Max}>
|
||||
${State.Stim.Value}
|
||||
<//>`;
|
||||
}
|
||||
|
||||
React.render(html`
|
||||
<${StoreProvider}>
|
||||
<${UI.Button} icon="+">hey!<//>
|
||||
<${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>
|
||||
<//>
|
||||
<//>
|
||||
`, ShadowDiv);
|
||||
237
src/store.js
237
src/store.js
@ -1,237 +0,0 @@
|
||||
//@ts-check
|
||||
|
||||
const size = 1/6;
|
||||
/** @typedef {[frequency:number, position:number, normal:boolean]} ColumnMapping */
|
||||
/** @type {Array<ColumnMapping>} */
|
||||
export const ColumnMapping = [
|
||||
[ 125, size*0.0, true ],
|
||||
[ 250, size*1.0, true ],
|
||||
[ 500, size*2.0, true ],
|
||||
[1000, size*3.0, true ],
|
||||
[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 ColumnLookup =(inFrequency)=>
|
||||
{
|
||||
for(let i=0; i<ColumnMapping.length; i++)
|
||||
{
|
||||
const map = ColumnMapping[i];
|
||||
if(map[0] == inFrequency){ return map; }
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
|
||||
/** @type {(freq:TestFrequency, chan:number, user:boolean)=>TestFrequencySample|undefined} */
|
||||
export const MarkGet =(freq, chan, user)=> freq[/** @type {"UserL"|"UserR"|"TestL"|"TestR"} */ (`${user ? "User" : "Test"}${chan ? "R" : "L"}`)];
|
||||
|
||||
/** @type {(freq:TestFrequency, chan:number, mark:TestFrequencySample|undefined)=>TestFrequencySample|undefined} */
|
||||
export const MarkSet =(freq, chan, mark)=> freq[ chan ? "UserR" : "UserL" ] = mark;
|
||||
|
||||
/** @typedef {{Min:number, Max:number, Value:number, Step:number}} Range */
|
||||
/** @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:Range, Freq:Range, Stim:Range, Live:Context, Draw:{UserL:DrawGroup, UserR:DrawGroup, TestL:DrawGroup, TestR:DrawGroup}, Tests:Array<Test>}} State */
|
||||
/** @type {State} */
|
||||
export const Initial =
|
||||
{
|
||||
Chan: { Min:0, Max:1, Value:0, Step:1 },
|
||||
Freq: { Min:2, Max:8, Value:2, Step:1 },
|
||||
Stim: { Min:-10, Max:120, Value:30, Step:5 },
|
||||
Live:
|
||||
{
|
||||
Test: undefined,
|
||||
Freq: undefined,
|
||||
Mark: undefined
|
||||
},
|
||||
Draw:
|
||||
{
|
||||
UserL:{Points:[], Paths:[]},
|
||||
UserR:{Points:[], Paths:[]},
|
||||
TestL:{Points:[], Paths:[]},
|
||||
TestR:{Points:[], Paths:[]}
|
||||
},
|
||||
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.Value];
|
||||
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 = MarkGet(freq, inState.Chan.Value, true);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/** @typedef {{X:number, Y:number, Mark:TestFrequencySample}} DrawPoint */
|
||||
/** @typedef {{Points:Array<DrawPoint>, Paths:Array<Array<DrawPoint>>}} DrawGroup */
|
||||
/** @typedef {{Left:DrawGroup, Right:DrawGroup}} DrawChart */
|
||||
/** @typedef {{User?:DrawChart, Test?:DrawChart}} DrawTest */
|
||||
/** @type {(inTest:Test, inChan:number, inStim:Range, inIsUser:boolean)=>DrawGroup} */
|
||||
export function Congtiguous(inTest, inChan, inStim, inIsUser)
|
||||
{
|
||||
/** @type {DrawGroup} */
|
||||
const output = {Points:[], Paths:[]};
|
||||
|
||||
let plot;
|
||||
let valid = false;
|
||||
/** @type {Array<DrawPoint>} */
|
||||
let segment = [];
|
||||
for(let i=0; i<inTest.Plot.length; i++)
|
||||
{
|
||||
plot = inTest.Plot[i];
|
||||
const mark = MarkGet(plot, inChan, inIsUser);
|
||||
if(mark)
|
||||
{
|
||||
const lookup = ColumnLookup(plot.Hz);
|
||||
if(lookup)
|
||||
{
|
||||
/** @type {DrawPoint} */
|
||||
const point = {
|
||||
X: lookup[1]*100,
|
||||
Y: (mark.Stim - inStim.Min)/(inStim.Max - inStim.Min) * 100,
|
||||
Mark: mark
|
||||
};
|
||||
output.Points.push(point);
|
||||
|
||||
if(mark.Resp)
|
||||
{
|
||||
if(!valid)
|
||||
{
|
||||
segment = [];
|
||||
output.Paths.push(segment);
|
||||
}
|
||||
valid = true;
|
||||
segment.push(point);
|
||||
}
|
||||
else
|
||||
{
|
||||
valid = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return output;
|
||||
}
|
||||
|
||||
|
||||
/** @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);
|
||||
clone.Draw = {
|
||||
UserL: Congtiguous(clone.Live.Test, 0, clone.Stim, true ),
|
||||
UserR: Congtiguous(clone.Live.Test, 1, clone.Stim, true ),
|
||||
TestL: Congtiguous(clone.Live.Test, 0, clone.Stim, false),
|
||||
TestR: Congtiguous(clone.Live.Test, 1, clone.Stim, false)
|
||||
};
|
||||
}
|
||||
else if (Name == "Mark")
|
||||
{
|
||||
if(clone.Live.Test && clone.Live.Freq)
|
||||
{
|
||||
clone.Live.Mark = MarkSet(clone.Live.Freq, clone.Chan.Value, Data !== null ? {Stim:clone.Stim.Value, Resp:Data} : undefined);
|
||||
|
||||
clone.Draw = {...clone.Draw};
|
||||
clone.Draw[clone.Chan.Value == 0 ? "UserL" : "UserR"] = Congtiguous(clone.Live.Test, clone.Chan.Value, clone.Stim, true);
|
||||
}
|
||||
}
|
||||
else if( Name=="Stim" || Name=="Chan" || Name=="Freq")
|
||||
{
|
||||
const tone = {...clone[Name]};
|
||||
tone.Value += Data*tone.Step;
|
||||
if(tone.Value < tone.Min){ tone.Value = tone.Min; }
|
||||
if(tone.Value > tone.Max){ tone.Value = tone.Max; }
|
||||
clone[Name] = tone;
|
||||
if(Name != "Stim")
|
||||
{
|
||||
Update.Freq(clone);
|
||||
Update.Mark(clone);
|
||||
}
|
||||
}
|
||||
|
||||
return clone;
|
||||
}
|
||||
|
||||
/*
|
||||
const minified =
|
||||
[
|
||||
1,
|
||||
[
|
||||
[20, 30, 50, 40, 60, 80],[20, 30, 50, 40, 60, 80]
|
||||
]
|
||||
];
|
||||
const Expand =(inMin)=>
|
||||
{
|
||||
const outTests = [];
|
||||
const inFreq = inMin[0];
|
||||
for(let i=1; i<inMin.length; i++)
|
||||
{
|
||||
let inTest = inMin[i];
|
||||
let inTestName = inTest[0];
|
||||
|
||||
const outTest = {
|
||||
Name:inTest[0],
|
||||
Plot:[]
|
||||
};
|
||||
outTests.push(outTest);
|
||||
const outFreq = {Hz:0, TestL:{Stim:0, Resp:true}, TestR:{Stim:0, Resp:true}, UserL:undefined, UserR:undefined};
|
||||
|
||||
}
|
||||
}
|
||||
*/
|
||||
112
src/ui.js
112
src/ui.js
@ -1,112 +0,0 @@
|
||||
//@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 */
|
||||
|
||||
/** @type {({children, icon, light, disabled, inactive, onClick}:{children:React.ReactNode, icon?:JSX.Element, light:boolean, disabled:boolean, inactive:boolean, onClick:()=>void})=>JSX.Element} */
|
||||
export function Button({children, icon, light, disabled, inactive, onClick})
|
||||
{
|
||||
const [FlashGet, FlashSet] = React.useState(0);
|
||||
const handleClick =()=>
|
||||
{
|
||||
if(inactive||disabled){ return; }
|
||||
FlashSet(FlashGet+1);
|
||||
onClick();
|
||||
};
|
||||
|
||||
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 ${light ? "opacity-100" : "opacity-0 scale-y-0"}"></span>
|
||||
${children}
|
||||
</span>
|
||||
</button>`;
|
||||
}
|
||||
|
||||
/** @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*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>`);
|
||||
});
|
||||
|
||||
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] font(sans medium) text(xs)">
|
||||
<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>
|
||||
`;
|
||||
}
|
||||
78
ts/store.d.ts
vendored
Normal file
78
ts/store.d.ts
vendored
Normal file
@ -0,0 +1,78 @@
|
||||
declare namespace Store {
|
||||
type ColumnMapping = [frequency: number, position: number, normal: boolean];
|
||||
|
||||
type Range = { Min: number; Max: number; Value: number; Step: number };
|
||||
type TestFrequencySample = { Stim: number; Resp: boolean };
|
||||
|
||||
type TestFrequency = {
|
||||
Hz: number;
|
||||
TestL: TestFrequencySample;
|
||||
TestR: TestFrequencySample;
|
||||
UserL?: TestFrequencySample;
|
||||
UserR?: TestFrequencySample;
|
||||
};
|
||||
|
||||
type Test = {
|
||||
Name : string;
|
||||
Done?: Grade;
|
||||
Plot : Array<TestFrequency>
|
||||
};
|
||||
|
||||
type Context = {
|
||||
Test?: Test;
|
||||
Freq?: TestFrequency;
|
||||
Mark?: TestFrequencySample;
|
||||
};
|
||||
|
||||
type StatePartSimple =
|
||||
{
|
||||
Chan: Range;
|
||||
Freq: Range;
|
||||
Stim: Range;
|
||||
Errs: number;
|
||||
Pick: number;
|
||||
Show:
|
||||
{
|
||||
Cursor:boolean,
|
||||
Answer:boolean
|
||||
}
|
||||
};
|
||||
type StatePartComplex =
|
||||
{
|
||||
Live: Context;
|
||||
Draw: DrawChart;
|
||||
Test: Array<Test>;
|
||||
};
|
||||
|
||||
type State = StatePartSimple & StatePartComplex;
|
||||
|
||||
type ActionMark = { Name: "Mark"; Data: boolean | null };
|
||||
type ActionTest = { Name: "Test"; Data: number };
|
||||
type ActionChan = { Name: "Chan"; Data: number };
|
||||
type ActionFreq = { Name: "Freq"; Data: number };
|
||||
type ActionStim = { Name: "Stim"; Data: number };
|
||||
type ActionErrs = { Name: "Errs"; Data: number };
|
||||
type ActionKill = { Name: "Kill"; Data: number };
|
||||
type ActionShowCursor = {Name: "ShowCursor", Data:boolean};
|
||||
type ActionShowAnswer = {Name: "ShowAnswer", Data:boolean};
|
||||
type Action = ActionMark | ActionTest | ActionChan | ActionFreq | ActionStim | ActionErrs | ActionKill | ActionShowCursor | ActionShowAnswer;
|
||||
type Reducer = (inState: State, inAction: Action) => State;
|
||||
type ContextUpdater = (inState: State) => boolean;
|
||||
|
||||
type PlotKeyUser = "UserL" | "UserR";
|
||||
type PlotKeyTest = "TestL" | "TestR";
|
||||
type PlotKey = PlotKeyUser | PlotKeyTest;
|
||||
|
||||
type DrawPoint = { X: string; Y: string; Mark?: TestFrequencySample };
|
||||
type DrawLine = { Head:DrawPoint, Tail:DrawPoint};
|
||||
type DrawGroup = { Points: Array<DrawPoint>; Paths: Array<DrawLine> };
|
||||
type DrawChart = { Cross?:DrawPoint, UserL: DrawGroup, UserR: DrawGroup, TestL: DrawGroup, TestR: DrawGroup };
|
||||
|
||||
type Binding = [state:State, dispatch:(inAction:Action)=>void]
|
||||
|
||||
type Grade = {
|
||||
Total:number,
|
||||
Marks:number,
|
||||
Score:number
|
||||
};
|
||||
}
|
||||
@ -1,7 +1,34 @@
|
||||
import { assertEquals } from "https://deno.land/std@0.166.0/testing/asserts.ts";
|
||||
import { Reducer, ColumnMapping, Congtiguous, Initial } from "../src/store.js";
|
||||
import { Reducer, ColumnMapping, Initial } from "../js/store.js";
|
||||
|
||||
let state = {...Initial};
|
||||
let state:Store.State = {
|
||||
Chan: { Min:0, Max:1, Value:0, Step:1 },
|
||||
Freq: { Min:2, Max:8, Value:2, Step:1 },
|
||||
Stim: { Min:-10, Max:120, Value:30, Step:5 },
|
||||
Live:
|
||||
{
|
||||
Test: undefined,
|
||||
Freq: undefined,
|
||||
Mark: undefined
|
||||
},
|
||||
Draw:
|
||||
{
|
||||
UserL:{Points:[], Paths:[]},
|
||||
UserR:{Points:[], Paths:[]},
|
||||
TestL:{Points:[], Paths:[]},
|
||||
TestR:{Points:[], Paths:[]}
|
||||
},
|
||||
Test: [
|
||||
{
|
||||
Name: "Patient A Asymmetric Notch",
|
||||
Plot:
|
||||
[
|
||||
{ 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 } }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
Deno.test("Initialize", async(t)=>
|
||||
{
|
||||
@ -15,8 +42,8 @@ Deno.test("Initialize", async(t)=>
|
||||
|
||||
await t.step("A test exists with 500 and 1k hz plots", ()=>
|
||||
{
|
||||
assertEquals(state.Tests.length > 0, true);
|
||||
const test = state.Tests[0];
|
||||
assertEquals(state.Test.length > 0, true);
|
||||
const test = state.Test[0];
|
||||
assertEquals(test.Plot.length > 1, true);
|
||||
assertEquals(test.Plot[0].Hz, 500);
|
||||
assertEquals(test.Plot[1].Hz, 1000);
|
||||
@ -40,8 +67,8 @@ Deno.test("Initialize", async(t)=>
|
||||
|
||||
await t.step("Live context values are correct", ()=>
|
||||
{
|
||||
assertEquals(state.Live.Test, state.Tests[0]);
|
||||
assertEquals(state.Live.Freq.Hz, ColumnMapping[state.Freq.Value][0]);
|
||||
assertEquals(state.Live.Test, state.Test[0]);
|
||||
assertEquals(state.Live.Freq?.Hz, ColumnMapping[state.Freq.Value][0]);
|
||||
assertEquals(state.Live.Mark, undefined, "(User) Mark is undefined");
|
||||
});
|
||||
});
|
||||
@ -64,10 +91,10 @@ Deno.test("Make Marks", async(t)=>
|
||||
|
||||
await t.step("Check marked value", ()=>
|
||||
{
|
||||
assertEquals(state.Live.Freq.UserL !== undefined, true, `there will be a user mark for the left channel`);
|
||||
assertEquals(state.Live.Freq.UserR === undefined, true, `but not the right`);
|
||||
assertEquals(state.Live.Mark.Stim, state.Stim.Value);
|
||||
assertEquals(state.Live.Mark.Resp, true);
|
||||
assertEquals(state.Live.Freq?.UserL !== undefined, true, `there will be a user mark for the left channel`);
|
||||
assertEquals(state.Live.Freq?.UserR === undefined, true, `but not the right`);
|
||||
assertEquals(state.Live.Mark?.Stim, state.Stim.Value);
|
||||
assertEquals(state.Live.Mark?.Resp, true);
|
||||
});
|
||||
|
||||
await t.step("Dispatch Freq, Stim, and Chan updates", ()=>
|
||||
@ -85,40 +112,24 @@ Deno.test("Make Marks", async(t)=>
|
||||
|
||||
await t.step("Check marked value", ()=>
|
||||
{
|
||||
assertEquals(state.Live.Freq.UserR !== undefined, true, `there will be a user mark for the right channel`);
|
||||
assertEquals(state.Live.Freq.UserL !== undefined, true, `and the left`);
|
||||
assertEquals(state.Live.Mark.Stim, state.Stim.Value);
|
||||
assertEquals(state.Live.Mark.Resp, false);
|
||||
assertEquals(state.Live.Freq?.UserR !== undefined, true, `there will be a user mark for the right channel`);
|
||||
assertEquals(state.Live.Freq?.UserL !== undefined, true, `and the left`);
|
||||
assertEquals(state.Live.Mark?.Stim, state.Stim.Value);
|
||||
assertEquals(state.Live.Mark?.Resp, false);
|
||||
});
|
||||
|
||||
await t.step("Live context values are correct", ()=>
|
||||
{
|
||||
assertEquals(state.Live.Test, state.Tests[0]);
|
||||
assertEquals(state.Live.Freq.Hz, ColumnMapping[state.Freq.Value][0]);
|
||||
assertEquals(state.Live.Mark.Stim, state.Stim.Value);
|
||||
assertEquals(state.Live.Test, state.Test[0]);
|
||||
assertEquals(state.Live.Freq?.Hz, ColumnMapping[state.Freq.Value][0]);
|
||||
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);
|
||||
});
|
||||
|
||||
Deno.test("Contiguous Lines", ()=>
|
||||
{
|
||||
/** @type {import("../src/store.js").Test} */
|
||||
const model = {
|
||||
Name:"",
|
||||
Plot:[
|
||||
{Hz: 500, TestL: {Stim:30, Resp:true}, TestR: {Stim:35, Resp:true}, UserL:{Stim:20, Resp:true}},
|
||||
{Hz: 1000, TestL: {Stim:40, Resp:true}, TestR: {Stim:45, Resp:true}, UserL:{Stim:30, Resp:true}},
|
||||
{Hz: 2000, TestL: {Stim:40, Resp:true}, TestR: {Stim:45, Resp:true}, UserL:{Stim:30, Resp:false}},
|
||||
{Hz: 3000, TestL: {Stim:30, Resp:true}, TestR: {Stim:35, Resp:true}, UserL:{Stim:20, Resp:true}},
|
||||
{Hz: 4000, TestL: {Stim:40, Resp:true}, TestR: {Stim:45, Resp:true}, UserL:{Stim:30, Resp:true}},
|
||||
{Hz: 4000, TestL: {Stim:50, Resp:true}, TestR: {Stim:55, Resp:true}, UserL:{Stim:40, Resp:true}}
|
||||
]
|
||||
}
|
||||
|
||||
const {Points, Paths} = Congtiguous(model, 0, Initial.Stim, true);
|
||||
assertEquals(Points.length, 6);
|
||||
assertEquals(Paths.length, 2);
|
||||
assertEquals(Paths[0].length, 2);
|
||||
assertEquals(Paths[1].length, 3);
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user