import { System, SystemNames } from "."; import { BoundingBox, Text, ComponentNames, Highlight, Renderable, } from "../components"; import { Game } from ".."; import { clamp } from "../utils"; import { DrawArgs } from "../interfaces"; export class Render extends System { private ctx: CanvasRenderingContext2D; constructor(ctx: CanvasRenderingContext2D) { super(SystemNames.Render); this.ctx = ctx; } public update(dt: number, game: Game) { this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); game.forEachEntityWithComponent(ComponentNames.Sprite, (entity) => { const sprite = entity.getComponent(ComponentNames.Sprite); sprite.update(dt); const boundingBox = entity.getComponent( ComponentNames.BoundingBox, ); // don't render if we're outside the screen if ( clamp( boundingBox.center.y, -boundingBox.dimension.height / 2, this.ctx.canvas.height + boundingBox.dimension.height / 2, ) != boundingBox.center.y || clamp( boundingBox.center.x, -boundingBox.dimension.width / 2, this.ctx.canvas.width + boundingBox.dimension.width / 2, ) != boundingBox.center.x ) { return; } const drawArgs: DrawArgs = { center: boundingBox.center, dimension: boundingBox.dimension, rotation: boundingBox.rotation, }; if (entity.hasComponent(ComponentNames.Highlight)) { const highlight = entity.getComponent( ComponentNames.Highlight, ); drawArgs.tint = highlight.isHighlighted ? "red" : undefined; } if (entity.hasComponent(ComponentNames.Text)) { const text = entity.getComponent(ComponentNames.Text); drawArgs.backgroundText = { text: text.text, font: text.font, fillStyle: text.fillStyle, textAlign: text.textAlign, }; } sprite.draw(this.ctx, drawArgs); }); } }