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 music = {};

// Engine init ------------------------------------------
// ------------------------------------------------------
window.onload = function() {
	Engine.Init(game);

	// 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);

		// NOTE: put your code here
	}, false);

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

		// NOTE: put your code here
	}, 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;
	}

	// game loading -------------------------------------
	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;
		}
	}

	// 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);
	}
}