@tdurtschi/bug
Version:
Bug is a simulation that models a weevil walking around in an HTML canvas.
89 lines • 3.72 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var plant_1 = __importDefault(require("../entities/plant/plant"));
var bug_1 = __importDefault(require("../entities/bug/bug"));
var bug_renderer_1 = __importDefault(require("./renderers/bug/bug-renderer"));
var plant_renderer_1 = __importDefault(require("./renderers/tree/plant-renderer"));
var wall_1 = __importDefault(require("../entities/wall/wall"));
var wall_renderer_1 = require("./renderers/wall/wall-renderer");
var canvas_helpers_1 = require("./canvas-helpers");
var id_generator_1 = require("../util/id-generator");
var victor_1 = __importDefault(require("victor"));
var point_1 = __importDefault(require("../entities/point"));
var point_renderer_1 = require("./renderers/point-renderer");
var CanvasUI = (function () {
function CanvasUI(target, entityManager) {
var _this = this;
this.target = target;
this.entityManager = entityManager;
this.isPaused = false;
this.frame = 0;
this.start = function () {
var canvas = _this.createCanvas();
canvas.addEventListener("click", function (e) { return _this.onCanvasClick(e); });
_this.ctx = canvas.getContext("2d");
_this.beginLoop = _this.beginLoop.bind(_this);
_this.beginLoop(0);
};
this.render = function () {
canvas_helpers_1.clearCanvas(_this.ctx);
_this.entityManager.getEntities().forEach(function (entity) {
_this.renderEntity(entity, _this.ctx);
});
};
this.togglePause = function () {
_this.isPaused = !_this.isPaused;
};
}
CanvasUI.prototype.beginLoop = function (timeMs) {
if (!this.isPaused) {
this.render();
}
window.requestAnimationFrame(this.beginLoop);
};
CanvasUI.prototype.createCanvas = function () {
var container = document.querySelector(this.target);
var canvas = document.createElement("canvas");
canvas.height = container.clientHeight;
canvas.width = container.clientWidth;
container.appendChild(canvas);
return canvas;
};
CanvasUI.prototype.renderEntity = function (entity, ctx) {
if (entity instanceof bug_1.default) {
bug_renderer_1.default(entity, ctx);
}
else if (entity instanceof wall_1.default) {
wall_renderer_1.wallRenderer(entity, ctx);
}
else if (entity instanceof plant_1.default) {
plant_renderer_1.default(entity, ctx);
}
else if (entity instanceof point_1.default) {
point_renderer_1.pointRenderer(entity, ctx);
}
};
CanvasUI.prototype.onCanvasClick = function (e) {
if (window.DEBUG) {
var _a = { x: e.x - 200, y: e.y }, x = _a.x, y = _a.y;
var newY = canvas_helpers_1.fixY(this.ctx.canvas.height, y);
if (this.lastClickX) {
console.log("Diff from last click:");
console.log({ x: x - this.lastClickX, y: newY - this.lastClickY });
}
console.log({ x: x, y: newY });
this.entityManager.addEntity(new point_1.default(id_generator_1.generateId(), {
pos: new victor_1.default(x + 200, newY),
size: new victor_1.default(3, 3),
}));
this.lastClickX = x;
this.lastClickY = newY;
}
};
return CanvasUI;
}());
exports.default = CanvasUI;
//# sourceMappingURL=canvas-ui.js.map