ui buttons

TODO.md

@@ -1,9 +1,11 @@
 ## TODO:
+- info widget
 - finish game image
 - desktop (landscape) orientation
 - change quest animation
 - button hover animation
 - make docs/
+- make quests editor
 
 ## Done
 - background music [c814f77]

app/config.json

@@ -3,5 +3,5 @@
   "gameVersion": [0, 0, 1],
   "debug": true,
   "loaderWidth": 200,
-  "music": { "src": "music.mp3", "autoplay": true }
+  "music": "music.mp3"
 }

js/index.js

@@ -16,9 +16,10 @@ let cW = null; // canvas with
 let cH = null; // canvas height
 let landscape_orientation = null; // canvas orientation
 let game = {}; // main game variable
-let areas = { game: {}, finish: {} };
+let areas = { splash: {}, game: {}, finish: {} };
 let images = {};
 let buttons = {};
+let buttonsUi = {};
 let music = {};
 
 // Init -------------------------------------------------
@@ -56,10 +57,11 @@ window.onload = function() {
 	game.finish = false;
 	game.currentQuest = 0;
 
-	shuffle(gameData.questions); // shuffle quests
+	// shuffle quests and first quest answers
-	shuffle(gameData.questions[game.currentQuest].answer); // shuffle first quest answers
+	shuffle(gameData.questions);
+	shuffle(gameData.questions[game.currentQuest].answer);
 
-	// присваем всем квестам статус не выполнен
+	// set all quest status 'not answered'
 	gameData.questions.forEach(element => element.status = null);
 
 	// set areas sizes
@@ -91,10 +93,25 @@ window.onload = function() {
 		// TODO: add areas for landscape mode
 	}
 
-	// click by buttons?!
+	// click by buttons
 	canvas.addEventListener('click', function(evt) {
 		let mousePos = getMousePos(canvas, evt);
 
+		if (game.loadedState) {
+			for (const [key, value] of Object.entries(buttonsUi)) {
+				if (isInside(mousePos, value)) {
+					// Music button
+					if (key == "uiMusic") {
+						music.music.suspend();
+
+						if (music.music.state == "suspended") {
+							music.music.resume();
+						}
+					}
+				}
+			}
+		}
+
 		for (const [key, value] of Object.entries(buttons)) {
 			if (!game.finish && key != undefined) {
 				if (isInside(mousePos, value)) {
@@ -164,6 +181,11 @@ function update() {
 		answerButtonsArray.forEach(function callback(value, index) {
 			value.data = gameData.questions[game.currentQuest].answer[index];
 		});
+
+		buttonsUi.uiMusic = { x: areas.game.btnUi.x, y: areas.game.btnUi.y, w: areas.game.btnUi.h, h: areas.game.btnUi };
+		buttonsUi.uiInfo = { x: areas.game.btnUi.x, y: areas.game.btnUi.y, w: areas.game.btnUi.h, h: areas.game.btnUi.h };
+		buttonsUi.uiMusic = { x: areas.game.btnUi.w + areas.game.btnUi.x - areas.game.btnUi.h, y: areas.game.btnUi.y, w: areas.game.btnUi.h, h: areas.game.btnUi.h };
+		buttonsUi.uiSfx = { x: areas.game.btnUi.w + areas.game.btnUi.x - (areas.game.btnUi.h * 2) - 10, y: areas.game.btnUi.y, w: areas.game.btnUi.h, h: areas.game.btnUi.h };
 	}
 
 	if (game.finish) {
@@ -254,6 +276,16 @@ function draw() {
 		answerButtonsArray.forEach(function callback(value) {
 			context.fillText(value.data, cW / 2, value.y + 35);
 		});
+
+		// draw UI buttons
+		context.fillStyle = "purple";
+		context.strokeStyle = "navy";
+		context.lineWidth = 2;
+
+		for (const [key, value] of Object.entries(buttonsUi)) {
+			context.fillRect(value.x, value.y, value.w, value.h);
+			context.strokeRect(value.x, value.y, value.w, value.h);
+		}
 	}
 
 	// render result game -------------------------------
@@ -300,6 +332,7 @@ function draw() {
 		context.fillStyle = "white";
 		context.fillText(buttons.btnRestart.data, cW / 2, buttons.btnRestart.y + 43);
 	}
+
 	// draw game areas ----------------------------------
 	if (DEBUG && !game.finish && game.loadedState) {
 		context.strokeStyle = "red";

js/music.js

@@ -1,20 +1,18 @@
 export function playMusic(config, music) {
 	let request = new XMLHttpRequest();
 
-	request.open("GET", `assets/sfx/${config.music.src}`, true);
+	request.open("GET", `assets/sfx/${config.music}`, true);
     request.responseType = "arraybuffer";
-    request.onload = function(){
+    request.onload = function() {
         music.decodeAudioData(request.response, onDecoded);
     }
     
     function onDecoded(buffer) {
-        var bufferSource = music.createBufferSource();
+        let bufferSource = music.createBufferSource();
         bufferSource.buffer = buffer;
         bufferSource.connect(music.destination);
         bufferSource.loop = true;
-
+    	bufferSource.start();
-        if (config.music.autoplay)
-        	bufferSource.start();
     }
     
     request.send();