SethTrowbridge/gale
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

it works

Browse Source
This commit is contained in:
Seth Trowbridge 2025-02-14 07:58:29 -05:00
parent 8d82c41f81
commit fcdeb85457
3 changed files with 138 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app.js
View File

@ -1,3 +1,5 @@
import {PosCSS} from "./keys.js";
const {DOM} = Gale({
Button: {
padding: "20px",
@ -7,13 +9,17 @@ const {DOM} = Gale({
}
},
Outline: {
border: "2px solid orange"
position: "relative",
border: "2px solid orange",
padding: "20px"
}
});
function App()
{
return ()=> {
return DOM.h1.Outline({id:"Move", style:PosCSS(10)}, "title");
}
}
const el = DOM.a.Button.Outline({onclick(){console.log("clicked!")}}, "Click!");
console.log(el);
van.add(document.body, el, DOM.h1.Outline["Button.Inner"]("title"));
van.add(document.body, App());

78
index.html
View File

@ -6,6 +6,84 @@
</head>
<body>
<script src="https://vanjs.org/code/van-1.5.3.nomodule.min.js"></script>
<script>
//@ts-check
// hmr
const HMR = globalThis.HMR = {
Time: 0,
/** @type {Record<string, string>} */
Temp:{},
Tick()
{
for(const k in HMR.Temp)
{
sessionStorage.setItem(k, HMR.Temp[k]);
}
HMR.Temp = {};
HMR.Time = 0;
},
/** @type {(key:string, value:string)=>void} */
Save(key, value)
{
this.Temp[key] = value;
if(!this.Time)
{
this.Time = setTimeout(this.Tick, 500);
}
console.log("SAVE", key, value);
},
/** @type {(key:string)=>string|null} */
Load(key)
{
const value = sessionStorage.getItem(key);
console.log("LOAD", key, value);
return value;
},
/** @type {string|undefined} */
_ID: undefined,
_index: 0,
/** @type {(id:string|undefined = undefined)=>void} */
StartID(id)
{
this._index = 0;
this._ID = id;
},
NextID()
{
return this._ID ? this._ID + "_" + (this._index++) + "_" : "";
}
}
//bind Van
const origninalState = globalThis.van.state;
globalThis.van.state =(value, key="")=>
{
const type = typeof value;
let reader =d=>d;
let writer =d=>d?.toString() || null;
switch(type)
{
case "boolean" :
reader =(data)=> data === "true"; break;
case "number" :
reader = parseFloat; break;
case "object" :
reader = JSON.parse;
writer = JSON.stringify;
break;
}
const fullKey = "HMR_" + HMR.NextID() + key;
const stringValue = HMR.Load(fullKey);
const signal = origninalState((stringValue ? reader(stringValue) : value));
van.derive(()=>HMR.Save(fullKey, writer(signal.val)));
return signal;
};
</script>
<script src="./gale.js"></script>
<script type="module" src="app.js"></script>
</body>

48
keys.js Normal file
View File

@ -0,0 +1,48 @@
const Move = {
Keys: ["w", "d", "s", "a"],
Pair: [ 2, 3, 0, 1 ],
Axis: [ 1, 0, 1, 0 ],
Magn: [-1, 1, 1, -1 ],
Down: [ 0, 0, 0, 0 ],
Move: [0, 0],
};
/** @type {Van.state<[x:number, y:number]>} */
export const Pos = van.state(Move.Move);
/** @type {(scale:number)=>string} */
export const PosCSS =(scale)=> `left:${Pos.val[0]*scale}px; top:${Pos.val[1]*scale}px;`;
function handleDown({key})
{
const index = Move.Keys.indexOf(key);
if(index != -1)
{
Move.Down[index] = 1;
Move.Move[Move.Axis[index]] = Move.Magn[index];
Pos.val = [...Move.Move];
}
}
function handleUp({key})
{
const index = Move.Keys.indexOf(key);
if(index != -1)
{
const indexInv = Move.Pair[index];
Move.Down[index] = 0;
if(Move.Down[indexInv])
{
Move.Move[Move.Axis[indexInv]] = Move.Magn[indexInv];
}
else
{
Move.Move[Move.Axis[index]] = 0;
}
Pos.val = [...Move.Move];
}
}
document.body.addEventListener("keydown", handleDown);
document.body.addEventListener("keyup", handleUp);