added debug message system

src/DataTypes/Vec2.ts

@@ -1,22 +1,22 @@
-export default class Vec2{
+export default class Vec2 {
 
-	public x : number;
-	public y : number;
+	public x: number;
+	public y: number;
 
-	constructor(x : number = 0, y : number = 0){
+	constructor(x: number = 0, y: number = 0) {
 		this.x = x;
 		this.y = y;
 	}
 
-	magSq() : number{
+	magSq(): number {
 		return this.x*this.x + this.y*this.y;
 	}
 
-	mag() : number {
+	mag(): number {
 		return Math.sqrt(this.magSq());
 	}
 
-	normalize() : Vec2{
+	normalize(): Vec2 {
 		if(this.x === 0 && this.y === 0) return this;
 		let mag = this.mag();
 		this.x /= mag;
@@ -24,17 +24,17 @@ export default class Vec2{
 		return this;
 	}
 
-	setToAngle(angle : number) : Vec2{
+	setToAngle(angle: number): Vec2 {
 		this.x = Math.cos(angle);
 		this.y = Math.sin(angle);
 		return this;
 	}
 
-	scaleTo(magnitude : number) : Vec2{
+	scaleTo(magnitude: number): Vec2 {
 		return this.normalize().scale(magnitude);
 	}
 
-	scale(factor : number, yFactor : number = null) : Vec2{
+	scale(factor: number, yFactor: number = null): Vec2 {
 		if(yFactor !== null){
 			this.x *= factor;
 			this.y *= yFactor;
@@ -45,7 +45,7 @@ export default class Vec2{
 		return this;
 	}
 
-	rotate(angle : number) : Vec2{
+	rotate(angle: number): Vec2 {
 		let cs = Math.cos(angle);
 		let sn = Math.sin(angle);
 		let tempX = this.x*cs - this.y*sn;
@@ -55,25 +55,29 @@ export default class Vec2{
 		return this;
 	}
 
-	set(x : number, y : number) : Vec2{
+	set(x: number, y: number): Vec2 {
 		this.x = x;
 		this.y = y;
 		return this;
 	}
 
-	add(other : Vec2) : Vec2{
+	add(other: Vec2): Vec2 {
 		this.x += other.x;
 		this.y += other.y;
 		return this;
 	}
 
-	sub(other : Vec2) : Vec2{
+	sub(other: Vec2): Vec2 {
 		this.x -= other.x;
 		this.y -= other.y;
 		return this;
 	}
 
-	toString() : string{
+	toString(): string {
 		return "(" + this.x + ", " + this.y + ")";
 	}
+
+	toFixed(): string {
+		return "(" + this.x.toFixed(1) + ", " + this.y.toFixed(1) + ")";
+	}
 }

src/Debug/Debug.ts

@@ -0,0 +1,36 @@
+import Map from "../DataTypes/Map";
+
+export default class Debug {
+	private static instance: Debug = null;
+
+	logIds: number;
+	logMessages: Map<string>;
+	
+
+	constructor(){
+		this.logIds = 0;
+		this.logMessages = new Map();
+	};
+
+	static getInstance(): Debug {
+		if(this.instance === null){
+			this.instance = new Debug();
+		}
+
+		return this.instance;
+	}
+
+	log(id: string, message: string): void {
+		this.logMessages.add(id, message);
+	}
+
+	render(ctx: CanvasRenderingContext2D): void {
+		let y = 20;
+		ctx.font = "20px Arial";
+		ctx.fillStyle = "#000000";
+		this.logMessages.forEach((key: string) => {
+			ctx.fillText(this.logMessages.get(key), 10, y)
+			y += 30;	
+		});
+	}
+}

src/Loop/GameLoop.ts

@@ -3,6 +3,7 @@ import InputReceiver from "../Input/InputReceiver";
 import InputHandler from "../Input/InputHandler";
 import Recorder from "../Playback/Recorder";
 import GameState from "../GameState/GameState";
+import Debug from "../Debug/Debug";
 
 export default class GameLoop{
 	// The amount of time to spend on a physics step
@@ -33,7 +34,8 @@ export default class GameLoop{
 	private inputHandler: InputHandler;
 	private inputReceiver: InputReceiver;
 	private recorder: Recorder;
-	private gameState: GameState;
+    private gameState: GameState;
+    private debug: Debug;
 
     constructor(){
         this.maxFPS = 60;
@@ -59,6 +61,7 @@ export default class GameLoop{
         this.inputReceiver = InputReceiver.getInstance();
         this.recorder = new Recorder();
         this.gameState = new GameState();
+        this.debug = Debug.getInstance();
     }
 
     private initializeCanvas(canvas: HTMLCanvasElement, width: number, height: number): CanvasRenderingContext2D {
@@ -76,12 +79,6 @@ export default class GameLoop{
         return this.gameState;
     }
 
-    private renderFPS(ctx: CanvasRenderingContext2D): void {
-        ctx.fillStyle = "black";
-		ctx.font = "30px Arial"
-		ctx.fillText(this.fps.toFixed(1), 5, 5 + 30);
-    }
-
     private updateFrameCount(timestep: number): void {
         this.frame += 1;
         this.numFramesInSum += 1;
@@ -91,6 +88,8 @@ export default class GameLoop{
             this.numFramesInSum = 0;
             this.runningFrameSum = 0;
         }
+
+        this.debug.log("fps", "FPS: " + this.fps.toFixed(1));
     }
 
     start(): void {
@@ -148,6 +147,6 @@ export default class GameLoop{
     render(): void {
         this.ctx.clearRect(0, 0, this.WIDTH, this.HEIGHT);
         this.gameState.render(this.ctx);
-        this.renderFPS(this.ctx);
+        this.debug.render(this.ctx);
     }
 }

src/Nodes/Player.ts

@@ -1,15 +1,18 @@
 import CanvasNode from "./CanvasNode";
 import Vec2 from "../DataTypes/Vec2";
+import Debug from "../Debug/Debug";
 
 export default class Player extends CanvasNode{
 	velocity: Vec2;
 	speed: number;
+	debug: Debug;
 
 	constructor(){
 		super();
 		this.velocity = new Vec2(0, 0);
 		this.speed = 300;
 		this.size = new Vec2(50, 50);
+		this.debug = Debug.getInstance();
 	};
 
 	update(deltaT: number): void {
@@ -23,6 +26,8 @@ export default class Player extends CanvasNode{
 
 		this.velocity = dir.scale(this.speed);
 		this.position = this.position.add(this.velocity.scale(deltaT));
+
+		this.debug.log("player", "Player Pos: " + this.position.toFixed());
 	}
 
 	render(ctx: CanvasRenderingContext2D, origin: Vec2){

src/SceneGraph/Viewport.ts

@@ -69,8 +69,8 @@ export default class Viewport{
             this.position.x = this.following.getPosition().x - this.size.x/2;
             this.position.y = this.following.getPosition().y - this.size.y/2;
             let [min, max] = this.bounds.split();
-            this.position.x = MathUtils.clamp(this.position.x, min.x, max.x - this.size.x/2);
-            this.position.y = MathUtils.clamp(this.position.y, min.y, max.y - this.size.y/2);
+            this.position.x = MathUtils.clamp(this.position.x, min.x, max.x - this.size.x);
+            this.position.y = MathUtils.clamp(this.position.y, min.y, max.y - this.size.y);
         }
     }
 }