ui updates

app.js

@@ -3,7 +3,64 @@ 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 Configure = {presets: [TWPreTail(), TWPreAuto()]};
+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"
+            },
+        ],
+        [
+            '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");
@@ -11,10 +68,17 @@ ShadowDOM.append(ShadowCSS);
 ShadowDOM.append(ShadowDiv);
 TW.observe(TW.twind(Configure, TW.cssom(ShadowCSS)), ShadowDiv);
 
-import UI from "./ui.js";
+import * as 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><//>
+    <${UI.Button} light>Left<//>
+    <${UI.Button} inactive>Right<//>
+    <${UI.Button} disabled>Right<//>
+    <${UI.Chart}>
+        <svg class="overflow-visible stroke(blue-700 bold draw)">
+            <${UI.Mark} />
+        </svg>
+    <//>
 `, ShadowDiv);

ui.js

@@ -3,72 +3,123 @@ 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 {
+/** @typedef {({children}:{children:React.ReactNode})=>JSX.Element} BasicElement */
-    Button({children, icon, light, disabled})
-    {
-        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>
-                ${children}
-            </span>
-        </button>`;
-    },
 
-    /** @type {({children}:{inset:number, children:React.ReactNode})=>JSX.Element} */
+export function Button({children, icon, light, disabled, inactive})
-    Chart({children})
+{
+    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}
+        </span>
+    </button>`;
+}
+
+/** @type {BasicElement} */
+export function Chart({children})
+{
+    const inset = 20
+
+    const size = 1/6;
+    /** @type {Record<string, [position:number, normal:boolean]>} */
+    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]])=>
     {
-        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] font(sans medium) text(xs)">
+        <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"}">
-            <div class="absolute right-0 bottom-0 w-[calc(100%-100px)] h-[calc(100%-100px)] border(1 slate-300)">
+            <span class="block absolute top-0 left-0 -translate-x-1/2 -translate-y-full pb-${normal ? 4 : 1}">${label}</span>
-                <span class="block        absolute top-[-65px] left-0  w-full      text(sm center)     font-black">Frequency in Hz</span>
+        </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">
+    const rulesY = [];
-                        Hearing Level (dbHL)
+    const rulesYMin = -10;
-                    </span>
+    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] 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>
-                <div class=${`relative top-[${inset}px] left-[${inset}px] w-[calc(100%-${inset*2}px)] h-[calc(100%-${inset*2}px)]`}>
+            </span>
-                    <span class="block absolute top-0 left-[-${inset}px] w-[calc(100%+${inset*2}px)] h-[27%] bg-black opacity-10"></span>
+            <div class=${`relative top-[${inset}px] left-[${inset}px] w-[calc(100%-${inset*2}px)] h-[calc(100%-${inset*2}px)]`}>
-                    ${ rulesX }
+                <span class="block absolute top-0 left-[-${inset}px] w-[calc(100%+${inset*2}px)] h-[27%] bg-black opacity-10"></span>
-                    ${ rulesY }
+                ${ rulesX }
+                ${ rulesY }
+                <div class="absolute top-0 left-0 w-full h-full">
                     ${ children }
                 </div>
             </div>
         </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>
+    `;
 }