1_viewer.js

const score=$("#score");
const question=$("#question");

var contestants=[];
var questions=[];
var socket = io.connect("http://"+document.domain+":"+location.port);
var idq=-1;
var ids=0;
var sfx = new Audio();
sfx.type="audio/wav";

function b64EncodeUnicode(str) {
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
    function toSolidBytes(match, p1) {
      return String.fromCharCode('0x' + p1);
  }));
}

function b64DecodeUnicode(str) {
  return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {
    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
  }).join(''))
}

socket.on("disconnect",function(){
	socket.connect();
})

// socket.on("connect",function(){
// 	alert("connected!");
// })

var sfx = {	'correct': new Audio('/static/audio/KD_right.wav'),
			'wrong': new Audio('/static/audio/KD_sai.wav'),
			'done': new Audio('/static/audio/KD_VD_sau_phần_thi.wav'),
			'start': new Audio('/static/audio/KD_bắt_đầu.wav'),
			'open': new Audio('/static/audio/KD_start.wav'),
			'60s': new Audio('/static/audio/KD_60s.wav')
		}

const nextques=function(){
	//disabled(nextques);
	++ idq;
	if ((idq > 11)) {
		question.html("Done!");
		$("#timer_slider").stop();
		setTimeout(function(){sfx['done'].pause();sfx['done'].currentTime = 0;sfx['done'].play();},2000)
		sfx['60s'].pause(); sfx['60s'].currentTime = 0;
	}
	else{
	// if (ids > 3) {
	// 	disabled(correctb);
	// 	disabled(wrongb);
	// 	// disabled(nextques);
	// 	question.html("Done");
	// }
	console.log({ids: ids, idq: idq});
	question.html(questions[ids][idq]);
};
};

const checksound = () => {
	var ok = 1;
	console.log('check')
	Object.keys(sfx).map(s => {ok = ok && (sfx[s].readyState === 4); console.log(s, sfx[s].readyState)})
	if(ok){
		send_mess("viewer", "controller", "sound_ok")
		console.log('ok')
	}
	else{
		setTimeout(() => {checksound()}, 2000)
	}
}

checksound()

const actived = (index) => {
	for(var i=1;i<=4;i++){
		$(`#contestant${parseInt(i)}`).parent().removeClass("active");
	}
	$(`#contestant${parseInt(index)}`).parent().addClass("active");
	score.html(parseInt(contestants[parseInt(parseInt(index)-1)].score));
	question.html('Vòng thi khởi động của ' + contestants[parseInt(index) - 1].name)
	if (index > 4) {
		question.html("Vòng thi khởi động kết thúc :3");
		return;
	}
};

const nextcontestant=function(){
	++ ids;
	idq = -1;
	actived(ids + 1);
	///Chưa chọn đc âm thanh
	$('#timer_slider').animate({width:'0px'},0);
	$('#timer_slider').animate({opacity:'1'},0);
};

const start=function() {
	setTimeout(function(){
		nextques();
		// sfx['60s'].pause()
		// sfx['60s'].currentTime = 0
		sfx['60s'].play()
		$('#timer_slider').animate({width:'900px'},60000,"linear",function(){
			setTimeout(function(){
				sfx['done'].pause();
				sfx['done'].currentTime = 0
				sfx['done'].play();
			},2000);
		});
		$('#timer_slider').animate({opacity:'0'},1000);
	},8000);
	
	//alert('ok');
	//tick(60);
};

async function send_mess(sender,receiver,content){
	var data=[];
	data.push({
		sender: sender,
		receiver: receiver,
		content: content
	});
	data=JSON.stringify(data);
	data=b64EncodeUnicode(data);
	await socket.send(data)
};

const update = async () => {
	await $.get("/apix/read_file",{file: "static/data/status.txt"}).then((res) => {
		res = b64DecodeUnicode(res);
		res = JSON.parse(res);
		console.log(res);
		idq=res[0].curques;
		ids=(res[0].curcon==-1)?(0):(res[0].curcon);
	});
	$.get("/apix/read_file",{file:"static/data/contestants.txt"}).then((res) => {
		res = b64DecodeUnicode(res);
		contestants = JSON.parse(res);
		console.log(contestants);
		score.html(contestants[ids].score);
		question.html("Phần thi khởi động của " + contestants[ids].name);
		for(index in contestants){
			let element=$(`#contestant${parseInt(parseInt(index)+1)}`);
			//let element    = $(`#contestant_${parseInt(index) + 1}`);
			let contestant=contestants[index];
			element.html(`${contestant.name} (${contestant.score})`);
			$("#name" + parseInt(parseInt(index) + 1)).html(contestants[index].name);
			$("#score" + parseInt(parseInt(index) + 1)).html(contestants[index].score);
		};
		actived(parseInt(ids)+1);
	});
	$('#timer_slider').animate({width:'0px'},0);
	$('#timer_slider').animate({opacity:'1'},0);
}

const loadques = () => {
	$.get("/apix/read_file",{file:"static/data/1_question.txt"}).then((callback) => {
		questions=b64DecodeUnicode(callback);
		questions=JSON.parse(questions);
		questions = questions.ques;
		console.log(questions);
	});
}

const correct = () => {
	$.get("/apix/read_file",{
		file:"static/data/contestants.txt"
	}).then((res) => {
		res = b64DecodeUnicode(res);
		contestants= JSON.parse(res);
		console.log(contestants);
		sfx["correct"].pause();
		sfx['correct'].currentTime = 0;
		sfx["correct"].play();
		score.html(contestants[ids].score);
		$(`#contestant${parseInt(parseInt(ids) + 1)}`).html(`${contestants[ids].name} (${contestants[ids].score} points)`)
		$("#score" + parseInt(parseInt(ids) + 1)).html(contestants[ids].score);
		nextques();
	});
}

socket.on("message",(msg) => {
	msg=b64DecodeUnicode(msg);
	msg=JSON.parse(msg);
	let content=msg[0].content;
	let sender=msg[0].sender;
	let receiver=msg[0].receiver;
	//alert(content);
	if(receiver=="viewer"){
		switch(content){
			case "update":{
				update();
			};
			break;
			case "loadques":{
				loadques();
			};
			break;
			case "correct":{
				correct();
			};
			break;
			case "wrong":{
				nextques();
				sfx['wrong'].pause()
				sfx['wrong'].currentTime = 0
				sfx['wrong'].play()
			};
			break;
			case "start":{
				sfx['start'].pause()
				sfx['start'].currentTime = 0
				sfx['start'].play()
				checksound()
				start();
			};
			break;
			case "nextcon":{
				nextcontestant();
			};
			break;
			case "test":{
				send_mess("viewer","controller","ok");
			};
			break;
		};
	}
});

if(window.outerWidth < 1200){
	$("#scoretab").hide()
}

$(document).ready(function(){
	update()
});