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

refactor transform and ecs component query

Browse source
This commit is contained in:
sorrel 2024-05-20 15:40:17 -04:00
parent 7d3828f894
commit b12d500cb6
5 changed files with 102 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
static/engine.js
View file

@ -74,21 +74,28 @@ const engine = (() => {
case "removeEntity": { case "removeEntity": {
let node = messageArgs[0]; let node = messageArgs[0];
entities[node].forEach(([componentType, component]) => { entities[node].forEach(([componentType, component]) => {
components[componentType].remove(component); delete components[componentType].instances[component];
}); });
delete entities[node]; delete entities[node];
queue.push((_) => node.remove()); queue.push((_) => node.remove());
break; break;
} }
case "registerComponentType": { case "registerComponentType": {
let componentType = messageArgs[0]; let [componentType, constructor] = messageArgs;
components[componentType] = new Set(); components[componentType] = {
constructor,
instances: {}
};
break; break;
} }
case "getComponentContructor": {
let [componentType] = messageArgs;
return components [componentType].constructor;
}
case "addComponent": { case "addComponent": {
let [entity, componentType, component] = messageArgs; let [entity, componentType, component] = messageArgs;
entities[entity].push([componentType, component]); entities[entity].push([componentType, component]);
components[componentType].add(component); components[componentType].instances[entity] = component;
break; break;
} }
case "registerEvent": { case "registerEvent": {

51
static/index.html
View file

@ -1,35 +1,56 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<script src="transform.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="engine.js" defer></script> <script src="engine.js" defer></script>
</head> </head>
<body> <body
style="margin:0;"
>
<div class="player" <div class="player"
data-sprite="player.png" data-sprite="player.png"
data-transform="[1,0,0,1,0,0]" data-transform="[1,0,0,1,0,0]"
data-collision="player" data-collision="player"
id="player" id="player"
style="position:absolute;width:50px;height:50px;background-color:black;"></div> style="position:absolute;width:50px;height:50px;
background-color:rgba(50,0,127,0.7);"
></div>
<article class="level" id="test"> <article class="level" id="test">
<!-- testing collision -->
<div class="environment" <div class="environment"
data-collision="environment" data-collision="environment"
data-pos-x="0" style="width:500px;height:25px;transform:matrix(1,0,0,1,0,300);background-color:rgba(127,100,0,0.7);"
data-pos-y="0"
data-height="100"
data-width="100"
> >
</div> </div>
<table class="enemy" id="table-enemy" >
<tbody> <!-- testing radio button -->
<tr> <form
<td> style="transform:matrix(1,0,0,1,10,600);max-width:80vw;"
o o o >
</td> <fieldset>
</tr> <legend>try selecting a radio button to teleport</legend>
</tbody> <div
</table> style="display:flex;flex-direction:column;"
>
<input
type="radio" id="tut-rad-1" name="tut-rad"
value="tut-rad-1"
style="transform:matrix(1,0,0,1,100,200);"
></input>
<input
type="radio" id="tut-rad-2" name="tut-rad"
value="tut-rad-2" ></input>
<input
type="radio" id="tut-rad-3" name="tut-rad"
value="tut-rad-3" ></input>
<input
type="radio" id="tut-rad-4" name="tut-rad"
value="tut-rad-4" ></input>
</div>
</fieldset>
</form>
</article> </article>
</body> </body>
</html> </html>

4
static/input.js
View file

@ -29,12 +29,16 @@ const inputSystem = (engine) => {
}; };
document.addEventListener('keydown', (event) => { document.addEventListener('keydown', (event) => {
event.preventDefault();
currentPresses.add(event.key); currentPresses.add(event.key);
event.stopPropagation();
process(); process();
}); });
document.addEventListener('keyup', (event) => { document.addEventListener('keyup', (event) => {
event.preventDefault();
currentPresses.delete(event.key); currentPresses.delete(event.key);
event.stopPropagation();
process(); process();
}); });

56
static/player.js
View file

@ -1,66 +1,16 @@
console.log("loading player system"); console.log("loading player system");
const renderPlayer = (entity) => {
entity.style.transform = `matrix(${entity.dataset.transform.replace(/\[|\]/g,'')})`;
// entity.style.left = `${entity.dataset.posX}px`;
// entity.style.top = `${entity.dataset.posY}px`;
};
const setEntityStyleFromTransform = (entity) => {
entity.style.transform = `matrix(${entity.dataset.transform.replace(/\[|\]/g,'')})`;
};
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 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 ();
};
};
// transform needs to actually provide transformation utilities
const collision = (entity) => { const collision = (entity) => {
// look through engine's collision components for overlap // look through engine's collision components for overlap
}; };
const initTransformSystem = (engine) => {
engine("registerComponentType", "transform");
};
const playerSystem = (engine) => { const playerSystem = (engine) => {
const entity = document.getElementById("player"); const entity = document.getElementById("player");
engine("registerEntity", entity);
let playerTransform = transform(entity);
const movementRate = 0.5; const movementRate = 0.5;
engine("registerEntity", entity);
const playerTransform = engine ("getComponentContructor", "transform")(entity);
const move = (direction) => (delta, eventData) => { const move = (direction) => (delta, eventData) => {
let translation = [0,0]; let translation = [0,0];
switch (direction) { switch (direction) {

48
static/transform.js Normal file
View file

@ -0,0 +1,48 @@
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);
};
// 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 ();
};
};
const initTransformSystem = (engine) => {
engine("registerComponentType", "transform", transform);
};
// transform needs to actually provide transformation utilities