added debug message system

src/DataTypes/Vec2.ts

@@ -76,4 +76,8 @@ export default class Vec2{
 	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
@@ -34,6 +35,7 @@ export default class GameLoop{
 	private inputReceiver: InputReceiver;
 	private recorder: Recorder;
     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);
         }
     }
 }