Add simple GBA ROM title ID changer

_sass/base.scss

@@ -327,10 +327,29 @@ html[dir=rtl] {
 	border-color: $light-border;
 }
 .form-control, .form-control:focus, .form-control::placeholder {
-	color: $light-placeholder;
+	color: $main-color;
 	background-color: $light;
 	border-color: $light-border;
 }
+.form-control:disabled {
+	background-color: $light-disabled;
+}
+
+.input-group-text, .form-control::-webkit-file-upload-button {
+	background-color: $alert-secondary-bg;
+	color: $main-color;
+}
+.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
+	background-color: $alert-secondary-border;
+}
+// Safari is dumb and doesn't let the Firefox one be with the others
+.form-control::file-selector-button {
+	background-color: $alert-secondary-bg;
+	color: $main-color;
+}
+.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
+	background-color: $alert-secondary-border;
+}
 
 // Cards
 .card {

assets/css/dark.scss

@@ -44,6 +44,7 @@ $dark: #f8f9fa;
 $light: #3f3f3f;
 $light-border: #292929;
 $light-placeholder: #999;
+$light-disabled: #303030;
 
 /// Import base style
 @import "base";

assets/css/light.scss

@@ -44,6 +44,7 @@ $dark: #343a40;
 $light: #f8f9fa;
 $light-border: #ced4da;
 $light-placeholder: darkgray;
+$light-disabled: #e9ecef;
 
 /// Import base style
 @import "base";

assets/js/change-gba-tid.js

@@ -0,0 +1,64 @@
+var rom = null;
+var name = null;
+
+function loadRom(file) {
+	// Read the file
+	var reader = new FileReader();
+	reader.readAsArrayBuffer(file);
+	reader.onload = function() {
+		rom = new Uint8Array(this.result);
+		name = file.name;
+
+		// Simple check if GBA ROM
+		if(rom[0xB2] != 0x96) {
+			document.getElementById("tid-input").value = "";
+			document.getElementById("tid-input").disabled = true;
+			document.getElementById("save").disabled = true;
+			alert("Error! File is not a valid GBA ROM.");
+			return;
+		}
+
+		// Get the title ID
+		var titleId = "";
+		for(var i = 0; i < 4; i++)
+			titleId += String.fromCharCode(rom[0xAC + i]);
+
+		// Enable TID input
+		document.getElementById("tid-input").value = titleId;
+		document.getElementById("tid-input").disabled = false;
+	};
+}
+
+function updateTid(newTid) {
+	// Check that it's the right length
+	if(newTid.length != 4) {
+		document.getElementById("save").disabled = true;
+		alert("Error! Title ID must be exactly 4 ASCII letters long");
+		return;
+	}
+
+	// Set the new TID
+	for(var i = 0; i < 4; i++) {
+		var charCode = newTid.charCodeAt(i);
+		if(charCode > 0x7F) {
+			document.getElementById("save").disabled = true;
+			alert("Error! Title ID must be exactly 4 ASCII letters long");
+			return;
+		}
+		rom[0xAC + i] = charCode;
+	}
+
+	// Enable saving
+	document.getElementById("save").disabled = false;
+}
+
+function save() {
+	// Save the updated file
+	var blob = new Blob([rom], {type: "application/octet-stream"});
+	var a = document.createElement("a");
+	var url = window.URL.createObjectURL(blob);
+	a.href = url;
+	a.download = name;
+	a.click();
+	window.URL.revokeObjectURL(url);
+}

pages/_en-US/gbarunner2/faq.md

@@ -25,4 +25,14 @@ Usually, the builds that are included with TWiLight Menu++ is enough. For more i
 You will need a build from the [wifi_link](https://github.com/Gericom/GBARunner2/tree/wifi_link) branch to use the features. You can find detailed instructions on how to setup the builds on its [GBAtemp Wiki page](https://wiki.gbatemp.net/wiki/GBARunner2/Link).
 
 #### Why isn't RTC (Real Time Clock) supported in a ROM hack?
-RTC is supported on a per-game basis. You will have to change the ROM's game code to that of the original game so that GBARunner2 will recognize it.
+RTC is supported on a per-game basis. You will have to change the ROM's title ID to that of a game that supports RTC so that GBARunner2 will recognize it.
+
+You can change the game code using the following:
+1. <label for="file-input" class="form-label">Select GBA ROM file:</label>
+   <input id="file-input" class="form-control mb-2" type="file" onchange="loadRom(this.files[0])">
+1. <label for="file-input" class="form-label">Enter desired title ID:</label>
+   <input id="tid-input" class="form-control mb-2" type="text" maxlength="4" onchange="updateTid(this.value)" disabled>
+3. <label for="file-input" class="form-label">Save updated file:</label>
+   <input id="save" class="btn btn-secondary" type="button" value="Save" onclick="save()" disabled>
+
+<script src="/assets/js/change-gba-tid.js"></script>