Theme things.

changelog.md

@@ -1,7 +1,10 @@
 # The Modding Tree changelog:
 
+- Added backgroundStyle to mod.js.
 - If an upgrade has both canAfford and cost, it checks both.
 - Releasing a held buyable/clickable with onHold doesn't click it again.
+- Attempt to fix buttons sometimes not updating.
+- Improvements to theme code, partially by Cubedey.
 
 ## v2.6.0.1 - 6/4/21
 - Removed excess NaN alerts (now only checks player, not temp).

js/game.js

@@ -392,9 +392,10 @@ function gameLoop(diff) {
 
 }
 
-function hardReset() {
+function hardReset(resetOptions) {
 	if (!confirm("Are you sure you want to do this? You will lose all your progress!")) return
 	player = null
+	if(resetOptions) options = null
 	save();
 	window.location.reload();
 }

js/technical/canvas.js

@@ -21,18 +21,7 @@ function resizeCanvas() {
 		drawTree();
 }
 
-var colors = {
+
-	default: {
-		1: "#ffffff",
-		2: "#bfbfbf",
-		3: "#7f7f7f",
-	},
-	aqua: {
-		1: "#bfdfff",
-		2: "#8fa7bf",
-		3: "#5f6f7f",
-	},
-}
 var colors_theme
 
 function drawTree() {

js/utils/options.js

@@ -6,7 +6,7 @@ function getStartOptions() {
 	return {
 		autosave: true,
 		msDisplay: "always",
-		theme: null,
+		theme: "default",
 		hqTree: false,
 		offlineProd: true,
 		hideChallenges: false,

js/utils/save.js

@@ -222,7 +222,7 @@ function loadOptions() {
 		options = Object.assign(getStartOptions(), JSON.parse(decodeURIComponent(escape(atob(get2)))));
 	else 
 		options = getStartOptions()
-	
+	if (themes.indexOf(options.theme) < 0) theme = "default"
 
 }
 

js/utils/themes.js

@@ -1,29 +1,50 @@
 // ************ Themes ************
-const themes = {
+var themes = ["default", "aqua"]
-	1: "aqua"
+
-};
+var colors = {
-const theme_names = {
+	default: {
-	aqua: "Aqua"
+		1: "#ffffff",//Branch color 1
-};
+		2: "#bfbfbf",//Branch color 2
+		3: "#7f7f7f",//Branch color 3
+		color: "#dfdfdf",
+		points: "#ffffff",
+		locked: "#bf8f8f",
+		background: "#0f0f0f",
+		background_tooltip: "rgba(0, 0, 0, 0.75)",
+	},
+	aqua: {
+		1: "#bfdfff",
+		2: "#8fa7bf",
+		3: "#5f6f7f",
+		color: "#bfdfff",
+		points: "#dfefff",
+		locked: "#c4a7b3",
+		background: "#001f3f",
+		background_tooltip: "rgba(0, 15, 31, 0.75)",
+	},
+}
 function changeTheme() {
-	let aqua = options.theme == "aqua";
+
 	colors_theme = colors[options.theme || "default"];
-	document.body.style.setProperty('--background', aqua ? "#001f3f" : "#0f0f0f");
+	document.body.style.setProperty('--background', colors_theme["background"]);
-	document.body.style.setProperty('--background_tooltip', aqua ? "rgba(0, 15, 31, 0.75)" : "rgba(0, 0, 0, 0.75)");
+	document.body.style.setProperty('--background_tooltip', colors_theme["background_tooltip"]);
-	document.body.style.setProperty('--color', aqua ? "#bfdfff" : "#dfdfdf");
+	document.body.style.setProperty('--color', colors_theme["color"]);
-	document.body.style.setProperty('--points', aqua ? "#dfefff" : "#ffffff");
+	document.body.style.setProperty('--points', colors_theme["points"]);
-	document.body.style.setProperty("--locked", aqua ? "#c4a7b3" : "#bf8f8f");
+	document.body.style.setProperty("--locked", colors_theme["locked"]);
 }
 function getThemeName() {
-	return options.theme ? theme_names[options.theme] : "Default";
+	return options.theme? options.theme : "default";
 }
+
 function switchTheme() {
-	if (options.theme === null)
+	let index = themes.indexOf(options.theme)
-		options.theme = themes[1];
+	if (options.theme === null || index >= themes.length-1 || index < 0) {
+		options.theme = themes[0];
+	}
 	else {
-		options.theme = themes[Object.keys(themes)[options.theme] + 1];
+		index ++;
-		if (!options.theme)
+		options.theme = themes[index];
-			options.theme = null;
+		options.theme = themes[1];
 	}
 	changeTheme();
 	resizeCanvas();