"use strict";

const boardRatio = 1.5;
const ballRadius = 0.01, padWidth = 0.01, padHeight = 0.15, padX = 0.01;
const padBaseSpeed = 0.8;

let gameId;
let cvs, ctx, cvsW, cvsH, bdW, bdH, bdltX, bdltY;
let socket;
let playing = false, flip = false;
let ballX, ballY, ballVX, ballVY;
let padPos, padVel, pad2Pos, pad2Vel;

function redraw() {
	ctx.fillStyle = "#000000";
	ctx.fillRect(0, 0, cvsW, cvsH);

	redrawFast();
}

function calcFlippedX(x) {return bdltX + bdW * (flip ? 1 - x : x);}
function calcY(y) {return bdltY + bdH * y;}

function calcLeftPadY() {return calcY((flip ? pad2Pos : padPos) - padHeight / 2);}
function calcRightPadY() {return calcY((flip ? padPos : pad2Pos) - padHeight / 2);}

function redrawFast() {
	ctx.strokeStyle = "#ffffff";
	ctx.lineWidth = 2;
	ctx.strokeRect(bdltX - 1, bdltY - 1, bdW + 2, bdH + 2);

	ctx.lineWidth = 1;
	ctx.beginPath();
	ctx.moveTo(bdltX + bdW / 2 | 0, bdltY);
	ctx.lineTo(bdltX + bdW / 2 | 0, bdltY + bdH);
	ctx.stroke();

	if (playing) {
		ctx.fillStyle = "#ffffff";
		ctx.beginPath();
		ctx.arc(calcFlippedX(ballX), calcY(ballY), ballRadius * bdW, 0, 2 * Math.PI);
		ctx.rect(bdltX + bdW * padX, calcLeftPadY(), bdW * padWidth, bdH * padHeight);
		ctx.rect(bdltX + bdW * (1 - padX - padWidth), calcRightPadY(), bdW * padWidth, bdH * padHeight);
		ctx.fill();
	}
}

function undrawElements() {
	ctx.fillStyle = "#000000";
	ctx.beginPath();
	ctx.rect(
		calcFlippedX(ballX) - ballRadius * bdW - 2, calcY(ballY) - ballRadius * bdW - 2,
		2 * ballRadius * bdW + 4, 2 * ballRadius * bdW + 4);
	ctx.rect(
		bdltX + bdW * padX - 2, calcLeftPadY() - 2,
		bdW * padWidth + 4, bdH * padHeight + 4);
	ctx.rect(
		bdltX + bdW * (1 - padX - padWidth) - 2, calcRightPadY() - 2,
		bdW * padWidth + 4, bdH * padHeight + 4);
	ctx.fill();
}

function resizeHandler() {
	const rect = cvs.getBoundingClientRect();
	cvsW = cvs.width = rect.width;
	cvsH = cvs.height = rect.height;
	// I believe this stuff is correct.
	if (cvsH * boardRatio > cvsW) {
		bdW = cvsW;
		bdH = bdW / boardRatio | 0;
		bdltX = 2;
		bdltY = (cvsH - bdH) / 2 + 2 | 0;
		bdW -= 4; bdH -= 4;
	} else {
		bdH = cvsH;
		bdW = boardRatio * bdH | 0;
		bdltX = (cvsW - bdW) / 2 + 2 | 0;
		bdltY = 2;
		bdW -= 4; bdH -= 4;
	}

	redraw();
}

function displayStatus(msg) {
	document.getElementById("status").innerHTML = msg;
}

function displayScore(score) {
	document.getElementById("score").classList.remove("invisible");
	document.getElementById("score-left").innerHTML = score[0];
	document.getElementById("score-right").innerHTML = score[1];

	setTimeout(function() {
		document.getElementById("score").classList.add("invisible");
	}, 2000);
}

