Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Theme #815

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Theme #815

Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 24 additions & 2 deletions css/game.css
Original file line number Diff line number Diff line change
@@ -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;
}


Expand All @@ -32,13 +37,29 @@ body {
padding: 4px;
}

#loadGameButton:hover,
#saveGameButton:hover {
transition: 0.4s;
cursor: pointer;
background-color: #555;
color: #fff;
border-color: #fff;
}

#saveGameButton {
top:150px;
font-weight: bold;
transition: 0.4s;
width: 140px;
height: 30px;
bottom:20px;
left: 20px
}

#loadGameButton {
top:210px;
font-weight: bold;
width: 140px;
height: 30px;
bottom: 60px;
left: 20px;
display: none;
}
Expand Down Expand Up @@ -296,6 +317,7 @@ body {
position: absolute;
left: 20px;
top: 100px;
border-radius: 0.3rem;
border: 1px solid #333;
display:none;
}
Expand Down
1 change: 1 addition & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
39 changes: 38 additions & 1 deletion js/game.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
// }
}
149 changes: 82 additions & 67 deletions js/lib/lib_dialogue.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,94 +46,109 @@ 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) {
pos = getElementPosition(canvas);
loc = {};
tapX = e.targetTouches ? e.targetTouches[0].pageX : e.pageX;
tapY = e.targetTouches ? e.targetTouches[0].pageY : e.pageY;
canvasScaleRatio = canvas.width / canvas.offsetWidth;

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;
//console.log(e.pageX, e.pageY, loc.x, loc.y);
if (loc.x >= buttonOneOffsetX && loc.x <= buttonOneOffsetX+buttonOneLength) {
if (loc.y >= buttonsOffsetY && loc.y <= buttonsOffsetY+20) {
document.getElementById("myDCanvas").classList.remove('active-modal');
answer = 2;
clearCanvas();
dialogShown = false;
}

const checkButton = (offsetX, length, answer) => {
return loc.x >= offsetX && loc.x <= offsetX + length &&
loc.y >= buttonsOffsetY && loc.y <= buttonsOffsetY + 20;
};

if (checkButton(buttonOneOffsetX, buttonOneLength, 2)) {
document.getElementById("myDCanvas").classList.remove('active-modal');
answer = 2;
clearCanvas();
dialogShown = false;
}
if (loc.x >= buttonTwoOffsetX && loc.x <= buttonTwoOffsetX+buttonTwoLength) {
if (loc.y >= buttonsOffsetY && loc.y <= buttonsOffsetY+20) {
document.getElementById("myDCanvas").classList.remove('active-modal');
answer = 3;
clearCanvas();
dialogShown = false;
}

if (checkButton(buttonTwoOffsetX, buttonTwoLength, 3)) {
document.getElementById("myDCanvas").classList.remove('active-modal');
answer = 3;
clearCanvas();
dialogShown = false;
}
}