Merge pull request #1 from TreetopFlyer/feature/layout-updates
Feature/layout updates
This commit is contained in:
GitHub
commit
bb74512aad
20
deno.json
20
deno.json
@ -1,15 +1,9 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": { "types": ["./store"], "checkJs": true },
|
"compilerOptions": { "types": ["*.d.ts"], "checkJs": true },
|
||||||
"importMap": "./deno.map.json",
|
"imports": {
|
||||||
"fmt": {
|
"@twind/": "https://esm.sh/@twind/",
|
||||||
"options": {
|
"react": "https://esm.sh/preact@10.11.3/compat",
|
||||||
"lineWidth": 256
|
"htm": "https://esm.sh/htm@3.1.1/preact",
|
||||||
}
|
"app": "./js/app.js"
|
||||||
},
|
|
||||||
"tasks": {
|
|
||||||
"dev": "deno task serve & deno task test",
|
|
||||||
"fmt": "deno fmt --watch",
|
|
||||||
"serve": "deno run -A --unstable --no-check https://deno.land/std@0.167.0/http/file_server.ts",
|
|
||||||
"test": "deno test store.test.ts --watch --no-lock --no-check"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,8 +0,0 @@
|
|||||||
{
|
|
||||||
"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": "./src/app.js"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
19
index.html
19
index.html
@ -1,7 +1,12 @@
|
|||||||
<meta charset="utf-8"/>
|
<html>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
<head>
|
||||||
<!---->
|
<meta charset="utf-8"/>
|
||||||
<div id="app"></div>
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||||
<script type="importmap-shim" src="./deno.map.json"></script>
|
</head>
|
||||||
<script type="module-shim">import "app";</script>
|
<body>
|
||||||
<script async src="https://unpkg.com/es-module-shims@0.13.1/dist/es-module-shims.min.js"></script>
|
<div id="app"></div>
|
||||||
|
<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>
|
||||||
@ -15,23 +15,20 @@ TW.Init(ShadowCSS, ShadowDiv);
|
|||||||
|
|
||||||
React.render(html`
|
React.render(html`
|
||||||
<${Store.Provider}>
|
<${Store.Provider}>
|
||||||
|
<div class="max-w-[1170px] mx-auto">
|
||||||
|
|
||||||
<div class="grid grid-cols-[300px_auto] items-center">
|
<${UI.Header}/>
|
||||||
<div class="col-start-1 p-10">
|
|
||||||
<img src="./logo.png"/>
|
<div class="flex flex-col items-start lg:flex-row my-4">
|
||||||
</div>
|
<${UI.Controls}/>
|
||||||
<div class="flex justify-center">
|
<${UI.Chart}>
|
||||||
<${UI.Select}/>
|
<${UI.Audiogram}/>
|
||||||
</div>
|
<div class="absolute bottom-0 right-0"><${UI.Display}/></div>
|
||||||
<div class="col-start-1">
|
<//>
|
||||||
<${UI.Controls}/>
|
|
||||||
</div>
|
|
||||||
<div class="">
|
|
||||||
<${UI.Chart}>
|
|
||||||
<${UI.Audiogram}/>
|
|
||||||
<//>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
<//>
|
<//>
|
||||||
`, ShadowDiv);
|
`, ShadowDiv);
|
||||||
@ -28,6 +28,55 @@ export const ColumnLookup =(inFrequency)=>
|
|||||||
/** @type {(inDecimal:number)=>string} */
|
/** @type {(inDecimal:number)=>string} */
|
||||||
const Perc =(inDecimal)=> `${inDecimal*100}%`;
|
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
|
/** Creates a new Store.Context object that contain the current selections
|
||||||
* @type {(inState:Store.State, inTest?:Store.Test)=>Store.Context} */
|
* @type {(inState:Store.State, inTest?:Store.Test)=>Store.Context} */
|
||||||
const Reselect =(inState, inTest)=>
|
const Reselect =(inState, inTest)=>
|
||||||
@ -44,7 +93,8 @@ const Reselect =(inState, inTest)=>
|
|||||||
if(plot.Hz == hz)
|
if(plot.Hz == hz)
|
||||||
{
|
{
|
||||||
output.Freq = plot;
|
output.Freq = plot;
|
||||||
output.Mark = plot[`User${inState.Chan.Value ? "R" : "L"}`];
|
output.Mark = inState.Chan.Value ? plot.UserR : plot.UserL;
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -111,7 +161,7 @@ export function Reducer(inState, inAction)
|
|||||||
const test = clone.Test[Data];
|
const test = clone.Test[Data];
|
||||||
if(test)
|
if(test)
|
||||||
{
|
{
|
||||||
clone.TestIndex = Data;
|
clone.Pick = Data;
|
||||||
clone.Live = Reselect(clone, test);
|
clone.Live = Reselect(clone, test);
|
||||||
clone.Draw =
|
clone.Draw =
|
||||||
{
|
{
|
||||||
@ -121,6 +171,7 @@ export function Reducer(inState, inAction)
|
|||||||
TestL: Redraw(test, 0, clone.Stim, false),
|
TestL: Redraw(test, 0, clone.Stim, false),
|
||||||
TestR: Redraw(test, 1, clone.Stim, false)
|
TestR: Redraw(test, 1, clone.Stim, false)
|
||||||
};
|
};
|
||||||
|
test.Done = Grade(test);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if (Name == "Mark")
|
else if (Name == "Mark")
|
||||||
@ -131,6 +182,8 @@ export function Reducer(inState, inAction)
|
|||||||
clone.Live.Mark = Data !== null ? {Stim:clone.Stim.Value, Resp:Data} : undefined;
|
clone.Live.Mark = Data !== null ? {Stim:clone.Stim.Value, Resp:Data} : undefined;
|
||||||
clone.Live.Freq[key] = clone.Live.Mark;
|
clone.Live.Freq[key] = clone.Live.Mark;
|
||||||
clone.Draw[key] = Redraw(clone.Live.Test, clone.Chan.Value, clone.Stim, true);
|
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")
|
else if( Name=="Stim" || Name=="Chan" || Name=="Freq")
|
||||||
@ -146,6 +199,25 @@ export function Reducer(inState, inAction)
|
|||||||
clone.Live = Reselect(clone);
|
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")
|
else if (Name == "ShowCursor")
|
||||||
{
|
{
|
||||||
clone.Show.Cursor = Data;
|
clone.Show.Cursor = Data;
|
||||||
@ -155,15 +227,103 @@ export function Reducer(inState, inAction)
|
|||||||
clone.Show.Answer = Data;
|
clone.Show.Answer = Data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
SaveSettings(clone);
|
||||||
|
|
||||||
return clone;
|
return clone;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @type {Store.State} */
|
|
||||||
export const Initial = Reducer(
|
/** @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 },
|
Chan: { Min:0, Max:1, Value:0, Step:1 },
|
||||||
Freq: { Min:2, Max:8, Value:3, Step:1 },
|
Freq: { Min:2, Max:8, Value:3, Step:1 },
|
||||||
Stim: { Min:-10, Max:120, Value:30, Step:5 },
|
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:
|
Live:
|
||||||
{
|
{
|
||||||
Test: undefined,
|
Test: undefined,
|
||||||
@ -176,71 +336,11 @@ export const Initial = Reducer(
|
|||||||
UserR:{Points:[], Paths:[]},
|
UserR:{Points:[], Paths:[]},
|
||||||
TestL:{Points:[], Paths:[]},
|
TestL:{Points:[], Paths:[]},
|
||||||
TestR:{Points:[], Paths:[]}
|
TestR:{Points:[], Paths:[]}
|
||||||
},
|
}
|
||||||
Show:
|
}, {Name:"Test", Data:SettingsActual.Pick});
|
||||||
{
|
|
||||||
Cursor:true,
|
|
||||||
Answer:false
|
|
||||||
},
|
|
||||||
TestIndex: 0,
|
|
||||||
Test: [
|
|
||||||
{
|
|
||||||
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 } }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}, {Name:"Test", Data:0});
|
|
||||||
|
|
||||||
/** @type {preact.Context<Store.Binding>} */
|
|
||||||
export const Context = React.createContext([Initial, (_a)=>{}]);
|
export const Context = React.createContext(/** @type {Store.Binding} */([Initial, (_a)=>{}]));
|
||||||
|
|
||||||
/** @type {(props:{children:preact.ComponentChildren})=>preact.VNode} */
|
/** @type {(props:{children:preact.ComponentChildren})=>preact.VNode} */
|
||||||
export const Provider =(props)=>
|
export const Provider =(props)=>
|
||||||
@ -251,55 +351,4 @@ export const Provider =(props)=>
|
|||||||
};
|
};
|
||||||
|
|
||||||
/** @type {()=>Store.Binding} */
|
/** @type {()=>Store.Binding} */
|
||||||
export const Consumer =()=> React.useContext(Context);
|
export const Consumer =()=> React.useContext(Context);
|
||||||
|
|
||||||
/** @type {(inTest:Store.Test|undefined)=>Store.Grade} */
|
|
||||||
export const Grade =(inTest)=>
|
|
||||||
{
|
|
||||||
/** @type {Store.Grade} */
|
|
||||||
const output = { Total:0, Done: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; }
|
|
||||||
}
|
|
||||||
|
|
||||||
if(inTest)
|
|
||||||
{
|
|
||||||
for(let i=0; i<inTest.Plot.length; i++)
|
|
||||||
{
|
|
||||||
const {TestL, TestR, UserL, UserR} = inTest.Plot[i];
|
|
||||||
if(TestL)
|
|
||||||
{
|
|
||||||
output.Total ++;
|
|
||||||
if(UserL)
|
|
||||||
{
|
|
||||||
output.Done++;
|
|
||||||
output.Score += Mapper(TestL.Stim, UserL.Stim);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(TestR)
|
|
||||||
{
|
|
||||||
output.Total ++;
|
|
||||||
if(UserR)
|
|
||||||
{
|
|
||||||
output.Done++;
|
|
||||||
output.Score += Mapper(TestR.Stim, UserR.Stim);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if(output.Done > 0)
|
|
||||||
{
|
|
||||||
output.Score = Math.floor((output.Score/output.Done) * 10000)/100;
|
|
||||||
}
|
|
||||||
|
|
||||||
return output;
|
|
||||||
}
|
|
||||||
@ -2,7 +2,7 @@ import * as TW from "@twind/core@1.0.1";
|
|||||||
import TWPreTail from "@twind/preset-tailwind@1.0.1";
|
import TWPreTail from "@twind/preset-tailwind@1.0.1";
|
||||||
import TWPreAuto from "@twind/preset-autoprefix@1.0.1";
|
import TWPreAuto from "@twind/preset-autoprefix@1.0.1";
|
||||||
|
|
||||||
/** @type {TW.TwindConfig} */
|
/** @type {TW.TwindUserConfig} */
|
||||||
export const Configure = {
|
export const Configure = {
|
||||||
theme:
|
theme:
|
||||||
{
|
{
|
||||||
@ -71,7 +71,7 @@ export const Configure = {
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
'text-shadow-lcd', {"text-shadow": "0px 2px 2px #00000055"}
|
'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-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])"]
|
[ "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])"]
|
||||||
@ -3,7 +3,7 @@ import { html } from "htm";
|
|||||||
import * as Store from "./store.js";
|
import * as Store from "./store.js";
|
||||||
import * as Tone from "./tone.js";
|
import * as Tone from "./tone.js";
|
||||||
|
|
||||||
/** @typedef {({children}:{children?:preact.ComponentChildren})=>preact.VNode} BasicElement */
|
/** @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} */
|
/** @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})
|
export function Button({children, icon, light, disabled, inactive, onClick, classes})
|
||||||
@ -36,44 +36,65 @@ export function Button({children, icon, light, disabled, inactive, onClick, clas
|
|||||||
}
|
}
|
||||||
|
|
||||||
/** @type {BasicElement} */
|
/** @type {BasicElement} */
|
||||||
export const Select =()=>
|
export const Header =()=>
|
||||||
{
|
{
|
||||||
const [State, Dispatch] = Store.Consumer();
|
const [State, Dispatch] = Store.Consumer();
|
||||||
const grade = Store.Grade(State.Live.Test);
|
const grade = State.Live.Test?.Done || {Marks:0, Total:0, Score:0};
|
||||||
|
|
||||||
/** @type {(e:Event)=>void} */
|
/** @type {(e:Event)=>void} */
|
||||||
const handleChange =(e)=> Dispatch({Name:"Test", Data:parseInt(/** @type {HTMLSelectElement}*/(e.target).value)});
|
const handleChange =(e)=> Dispatch({Name:"Test", Data:parseInt(/** @type {HTMLSelectElement}*/(e.target).value)});
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div class="inline-flex flex-row align-center bg-metal rounded-lg overflow-hidden shadow-md font-sans">
|
<div class="flex flex-row items-stretch bg-metal rounded-lg overflow-hidden shadow-md font-sans">
|
||||||
<div class="box-notch">
|
|
||||||
<div >Select Test</div>
|
<div class="p-4">
|
||||||
<div class="box-buttons">
|
<img class="h-auto max-w-[200px]" src="./logo.png"/>
|
||||||
<select id="test-select" class="px-2 py-2 rounded-lg border(1 slate-200) font-bold text(xl white) cursor-pointer bg-earmark" value=${State.TestIndex} onChange=${handleChange}>
|
</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>`)}
|
${State.Test.map((t, i)=>html`<option class="text-black" value=${i}>${t.Name}</option>`)}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="box-buttons w-full mt-2">
|
||||||
<div class="box-notch">
|
<p>Patient Error:</p>
|
||||||
<div>Progress</div>
|
<${Button} inactive=${State.Errs == 0.0} light=${State.Errs == 0.0} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Errs", Data:0.0})}>None<//>
|
||||||
<div class="box-buttons flex-col">
|
<${Button} inactive=${State.Errs == 0.1} light=${State.Errs == 0.1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Errs", Data:0.1})}>Slight<//>
|
||||||
<div>Complete: ${grade.Done} of ${grade.Total}</div>
|
<${Button} inactive=${State.Errs == 0.3} light=${State.Errs == 0.3} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Errs", Data:0.3})}>Moderate<//>
|
||||||
<div class="w-full h-4 bg-zinc-400 rounded-full overflow-hidden">
|
<${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 class="h-full w-[${grade.Done/grade.Total*100}%] bg-earmark"></div>
|
|
||||||
</div>
|
|
||||||
<div class="text-sm">Accuracy: ${grade.Score}%</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-notch">
|
|
||||||
<div>Display</div>
|
<div class="p-4">
|
||||||
<div class="box-buttons flex-col">
|
<div class="box-buttons flex-col w-[200px] h-full justify-center">
|
||||||
<${Button} light=${State.Show.Cursor} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"ShowCursor", Data:!State.Show.Cursor})}>Cursor<//>
|
<div>Complete: ${grade.Marks} of ${grade.Total}</div>
|
||||||
<${Button} light=${State.Show.Answer} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"ShowAnswer", Data:!State.Show.Answer})}>Answer<//>
|
<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>
|
</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} */
|
/** @type {BasicElement} */
|
||||||
export const Controls =()=>
|
export const Controls =()=>
|
||||||
{
|
{
|
||||||
@ -93,7 +114,26 @@ export const Controls =()=>
|
|||||||
if(State.Live.Freq)
|
if(State.Live.Freq)
|
||||||
{
|
{
|
||||||
const testMark = State.Live.Freq[/** @type {"TestL"|"TestR"}*/(`Test${State.Chan.Value ? "R":"L"}`)];
|
const testMark = State.Live.Freq[/** @type {"TestL"|"TestR"}*/(`Test${State.Chan.Value ? "R":"L"}`)];
|
||||||
const handler = testMark.Stim <= State.Stim.Value ? ()=>{playSet(2)} : ()=>{playSet(0)}
|
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);
|
timer = setTimeout(handler, 800 + Math.random()*1300);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -104,130 +144,134 @@ export const Controls =()=>
|
|||||||
const classTitle = "flex-1 text-sm"
|
const classTitle = "flex-1 text-sm"
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div class="font-sans bg-metal rounded-lg overflow-hidden shadow-md">
|
<div class="flex flex-col w-full md:w-[320px] font-sans justify-center gap-4">
|
||||||
<div class="box-notch">
|
<div class="flex-col bg-metal rounded-lg overflow-hidden shadow-md">
|
||||||
<div class=${classTitle}>Channel</div>
|
<div class="p-4 pb-1">
|
||||||
<div class="box-buttons min-w-[50%]">
|
<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 == 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<//>
|
<${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="box-notch">
|
|
||||||
<div class=${classTitle}>Frequency</div>
|
|
||||||
<div class="box-buttons min-w-[50%]">
|
|
||||||
<div class="w-24 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="box-notch">
|
|
||||||
<div class=${classTitle}>Stimulus</div>
|
|
||||||
<div class="box-buttons min-w-[50%]">
|
|
||||||
<div class="w-24 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 class="box-notch">
|
|
||||||
<svg width="80" height="80" preserveAspectRatio="none" viewBox="0 0 79 79" fill="none">
|
|
||||||
<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 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>
|
||||||
</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>
|
||||||
<div class="box-notch">
|
|
||||||
<div class=${classTitle}>Threshold</div>
|
<div class="flex-col bg-metal rounded-lg overflow-hidden shadow-md">
|
||||||
<div class="box-buttons flex-col gap-2 min-w-[50%]">
|
<div class="p-4 pb-0">
|
||||||
<${Button}
|
<div class="box-buttons flex-1">
|
||||||
onClick=${()=>Dispatch({Name:"Mark", Data:true })}
|
<div class="flex-1">
|
||||||
classes="text-md w-full"
|
<${Button}
|
||||||
icon=${html`
|
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)">
|
<svg class="h-2 w-2 mx-1 overflow-visible stroke(white 2)">
|
||||||
<${State.Chan.Value ? Glyph.O : Glyph.X}/>
|
<${Glyph.Null}/>
|
||||||
</svg>`}
|
</svg>
|
||||||
>
|
`}
|
||||||
Accept
|
onClick=${()=>Dispatch({Name:"Mark", Data:null })}
|
||||||
<//>
|
classes="text-sm w-full"
|
||||||
<${Button}
|
disabled=${State.Live.Mark == undefined}
|
||||||
onClick=${()=>Dispatch({Name:"Mark", Data:false})}
|
>
|
||||||
classes="text-sm w-full"
|
Clear
|
||||||
icon=${html`
|
<//>
|
||||||
<svg class="h-2 w-2 mx-1 overflow-visible stroke(white 2)">
|
</div>
|
||||||
<${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>
|
||||||
</div>
|
</div>
|
||||||
@ -274,6 +318,7 @@ export const Audiogram =()=>
|
|||||||
}`;
|
}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
/** @type {BasicElement} */
|
/** @type {BasicElement} */
|
||||||
export function Chart({children})
|
export function Chart({children})
|
||||||
{
|
{
|
||||||
@ -299,8 +344,8 @@ export function Chart({children})
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
return html`
|
return html`
|
||||||
<div class="relative w-full h-[800px] font(sans medium) text(xs)">
|
<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%-50px)] border(1 zinc-300)">
|
<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="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 absolute top-[50%] left-[-50px] ">
|
||||||
<span class="inline-block -rotate-90 origin-top -translate-x-1/2 text(sm center) font-black">
|
<span class="inline-block -rotate-90 origin-top -translate-x-1/2 text(sm center) font-black">
|
||||||
@ -308,7 +353,7 @@ export function Chart({children})
|
|||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<div class=${`relative top-[${inset}px] left-[${inset}px] w-[calc(100%-${inset*2}px)] h-[calc(100%-${inset*2}px)]`}>
|
<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>
|
<span class="block absolute top-0 left-[-${inset}px] w-[calc(100%+${inset*2}px)] h-[27%] bg-black opacity-5"></span>
|
||||||
${ rules }
|
${ rules }
|
||||||
<div class="absolute top-0 left-0 w-full h-full">
|
<div class="absolute top-0 left-0 w-full h-full">
|
||||||
${ children }
|
${ children }
|
||||||
29
store.d.ts → ts/store.d.ts
vendored
29
store.d.ts → ts/store.d.ts
vendored
@ -12,7 +12,11 @@ declare namespace Store {
|
|||||||
UserR?: TestFrequencySample;
|
UserR?: TestFrequencySample;
|
||||||
};
|
};
|
||||||
|
|
||||||
type Test = { Name: string; Plot: Array<TestFrequency> };
|
type Test = {
|
||||||
|
Name : string;
|
||||||
|
Done?: Grade;
|
||||||
|
Plot : Array<TestFrequency>
|
||||||
|
};
|
||||||
|
|
||||||
type Context = {
|
type Context = {
|
||||||
Test?: Test;
|
Test?: Test;
|
||||||
@ -20,25 +24,38 @@ declare namespace Store {
|
|||||||
Mark?: TestFrequencySample;
|
Mark?: TestFrequencySample;
|
||||||
};
|
};
|
||||||
|
|
||||||
type State = {
|
type StatePartSimple =
|
||||||
|
{
|
||||||
Chan: Range;
|
Chan: Range;
|
||||||
Freq: Range;
|
Freq: Range;
|
||||||
Stim: Range;
|
Stim: Range;
|
||||||
|
Errs: number;
|
||||||
|
Pick: number;
|
||||||
|
Show:
|
||||||
|
{
|
||||||
|
Cursor:boolean,
|
||||||
|
Answer:boolean
|
||||||
|
}
|
||||||
|
};
|
||||||
|
type StatePartComplex =
|
||||||
|
{
|
||||||
Live: Context;
|
Live: Context;
|
||||||
Draw: DrawChart;
|
Draw: DrawChart;
|
||||||
Show: {Cursor:boolean, Answer:boolean}
|
|
||||||
TestIndex: number;
|
|
||||||
Test: Array<Test>;
|
Test: Array<Test>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type State = StatePartSimple & StatePartComplex;
|
||||||
|
|
||||||
type ActionMark = { Name: "Mark"; Data: boolean | null };
|
type ActionMark = { Name: "Mark"; Data: boolean | null };
|
||||||
type ActionTest = { Name: "Test"; Data: number };
|
type ActionTest = { Name: "Test"; Data: number };
|
||||||
type ActionChan = { Name: "Chan"; Data: number };
|
type ActionChan = { Name: "Chan"; Data: number };
|
||||||
type ActionFreq = { Name: "Freq"; Data: number };
|
type ActionFreq = { Name: "Freq"; Data: number };
|
||||||
type ActionStim = { Name: "Stim"; 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 ActionShowCursor = {Name: "ShowCursor", Data:boolean};
|
||||||
type ActionShowAnswer = {Name: "ShowAnswer", Data:boolean};
|
type ActionShowAnswer = {Name: "ShowAnswer", Data:boolean};
|
||||||
type Action = ActionMark | ActionTest | ActionChan | ActionFreq | ActionStim | ActionShowCursor | ActionShowAnswer;
|
type Action = ActionMark | ActionTest | ActionChan | ActionFreq | ActionStim | ActionErrs | ActionKill | ActionShowCursor | ActionShowAnswer;
|
||||||
type Reducer = (inState: State, inAction: Action) => State;
|
type Reducer = (inState: State, inAction: Action) => State;
|
||||||
type ContextUpdater = (inState: State) => boolean;
|
type ContextUpdater = (inState: State) => boolean;
|
||||||
|
|
||||||
@ -55,7 +72,7 @@ declare namespace Store {
|
|||||||
|
|
||||||
type Grade = {
|
type Grade = {
|
||||||
Total:number,
|
Total:number,
|
||||||
Done:number,
|
Marks:number,
|
||||||
Score:number
|
Score:number
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { assertEquals } from "https://deno.land/std@0.166.0/testing/asserts.ts";
|
import { assertEquals } from "https://deno.land/std@0.166.0/testing/asserts.ts";
|
||||||
import { Reducer, ColumnMapping, Initial } from "./src/store.js";
|
import { Reducer, ColumnMapping, Initial } from "../js/store.js";
|
||||||
|
|
||||||
let state:Store.State = {
|
let state:Store.State = {
|
||||||
Chan: { Min:0, Max:1, Value:0, Step:1 },
|
Chan: { Min:0, Max:1, Value:0, Step:1 },
|
||||||
Loading…
Reference in New Issue
Block a user