refactor transform and ecs component query
This commit is contained in:
parent
7d3828f894
commit
b12d500cb6
5 changed files with 102 additions and 72 deletions
|
@ -74,21 +74,28 @@ const engine = (() => {
|
|||
case "removeEntity": {
|
||||
let node = messageArgs[0];
|
||||
entities[node].forEach(([componentType, component]) => {
|
||||
components[componentType].remove(component);
|
||||
delete components[componentType].instances[component];
|
||||
});
|
||||
delete entities[node];
|
||||
queue.push((_) => node.remove());
|
||||
break;
|
||||
}
|
||||
case "registerComponentType": {
|
||||
let componentType = messageArgs[0];
|
||||
components[componentType] = new Set();
|
||||
let [componentType, constructor] = messageArgs;
|
||||
components[componentType] = {
|
||||
constructor,
|
||||
instances: {}
|
||||
};
|
||||
break;
|
||||
}
|
||||
case "getComponentContructor": {
|
||||
let [componentType] = messageArgs;
|
||||
return components [componentType].constructor;
|
||||
}
|
||||
case "addComponent": {
|
||||
let [entity, componentType, component] = messageArgs;
|
||||
entities[entity].push([componentType, component]);
|
||||
components[componentType].add(component);
|
||||
components[componentType].instances[entity] = component;
|
||||
break;
|
||||
}
|
||||
case "registerEvent": {
|
||||
|
|
|
@ -1,35 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="transform.js" defer></script>
|
||||
<script src="input.js" defer></script>
|
||||
<script src="player.js" defer></script>
|
||||
<script src="engine.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<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:black;"></div>
|
||||
style="position:absolute;width:50px;height:50px;
|
||||
background-color:rgba(50,0,127,0.7);"
|
||||
></div>
|
||||
<article class="level" id="test">
|
||||
<!-- testing collision -->
|
||||
<div class="environment"
|
||||
data-collision="environment"
|
||||
data-pos-x="0"
|
||||
data-pos-y="0"
|
||||
data-height="100"
|
||||
data-width="100"
|
||||
style="width:500px;height:25px;transform:matrix(1,0,0,1,0,300);background-color:rgba(127,100,0,0.7);"
|
||||
>
|
||||
</div>
|
||||
<table class="enemy" id="table-enemy" >
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
o o o
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- testing radio button -->
|
||||
<form
|
||||
style="transform:matrix(1,0,0,1,10,600);max-width:80vw;"
|
||||
>
|
||||
<fieldset>
|
||||
<legend>try selecting a radio button to teleport</legend>
|
||||
<div
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -29,12 +29,16 @@ const inputSystem = (engine) => {
|
|||
};
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
event.preventDefault();
|
||||
currentPresses.add(event.key);
|
||||
event.stopPropagation();
|
||||
process();
|
||||
});
|
||||
|
||||
document.addEventListener('keyup', (event) => {
|
||||
event.preventDefault();
|
||||
currentPresses.delete(event.key);
|
||||
event.stopPropagation();
|
||||
process();
|
||||
});
|
||||
|
||||
|
|
|
@ -1,66 +1,16 @@
|
|||
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) => {
|
||||
// look through engine's collision components for overlap
|
||||
|
||||
};
|
||||
|
||||
const initTransformSystem = (engine) => {
|
||||
engine("registerComponentType", "transform");
|
||||
};
|
||||
|
||||
const playerSystem = (engine) => {
|
||||
const entity = document.getElementById("player");
|
||||
engine("registerEntity", entity);
|
||||
let playerTransform = transform(entity);
|
||||
|
||||
const movementRate = 0.5;
|
||||
engine("registerEntity", entity);
|
||||
const playerTransform = engine ("getComponentContructor", "transform")(entity);
|
||||
|
||||
const move = (direction) => (delta, eventData) => {
|
||||
let translation = [0,0];
|
||||
switch (direction) {
|
||||
|
|
48
static/transform.js
Normal file
48
static/transform.js
Normal 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
|
Loading…
Reference in a new issue