html-tower/static/player.js

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;
    const move = (direction) => (delta, eventData) => {
        let translation = [0,0];
        switch (direction) {
        case "left":
            translation [0] = -( movementRate * delta );
            break;
        case "right":
            translation[0] = movementRate * delta;
            break;
        case "up":
            translation[1] = - ( movementRate * delta );
            break;
        case "down":
            translation[1] = movementRate * delta;
            break;
        }
        playerTransform("translate", translation);
    };

    engine("registerEntity", entity);
    engine("addComponent", entity, "transform", playerTransform);
    // engine("")
    engine("subscribeToEvent", "moveLeft", "movePlayerLeft", move("left"));
    engine("subscribeToEvent", "moveRight", "movePlayerRight", move("right"));
    engine("subscribeToEvent", "moveUp", "movePlayerUp", move("up"));
    engine("subscribeToEvent", "moveDown", "movePlayerDown", move("down"));
};