function openGame() {
	socket = io();
	socket.on("redirect", function(url) {
		location.href = url;
	});

	socket.on("status", function(msg) {
		displayStatus(msg);
	});

	socket.on("score", function(score) {
		displayScore(score);
	});

	socket.on("join", function() {
		playSound("join");
	});

	socket.on("leave", function() {
		playSound("leave");
	});

	socket.on("othermiss", function() {
		playSound("score");
	});

	socket.on("bounce", function() {
		playSound("bounce");
	});

	socket.on("serve", function(side, x, y, initServe) {
		playing = true;
		flip = side == "right";
		ballX = x; ballY = y;
		padPos = pad2Pos = 0.5;
		redraw();
		if (!initServe) playSound("ready");
	});

	socket.on("stop", function() {
		playing = false;
		stopPhysicsLoop();
		stopGraphicsLoop();
		redraw();
	});

	socket.on("startBall", function() {
		initPhysics();
		ballVX = -0.5 / boardRatio;
		ballVY = -0.5;
		startPhysicsLoop();
		startGraphicsLoop();
		playSound("start");
	});

	socket.on("start", function() {
		initPhysics();
		ballVX = 0.5 / boardRatio;
		ballVY = -0.5;
		startPhysicsLoop();
		startGraphicsLoop();
		playSound("start");
	});

	socket.on("padvec", function(pos, vel) {
		pad2Pos = pos;
		pad2Vel = vel;
	});

	socket.on("ballvec", function(x, y, vx, vy) {
		ballX = x; ballY = y;
		ballVX = vx; ballVY = vy;
	});

	socket.emit("open", gameId);
}

let graphicsLoopId = null, loopPhysics = false;

function startGraphicsLoop() {
	// undrawElements();
	redraw();  // TODO: redrawFast
	graphicsLoopId = requestAnimationFrame(startGraphicsLoop);
}

function stopGraphicsLoop() {
	if (graphicsLoopId == null) return;
	cancelAnimationFrame(graphicsLoopId);
	graphicsLoopId = null;
}

function startPhysicsLoop() {
	let prev = performance.now();

	loopPhysics = true;
	function tick() {
		if (!loopPhysics) {
			return;
		}

		const now = performance.now();
		const info = advancePhysics((now - prev) / 1e3);
		prev = now;

		if (info.bounce || info.otherBounce) {
			playSound("bounce");
		}
		if (info.bounce || info.ourSide) {
			socket.emit("ballvec", ballX, ballY, ballVX, ballVY);
		}
		if (info.bounce) {
			socket.emit("bounce");
		}

		if (ballX < -ballRadius) {
			socket.emit("ballout");
			stopPhysicsLoop();
			playSound("miss");
		}

		requestAnimationFrame(tick);
	};
	requestAnimationFrame(tick);
}

function stopPhysicsLoop() {
	loopPhysics = false;
}

function initPhysics() {
	ballX = ballY = 0.5;
	ballVX = ballVY = 0;
	padPos = pad2Pos = 0.5;
	padVel = pad2Vel = 0;
}

// -1 <= frac <= 1
function padHitAdjustCurve(frac) {
	// ✨
	const a = 0.8, b = 0.12;
	const alpha = b / a**3;
	const beta = (1 - alpha) / (1 - a)**2;
	const x = Math.abs(frac);
	return Math.sign(frac) * (alpha * x**3 + (x > a) * beta * (x - a)**2);
}

// Returns {bounce, otherBounce, ourSide : Bool}
function advancePhysics(deltaT) {
	const ret = {bounce: false, otherBounce: false, ourSide: false};

	let newballX = ballX + ballVX * deltaT;
	let newballY = ballY + ballVY * deltaT;
	const newpadPos = padPos + padVel * deltaT;
	const newpad2Pos = pad2Pos + pad2Vel * deltaT;

	if (newballY <= ballRadius) {
		const t = (ballRadius - ballY) / ballVY;
		newballY = ballY + ballVY * t + (-ballVY) * (deltaT - t);
		ballVY = -ballVY;
	} else if (newballY >= 1 - ballRadius) {
		const t = (1 - ballRadius - ballY) / ballVY;
		newballY = ballY + ballVY * t + (-ballVY) * (deltaT - t);
		ballVY = -ballVY;
	}

	function bounceLeft(x, y, vx, vy, pady, padvy) {
		if (x + vx * deltaT > padX + padWidth + ballRadius) return null;

		const t = (padX + padWidth + ballRadius - x) / vx;
		if (Math.abs((y + t * vy) - pady) >= padHeight / 2 + ballRadius) return null;

		const frac = ((y + t * vy) - pady) / (padHeight / 2 + ballRadius);
		const angAdj = Math.PI * 0.15 * padHitAdjustCurve(frac);
		const curAng = Math.atan2(vy, -vx);  // normal outgoing angle
		const newAng = Math.max(-0.45 * Math.PI, Math.min(0.45 * Math.PI, curAng + angAdj));
		const speed = Math.hypot(vx, vy);
		const newvx = speed * Math.cos(newAng);
		// TODO: not sure if simply adding of padvy to newvy is a good idea
		const newvy = speed * Math.sin(newAng) + 0.1 * Math.abs(frac) * padvy;
		const newx = x + vx * t + newvx * (deltaT - t);
		const newy = y + vy * t + newvy * (deltaT - t);

		return [newx, newy, newvx, newvy];
	}

	let bounce = bounceLeft(ballX, ballY, ballVX, ballVY, padPos, padVel);
	if (bounce != null) {
		newballX = bounce[0];
		newballY = bounce[1];
		ballVX = bounce[2];
		ballVY = bounce[3];
		ret.bounce = true;
	}

	bounce = bounceLeft(1 - ballX, ballY, -ballVX, ballVY, pad2Pos, pad2Vel);
	if (bounce != null) {
		newballX = 1 - bounce[0];
		newballY = bounce[1];
		ballVX = -bounce[2];
		ballVY = bounce[3];
		ret.otherBounce = true;
	}

	// If the ball has come to our side, send a ballvec
	if (ballX >= 0.5 && newballX < 0.5) {
		ret.ourSide = true;
	}

	ballX = newballX;
	ballY = newballY;
	padPos = newpadPos;
	pad2Pos = newpad2Pos;

	return ret;
}

const soundMap = {};

function preloadSounds() {
	const names = ["bounce", "leave", "ready", "start", "join", "miss", "score"];
	const types = [["audio/ogg", "ogg"], ["audio/mpeg", "mp3"], ["audio/wav", "wav"]];
	for (let i = 0; i < names.length; i++) {
		const audio = new Audio();
		for (let j = 0; j < types.length; j++) {
			const source = document.createElement("source");
			source.type = types[j][0];
			source.src = "/snd/" + names[i] + "." + types[j][1];
			audio.appendChild(source);
		}
		soundMap[names[i]] = audio;
		audio.preload = "auto";
	}
}

const lastSoundStampMap = {};

function playSound(name) {
	const now = performance.now();
	console.log("playSound(\"" + name + "\")");
	if (lastSoundStampMap[name] == null || now - lastSoundStampMap[name] >= 500) {
		soundMap[name].play();
	}
	lastSoundStampMap[name] = now;
}

function setupBindings() {
	let up = false, down = false;

	function padUpdate() {
		padVel = (down - up) * padBaseSpeed;
		socket.emit("padvec", padPos, padVel);
	}

	window.addEventListener("keydown", function(ev) {
		if (ev.key == "w" || ev.key == "ArrowUp") up = true;
		else if (ev.key == "s" || ev.key == "ArrowDown") down = true;
		padUpdate();
	});

	window.addEventListener("keyup", function(ev) {
		if (ev.key == "w" || ev.key == "ArrowUp") up = false;
		else if (ev.key == "s" || ev.key == "ArrowDown") down = false;
		padUpdate();
	});

	window.addEventListener("blur", function() {
		up = down = false;
		padUpdate();
	});
}

window.addEventListener("load", function() {
	gameId = document.location.href.replace(/.*\//, "");

	cvs = document.getElementById("cvs");
	ctx = cvs.getContext("2d");

	resizeHandler();

	setupBindings();

	preloadSounds();

	openGame();
});

let resizeDebounceTimeout = null;
window.addEventListener("resize", function() {
	if (resizeDebounceTimeout != null) return;
	resizeDebounceTimeout = setTimeout(function() {
		resizeDebounceTimeout = null;
		resizeHandler();
	}, 50);
});

// vim: set sw=4 ts=4 noet: