customization background switching

css/game.css

@@ -1,11 +1,16 @@
 html {
   height: 100%;
+
+  /* background-color: #0a0e0b;
+  color:white; 
+  */
 }
 
 body {
   font-family: "Arial", sans-serif;
   line-height: 1.45;
   min-height: 100%;
+  transition: background-color 0.5s ease;
 }
 
 

index.html

@@ -28,6 +28,7 @@
     <button class="tab-link" onclick="openTab(event, 'Settings')" id="tabSettings" type="button">Settings</button>
     <button class="tab-link" onclick="openTab(event, 'About')" id="tabAbout" type="button">How To Play</button>
     <button class="tab-link" onclick="openTab(event, 'Discord')" id="tabDiscord" type="button">Discord</button>
+    <button class="tab-link" onclick="changeBackgroundStyle()" id="PageView" type="button">Light</button>
     <div id="lblEventCountdownValue" style="margin-left:20px;" onclick="game.getEventHelp()"></div>
     <a href="https://www.patreon.com/bePatron?u=7838459" target="_blank"><img src="resources/patreon.png" style="padding: 6px 0px"></a>
   </div>

js/game.js

@@ -2343,7 +2343,8 @@ function gameOK() {
 			game.addMoneyToTreasury(taxes);
 			if (game.gold !== gold_was) {
 				if (game.gold > gold_was) {
-					msg = locObj.moneyIncreased.txt;
+					msg = locObj.moneyIncreased.txt + ' ' + game.gold;
+					// msg = ;
 				} else {
 					msg = locObj.moneyDecreased.txt;
 				}
@@ -4028,3 +4029,44 @@ function setTutorialAfterSaveRestore(gameTemp) {
 			game.festival_cooldown = 0;
 		}
 	}
+
+
+	function changeBackgroundStyle() {
+		var htmlElement = document.querySelector('html');
+
+		// Check if the current background color is dark
+		var currentBackgroundColor = window.getComputedStyle(htmlElement).getPropertyValue('background-color');
+		var isDarkBackground = isDark(currentBackgroundColor);
+
+		var bodyElement = document.querySelector('.menu-panel');
+
+		var newBackgroundColor;
+		var newTextColor = 'white';
+
+		if (isDarkBackground) {
+			newBackgroundColor = 'white';
+			newTextColor = 'black';
+		} else {
+			newBackgroundColor = '#1C1C1C';
+			newTextColor = 'white';
+		}
+
+		htmlElement.style.transition = "background-color 0.5s ease";
+		htmlElement.style.backgroundColor = newBackgroundColor;
+		htmlElement.style.color = newTextColor;
+
+		bodyElement.style.color = newTextColor;
+	}
+
+	function isDark(color) {
+		// Convert color to RGB
+		color = color.substring(4, color.length-1)
+			 .replace(/ /g, '')
+			 .split(',');
+
+		// Get luminance
+		var luminance = 0.2126 * color[0] + 0.7152 * color[1] + 0.0722 * color[2];
+
+		// Check if luminance is less than a threshold
+		return luminance < 128;
+	}

js/lib/lib_dialogue.js

@@ -46,77 +46,91 @@ function myCanvas(imageName, thefunction, sceneText, answerTextOne,answerTextTwo
         return img;
     }
     function placeText() {
-        ctx.fillStyle     = 'black';
-        ctx.font          = "14px Calibri";
-        sceneTextArray    = sceneText.split("\n");
-        sceneTextLength   = sceneTextArray.length;
-        if (sceneTextLength === 1) {
-          sceneTextOrLength  = sceneText.length;
-          //console.log("dialog text len is "+sceneTextLength);
-          nextLine = sceneText.lastIndexOf(" ", 80)
+        ctx.fillStyle = 'black';
+        ctx.font = "15px Calibri";
+        const sceneTextArray = sceneText.split("\n");
+        const sceneTextLength = sceneTextArray.length;
+        const isSingleLine = sceneTextLength === 1;
+        let nextLine;
+
+        if (isSingleLine) {
+            nextLine = sceneText.lastIndexOf(" ", 80);
         }
-        sceneLines        = 0;
-        sceneOffsetX      = img1sizeX + 20;
-        sceneOffsetY      = 40;
-        ctx.globalAlpha   = 1;
+
+
+        let sceneLines = 0;
+        const sceneOffsetX = img1sizeX + 20;
+        const sceneOffsetY = 40;
+        ctx.globalAlpha = 1;
+
         while (sceneLines < sceneTextLength) {
-            ctx.fillText(sceneTextArray[sceneLines], sceneOffsetX, sceneOffsetY + sceneLines*20);
-            sceneLines    = sceneLines+1;
+            ctx.fillText(sceneTextArray[sceneLines], sceneOffsetX, sceneOffsetY + sceneLines * 20);
+            sceneLines++;
         }
+
         buttonsOffsetY    = sceneOffsetY + sceneLines*20 + 20;
         buttonOneLength   = answerTextOne.length*7.5 + 20;
         buttonTwoLength   = answerTextTwo.length*7.5 + 20;
         ctx.fillStyle     = '#bbc2c9';
+
         buttonOneOffsetX  = img1sizeX + imageOffsetX + 10;
         buttonTwoOffsetX  = buttonOneOffsetX+buttonOneLength + 50;
         ctx.globalAlpha   = alphaValue;
+
+
         ctx.fillRect(buttonOneOffsetX, buttonsOffsetY, buttonOneLength, 20);
-        if (answerTextTwo!=='') {
+
+        if (answerTextTwo !== '') {
             ctx.fillRect(buttonTwoOffsetX, buttonsOffsetY, buttonTwoLength, 20);
         }
-        ctx.fillStyle     = 'black';
-        ctx.globalAlpha   = 1;
-        ctx.fillText(answerTextOne,buttonOneOffsetX+5,buttonsOffsetY+14);
-        ctx.fillText(answerTextTwo,buttonTwoOffsetX+5,buttonsOffsetY+14);
+
+        ctx.fillStyle = 'black';
+        ctx.globalAlpha = 1;
+        ctx.fillText(answerTextOne, buttonOneOffsetX + 5, buttonsOffsetY + 14);
+        ctx.fillText(answerTextTwo, buttonTwoOffsetX + 5, buttonsOffsetY + 14);
     }
     canvas.addEventListener("touchstart", tap);
     canvas.addEventListener("mousedown", tap);
 }
-function clearCanvas(){
-    var ctx = canvas.getContext("2d");
-    ctx.fillStyle     = "rgb(255, 255, 255)"
+function clearCanvas() {
+    const ctx = canvas.getContext("2d");
+    ctx.fillStyle = "rgb(255, 255, 255)";
+
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     myCanvas.returnAnswer();
 }
-function raiseQuestion() {
+function raiseQuestion(imageSrc = 'trapdoor.png') {
     myCanvas('Would you like to cruelly execute your fellow citizen in front of townsfolk,\n my lord?',
-        'Yessss, in the most bloody way!','No', 'trapdoor.png');
+    'Yessss, in the most bloody way!', 'No', imageSrc);
 }
-function raiseQuestionImageless () {
-    myCanvas('Would you like to cruelly execute your fellow citizen in front of townsfolk,\n my lord?',
-        'Yessss, in the most bloody way!','No', '');
+
+function raiseQuestionImageless() {
+    raiseQuestion('');
 }
-answer = 0;
-function getElementPosition (element) {
-    //thanks to William Alone
-    var parentOffset,
-        pos = {
-            x: element.offsetLeft,
-            y: element.offsetTop
-        };
-    if (element.offsetParent) {
-        parentOffset = getElementPosition(element.offsetParent);
-        pos.x += parentOffset.x;
-        pos.y += parentOffset.y;
+
+let answer = 0;
+
+function getElementPosition(element) {
+    let pos = {
+        x: element.offsetLeft,
+        y: element.offsetTop
+    };
+    let parent = element.offsetParent;
+    while (parent) {
+        pos.x += parent.offsetLeft;
+        pos.y += parent.offsetTop;
+        parent = parent.offsetParent;
     }
     return pos;
 }
+
 function tap(e) {
     const pos = getElementPosition(canvas);
     const loc = {};
     const tapX = e.targetTouches ? e.targetTouches[0].pageX : e.pageX;
     const tapY = e.targetTouches ? e.targetTouches[0].pageY : e.pageY;
     const canvasScaleRatio = canvas.width / canvas.offsetWidth;
+
     loc.x = (tapX - pos.x) * canvasScaleRatio;
     loc.y = (tapY - pos.y) * canvasScaleRatio;
 
@@ -138,4 +152,4 @@ function tap(e) {
         clearCanvas();
         dialogShown = false;
     }
-}
+}