//@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})
{
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;
/** @type {Array} */
const rules = [];
ColumnMapping.forEach(([label, position, normal])=>
{
rules.push(html`
${label}
`);
});
const dbMin = -10;
const dbMax = 120;
for(let db = dbMin; db <= dbMax; db+=10)
{
rules.push(html`
${db}
`);
}
return html`
Frequency in Hz
Hearing Level (dbHL)
`;
}
/** @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`
`;
}