diff --git a/css/game.css b/css/game.css index d4b457b..9168501 100644 --- a/css/game.css +++ b/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; } diff --git a/index.html b/index.html index 05be149..9c605c7 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,7 @@ +
diff --git a/js/game.js b/js/game.js index aa0ef36..8456a91 100644 --- a/js/game.js +++ b/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; + } \ No newline at end of file diff --git a/js/lib/lib_dialogue.js b/js/lib/lib_dialogue.js index 1387a64..c8320b9 100644 --- a/js/lib/lib_dialogue.js +++ b/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; } -} +} \ No newline at end of file