From 446602b6303c41c05deedbcd853b4186209bd6b1 Mon Sep 17 00:00:00 2001
From: Seth Trowbridge <seth111@gmail.com>
Date: Fri, 25 Nov 2022 15:51:27 -0500
Subject: [PATCH] chart

---
 app.js     | 35 +++++++++++++++--------------
 index.html | 39 +--------------------------------
 ui.js      | 64 +++++++++++++++++++++++++++++++++++++++++++++++-------
 3 files changed, 74 insertions(+), 64 deletions(-)

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`
-    <p class="p-4">suuupu</p>
-    <${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}><p>SUP</p><//>
+`, 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 @@
-<p class="text-red-500 p-4">outside (should ignore classes and be unstyled)</p>
 <div id="app"></div>
-
-<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>
+<script type="module" src="app.js"></script>
\ 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";
+/// <reference types="https://esm.sh/v99/htm@3.1.1/preact/index.d.ts"/>
 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`<button class="flex bg-red-500 text-white rounded">
+        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}
+                ${children}
             </span>
         </button>`;
     },
-    Chart()
+
+    /** @type {({children}:{inset:number, children:React.ReactNode})=>JSX.Element} */
+    Chart({children})
     {
+        const inset = 20
+        const size = 1/6;
+        /** @type {Record<string, [position:number, normal:boolean]>} */
+        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`
+            <span class="block absolute top-[-${inset}px] left-[${position*100}%] 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 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`
+            <span class="block absolute  left-[-${inset}px]   top-[${percent}%]   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]">
-            <div class="absolute right-0 bottom-0 w-[calc(100%-100px)] h-[calc(100%-100px)]"></div>
+        <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>
+                    ${ rulesX }
+                    ${ rulesY }
+                    ${ children }
+                </div>
+            </div>
         </div>
         `;
     }