From fcdeb85457c21ec597c608dc8031a77e248a30ac Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Fri, 14 Feb 2025 07:58:29 -0500 Subject: [PATCH] it works --- app.js | 18 ++++++++----- index.html | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ keys.js | 48 +++++++++++++++++++++++++++++++++ 3 files changed, 138 insertions(+), 6 deletions(-) create mode 100644 keys.js diff --git a/app.js b/app.js index 025ba73..b7e70a0 100644 --- a/app.js +++ b/app.js @@ -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")); \ No newline at end of file +van.add(document.body, App()); \ No newline at end of file diff --git a/index.html b/index.html index 1f7546e..e31f672 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,84 @@ + diff --git a/keys.js b/keys.js new file mode 100644 index 0000000..617340a --- /dev/null +++ b/keys.js @@ -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); \ No newline at end of file