//@ts-check
import React from "https://esm.sh/preact@10.11.3/compat";
///
import {html} from "https://esm.sh/htm@3.1.1/preact";
/** @typedef {({children}:{children:React.ReactNode})=>JSX.Element} BasicElement */
export function Button({children, icon, light, disabled, inactive})
{
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`
`;
}
/** @type {BasicElement} */
export function Chart({children})
{
const inset = 20
const size = 1/6;
/** @type {Record} */
const rulesXMapping = {
"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 ]
};
const rulesX = Object.entries(rulesXMapping).map(([label, [position, normal]])=>
{
return html`
${label}
`;
});
const rulesY = [];
const rulesYMin = -10;
const rulesYMax = 120;
for(let db = rulesYMin; db <= rulesYMax; db+=10)
{
const percent = ((db-rulesYMin) / (rulesYMax-rulesYMin))*100;
rulesY.push(html`
${db}
`);
}
return html`
Frequency in Hz
Hearing Level (dbHL)
${ rulesX }
${ rulesY }
${ children }
`;
}
/** @type {Record} */
const Glyph = {
Arrow:({children})=> html`
`,
//style="transform: translate(50%, 50%) rotate(-15deg) scale(0.5);"
X: ({children})=> html`
${children}`,
O: ({children})=> html`
${children}`
};
/** @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`
`;
}