ui updates
This commit is contained in:
parent
446602b630
commit
2d023fade1
70
app.js
70
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);
|
||||
171
ui.js
171
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 {
|
||||
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>`;
|
||||
},
|
||||
/** @typedef {({children}:{children:React.ReactNode})=>JSX.Element} BasicElement */
|
||||
|
||||
/** @type {({children}:{inset:number, children:React.ReactNode})=>JSX.Element} */
|
||||
Chart({children})
|
||||
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`
|
||||
<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)">
|
||||
<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 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)">
|
||||
<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 class="block absolute top-0 left-[-${inset}px] w-[calc(100%+${inset*2}px)] h-[27%] bg-black opacity-10"></span>
|
||||
${ rulesX }
|
||||
${ rulesY }
|
||||
</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 }
|
||||
<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>
|
||||
`;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user