quizEngine/js/index.js

'use strict';

// Import game configs and questsData -------------------
import config from './config.json'; // game configuration
import gameData from './gameData.json'; // game data

// Import engine libs -----------------------------------
import * as Engine from './engine.js';
import * as Buttons from './buttons.js';
import * as Draw from './draw.js';
import * as Music from './music.js';
import * as Game from './game.js';

// Engine variables -------------------------------------
const DEBUG = config.debug;
let canvas = null; // canvas id
let context = null; // context id
let cW = null; // canvas with
let cH = null; // canvas height
let game = {}; // main game variable
let images = {};
let buttons = {};
let buttonsUi = {};
let music = {};

// Engine init ------------------------------------------
// ------------------------------------------------------
window.onload = function() {
	// set html page language
	document.documentElement.lang = config.lang;

	// set html body background-color
	document.body.style.background = config.colors.back;

	game.orientation = null;
	game.appearanceAplha = 0;
	game.loadedState = false;
	game.finish = false;
	game.currentQuest = 0;
	game.loader = null;

	// init canvas id and sizes
	canvas = document.getElementById('game');
	context = canvas.getContext('2d');
	cW = canvas.width;
	cH = canvas.height;
	if (DEBUG)
		console.log(`Canvas size ${cW} x ${cH}`);
	game.orientation = Engine.setOrientation(canvas);


	// loading Logo image
	let imageLogo = new Image();
	imageLogo.src = "assets/logo.png";
	images.logo = imageLogo;

	// set game loading progress bar
	game.loader = { x: Draw.getCenterH(cW, config.loader.w),
		y: cH - config.loader.h - 100 };
	game.loader.pointer = 0;
	game.loader.direction = true;

	let loadingImages = [];
	loadingImages.push(gameData.result.notPassed, gameData.result.passed);

	for (const [key, value] of Object.entries(gameData.questions)) {
		loadingImages.push(value.image);
	}

	Engine.imagePreloader(loadingImages, function() {
		game.loadedState = true;
		game.showAlpha = 1;
	});

	// TODO: rewrite playMusic() func
	music.music = new AudioContext() || new webkitAudioContext();
	Music.playMusic(config, music.music);

	// shuffle quests and first quest answers
	Engine.shuffle(gameData.questions);
	gameData.questions.forEach(quest => {
		Engine.shuffle(quest.answer);
	});
	
	// set all quest status 'not answered'
	gameData.questions.forEach(element => element.status = null);

	// hover by buttons
	canvas.addEventListener('mousemove', e => {
		let mousePos = Buttons.getMousePos(canvas, e);

		for (const [key, value] of Object.entries(buttonsUi)) {
			if (Buttons.isInside(mousePos, value)) {
				console.log("hover", key)
			}
		}
	}, false);

	// click by buttons
	canvas.addEventListener('click', e => {
		let mousePos = Buttons.getMousePos(canvas, e);

		if (game.loadedState) {
			for (const [key, value] of Object.entries(buttonsUi)) {
				if (Buttons.isInside(mousePos, value)) {
					// Music button
					if (key == "uiMusic") {
						music.music.suspend();

						if (music.music.state == "suspended") {
							music.music.resume();
						}
					}

					// Info button
					if (key == "uiInfo") {
						game.showInfo = true;
					}
				}
			}
		}

		for (const [key, value] of Object.entries(buttons)) {
			if (!game.finish && key != undefined) {
				if (Buttons.isInside(mousePos, value)) {
					Game.checkAnswer(gameData.questions[game.currentQuest], value.data);

					if (game.currentQuest < gameData.questions.length - 1) {
						game.currentQuest += 1;
					}
					else {
						game.finish = true;
						game.showAlpha = 1;
					}
				}
			}
		}

		if (game.finish && buttons.btnRestart != undefined) {
			if (Buttons.isInside(mousePos, buttons.btnRestart)) {
				Game.restartGame(game, gameData.questions);
				delete buttons.btnRestart;
			}
		}
	}, false);

	window.requestAnimationFrame(gameLoop);
};


// GameLoop ---------------------------------------------
// ------------------------------------------------------
function gameLoop(timeStamp) {
	update();
	draw();

	window.requestAnimationFrame(gameLoop);
}

// Game update func -------------------------------------
// ------------------------------------------------------
function update() {
	// appearance effect --------------------------------
	if (game.appearanceAplha >= 0) {
		game.appearanceAplha -= 0.01;
	}

	if (!game.loadedState) {
		if (game.loader.pointer < config.loader.w - 50 && game.loader.direction)
			game.loader.pointer += 1;
		else game.loader.direction = false;

		if (!game.loader.direction) {
			if (game.loader.pointer <= 0) game.loader.direction = true;

			game.loader.pointer -= 1;
		}

		console.log(game.loader.pointer);
	}

	// game ---------------------------------------------
	if (game.loadedState && !game.finish) {
		// NOTE: put your code here
	}

	// finish game --------------------------------------
	if (game.finish) {
		// NOTE: put your code here
	}
}

// Draw to canvas func ----------------------------------
// ------------------------------------------------------
function draw() {
	Draw.clearContext(canvas, config.colors.back); // clean canvas

	// render splash screen -----------------------------
	if (!game.loadedState) {
		context.drawImage(images.logo, Draw.getCenterH(cW, images.logo.width), Draw.getCenterV(cH, images.logo.height));

		context.fillStyle = config.colors.buttonFill;
		context.strokeStyle = config.colors.buttonStroke;
		context.lineWidth = config.colors.strokeSize;

		context.fillRect(game.loader.x + game.loader.pointer, game.loader.y, 50, config.loader.h);
		context.strokeRect(game.loader.x, game.loader.y, config.loader.w, config.loader.h);
	}

	// render game --------------------------------------
	if (!game.finish && game.loadedState) {
		// NOTE: put your code here
	}

	// render result game -------------------------------
	if (game.finish) {
		// NOTE: put your code here
	}

	// draw alpha animation -----------------------------
	if (game.appearanceAplha != null) {
		context.fillStyle =	`rgba(0,0,0,${game.appearanceAplha})`;
		context.fillRect(0, 0, cW, cH);
	}
}