Earmark/audiogram-beta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/layout-updates #1

Merged
SethTrowbridge merged 34 commits from feature/layout-updates into master 2023-06-07 21:12:15 -04:00
Conversation 0 Commits 34 Files Changed 15 +46 -51
10 changed files with 46 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit de986f131b - Show all commits

20
deno.json
View File

@ -1,15 +1,9 @@
{ {
"compilerOptions": { "types": ["./store"], "checkJs": true }, "compilerOptions": { "types": ["*.d.ts"], "checkJs": true },
"importMap": "./deno.map.json", "imports": {
"fmt": { "@twind/": "https://esm.sh/@twind/",
"options": { "react": "https://esm.sh/preact@10.11.3/compat",
"lineWidth": 256 "htm": "https://esm.sh/htm@3.1.1/preact",
} "app": "./js/app.js"
},
"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"
} }
} }

8
deno.map.json
View File

@ -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
View File

@ -1,7 +1,12 @@
<meta charset="utf-8"/> <html>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <head>
<!----> <meta charset="utf-8"/>
<div id="app"></div> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<script type="importmap-shim" src="./deno.map.json"></script> </head>
<script type="module-shim">import "app";</script> <body>
<script async src="https://unpkg.com/es-module-shims@0.13.1/dist/es-module-shims.min.js"></script> <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>

24
src/app.js → js/app.js
View File

@ -15,22 +15,16 @@ TW.Init(ShadowCSS, ShadowDiv);
React.render(html` React.render(html`
<${Store.Provider}> <${Store.Provider}>
<div class="flex justify-center">
<${UI.Select}/>
</div>
<div class="grid grid-cols-[300px_auto] items-center"> <${UI.Controls}/>
<div class="col-start-1 p-10">
<img src="./logo.png"/> <div class="flex flex-row justify-center">
</div> <${UI.Chart}>
<div class="flex justify-center"> <${UI.Audiogram}/>
<${UI.Select}/> <//>
</div>
<div class="col-start-1">
<${UI.Controls}/>
</div>
<div class="">
<${UI.Chart}>
<${UI.Audiogram}/>
<//>
</div>
</div> </div>
<//> <//>

4
src/store.js → js/store.js
View File

@ -240,8 +240,8 @@ export const Initial = Reducer(
] ]
}, {Name:"Test", Data:0}); }, {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} */ /** @type {(props:{children:preact.ComponentChildren})=>preact.VNode} */
export const Provider =(props)=> export const Provider =(props)=>

0
src/tone.js → js/tone.js
View File

2
src/twind.js → js/twind.js
View File

@ -2,7 +2,7 @@ import * as TW from "@twind/core@1.0.1";
import TWPreTail from "@twind/preset-tailwind@1.0.1"; import TWPreTail from "@twind/preset-tailwind@1.0.1";
import TWPreAuto from "@twind/preset-autoprefix@1.0.1"; import TWPreAuto from "@twind/preset-autoprefix@1.0.1";
/** @type {TW.TwindConfig} */ /** @type {TW.TwindUserConfig} */
export const Configure = { export const Configure = {
theme: theme:
{ {

20
src/ui.js → js/ui.js
View File

@ -46,6 +46,11 @@ export const Select =()=>
return html` return html`
<div class="inline-flex flex-row align-center bg-metal rounded-lg overflow-hidden shadow-md font-sans"> <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 class="box-notch">
<div >Select Test</div> <div >Select Test</div>
<div class="box-buttons"> <div class="box-buttons">
@ -104,12 +109,17 @@ export const Controls =()=>
const classTitle = "flex-1 text-sm" const classTitle = "flex-1 text-sm"
return html` 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="box-notch">
<div class=${classTitle}>Channel</div> <div>
<div class="box-buttons min-w-[50%]"> <div class=${classTitle}>Channel</div>
<${Button} inactive=${State.Chan.Value == 0} light=${State.Chan.Value == 0} classes="flex-1" onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>Left<//> <div class="box-buttons min-w-[50%]">
<${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Right<//> <${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> </div>
<div class="box-notch"> <div class="box-notch">

0
store.d.ts → ts/store.d.ts vendored
View File

0
store.test.ts → ts/store.test.ts
View File