[JS] Create a timer class in code

Overview

I have really been excited about the new scripting feature and have reworked most of my game to make use of it. For me I find it much easier to structure my game in code, but I still use the event sheets for some things.

As I have been working through my game I needed to use timers to have actions occur in multiple sub-scenes in my main layout. Of course I originally used the Timer plugin to manage this for me, but I wanted to have this managed in my JavaScript code. So this is what I came up with in my game and thought it might useful to others.

Original Implementation

I originally made use of the native JavaScript SetInterval and SetTimeout functions, which worked fine and I created a wrapper class to manage the timers. I used a manager class to keep track of multiple timers. Since I didn't end up going this route I am not actually going to list how I did it, but I ran into issues with how to manage pausing a game. So this idea was out.

Another Idea

So the next idea I had was to make use of the delta time from the construct 3 engine and track time passed and trigger functions based on elapsed time. This would involve the timers being checked every tick event. But this gives me the ability to pause a timer and have it pick right back up again. Great, this sounds like it'll work :)

So what I need is a manager class that is responsible for all timers and a timer info class that represents an actual timer.

But first - This issue

One of the first issues to deal with when using a class to call a method in another class directly without referencing the enclosing class is that it creates problems with the this context and prevents accessing other functions and variables in the class. What do I mean by this, well

Simple Timer Class

class Timer {
	constructor(){
		this.timers = new Array();
	}

	CreateTimer(funcToCall, params, timeDelta) {
		this.timers.push({
			funcToCall,
			params, // Array of parameters
			timeDelta
		});
	}

	Tick() {
		for (let timerObj of this.timers) {
			timerObj.funcToCall(...params); //Spread operator to convert array to a
							//list of parameters to pass into the function.
		}
	}
}

class MyGame
{
	constructor() {
		this.location='Test Facility';
		this.timers = new Timer();
		this.timers.CreateTimer(this.Handler, [], 3000);
	}
	
	Handler() {
		console.log(this.location);
	}

	Tick() {
		this.timers.Tick();
	}
}

class MyGame
{
	constructor() {
		this.location='Test Facility';
		this.timers = new Timer();
		this.timers.CreateTimer(this.Handler, [], 3000);
	}
	
	//Now this function behaves differently than the other functions of the class
	Handler(context) {
		console.log(context.location);
	}

	Tick() {
		this.timers.Tick();
	}
}

class MyGame
{
	constructor() {
		this.location='Test Facility';
		this.timers = new Timer();
		this.timers.CreateTimer(()=>{this.Handler();}, [], 3000);
	}
	
	Handler() {
		console.log(this.location);
	}

	Tick() {
		this.timers.Tick();
	}
}

	this.timers.CreateTimer((item1, item2)=>{this.Handler(item1, item2);}, [item1, item2], 3000);

	timerObj.funcToCall(...params);

	Handler(item1, items) {}

class TimerInfo
{
	constructor(func, params, milliseconds, oneTime=true) {
		this.oneTime=oneTime;
		this.threshold = milliseconds;
		this.current=0;
		this.func = func;
		this.params = params;
		this.paused = false;
	}
}

class TimerManager
{
	constructor(runtime) {
		this.timers = new Map();
		this.runtime = runtime;
	}
	
	Tick() {
		this.timers.forEach((value, key, map)=>{
			if (!value.paused) {
				value.current += (this.runtime.dt * 1000.0);

				if (value.current>=value.threshold) {
					value.func(...value.params);

					value.current = 0;

					if (value.oneTime) {
						map.delete(key);
					}
				}
			}
		});
	}
	
	Pause(tag, flag) {
		const item = this.timers.get(tag);
		
		if (item) {
			item.paused = flag;
		}
	}
	
	PauseAll(flag) {
		this.timers.forEach((value, key, map)=>{
			value.paused = flag;
		});
	}
	
	ClearTimer(tag) {
		if (this.timers.has(tag)) {
			this.timers.delete(tag);
		}
	}
	
	ClearAllTimers() {
		this.CleanUp();
	}
	
	CleanUp() {
		this.timers.clear();
	}
	
	CreateTimer(tag, func, params, milliseconds, oneTime=true) {
		let item = this.timers.get(tag);
		
		if (item) {
			console.info(`Can not create a timer since ${tag} already exists.`);
		}
		else {
			item = new TimerInfo(func, params, milliseconds, oneTime);
			this.timers.set(tag, item);
		}
	}
}

let gTimerManager, gGame;

runOnStartup(async runtime =>
{
	runtime.addEventListener("beforeprojectstart", () => 
							 OnBeforeProjectStart(runtime));
});

function OnBeforeProjectStart(runtime)
{
	gTimerManager= new TimerManager(runtime);
	gGame = new Game(runtime);

	runtime.addEventListener("tick", () => Tick(runtime));
}

function Tick(runtime)
{
	gTimerManager.Tick();
	gGame.Tick();
}

class Game
{
	constructor(runtime) {
		this.runtime = runtime;
		this.item1 = 'First';
		this.item2 = 'Second';
		
		gTimerManager.CreateTimer("Tag1",(i1)=>{this.HandleTimer(i1);}, [this.item1], 3000, false);
	}

	HandleTimer(i1) {
		console.log(`${i1} - ${this.item2}`);
	}
	

	Tick() {
	}
}