I've created a local game clock (not real time) that increments by 5 minutes for every 1 game turn using an event called GameClock but I'm having trouble formatting it into a displayable item like "14:15 PM" or "09:05", the only problem is I don't know the syntax to format numbers in JS to an image like 5 being displayed using this image "##" is shown as "05".

createItem("EventClock", 
  {
    eventPeriod:1,
    eventActive:true,
	gameTime: 720, // Defaulted to 12:00 (AM) - (M x 12) x H = Time - (5 x 12) x 12 = 720
	gameTimeFormatted: "12:00",
	examine: "",
	nHour: 12,
	nMinutes: 0,
	bMorning: false,
    eventScript:function() { 
		// Update the game clock by 5 minutes
		this.gameTime = this.gameTime + 5
		
		if (this.gameTime >= 1440) {
			this.gameTime = 0 // Passed into midnight (00:00) so reset the clock
			this.nHour = 0
			this.nMinutes = 0
		}
		this.timeDisplaySync()
	},
	timeDisplaySync: function()
	{	
		// Extract the hour only
		this.nHour = parseInt(this.gameTime / 60)
		
		// Extract the minutes by taking away the value for the hour from the total game time
		this.nMinutes = this.gameTime - (this.nHour * 60)
		if (this.gameTime >= 720) {
			this.bMorning = false
		}
		else {
			this.bMorning = true
		}
		
		// Format the time into a displayable item
	        this.gameTimeFormatted = msg ("{EventClock.nHour}:{EventClock.nMinutes}either{EventClock.gameTime >= 720:PM: AM}")
	}
  }
)

and this is my custom side pane to display it

settings.setup = function() 
{
	document.getElementById('panes').style = "display: none"

	createAdditionalPane(1, "Clock", 'gameclock', function() {
		let html = ''
		html += '<p class="gameclock">' + w.EventClock.gameTimeFormatted + '</p><br/>'
		return html
	})
}

This would only display "09:05" as "9:5" so I want to pad out the number to a string format "##" where # is a number. I also get this error on the current display when I try to take a turn.

ERROR: Attempting to use unknown text processor directive 'EventClock.gameTime >= 720' ({EventClock.nHour}:{EventClock.nMinutes}either{EventClock.gameTime >= 720:PM: AM})
printError @ _io.js:5
errormsg @ _io.js:376
tp.processText @ _text.js:124
tp.processText @ _text.js:129
tp.processText @ _text.js:129
processText @ _text.js:30
_msg @ _io.js:78
msg @ _io.js:139
timeDisplaySync @ data.js:108
eventScript @ data.js:90
doEvent @ _defaults.js:198
endTurn @ _defaults.js:184
endTurn @ _world.js:427
parser.execute @ _parser.js:143
parser.parseSingle @ _parser.js:113
parser.parse @ _parser.js:54
runCmd @ _util.js:37
io.clickExit @ _io.js:1370
onclick @ index.html:80
_io.js:12 Look through the trace below to find the offending code. The first entry in the list may be "errormsg" in the file "_io.js", which is me so can be ignored. The next will the code that detected the error and called the "errormsg" message. You may need to look further down to find the root cause, especially for a text process issue.
_io.js:14 Error: error state caught by QuestJS runtime
    at errormsg (_io.js:376:17)
    at tp.processText (_text.js:124:9)
    at tp.processText (_text.js:129:14)
    at tp.processText (_text.js:129:14)
    at processText (_text.js:30:15)
    at _msg (_io.js:78:28)
    at msg (_io.js:139:5)
    at Object.timeDisplaySync (data.js:108:31)
    at Object.eventScript (data.js:90:8)
    at Object.doEvent (_defaults.js:198:10)

As a quick way to get the time to display with two digits like you want, you could convert them to a string with a minimum number of digits.

this.gameTimeFormatted = `${w.EventClock.nHour.toLocaleString('en-US', {minimumIntegerDigits: 2})}:${w.EventClock.nMinutes.toLocaleString('en-US', {minimumIntegerDigits: 2})}`

If it were me though, I'd use a builtin Date, that way it keeps track of the real time in the background, including days, and you can format it however you want.

createItem("EventClock", 
  {
    eventPeriod:1,
    eventActive:true,
    examine: "",
    gameTime: new Date("2024-04-28 12:00:00"),
    bMorning: false,
    eventScript:function() { 
      // Update the game clock by 5 minutes
      this.gameTime = new Date(this.gameTime.getTime() + (5*60000))
      this.bMorning = this.gameTime.getHours() < 12
    },
  }
)

settings.setup = function() 
{
	createAdditionalPane(1, "Clock", 'gameclock', function() {
		let html = ''
		html += '<p class="gameclock">' + w.EventClock.gameTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', hour12:true}) + '</p><br/>'
		return html
	})
}

This is working 100% how I wanted it to, I don't want real time/date stuff as I'm not going full on life sim, just a very basic time scheduler system

createItem("EventClock", 
  {
    eventPeriod:1,
    eventActive:true,
	gameTime: 720, // Defaulted to 12:00 (AM) - (M x 12) x H = Time - (5 x 12) x 12 = 720
	gameTimeFormatted: "12:00 PM",
	examine: "",
    eventScript:function() { 
		// Update the game clock by 5 minutes
		this.gameTime = this.gameTime + 5
		
		if (this.gameTime >= 1440) {
			this.gameTime = 0 // Passed into midnight (00:00) so reset the clock
		}
		this.timeDisplaySync()
	},
	timeDisplaySync: function()
	{	
		var timeFormat = " AM"
		// Extract the hour only
		var nHour = parseInt(this.gameTime / 60)
		
		// Extract the minutes by taking away the value for the hour from the total game time
		var nMinutes = this.gameTime - (nHour * 60)
		if (this.gameTime >= 720) {
			var timeFormat = " PM"
		}		
		// Format the time into a displayable item
		this.gameTimeFormatted = `${nHour.toLocaleString('en-US', {minimumIntegerDigits: 2})}:${nMinutes.toLocaleString('en-US', {minimumIntegerDigits: 2})}${timeFormat}`
	}
  }
)