diff --git a/TODO.md b/TODO.md index 4c04080..a6a206d 100644 --- a/TODO.md +++ b/TODO.md @@ -1,5 +1,6 @@ ## TODO: - image border +- draw button and other elements func - info widget - finish game image - desktop (landscape) orientation diff --git a/app/config.json b/app/config.json index e075238..7bf2e48 100644 --- a/app/config.json +++ b/app/config.json @@ -5,7 +5,11 @@ "loaderWidth": 200, "colors": { "back": "#2f3542", + "buttonFill": "#a4b0be", + "buttonStroke": "#191C23", + "buttonFont": "#000000", "answer": { + "stroke": "#191C23", "wrong": "#ff6b81", "right": "#7bed9f", "notPassed": "#a4b0be" diff --git a/js/index.js b/js/index.js index e2a62cf..3994e83 100644 --- a/js/index.js +++ b/js/index.js @@ -242,7 +242,7 @@ function draw() { // draw progress bar let sizeProgressItem = areas.game.questProgress.w / gameData.questions.length; - context.strokeStyle = "black"; + context.strokeStyle = config.colors.answer.stroke; for (let i = 0; i < gameData.questions.length; i++) { // change progress item color by status answer @@ -274,8 +274,8 @@ function draw() { context.fillText(gameData.questions[game.currentQuest].question, cW / 2, areas.game.labelQuestion.y + 30); // draw answer buttons - context.fillStyle = "#2ed573"; - context.strokeStyle = "#000000"; + context.fillStyle = config.colors.buttonFill; + context.strokeStyle = config.colors.buttonStroke; context.lineWidth = 2; let answerButtonsArray = [buttons.answerButton0, buttons.answerButton1, @@ -289,15 +289,15 @@ function draw() { // draw answer button label context.font = "32px Yanone Kaffeesatz"; context.textAlign = "center"; - context.fillStyle = "white"; + context.fillStyle = config.colors.buttonFont; answerButtonsArray.forEach(function callback(value) { context.fillText(value.data, cW / 2, value.y + 35); }); // draw UI buttons - context.fillStyle = "#2ed573"; - context.strokeStyle = "#000000"; + context.fillStyle = config.colors.buttonFill; + context.strokeStyle = config.colors.buttonStroke; context.lineWidth = 2; for (const [key, value] of Object.entries(buttonsUi)) { @@ -319,13 +319,13 @@ function draw() { let rightAnswer = 0; gameData.questions.forEach(element => element.status ? rightAnswer += 1 : null); context.font = "50px Yanone Kaffeesatz"; - context.fillText(`Вы ответили правильно на ${rightAnswer} из ${gameData.questions.length} вопросов`, cW / 2, areas.finish.labelTotalAnswerRight.y + 45); + context.fillText(`Результат: ${rightAnswer} из ${gameData.questions.length} ответов верны`, cW / 2, areas.finish.labelTotalAnswerRight.y + 45); // draw labelTotalAnswerPercent let rightAnswerPercentage = Math.ceil(rightAnswer / gameData.questions.length * 100); context.font = "75px Yanone Kaffeesatz"; - context.fillText(`${rightAnswerPercentage}%`, cW / 2, areas.finish.labelTotalAnswerPercent.y + 65); + context.fillText(`Выполнено на ${rightAnswerPercentage}%`, cW / 2, areas.finish.labelTotalAnswerPercent.y + 65); // labelTotalInfo context.font = "50px Yanone Kaffeesatz"; @@ -340,14 +340,14 @@ function draw() { context.fillText(resultInfo, cW / 2, areas.finish.labelTotalInfo.y + 55); // draw btnRestart - context.fillStyle = "#2ed573"; - context.strokeStyle = "#000000"; + context.fillStyle = config.colors.buttonFill; + context.strokeStyle = config.colors.buttonStroke; context.fillRect(buttons.btnRestart.x, buttons.btnRestart.y, buttons.btnRestart.w, buttons.btnRestart.h); context.strokeRect(buttons.btnRestart.x, buttons.btnRestart.y, buttons.btnRestart.w, buttons.btnRestart.h); context.font = "32px Yanone Kaffeesatz"; context.textAlign = "center"; - context.fillStyle = "white"; + context.fillStyle = config.colors.buttonFont; context.fillText(buttons.btnRestart.data, cW / 2, buttons.btnRestart.y + 43); }