diff --git a/deno.json b/deno.json index 26d8a62..f11ff68 100644 --- a/deno.json +++ b/deno.json @@ -1,5 +1,7 @@ { "compilerOptions": {"types":["/store.d.ts"]}, + "lint": {"files": {"include": ["src/"]}}, + "fmt": {"files": {"include": ["src/"]}}, "tasks": { "fs": "deno run -A --no-lock https://deno.land/std@0.166.0/http/file_server.ts", diff --git a/src/app.js b/src/app.js index c4919d9..17c80d4 100644 --- a/src/app.js +++ b/src/app.js @@ -6,37 +6,30 @@ import {html} from "https://esm.sh/htm@3.1.1/preact"; /** @type {preact.Context} */ const StoreContext = React.createContext([Initial, (_a)=>{}]); - - /** @type {(props:{children:preact.ComponentChildren})=>preact.VNode} */ const StoreProvider =(props)=> { - const reducer = React.useReducer(Reducer, Initial); + const initialized = Reducer(Initial, {Name:"Test", Data:0}) + const reducer = React.useReducer(Reducer, initialized); return html`<${StoreContext.Provider} value=${reducer}>${props.children}`; } - /** @typedef {[state:Store.State, dispatch:(inAction:Store.Action)=>void]} Binding */ /** @type {()=>Binding} */ const StoreConsumer =()=> React.useContext(StoreContext); -const Deep =()=> -{ - const [State, Dispatch] = StoreConsumer(); - return html` - <${UI.Button} onClick=${()=>Dispatch({Name:"Stim", Data:1})} disabled=${State.Stim.Value == State.Stim.Max}> - ${State.Stim.Value} - `; -} - const Audiogram =()=> { const [State, Dispatch] = StoreConsumer(); + + const testL = State.Draw.TestL.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${false}/>`); + const testR = State.Draw.TestR.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${true} />`); + const userL = State.Draw.UserL.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${false}/>`); + const userR = State.Draw.UserR.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${true} />`); + return html` - ${State.Draw} - <${UI.Mark} right=${false} x=${"10%"} y="20%" response=${true} /> - <${UI.Mark} right=${false}/> - + ${testL} + ${testR} `; } @@ -55,14 +48,8 @@ React.render(html` <${UI.Button} light>Left <${UI.Button} inactive>Right <${UI.Button} disabled>Right - <${Deep}/> <${UI.Chart}> - - <${UI.Mark} right=${true} x=${"20%"} y="20%" /> - <${UI.Mark} right=${false} x=${"10%"} y="20%" response=${true} /> - <${UI.Mark} right=${false}/> - - + <${Audiogram}/> `, ShadowDiv); \ No newline at end of file diff --git a/src/store.js b/src/store.js index 0dca492..00f81d3 100644 --- a/src/store.js +++ b/src/store.js @@ -116,8 +116,8 @@ export function Congtiguous(inTest, inChan, inStim, inIsUser) { /** @type {Store.DrawPoint} */ const point = { - X: lookup[1]*100, - Y: (mark.Stim - inStim.Min)/(inStim.Max - inStim.Min) * 100, + X: lookup[1], + Y: (mark.Stim - inStim.Min)/(inStim.Max - inStim.Min), Mark: mark }; output.Points.push(point); diff --git a/src/ui.js b/src/ui.js index 56f709a..10468b5 100644 --- a/src/ui.js +++ b/src/ui.js @@ -1,11 +1,10 @@ -//@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 { ColumnMapping } from "./store.js"; -/** @typedef {({children}:{children:React.ReactNode})=>JSX.Element} BasicElement */ +/** @typedef {({children}:{children?:preact.ComponentChildren})=>preact.VNode} BasicElement */ -/** @type {({children, icon, light, disabled, inactive, onClick}:{children:React.ReactNode, icon?:JSX.Element, light:boolean, disabled:boolean, inactive:boolean, onClick:()=>void})=>JSX.Element} */ +/** @type {({children, icon, light, disabled, inactive, onClick}:{children:preact.VNode, icon?:preact.VNode, light:boolean, disabled:boolean, inactive:boolean, onClick:()=>void})=>preact.VNode} */ export function Button({children, icon, light, disabled, inactive, onClick}) { const [FlashGet, FlashSet] = React.useState(0); @@ -39,14 +38,15 @@ export function Button({children, icon, light, disabled, inactive, onClick}) export function Chart({children}) { const inset = 20; - /** @type {Array} */ + /** @type {Array} */ const rules = []; ColumnMapping.forEach(([label, position, normal])=> { rules.push(html` ${label} - `); + ` + ); }); const dbMin = -10; @@ -56,8 +56,8 @@ export function Chart({children}) rules.push(html` - `); + ` + ); } return html`
@@ -76,14 +76,13 @@ export function Chart({children})
- - `; + `; } /** @type {Record} */ const Glyph = { - Arrow:({children})=> html` + Arrow:()=> html` `, @@ -99,14 +98,13 @@ const Glyph = { ${children}` }; -/** @type {({right, response, x, y}:{right:boolean, response?:boolean, x:string|number, y:string|number})=>JSX.Element} */ -export function Mark({right, response, x, y}) +/** @type {({right, response, x, y}:{right:boolean, response?:boolean, x:number, y:number})=>preact.VNode} */ +export const Mark =({right, response, x, y})=> { return html` - + <${ right ? Glyph.O : Glyph.X }> - ${ !response && html`<${Glyph.Arrow}/>` } + ${ !response && html`<${Glyph.Arrow}/>` } - - `; + `; } \ No newline at end of file