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
|
||||
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";
|
||||
|
||||
/** @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 React from "https://esm.sh/preact@10.11.3/compat";
|
||||
import {html} from "https://esm.sh/htm@3.1.1/preact";
|
||||
render(html`
|
||||
<${UI.Button} icon="+">hey!<//>
|
||||
<${UI.Button} light>Left<//>
|
||||
<${UI.Button} inactive>Right<//>
|
||||
<${UI.Button} disabled>Right<//>
|
||||
<${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}/>
|
||||
</svg>
|
||||
<//>
|
||||
`, ShadowDiv);
|
||||
|
||||
import TW from "https://esm.sh/@twind/core";
|
||||
import TWpreTailwind from "https://esm.sh/@twind/preset-tailwind@1.0.1";
|
||||
import preAutoprefix from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
|
||||
|
||||
const root = document.querySelector("#app");
|
||||
const rootShadow = root.attachShadow({mode: "open"});
|
||||
const rootShadowRoot = document.createElement("strong");
|
||||
rootShadow.append(rootShadowRoot);
|
||||
*/
|
||||
|
||||
install({presets:[preTailwind(), preAutoprefix()]});
|
||||
|
||||
|
||||
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>
|
||||
<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
|
||||
/** @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;
|
||||
/** @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;
|
||||
};
|
||||
|
||||
/** @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: [
|
||||
/** @type FreqList */
|
||||
export const Frequencies = [500, 1000, 2000, 3000, 4000, 6000, 8000];
|
||||
/** @type Array<Test> */
|
||||
export const 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 } }
|
||||
]
|
||||
Sample:{
|
||||
Left:[15, 10, 15, 30, 40, 35, 20],
|
||||
Right:[10, 10, 20, 40, 55, 40, 15]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export const Controls =
|
||||
{
|
||||
Test:0,
|
||||
Channel: "left",
|
||||
Frequency: 1,
|
||||
Stimulus: 30
|
||||
};
|
||||
|
||||
/** @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 =
|
||||
function Reducer(inState, inAction)
|
||||
{
|
||||
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
|
||||
import React from "https://esm.sh/preact@10.11.3/compat";
|
||||
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);
|
||||
const [FlashGet, FlashSet] = React.useState(0);
|
||||
const handleClick =()=>
|
||||
{
|
||||
if(inactive||disabled){ return; }
|
||||
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}
|
||||
return html`<button class="flex bg-red-500 text-white rounded">
|
||||
${ icon && html`<span class="p-2">${icon}</span>` }
|
||||
<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>
|
||||
${label}
|
||||
</span>
|
||||
</button>`;
|
||||
}
|
||||
|
||||
/** @type {BasicElement} */
|
||||
export function Chart({children})
|
||||
},
|
||||
Chart()
|
||||
{
|
||||
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`
|
||||
<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 class="relative w-full h-[600px]">
|
||||
<div class="absolute right-0 bottom-0 w-[calc(100%-100px)] h-[calc(100%-100px)]"></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