add colors to config

TODO.md

@@ -1,4 +1,5 @@
 ## TODO:
+- image border
 - info widget
 - finish game image
 - desktop (landscape) orientation
@@ -7,7 +8,7 @@
 - make docs/
 - make quests editor
 
-## Done
+## DONE:
 - background music [c814f77]
 - several correct answer [498ab55]
 - loading all quest images with loading [b8aa4b6]

app/styles.css

@@ -19,7 +19,7 @@
 html { height: 100%; }
 
 body {
-	background-color: #6E5967;
+	background-color: #2f3542;
 	font-family: 'Yanone Kaffeesatz';
 	padding: 0;
 	margin: 0;

js/draw.js

@@ -1,17 +1,12 @@
 // функции рисоввания
 
-export function clearContext(canvas) {
-	// var:canvas -- канвас, на котором рисуем
+export function clearContext(canvas, color) {
 	let cW = canvas.width;
 	let cH = canvas.height;
 
 	let context = canvas.getContext('2d');
 
-	let graBack = context.createLinearGradient(cW / 2, 0, cW / 2, cH);
-	// graBack.addColorStop(0, config.scene.backGradient[0]);
-	// graBack.addColorStop(1, config.scene.backGradient[1]);
-	// context.fillStyle = graBack;
-	context.fillStyle = "#444444";
+	context.fillStyle = color;
 	context.fillRect(0, 0, cW, cH);
 }
 

js/index.js

@@ -222,7 +222,7 @@ function update() {
 
 // Draw to canvas func ----------------------------------
 function draw() {
-	clearContext(canvas); // clean canvas
+	clearContext(canvas, config.colors.back); // clean canvas
 
 	// render splash screen -----------------------------
 	if (!game.loadedState) {
@@ -248,13 +248,13 @@ function draw() {
 			// change progress item color by status answer
 			switch (gameData.questions[i].status) {
 				case null:
-					context.fillStyle = "gray";
+					context.fillStyle = config.colors.answer.notPassed;
 					break;
 				case true:
-					context.fillStyle = "green";
+					context.fillStyle = config.colors.answer.right;
 					break;
 				case false:
-					context.fillStyle = "red";
+					context.fillStyle = config.colors.answer.wrong;
 					break;
 			}
 
@@ -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 = "purple";
-		context.strokeStyle = "navy";
+		context.fillStyle = "#2ed573";
+		context.strokeStyle = "#000000";
 		context.lineWidth = 2;
 		
 		let answerButtonsArray = [buttons.answerButton0, buttons.answerButton1,
@@ -296,8 +296,8 @@ function draw() {
 		});
 
 		// draw UI buttons
-		context.fillStyle = "purple";
-		context.strokeStyle = "navy";
+		context.fillStyle = "#2ed573";
+		context.strokeStyle = "#000000";
 		context.lineWidth = 2;
 
 		for (const [key, value] of Object.entries(buttonsUi)) {
@@ -340,8 +340,8 @@ function draw() {
 		context.fillText(resultInfo, cW / 2, areas.finish.labelTotalInfo.y + 55);
 		
 		// draw btnRestart
-		context.fillStyle = "purple";
-		context.strokeStyle = "navy";
+		context.fillStyle = "#2ed573";
+		context.strokeStyle = "#000000";
 		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);