init

app.js

@@ -0,0 +1,16 @@
+//@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 {install} from "https://esm.sh/@twind/core";
+import preTailwind from "https://esm.sh/@twind/preset-tailwind@1.0.1";
+import preAutoprefix from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
+install({presets:[preTailwind(), preAutoprefix()]});
+
+import * as Store from "./store.js";
+import UI from "./ui.js";
+
+React.render(html`
+    <p class="p-4">suuupu</p>
+    <${UI.Button} label="Play Tone" icon=">" light/>
+`, document.querySelector("#app"));

index.html

@@ -0,0 +1,6 @@
+<svg>
+
+</svg>
+<link rel="stylesheet" type="text/css" href="https://static1.squarespace.com/static/sitecss/565afe39e4b0c377c4681146/45/52a74dafe4b073a80cd253c5/565afe3ae4b0c377c468114d/1043/site.css"/>
+<div id="app"></div>
+<script src="app.js" type="module"></script>

store.js

@@ -0,0 +1,31 @@
+//@ts-check
+/** @typedef {[f1:ListEntry, f2:ListEntry, f3:ListEntry, f4:ListEntry, f5:ListEntry, f6:ListEntry, f7:ListEntry]} FreqList */
+/** @typedef {number|TestMark} ListEntry */
+/** @typedef {{Name:string, Sample:{Left:FreqList, Right:FreqList}, Answer?:{Left:FreqList, Right:FreqList}}} Test */
+/** @typedef {{Stim:number|null, Resp:boolean}|null} TestMark*/
+
+/** @type FreqList */
+export const Frequencies = [500, 1000, 2000, 3000, 4000, 6000, 8000];
+/** @type Array<Test> */
+export const Tests = [
+    {
+        Name: "Patient A  Asymmetric Notch",
+        Sample:{
+             Left:[15, 10, 15, 30, 40, 35, 20],
+            Right:[10, 10, 20, 40, 55, 40, 15]
+        }
+    }
+];
+
+export const Controls =
+{
+    Test:0,
+    Channel: "left",
+    Frequency: 1,
+    Stimulus: 30
+};
+
+function Reducer(inState, inAction)
+{
+
+}

ui.js

@@ -0,0 +1,24 @@
+//@ts-check
+import React from "https://esm.sh/preact@10.11.3/compat";
+import {html} from "https://esm.sh/htm@3.1.1/preact";
+
+export default {
+    Button({label, 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>
+                ${label}
+            </span>
+        </button>`;
+    },
+    Chart()
+    {
+        return html`
+        <div class="relative w-full h-[600px]">
+            <div class="absolute right-0 bottom-0 w-[calc(100%-100px)] h-[calc(100%-100px)]"></div>
+        </div>
+        `;
+    }
+}