witchday/Overworld.js

class Overworld {
	constructor(config) {
		this.element = config.element;
		this.canvas = this.element.querySelector(".game-canvas");
		this.ctx = this.canvas.getContext("2d");
		this.map = null;
	}

	startGameLoop() {
		const step = () => {
			this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

			const cameraPerson = this.map.gameObjects.hero;

			// update all objects
			Object.values(this.map.gameObjects).forEach(object => {
				object.update({
					arrow: this.directionInput.direction,
					map: this.map,
				});
			})

			this.map.drawLowerImage(this.ctx, cameraPerson);

			Object.values(this.map.gameObjects).sort((a,b) => {
				return a.y - b.y;
			}).forEach(object => {
				object.sprite.draw(this.ctx, cameraPerson);
			})

			this.map.drawUpperImage(this.ctx, cameraPerson);
			
			requestAnimationFrame(() => {
				step();
			})
		}
		step();
	}

	bindActionInput() {
		new KeyPressListener("Enter", () => {
			// check if there is a person to talk to
			this.map.checkForActionCutscene();
		})
	}

	bindHeroPositionCheck() {
		document.addEventListener("PersonWalkingComplete", e => {
			if (e.detail.whoId === "hero") {
				// heros position changed
				this.map.checkForFootstepCutscene()
			}
		})
	}

	startMap(mapConfig) {
		this.map = new OverworldMap(mapConfig);
		this.map.overworld = this;
		this.map.mountObjects();
	}

	init() {
		this.startMap(window.OverworldMaps.DemoRoom);

		this.bindActionInput();
		this.bindHeroPositionCheck();

		this.directionInput = new DirectionInput();
		this.directionInput.init();

		this.startGameLoop();

		this.map.startCutscene([
			{ who: "hero", type: "walk", direction: "down" },
			{ who: "hero", type: "walk", direction: "down" },
			{ who: "hero", type: "walk", direction: "down" },
			{ who: "npc1", type: "walk", direction: "right" },
			{ who: "hero", type: "stand", direction: "left", time: 200 },
			{ type: "textMessage", text: "Hi!" },
		])
	}
}