diff --git a/app.js b/app.js index 93028c3..374c9b3 100644 --- a/app.js +++ b/app.js @@ -1,21 +1,20 @@ //@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 * 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"; -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 Configure = {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); -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` -

suuupu

- <${UI.Button} label="Play Tone" icon=">" light/> -`, root); \ No newline at end of file +import 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"; +render(html` + <${UI.Button} icon="+">hey! + <${UI.Chart}>

SUP

+`, ShadowDiv); \ No newline at end of file diff --git a/index.html b/index.html index 751c4c6..a8d8640 100644 --- a/index.html +++ b/index.html @@ -1,39 +1,2 @@ -

outside (should ignore classes and be unstyled)

- - + \ No newline at end of file diff --git a/ui.js b/ui.js index a81c886..9e7405e 100644 --- a/ui.js +++ b/ui.js @@ -1,25 +1,73 @@ //@ts-check import React from "https://esm.sh/preact@10.11.3/compat"; +/// import {html} from "https://esm.sh/htm@3.1.1/preact"; - - export default { - Button({label, icon, light, disabled}) + Button({children, icon, light, disabled}) { - return html``; }, - Chart() + + /** @type {({children}:{inset:number, children:React.ReactNode})=>JSX.Element} */ + Chart({children}) { + const inset = 20 + const size = 1/6; + /** @type {Record} */ + const mappingX = { + "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(mappingX).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` + + `); + } return html` -
-
+
+
+ Frequency in Hz + + + Hearing Level (dbHL) + + +
+ + ${ rulesX } + ${ rulesY } + ${ children } +
+
`; }