Compare commits
1 Commits
master
...
wasd-keybi
| Author | SHA1 | Date | |
|---|---|---|---|
| fcdeb85457 |
18
app.js
18
app.js
@ -1,3 +1,5 @@
|
|||||||
|
import {PosCSS} from "./keys.js";
|
||||||
|
|
||||||
const {DOM} = Gale({
|
const {DOM} = Gale({
|
||||||
Button: {
|
Button: {
|
||||||
padding: "20px",
|
padding: "20px",
|
||||||
@ -7,13 +9,17 @@ const {DOM} = Gale({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
Outline: {
|
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!");
|
van.add(document.body, App());
|
||||||
console.log(el);
|
|
||||||
|
|
||||||
|
|
||||||
van.add(document.body, el, DOM.h1.Outline["Button.Inner"]("title"));
|
|
||||||
78
index.html
78
index.html
@ -6,6 +6,84 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script src="https://vanjs.org/code/van-1.5.3.nomodule.min.js"></script>
|
<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 src="./gale.js"></script>
|
||||||
<script type="module" src="app.js"></script>
|
<script type="module" src="app.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
48
keys.js
Normal file
48
keys.js
Normal 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);
|
||||||
Loading…
Reference in New Issue
Block a user