reorganization
This commit is contained in:
parent
8b217c8ce4
commit
de986f131b
20
deno.json
20
deno.json
|
|
@ -1,15 +1,9 @@
|
|||
{
|
||||
"compilerOptions": { "types": ["./store"], "checkJs": true },
|
||||
"importMap": "./deno.map.json",
|
||||
"fmt": {
|
||||
"options": {
|
||||
"lineWidth": 256
|
||||
}
|
||||
},
|
||||
"tasks": {
|
||||
"dev": "deno task serve & deno task test",
|
||||
"fmt": "deno fmt --watch",
|
||||
"serve": "deno run -A --unstable --no-check https://deno.land/std@0.167.0/http/file_server.ts",
|
||||
"test": "deno test store.test.ts --watch --no-lock --no-check"
|
||||
"compilerOptions": { "types": ["*.d.ts"], "checkJs": true },
|
||||
"imports": {
|
||||
"@twind/": "https://esm.sh/@twind/",
|
||||
"react": "https://esm.sh/preact@10.11.3/compat",
|
||||
"htm": "https://esm.sh/htm@3.1.1/preact",
|
||||
"app": "./js/app.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
{
|
||||
"imports": {
|
||||
"@twind/": "https://esm.sh/@twind/",
|
||||
"react": "https://esm.sh/preact@10.11.3/compat",
|
||||
"htm": "https://esm.sh/htm@3.1.1/preact",
|
||||
"app": "./src/app.js"
|
||||
}
|
||||
}
|
||||
19
index.html
19
index.html
|
|
@ -1,7 +1,12 @@
|
|||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<!---->
|
||||
<div id="app"></div>
|
||||
<script type="importmap-shim" src="./deno.map.json"></script>
|
||||
<script type="module-shim">import "app";</script>
|
||||
<script async src="https://unpkg.com/es-module-shims@0.13.1/dist/es-module-shims.min.js"></script>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="importmap-shim" src="./deno.json"></script>
|
||||
<script type="module-shim">import "app";</script>
|
||||
<script async src="https://unpkg.com/es-module-shims@0.13.1/dist/es-module-shims.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -15,22 +15,16 @@ TW.Init(ShadowCSS, ShadowDiv);
|
|||
|
||||
React.render(html`
|
||||
<${Store.Provider}>
|
||||
<div class="flex justify-center">
|
||||
<${UI.Select}/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-[300px_auto] items-center">
|
||||
<div class="col-start-1 p-10">
|
||||
<img src="./logo.png"/>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<${UI.Select}/>
|
||||
</div>
|
||||
<div class="col-start-1">
|
||||
<${UI.Controls}/>
|
||||
</div>
|
||||
<div class="">
|
||||
<${UI.Chart}>
|
||||
<${UI.Audiogram}/>
|
||||
<//>
|
||||
</div>
|
||||
<${UI.Controls}/>
|
||||
|
||||
<div class="flex flex-row justify-center">
|
||||
<${UI.Chart}>
|
||||
<${UI.Audiogram}/>
|
||||
<//>
|
||||
</div>
|
||||
|
||||
<//>
|
||||
|
|
@ -240,8 +240,8 @@ export const Initial = Reducer(
|
|||
]
|
||||
}, {Name:"Test", Data:0});
|
||||
|
||||
/** @type {preact.Context<Store.Binding>} */
|
||||
export const Context = React.createContext([Initial, (_a)=>{}]);
|
||||
|
||||
export const Context = React.createContext(/** @type {Store.Binding} */([Initial, (_a)=>{}]));
|
||||
|
||||
/** @type {(props:{children:preact.ComponentChildren})=>preact.VNode} */
|
||||
export const Provider =(props)=>
|
||||
|
|
@ -2,7 +2,7 @@ import * as TW from "@twind/core@1.0.1";
|
|||
import TWPreTail from "@twind/preset-tailwind@1.0.1";
|
||||
import TWPreAuto from "@twind/preset-autoprefix@1.0.1";
|
||||
|
||||
/** @type {TW.TwindConfig} */
|
||||
/** @type {TW.TwindUserConfig} */
|
||||
export const Configure = {
|
||||
theme:
|
||||
{
|
||||
|
|
@ -46,6 +46,11 @@ export const Select =()=>
|
|||
|
||||
return html`
|
||||
<div class="inline-flex flex-row align-center bg-metal rounded-lg overflow-hidden shadow-md font-sans">
|
||||
<div class="box-notch">
|
||||
<div class="p-4">
|
||||
<img class="h-auto max-w-xs" src="./logo.png"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-notch">
|
||||
<div >Select Test</div>
|
||||
<div class="box-buttons">
|
||||
|
|
@ -104,12 +109,17 @@ export const Controls =()=>
|
|||
const classTitle = "flex-1 text-sm"
|
||||
|
||||
return html`
|
||||
<div class="font-sans bg-metal rounded-lg overflow-hidden shadow-md">
|
||||
<div class="flex flex-row font-sans bg-metal rounded-lg overflow-hidden shadow-md">
|
||||
<div class="box-notch">
|
||||
<div class=${classTitle}>Channel</div>
|
||||
<div class="box-buttons min-w-[50%]">
|
||||
<${Button} inactive=${State.Chan.Value == 0} light=${State.Chan.Value == 0} classes="flex-1" onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>Left<//>
|
||||
<${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Right<//>
|
||||
<div>
|
||||
<div class=${classTitle}>Channel</div>
|
||||
<div class="box-buttons min-w-[50%]">
|
||||
<${Button} inactive=${State.Chan.Value == 0} light=${State.Chan.Value == 0} classes="flex-1" onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>Left<//>
|
||||
<${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Right<//>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-notch">
|
||||
Loading…
Reference in New Issue