console.log("loading player system");

const renderPlayer = (entity) => {
    entity.style.left = `${entity.dataset.posX}px`;
    entity.style.top = `${entity.dataset.posY}px`;
};

const playerSystem = (engine) => {
    const entity = document.getElementById("player");
    engine("registerEntity", entity);

    const movementRate = 0.5;
    const move = (direction) => (delta, eventData) => {
        let lastPos = [Number(entity.dataset.posX), Number(entity.dataset.posY)];
        switch (direction) {
        case "left":
            entity.dataset.posX = Number(lastPos[0] - (movementRate * delta));
            break;
        case "right":
            entity.dataset.posX = Number(lastPos[0] + (movementRate * delta));
            break;
        case "up":
            entity.dataset.posY = Number(lastPos[1] - (movementRate * delta));
            break;
        case "down":
            entity.dataset.posY = Number(lastPos[1] + (movementRate * delta));
            break;
        }
        renderPlayer(entity);
    };

    engine("subscribeToEvent", "moveLeft", "movePlayerLeft", move("left"));
    engine("subscribeToEvent", "moveRight", "movePlayerRight", move("right"));
    engine("subscribeToEvent", "moveUp", "movePlayerUp", move("up"));
    engine("subscribeToEvent", "moveDown", "movePlayerDown", move("down"));
};