From feca17fe45f5fee423eadb9acc18f5ae553f62ae Mon Sep 17 00:00:00 2001 From: sharma-shray Date: Mon, 1 Apr 2024 11:26:14 +0300 Subject: [PATCH 1/4] ref --- js/lib/lib_dialogue.js | 105 +++++++++++++++++++++++------------------ 1 file changed, 59 insertions(+), 46 deletions(-) diff --git a/js/lib/lib_dialogue.js b/js/lib/lib_dialogue.js index 1387a64..3432aea 100644 --- a/js/lib/lib_dialogue.js +++ b/js/lib/lib_dialogue.js @@ -46,71 +46,84 @@ 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; + + const buttonsOffsetY = sceneOffsetY + sceneLines * 20 + 20; + const buttonOneLength = answerTextOne.length * 7.5 + 20; + const buttonTwoLength = answerTextTwo.length * 7.5 + 20; + ctx.fillStyle = '#bbc2c9'; + + const buttonOneOffsetX = img1sizeX + imageOffsetX + 10; + const 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 = {}; From 94075a6f599ede866545218ebeb8d3d7b1ed2cbf Mon Sep 17 00:00:00 2001 From: Quied Date: Tue, 2 Apr 2024 11:30:48 +0300 Subject: [PATCH 2/4] dark theme --- css/game.css | 5 +++++ index.html | 1 + js/game.js | 39 ++++++++++++++++++++++++++++++++++++++- 3 files changed, 44 insertions(+), 1 deletion(-) 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..9190579 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,39 @@ function setTutorialAfterSaveRestore(gameTemp) { game.festival_cooldown = 0; } } + + function changeBackgroundStyle(){ + // Select the HTML element + var htmlElement = document.querySelector('html'); + + // Select the body element + var bodyElement = document.querySelector('.menu-panel'); + + // Define new background and text color + var newBackgroundColor = '#1C1C1C'; + var newTextColor = 'white'; + + htmlElement.style.transition = "background-color 0.5s ease"; + htmlElement.style.backgroundColor = newBackgroundColor; + htmlElement.style.color = newTextColor; + + // Change the text color of the body + bodyElement.style.color = newTextColor; + + + // e.g for menu as well + // var menuPanel = document.querySelector('.menu-panel'); + // var newBackgroundColor = '#1C1C1C'; + // var newTextColor = 'white'; + // menuPanel.style.transition = "background-color 0.5s ease"; + // menuPanel.style.backgroundColor = newBackgroundColor; + // var buttons = menuPanel.querySelectorAll('.tab-link'); + // buttons.forEach(function(button) { + // button.style.color = newTextColor; + // }); + + // var countdownValue = menuPanel.querySelector('#lblEventCountdownValue'); + // if (countdownValue) { + // countdownValue.style.color = newTextColor; + // } + } \ No newline at end of file From 258d5281562b4249acc35a91bf0076a8ab273403 Mon Sep 17 00:00:00 2001 From: Quied Date: Wed, 3 Apr 2024 16:58:34 +0300 Subject: [PATCH 3/4] fix --- js/lib/lib_dialogue.js | 37 +++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/js/lib/lib_dialogue.js b/js/lib/lib_dialogue.js index 3432aea..c8320b9 100644 --- a/js/lib/lib_dialogue.js +++ b/js/lib/lib_dialogue.js @@ -52,56 +52,56 @@ function myCanvas(imageName, thefunction, sceneText, answerTextOne,answerTextTwo const sceneTextLength = sceneTextArray.length; const isSingleLine = sceneTextLength === 1; let nextLine; - + if (isSingleLine) { nextLine = sceneText.lastIndexOf(" ", 80); } - + + 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++; } - - const buttonsOffsetY = sceneOffsetY + sceneLines * 20 + 20; - const buttonOneLength = answerTextOne.length * 7.5 + 20; - const buttonTwoLength = answerTextTwo.length * 7.5 + 20; - ctx.fillStyle = '#bbc2c9'; + + 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; - const buttonOneOffsetX = img1sizeX + imageOffsetX + 10; - const buttonTwoOffsetX = buttonOneOffsetX + buttonOneLength + 50; - ctx.globalAlpha = alphaValue; ctx.fillRect(buttonOneOffsetX, buttonsOffsetY, buttonOneLength, 20); - + 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); - } - canvas.addEventListener("touchstart", tap); canvas.addEventListener("mousedown", tap); } 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(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', imageSrc); + 'Yessss, in the most bloody way!', 'No', imageSrc); } function raiseQuestionImageless() { @@ -130,6 +130,7 @@ function tap(e) { 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; @@ -151,4 +152,4 @@ function tap(e) { clearCanvas(); dialogShown = false; } -} +} \ No newline at end of file From ba039761a49a309e708bde6e7d3728cd6eeae7a4 Mon Sep 17 00:00:00 2001 From: sharma-shray Date: Tue, 9 Apr 2024 08:41:38 +0300 Subject: [PATCH 4/4] Background change --- js/game.js | 57 +++++++++++++++++++++++++++++------------------------- 1 file changed, 31 insertions(+), 26 deletions(-) diff --git a/js/game.js b/js/game.js index 9190579..8456a91 100644 --- a/js/game.js +++ b/js/game.js @@ -4030,38 +4030,43 @@ function setTutorialAfterSaveRestore(gameTemp) { } } - function changeBackgroundStyle(){ - // Select the HTML element - var htmlElement = document.querySelector('html'); - // Select the body element + 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'); - // Define new background and text color - var newBackgroundColor = '#1C1C1C'; + 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; - - // Change the text color of the body + bodyElement.style.color = newTextColor; - - - // e.g for menu as well - // var menuPanel = document.querySelector('.menu-panel'); - // var newBackgroundColor = '#1C1C1C'; - // var newTextColor = 'white'; - // menuPanel.style.transition = "background-color 0.5s ease"; - // menuPanel.style.backgroundColor = newBackgroundColor; - // var buttons = menuPanel.querySelectorAll('.tab-link'); - // buttons.forEach(function(button) { - // button.style.color = newTextColor; - // }); - - // var countdownValue = menuPanel.querySelector('#lblEventCountdownValue'); - // if (countdownValue) { - // countdownValue.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