add debugging and prep for initial deployment
This commit is contained in:
parent
b12d500cb6
commit
cc390c67b9
5 changed files with 150 additions and 57 deletions
9
static/debug.js
Normal file
9
static/debug.js
Normal 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");
|
||||||
|
});
|
||||||
|
|
@ -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
22
static/environment.js
Normal 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);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -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;"
|
||||||
>
|
>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
<!-- /DEBUG TOOLS -->
|
||||||
|
|
||||||
<div class="player"
|
<div class="player"
|
||||||
data-sprite="player.png"
|
data-description="this is the player character"
|
||||||
data-transform="[1,0,0,1,0,0]"
|
data-transform="[1,0,0,1,0,0]"
|
||||||
data-collision="player"
|
data-collision-layers="player"
|
||||||
|
data-collision-mask="environment"
|
||||||
id="player"
|
id="player"
|
||||||
style="position:absolute;width:50px;height:50px;
|
style="position:absolute;width:50px;height:50px;
|
||||||
background-color:rgba(50,0,127,0.7);"
|
background-color:rgba(50,0,127,0.7);"
|
||||||
></div>
|
></div>
|
||||||
<article class="level" id="test">
|
<article
|
||||||
<!-- testing collision -->
|
class="level"
|
||||||
<div class="environment"
|
id="test"
|
||||||
data-collision="environment"
|
data-description="a test level for developing the engine"
|
||||||
style="width:500px;height:25px;transform:matrix(1,0,0,1,0,300);background-color:rgba(127,100,0,0.7);"
|
|
||||||
>
|
>
|
||||||
|
<!-- testing collision -->
|
||||||
|
<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>
|
</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;"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
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;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue