Untitled

var socket;
var playing = false;

$(document).ready(function () {
		
		socket = io.connect();

		var music = new Audio('/static/audio/music.mp3');
		music.volume = 0;
		music.play();


		$("#display").css("visibility", "hidden");

		socket.emit("send_record","");
		
		//receive details from server
		socket.on("update_lap_time", function (data) {
			console.log("result")
			$("#display").css("visibility", "visible");
			// if (data.lap == 1){
			// 	$("#player").css("visibility","visible");
			// }
				
			$("#lap"+data.lap).text("Lap"+ data.lap + " Time: " + data.lap_time + " seconds");
			if (data.lap == 2){
				var audio = new Audio('/static/audio/final_lap.mp3');
            	audio.play();
			}
		});

		socket.on("result_sound",function(result){
			console.log("result")
			if (result == "win"){
				var audio = new Audio('/static/audio/win.mp3');
			}
			else{
				var audio = new Audio('/static/audio/bad.mp3');
			}
			audio.play();
		})
		socket.on("update_total_time", function (data) {
			console.log("total time")
			$("#total").text("Total: " + data.total_time + " seconds");
			$("#start-game-button").text("Start");
			$("#playerName").prop("disabled", false);
			playing = false
			socket.emit("send_record",$("#playerName").val().toLowerCase())
		});

		socket.on("overall_best_runs", function(data){
			updateData("#leaderboard-runs",data)
		})

		socket.on("overall_best_laps", function(data){
			updateData("#leaderboard-laps",data)
		})

		socket.on("best_3_runs", function(data){
			updateData("#pb-runs",data)
		})

		socket.on("best_3_laps", function(data){
			updateData("#pb-laps",data)
		})

		socket.on("start_sound",function(data){
			console.log("start")
			var audio = new Audio('/static/audio/start.mp3');
            audio.play();
		})
		
		var duration = 2000;
		var startTime = Date.now();
	
		function fadeIn() {
			var currentTime = Date.now();
			var elapsed = currentTime - startTime;
			
			if (elapsed < duration) {
				var progress = elapsed / duration;
				music.volume = progress;
				requestAnimationFrame(fadeIn);
			} else {
				music.volume = 1; // Ensure final volume is 1
			}
		}
	
		fadeIn();
});

function launchGame() {
	$("#display").css("visibility", "hidden");
	// Emit a custom event along with the data
	if (playing){
		$("#start-game-button").text("Start");
		$("#playerName").prop("disabled", false);
		socket.emit('stop_game');
	}
	else{
		$("#start-game-button").text("Stop");
		$("#playerName").prop("disabled", true);
		socket.emit('start_game');
	}

	$("#lap1").text("");
	$("#lap2").text("");
	$("#lap3").text("");
	$("#total").text("");

	playing = !playing;
}

function updatePlayer(){
	$("#pb-runs").children(".leaderboard-line").remove()
	$("#pb-laps").children(".leaderboard-line").remove()
	socket.emit("send_record",$("#playerName").val().toLowerCase())
}

function updateData(identifier,data){

	$(identifier).children(".leaderboard-line").remove();
	data.forEach((record,index) => {
		var newLine = document.createElement("div");
		newLine.classList.add("leaderboard-line");

		var position = document.createElement("p");
		var name = document.createElement("p");
		var time = document.createElement("p");
		var date = document.createElement("p");

		position.textContent = (index+1).toString() +"."
		name.textContent = record[1]
		time.textContent = record[0]
		date.textContent = record[2]

		newLine.appendChild(position);
		newLine.appendChild(time);
		newLine.appendChild(name);
		newLine.appendChild(date);

		$(identifier).append(newLine);
	});	
}