Compare commits
No commits in common. "a602bfd29531868b5f14bf646ef6b9bc0c7de15f" and "5b27cc07d417c4410eb0c06576535afa4fd0687d" have entirely different histories.
a602bfd295
...
5b27cc07d4
4
.vscode/settings.json
vendored
4
.vscode/settings.json
vendored
@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"deno.enable": true,
|
|
||||||
"deno.unstable": true
|
|
||||||
}
|
|
||||||
105
app.js
105
app.js
@ -1,88 +1,21 @@
|
|||||||
//@ts-check
|
//@ts-check
|
||||||
import * as TW from "https://esm.sh/@twind/core@1.0.1";
|
import React from "https://esm.sh/preact@10.11.3/compat";
|
||||||
import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
|
|
||||||
import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
|
|
||||||
|
|
||||||
/** @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);
|
|
||||||
|
|
||||||
import * as UI from "./ui.js";
|
|
||||||
import {render} from "https://esm.sh/preact@10.11.3/compat";
|
|
||||||
import {html} from "https://esm.sh/htm@3.1.1/preact";
|
import {html} from "https://esm.sh/htm@3.1.1/preact";
|
||||||
render(html`
|
|
||||||
<${UI.Button} icon="+">hey!<//>
|
import TW from "https://esm.sh/@twind/core";
|
||||||
<${UI.Button} light>Left<//>
|
import TWpreTailwind from "https://esm.sh/@twind/preset-tailwind@1.0.1";
|
||||||
<${UI.Button} inactive>Right<//>
|
import preAutoprefix from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
|
||||||
<${UI.Button} disabled>Right<//>
|
|
||||||
<${UI.Chart}>
|
const root = document.querySelector("#app");
|
||||||
<svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 bold draw)">
|
const rootShadow = root.attachShadow({mode: "open"});
|
||||||
<${UI.Mark} right=${true} x=${"20%"} y="20%" />
|
const rootShadowRoot = document.createElement("strong");
|
||||||
<${UI.Mark} right=${false} x=${"10%"} y="20%" response=${true} />
|
rootShadow.append(rootShadowRoot);
|
||||||
<${UI.Mark} right=${false}/>
|
*/
|
||||||
</svg>
|
|
||||||
<//>
|
install({presets:[preTailwind(), preAutoprefix()]});
|
||||||
`, ShadowDiv);
|
|
||||||
|
|
||||||
|
React.render(html`
|
||||||
|
<p class="p-4">suuupu</p>
|
||||||
|
<${UI.Button} label="Play Tone" icon=">" light/>
|
||||||
|
`, root);
|
||||||
@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"tasks":
|
|
||||||
{
|
|
||||||
"fs": "deno run -A --no-lock https://deno.land/std@0.166.0/http/file_server.ts",
|
|
||||||
"test": "deno test 'store_test.js' --no-lock"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
39
index.html
39
index.html
@ -1,2 +1,39 @@
|
|||||||
|
<p class="text-red-500 p-4">outside (should ignore classes and be unstyled)</p>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="app.js"></script>
|
|
||||||
|
<script type="module">
|
||||||
|
import React from "https://esm.sh/preact@10.11.3/compat";
|
||||||
|
import {html} from "https://esm.sh/htm@3.1.1/preact";
|
||||||
|
|
||||||
|
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";
|
||||||
|
|
||||||
|
const styles = document.createElement("style");
|
||||||
|
const root = document.querySelector("#app");
|
||||||
|
|
||||||
|
const appShadow = root.attachShadow({mode: "open"});
|
||||||
|
const appShadowRoot = document.createElement("div");
|
||||||
|
appShadow.append(styles);
|
||||||
|
appShadow.append(appShadowRoot);
|
||||||
|
|
||||||
|
const inst = TW.twind({presets:[TWPreTail(), TWPreAuto()]}, TW.cssom(styles));
|
||||||
|
TW.observe(inst, appShadowRoot);
|
||||||
|
|
||||||
|
const El =()=>
|
||||||
|
{
|
||||||
|
const [StateGet, StateSet] = React.useState(false);
|
||||||
|
return html`
|
||||||
|
<div class=${StateGet ? "text-white bg-black": "text-red"} onClick=${e=>StateSet(!StateGet)}>
|
||||||
|
click
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
React.render(html`
|
||||||
|
<p class="text(yellow-500 lg) p-4 font(sans black)">
|
||||||
|
inside (should be styled)
|
||||||
|
<${El}/>
|
||||||
|
</p>`, appShadowRoot);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|||||||
899
squarespace.html
Normal file
899
squarespace.html
Normal file
File diff suppressed because one or more lines are too long
166
store.js
166
store.js
@ -1,155 +1,31 @@
|
|||||||
//@ts-check
|
//@ts-check
|
||||||
|
/** @typedef {[f1:ListEntry, f2:ListEntry, f3:ListEntry, f4:ListEntry, f5:ListEntry, f6:ListEntry, f7:ListEntry]} FreqList */
|
||||||
|
/** @typedef {number|TestMark} ListEntry */
|
||||||
|
/** @typedef {{Name:string, Sample:{Left:FreqList, Right:FreqList}, Answer?:{Left:FreqList, Right:FreqList}}} Test */
|
||||||
|
/** @typedef {{Stim:number|null, Resp:boolean}|null} TestMark*/
|
||||||
|
|
||||||
const size = 100/6;
|
/** @type FreqList */
|
||||||
/** @typedef {[frequency:number, position:number, normal:boolean]} ColumnMapping */
|
export const Frequencies = [500, 1000, 2000, 3000, 4000, 6000, 8000];
|
||||||
/** @type {Array<ColumnMapping>} */
|
/** @type Array<Test> */
|
||||||
export const ColumnMapping = [
|
export const Tests = [
|
||||||
[ 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;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** @typedef {{Min:number, Max:number}} Limit */
|
|
||||||
/** @type {Record<string, Limit>} */
|
|
||||||
export const ToneLimit =
|
|
||||||
{
|
|
||||||
Freq: { Min: 0, Max: ColumnMapping.length-1 },
|
|
||||||
Stim: { Min: -10, Max: 120 },
|
|
||||||
Chan: { Min: 0, Max: 1},
|
|
||||||
};
|
|
||||||
/** @type {(inValue:number, inLimit:Limit)=>number} */
|
|
||||||
export const ApplyLimit =(inValue, inLimit)=>
|
|
||||||
{
|
|
||||||
if(inValue < inLimit.Min){ return inLimit.Min; }
|
|
||||||
else if(inValue > inLimit.Max) { return inLimit.Max; }
|
|
||||||
else{ return inValue; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/** @typedef {(freq:TestFrequency, chan:number)=>TestFrequencySample|undefined} MarkLookup */
|
|
||||||
/** @type {Record<string, MarkLookup>} */
|
|
||||||
export const ChanMark =
|
|
||||||
{
|
|
||||||
User: (freq, chan)=> chan == 0 ? freq.UserL : freq.UserR,
|
|
||||||
Test: (freq, chan)=> chan == 0 ? freq.TestL : freq.TestR
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/** @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:number, Freq:number, Stim:number, Live:Context, Tests:Array<Test>}} State */
|
|
||||||
/** @type {State} */
|
|
||||||
export const Initial =
|
|
||||||
{
|
|
||||||
Chan: 0,
|
|
||||||
Freq: 3,
|
|
||||||
Stim: 30,
|
|
||||||
Live:
|
|
||||||
{
|
|
||||||
Test: undefined,
|
|
||||||
Freq: undefined,
|
|
||||||
Mark: undefined
|
|
||||||
},
|
|
||||||
Tests: [
|
|
||||||
{
|
{
|
||||||
Name: "Patient A Asymmetric Notch",
|
Name: "Patient A Asymmetric Notch",
|
||||||
Plot:
|
Sample:{
|
||||||
[
|
Left:[15, 10, 15, 30, 40, 35, 20],
|
||||||
{ Hz: 500, TestL: { Stim: 30, Resp: true }, TestR: { Stim: 50, Resp: true } },
|
Right:[10, 10, 20, 40, 55, 40, 15]
|
||||||
{ Hz: 1000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } }
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export const Controls =
|
||||||
|
{
|
||||||
|
Test:0,
|
||||||
|
Channel: "left",
|
||||||
|
Frequency: 1,
|
||||||
|
Stimulus: 30
|
||||||
};
|
};
|
||||||
|
|
||||||
/** @typedef {{Name:"Mark", Data:boolean|null}} ActionMark */
|
function Reducer(inState, inAction)
|
||||||
/** @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];
|
|
||||||
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 = inState.Chan == 0 ? freq.UserL : freq.UserR;
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/** @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);
|
|
||||||
}
|
|
||||||
else if (Name == "Mark")
|
|
||||||
{
|
|
||||||
if(clone.Live.Freq)
|
|
||||||
{
|
|
||||||
const channelKey = clone.Chan == 0 ? "UserL" : "UserR";
|
|
||||||
const channelVal = Data !== null ? {Stim:clone.Stim, Resp:Data} : undefined;
|
|
||||||
clone.Live.Mark = clone.Live.Freq[channelKey] = channelVal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if( Name=="Stim" || Name=="Chan" || Name=="Freq")
|
|
||||||
{
|
|
||||||
clone[Name] = ApplyLimit(Data, ToneLimit[Name]);
|
|
||||||
if(Name != "Stim")
|
|
||||||
{
|
|
||||||
Update.Freq(clone);
|
|
||||||
Update.Mark(clone);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return clone;
|
|
||||||
}
|
}
|
||||||
110
store_test.js
110
store_test.js
@ -1,110 +0,0 @@
|
|||||||
import { assertEquals } from "https://deno.land/std@0.166.0/testing/asserts.ts";
|
|
||||||
import { Initial, Reducer, ColumnMapping } from "./store.js";
|
|
||||||
|
|
||||||
const States = {
|
|
||||||
list:[Initial],
|
|
||||||
get latest()
|
|
||||||
{
|
|
||||||
return this.list[this.list.length-1];
|
|
||||||
},
|
|
||||||
set latest(input)
|
|
||||||
{
|
|
||||||
this.list.push(input);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Deno.test("Initial State", async (t)=>
|
|
||||||
{
|
|
||||||
await t.step("Selections are empty", ()=>
|
|
||||||
{
|
|
||||||
assertEquals(States.latest.Live.Test, undefined);
|
|
||||||
assertEquals(States.latest.Live.Freq, undefined);
|
|
||||||
assertEquals(States.latest.Live.Mark, undefined);
|
|
||||||
});
|
|
||||||
|
|
||||||
await t.step("Frequency index maps to 1k hz", ()=>
|
|
||||||
{
|
|
||||||
assertEquals(States.latest.Freq, 3);
|
|
||||||
assertEquals(ColumnMapping[States.latest.Freq][0], 1000);
|
|
||||||
});
|
|
||||||
|
|
||||||
await t.step("The first test has its 2nd plot at 1k hz", ()=>
|
|
||||||
{
|
|
||||||
const plot = States.latest.Tests[0].Plot[1];
|
|
||||||
assertEquals(plot.Hz, 1000);
|
|
||||||
});
|
|
||||||
})
|
|
||||||
|
|
||||||
Deno.test("Select First Test", async (t)=>
|
|
||||||
{
|
|
||||||
await t.step("dispatch action", ()=>
|
|
||||||
{
|
|
||||||
States.latest = Reducer(States.latest, {Name:"Test", Data:0});
|
|
||||||
});
|
|
||||||
|
|
||||||
await t.step("check selections: test and freq, but no mark", ()=>
|
|
||||||
{
|
|
||||||
const s = States.latest;
|
|
||||||
assertEquals(s.Live.Test, s.Tests[0]);
|
|
||||||
assertEquals(s.Live.Freq, s.Tests[0].Plot[1]);
|
|
||||||
assertEquals(s.Live.Mark, undefined);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
Deno.test("Make Marks", async (t)=>
|
|
||||||
{
|
|
||||||
let s;
|
|
||||||
await t.step("Left channel selected", ()=>
|
|
||||||
{
|
|
||||||
assertEquals(States.latest.Chan, 0);
|
|
||||||
});
|
|
||||||
await t.step("Dispatch Mark action", ()=>
|
|
||||||
{
|
|
||||||
States.latest = Reducer(States.latest, {Name:"Mark", Data:true});
|
|
||||||
});
|
|
||||||
s = States.latest;
|
|
||||||
|
|
||||||
await t.step("Check selections: test, freq, and mark", ()=>
|
|
||||||
{
|
|
||||||
assertEquals(s.Live.Test, s.Tests[0]);
|
|
||||||
assertEquals(s.Live.Freq, s.Tests[0].Plot[1]);
|
|
||||||
assertEquals(s.Live.Mark, s.Tests[0].Plot[1].UserL);
|
|
||||||
});
|
|
||||||
|
|
||||||
await t.step("Check marked value", ()=>
|
|
||||||
{
|
|
||||||
assertEquals(s.Live.Mark.Stim, s.Stim);
|
|
||||||
assertEquals(s.Live.Mark.Resp, true);
|
|
||||||
});
|
|
||||||
|
|
||||||
await t.step("Dispatch Mark delete action", ()=>
|
|
||||||
{
|
|
||||||
States.latest = Reducer(States.latest, {Name:"Mark", Data:null});
|
|
||||||
});
|
|
||||||
s = States.latest;
|
|
||||||
|
|
||||||
await t.step("Check marked value", ()=>
|
|
||||||
{
|
|
||||||
assertEquals(States.latest.Live.Mark, undefined);
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
Deno.test("Update Tone State", async(t)=>
|
|
||||||
{
|
|
||||||
await t.step("all three", ()=>
|
|
||||||
{
|
|
||||||
States.latest = Reducer(States.latest, {Name:"Freq", Data:2});
|
|
||||||
States.latest = Reducer(States.latest, {Name:"Stim", Data:25});
|
|
||||||
States.latest = Reducer(States.latest, {Name:"Chan", Data:1});
|
|
||||||
});
|
|
||||||
|
|
||||||
await t.step("check tone values", ()=>
|
|
||||||
{
|
|
||||||
|
|
||||||
assertEquals(States.latest.Stim, 25);
|
|
||||||
assertEquals(States.latest.Freq, 2);
|
|
||||||
assertEquals(States.latest.Chan, 1);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
111
ui.js
111
ui.js
@ -1,113 +1,26 @@
|
|||||||
//@ts-check
|
//@ts-check
|
||||||
import React from "https://esm.sh/preact@10.11.3/compat";
|
import React from "https://esm.sh/preact@10.11.3/compat";
|
||||||
import {html} from "https://esm.sh/htm@3.1.1/preact";
|
import {html} from "https://esm.sh/htm@3.1.1/preact";
|
||||||
import { ColumnMapping, ColumnLookup } from "./store.js";
|
|
||||||
|
|
||||||
/** @typedef {({children}:{children:React.ReactNode})=>JSX.Element} BasicElement */
|
|
||||||
|
|
||||||
/** @type {({children, icon, light, disabled, inactive}:{children:React.ReactNode, icon?:JSX.Element, light:boolean, disabled:boolean, inactive:boolean})=>JSX.Element} */
|
|
||||||
export function Button({children, icon, light, disabled, inactive})
|
export default {
|
||||||
|
Button({label, icon, light, disabled})
|
||||||
{
|
{
|
||||||
const [LightGet, LightSet] = React.useState(light);
|
return html`<button class="flex bg-red-500 text-white rounded">
|
||||||
const [FlashGet, FlashSet] = React.useState(0);
|
${ icon && html`<span class="p-2">${icon}</span>` }
|
||||||
const handleClick =()=>
|
<span class="p-2 relative">
|
||||||
{
|
<span class="absolute top-0 left-1/2 w-14 h-4 bg-red-500 translate(-x-1/2 -y-1/2) rounded-full border(4 white solid)"></span>
|
||||||
if(inactive||disabled){ return; }
|
${label}
|
||||||
LightSet(!LightGet);
|
|
||||||
FlashSet(FlashGet+1);
|
|
||||||
};
|
|
||||||
|
|
||||||
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 ${LightGet ? "opacity-100" : "opacity-0 scale-y-0"}"></span>
|
|
||||||
${children}
|
|
||||||
</span>
|
</span>
|
||||||
</button>`;
|
</button>`;
|
||||||
}
|
},
|
||||||
|
Chart()
|
||||||
/** @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}%] 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`
|
return html`
|
||||||
<div class="relative w-full h-[600px] font(sans medium) text(xs)">
|
<div class="relative w-full h-[600px]">
|
||||||
<div class="absolute right-0 bottom-0 w-[calc(100%-100px)] h-[calc(100%-100px)] border(1 slate-300)">
|
<div class="absolute right-0 bottom-0 w-[calc(100%-100px)] h-[calc(100%-100px)]"></div>
|
||||||
<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>
|
</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>
|
|
||||||
`;
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user