oxaliq/html-tower
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add debugging and prep for initial deployment

Browse source
This commit is contained in:
sorrel 2024-05-22 12:20:13 -04:00
parent b12d500cb6
commit cc390c67b9
5 changed files with 150 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
static/debug.js Normal file
View file

@ -0,0 +1,9 @@
const ptr = document.querySelectorAll ("#pointer") [0];
const toggler = document.querySelectorAll("#toggle-engine")[0];
const toggleEngine = () => engine("state") == "running"
? engine("halt")
: engine("start");
toggler.addEventListener("click", () => {
toggleEngine();
toggler.dataset.state=engine("state");
});

22
static/engine.js
View file

@ -24,6 +24,7 @@ const initEvent = () => {
const engine = (() => { const engine = (() => {
let queue = []; let queue = [];
let timer; let timer;
let state;
let time = Date.now(); let time = Date.now();
let entities = {}; let entities = {};
let components = {}; let components = {};
@ -42,6 +43,7 @@ const engine = (() => {
}; };
const halt = () => { const halt = () => {
console.log("halted"); console.log("halted");
state="halted";
clearTimeout(timer); clearTimeout(timer);
}; };
return (message, ...messageArgs) => { return (message, ...messageArgs) => {
@ -68,15 +70,15 @@ const engine = (() => {
} }
case "registerEntity": { case "registerEntity": {
let node = messageArgs[0]; let node = messageArgs[0];
entities[node] = []; entities[node.id] = [];
break; break;
} }
case "removeEntity": { case "removeEntity": {
let node = messageArgs[0]; let node = messageArgs[0];
entities[node].forEach(([componentType, component]) => { entities[node.id].forEach(([componentType, component]) => {
delete components[componentType].instances[component]; delete components[componentType].instances[component];
}); });
delete entities[node]; delete entities[node.id];
queue.push((_) => node.remove()); queue.push((_) => node.remove());
break; break;
} }
@ -88,14 +90,14 @@ const engine = (() => {
}; };
break; break;
} }
case "getComponentContructor": { case "getComponentConstructor": {
let [componentType] = messageArgs; let [componentType] = messageArgs;
return components [componentType].constructor; return components [componentType].constructor(engine);
} }
case "addComponent": { case "addComponent": {
let [entity, componentType, component] = messageArgs; let [entity, componentType, component] = messageArgs;
entities[entity].push([componentType, component]); entities[entity.id].push([componentType, component]);
components[componentType].instances[entity] = component; components[componentType].instances[entity.id] = component;
break; break;
} }
case "registerEvent": { case "registerEvent": {
@ -110,9 +112,13 @@ const engine = (() => {
break; break;
} }
case 'start': { case 'start': {
state="running";
tick(); tick();
break; break;
} }
case 'state': {
return state;
}
case 'halt': { case 'halt': {
halt(); halt();
break; break;
@ -121,8 +127,10 @@ const engine = (() => {
}; };
})(); })();
initCollisionSystem (engine);
initTransformSystem(engine); initTransformSystem(engine);
inputSystem(engine); inputSystem(engine);
playerSystem(engine); playerSystem(engine);
initEnvironmentSystem (engine);
engine("start"); engine("start");

22
static/environment.js Normal file
View file

@ -0,0 +1,22 @@
console.log("loading environment system");
const initEnvironmentSystem = (engine) => {
document.querySelectorAll(".environment")
.forEach(entity => {
console.log(entity);
if (!entity.id) {
entity.id = Date.now().toString(16);
}
engine("registerEntity", entity);
console.log(entity.dataset);
let collider = engine("getComponentConstructor", "collision")(
entity, {
layers: new Set(entity.dataset.collisionLayers.split(",")),
mask: new Set(entity.dataset.collisionMask.split(",")),
collsionShape: {}
});
engine("addComponent", entity, "collision", collider);
});
}

82
static/index.html
View file

@ -2,35 +2,89 @@
<html> <html>
<head> <head>
<script src="transform.js" defer></script> <script src="transform.js" defer></script>
<script src="collision.js" defer></script>
<script src="input.js" defer></script> <script src="input.js" defer></script>
<script src="player.js" defer></script> <script src="player.js" defer></script>
<script src="environment.js" defer></script>
<script src="debug.js" defer></script>
<script src="engine.js" defer></script> <script src="engine.js" defer></script>
<style>
.debug[data-state="running"] {
background-color: rgb(30,200,30);
}
.debug[data-state="halted"] {
background-color: rgb(200,30,30);
}
</style>
</head> </head>
<body <body
style="margin:0;" style="margin:0;"
> >
<div class="player"
data-sprite="player.png" <!-- DEBUG TOOLS -->
data-transform="[1,0,0,1,0,0]" <div class="debug"
data-collision="player" id="toggle-engine-container"
id="player" style="display:flex;border: 2px solid rgb(200,0,0);padding:2px;"
style="position:absolute;width:50px;height:50px; >
background-color:rgba(50,0,127,0.7);" <label for="toggle-engine"
class="debug">
the engine's going to keep processing as long as this window is open,
unless you toggle it here. warning: the engine gets weird when woken
from complete halt.
</label>
<button class="debug"
id="toggle-engine"
data-description="the actual button that toggles the engine"
data-state="running"
type="button"
>toggle engine</button>
</div>
<div class="debug"
id="pointer"
data-description="pointer used for debugging positioning things"
style="position:absolute;width:5px;height:5px;top:50vh;left:50vw;
border: 5px solid rgb(127,0,0);
background-color:rgb(255,255,255);"
></div> ></div>
<article class="level" id="test"> <!-- /DEBUG TOOLS -->
<div class="player"
data-description="this is the player character"
data-transform="[1,0,0,1,0,0]"
data-collision-layers="player"
data-collision-mask="environment"
id="player"
style="position:absolute;width:50px;height:50px;
background-color:rgba(50,0,127,0.7);"
></div>
<article
class="level"
id="test"
data-description="a test level for developing the engine"
>
<!-- testing collision --> <!-- testing collision -->
<div class="environment" <div class="environment wall"
data-collision="environment" data-description="a wall"
style="width:500px;height:25px;transform:matrix(1,0,0,1,0,300);background-color:rgba(127,100,0,0.7);" data-collision-layers="environment"
> data-collision-mask="player"
style="width:500px;height:25px;transform:matrix(1,0,0,1,0,300);
background-color:rgba(127,100,0,0.7);"
>~~this is a wall~~ (no collision handling yet)
</div> </div>
<!-- testing radio button --> <!-- testing radio button: collision handling not implemented yet -->
<form <form
class=""
id="test-form"
data-description="testing using radio input to move around"
style="transform:matrix(1,0,0,1,10,600);max-width:80vw;" style="transform:matrix(1,0,0,1,10,600);max-width:80vw;"
> >
<fieldset> <fieldset>
<legend>try selecting a radio button to teleport</legend> <legend>
try selecting a radio button to teleport
(not implemented yet)
</legend>
<div <div
style="display:flex;flex-direction:column;" style="display:flex;flex-direction:column;"
> >

72
static/transform.js
View file

@ -1,43 +1,43 @@
console.log("loading transform system"); console.log("loading transform system");
const transform = const transform = (engine) => (
(entity, entity,
transformData = { x: {x: 1, y:0}, y: {x:0, y:1}, o: {x:0,y:0}} transformData = { x: {x: 1, y:0}, y: {x:0, y:1}, o: {x:0,y:0}}
) => { ) => {
let {x, y, o} = transformData; let {x, y, o} = transformData;
let transform = [x.x, x.y, y.x, y.y, o.x, o.y]; let transform = [x.x, x.y, y.x, y.y, o.x, o.y];
const updateEntity = () => { const updateEntity = () => {
entity.dataset.transform = JSON.stringify (transform); entity.dataset.transform = JSON.stringify (transform);
}; };
// these may be pulled out in the future into a separate renderer // these may be pulled out in the future into a separate renderer
const setEntityStyleFromTransform = (entity) => { const setEntityStyleFromTransform = (entity) => {
entity.style.transform = entity.style.transform =
`matrix(${entity.dataset.transform.replace(/\[|\]/g,'')})`; `matrix(${entity.dataset.transform.replace(/\[|\]/g,'')})`;
}; };
const renderEntity = () => setEntityStyleFromTransform (entity); const renderEntity = () => setEntityStyleFromTransform (entity);
return (message, ...messageArgs) => { return (message, ...messageArgs) => {
switch (message) { switch (message) {
case "origin": { case "origin": {
return [transform[4], transform[5]]; return [transform[4], transform[5]];
} }
case "x": { case "x": {
return [transform[0], transform[1]]; return [transform[0], transform[1]];
} }
case "y": { case "y": {
return [transform[2], transform [3]]; return [transform[2], transform [3]];
} }
case "translate": { case "translate": {
let [xTranslation, yTranslation] = messageArgs [0]; let [xTranslation, yTranslation] = messageArgs [0];
transform [4] += xTranslation; transform [4] += xTranslation;
transform [5] += yTranslation; transform [5] += yTranslation;
break; break;
} }
} }
updateEntity (); updateEntity ();
renderEntity (); renderEntity ();
}; };
}; };
const initTransformSystem = (engine) => { const initTransformSystem = (engine) => {