main.js

const ApeECS = require('ape-ecs');

class Position extends ApeECS.Component {
    
    constructor(){
        super();
        this.x = 0;
        this.y = 0;
    }
    init(values)
    {
        this.x = values.x;
        this.y = values.y;
    }
}

class Destination extends ApeECS.Component {
    constructor(){
        super();
        this.x = 0;
        this.y = 0;
    }

    init(values)
    {
        this.x = values.x;
        this.y = values.y;
    }
}

class Dimension extends ApeECS.Component {
    constructor(){
        super();
        this.width = 0;
        this.height = 0;
    }
}

class Display extends ApeECS.Component {
    constructor(){
        super();
        this.sprite = "@";
    }

    init(values)
    {
        this.sprite = values.sprite;
    }
}

class PathFind extends ApeECS.System {
    init(){
        this.pathfindersQuery = this.createQuery().fromAll("Position", "Destination").persist();
    }

    update(currentTick){
        const pathfinders = this.pathfindersQuery.execute();

        for(const pathfinder of pathfinders){
            const position = pathfinder.getOne("Position");
            const destination = pathfinder.getOne("Destination");

            let vec = {x: 0, y: 0};
            if(destination.x > position.x)
            {
                vec.x = 1;
            } 
            else if(destination.x < position.x){
                vec.x = -1;
            }

            if(destination.y > position.y)
            {
                vec.y = 1;
            }
            else if(destination.y < position.y){
                vec.y = -1;
            }

            position.x = position.x + vec.x;
            position.y = position.y + vec.y;
        }

    }
}

class DebugDisplay extends ApeECS.System {
    init(){
        this.drawablesQuery = this.createQuery().fromAll("Display", "Position").persist();
        this.gameMap = this.world.getEntity("GameMap");//<-- this doesn't work
    }

    update(currentTick){
        const drawables = this.drawablesQuery.execute();
        let result = "<table cellspacing='0' cellpadding='0'>";
        console.log(this.gameMap);
        for(var col = 0; col < 10; col++)
//        for(var col = 0; col < this.map.width; col++) <--- Want to do this
        {
            result = result + "<tr>";
            for(var row = 0; row < 20; row++)
//        for(var row = 0; row < this.map.height; row++) <--- Want to do this
            {
                result = result + "<td id='"+col+"x"+row+"'>&nbsp;</td>";
            } 
            result = result + "</tr>";
        }
        result = result + "</table>";
        document.getElementById("display").innerHTML = result;
        for(const drawable of drawables){
            const position = drawable.getOne("Position");
            const display = drawable.getOne("Display");
            document.getElementById(position.x+"x"+position.y).innerHTML = document.getElementById(position.x+"x"+position.y).innerHTML + " " +display.sprite;
        }

    }

}

const world = new ApeECS.World();
world.registerComponent(Position);
world.registerComponent(Destination);
world.registerComponent(Dimension);
world.registerComponent(Display);

world.registerSystem("pathfinder", PathFind);
world.registerSystem("debugDisplay", DebugDisplay);

const GameMap = world.createEntity({
    id : 'GameMap', // <-- why isn't this being found?
    c : {
        Dimension : {
            width : 10,
            height : 20
        }
    }
});

const mover = world.createEntity({
    id : 'player',
    c : {
        Position : {
            x : 0,
            y : 0
        },
        Destination : {
            x : 7,
            y : 12
        },
        Display : {
            sprite : "👨"
        }
    }
});

const destination = world.createEntity({
    id : 'dest',
    c : {
        Position : {
            x : 7,
            y : 12
        },

        Display : {
            sprite : "x"
        }
    }
});

Game = {
    update : function()
    {
        world.runSystems("pathfinder");
        world.runSystems("debugDisplay");
    }
}

module.exports.Game = Game;