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 = (() => {
let queue = [];
let timer;
let state;
let time = Date.now();
let entities = {};
let components = {};
@ -42,6 +43,7 @@ const engine = (() => {
};
const halt = () => {
console.log("halted");
state="halted";
clearTimeout(timer);
};
return (message, ...messageArgs) => {
@ -68,15 +70,15 @@ const engine = (() => {
}
case "registerEntity": {
let node = messageArgs[0];
entities[node] = [];
entities[node.id] = [];
break;
}
case "removeEntity": {
let node = messageArgs[0];
entities[node].forEach(([componentType, component]) => {
entities[node.id].forEach(([componentType, component]) => {
delete components[componentType].instances[component];
});
delete entities[node];
delete entities[node.id];
queue.push((_) => node.remove());
break;
}
@ -88,14 +90,14 @@ const engine = (() => {
};
break;
}
case "getComponentContructor": {
case "getComponentConstructor": {
let [componentType] = messageArgs;
return components [componentType].constructor;
return components [componentType].constructor(engine);
}
case "addComponent": {
let [entity, componentType, component] = messageArgs;
entities[entity].push([componentType, component]);
components[componentType].instances[entity] = component;
entities[entity.id].push([componentType, component]);
components[componentType].instances[entity.id] = component;
break;
}
case "registerEvent": {
@ -110,9 +112,13 @@ const engine = (() => {
break;
}
case 'start': {
state="running";
tick();
break;
}
case 'state': {
return state;
}
case 'halt': {
halt();
break;
@ -121,8 +127,10 @@ const engine = (() => {
};
})();
initCollisionSystem (engine);
initTransformSystem(engine);
inputSystem(engine);
playerSystem(engine);
initEnvironmentSystem (engine);
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>
<head>
<script src="transform.js" defer></script>
<script src="collision.js" defer></script>
<script src="input.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>
<style>
.debug[data-state="running"] {
background-color: rgb(30,200,30);
}
.debug[data-state="halted"] {
background-color: rgb(200,30,30);
}
</style>
</head>
<body
style="margin:0;"
>
<div class="player"
data-sprite="player.png"
data-transform="[1,0,0,1,0,0]"
data-collision="player"
id="player"
style="position:absolute;width:50px;height:50px;
background-color:rgba(50,0,127,0.7);"
<!-- DEBUG TOOLS -->
<div class="debug"
id="toggle-engine-container"
style="display:flex;border: 2px solid rgb(200,0,0);padding:2px;"
>
<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>
<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 -->
<div class="environment"
data-collision="environment"
style="width:500px;height:25px;transform:matrix(1,0,0,1,0,300);background-color:rgba(127,100,0,0.7);"
>
<div class="environment wall"
data-description="a wall"
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>
<!-- testing radio button -->
<!-- testing radio button: collision handling not implemented yet -->
<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;"
>
<fieldset>
<legend>try selecting a radio button to teleport</legend>
<legend>
try selecting a radio button to teleport
(not implemented yet)
</legend>
<div
style="display:flex;flex-direction:column;"
>

72
static/transform.js
View file

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