Newer
Older
wwwcats / public_html / init.js
var REVISION = "9";
var gameState;

function initChangeLog() {
	let xhr = new XMLHttpRequest();
	xhr.open("GET", "changelog.html");
	xhr.onreadystatechange = () => {
		if(xhr.status != 200) {
			console.error("Fail loading of changelog");
			return false;
		}

		document.getElementById("changelog-container").innerHTML = xhr.responseText;
	}
	xhr.send();
}

function initAutoFillLoginForm() {
	let fields = localStorage.getItem("login-field");
	if(fields) {
		fields = JSON.parse(fields);
		$("#welcome-username").val(fields.name);
		$("#welcome-lobby").val(fields.lobby);
	} 
}

function commandBtnProcessing() {
	setInterval(() => {
		let hash = document.location.hash;
		if(hash.indexOf("cmd:") == -1) {
			return;
		}

		document.location.hash = "";
		cmd = hash.split(":")[1];
		gameState.send(cmd);
	}, 200);
}

(function () {

	// Everything that runs as soon as the page loads; sets up the page and handles the
	// connection to the server.

	gameState = new GameState();

	$( document ).ready(function () {
		// Set up the game

		initAutoFillLoginForm();

		$("#welcome-username, #welcome-lobby").on("keyup", function(e) {
			if(e.keyCode === 13) {
				joinGame();
			}
		});

		commandBtnProcessing();

		// Check that the JS and HTML have matching versions
		// (caching is weird)
		var htmlRev = $("#REVISION").val();
		if (htmlRev != REVISION) {
			setTimeout(function() {
				location.reload();
			}, 1500);
			return;
		}

		initChangeLog();
		
		// Load assets
		var assets = [
			"wood.jpg",
			"card_back.png",
			"card_defuse.png",
			"card_exploding.png",
			"card_nope.png",
			"card_skip.png",
			"card_attack.png",
			"card_see3.png",
			"card_favour.png",
			"card_shuffle.png",
			"card_random1.png",
			"card_random2.png",
			"card_random3.png",
			"card_random4.png",
			"card_random5.png",
			"atomic.ogg"
		];
		var promises = [];
		var assetsLoaded = 0;

		for (var i = 0; i < assets.length; i++) {
			(function(url, promise) {
				let ext = url.split(".").pop();
				var el;
				if (ext == "jpg" || ext == "png") {
					el = new Image();
				} else {
					el = new Audio();
				}

				el.onload = function() {
					// Increment the loading counter to convince the user we're doing something
					assetsLoaded += 1;
					document.getElementById("loading-assets").innerHTML = assetsLoaded;

					promise.resolve();
				};
				if (ext == "ogg") {
					el.oncanplaythrough = el.onload;
				}

				el.src = "assets/"+url;

				gameState.loadAsset(url, el);
			})(assets[i], promises[i] = $.Deferred());
		}

		// Once all the promises have resolved (all assets loaded), call the function to 
		// display the welcome page.
		$.when.apply($, promises).done(welcomePage);
	});

	function welcomePage() {
		// Transition loading screen -> welcome page

		$("#welcome-join").bind("click touchstart", joinGame);

		$("#loading").toggleClass("reveal");
		$("#welcome").toggleClass("reveal");
	}

	function joinGame() {
		// Communicate with the server, make sure we join the game ok, render the board

		if (gameState.conn != null) {
			alert(strings["already_connecting"]);
			return;
		}
			
		const defaultLobbyName = "lobby" + Math.floor(Math.random() * 10000);
		const defaultUserName = Math.floor(Math.random() * 10000) + "_guest";

		gameState.lobby = $("#welcome-lobby").val() || defaultLobbyName;
		gameState.name  = $("#welcome-username").val() || defaultUserName;

		localStorage.setItem("login-field", JSON.stringify({
			name: gameState.name,
			lobby: gameState.lobby
		}));

		if (gameState.name.includes(" ")) {
			alert(strings["one_word"]);
			return;
		}
		if (gameState.lobby.includes(" ")) {
			alert(strings["lobby_one_word"]);
			return;
		}

		gameState.conn = new WebSocket("ws://" + location.host + "/ws");

		gameState.conn.onopen = function () {
			gameState.conn.send("join_lobby " + gameState.lobby + " " + gameState.name);
		}

		gameState.conn.onclose = function () {
			alert(strings["conn_closed"]);
			location.reload();
		};

		gameState.conn.onmessage = function(ev) {
			// We wrap this in an anonymous function so that 'this'
			// will refer to the GameState object and not the WebSocket
			// (I don't have a clue how javascript OOP works)
			gameState.readFromServer(ev);
		};
	}

	document.addEventListener("DOMContentLoaded", e => {
		document.querySelector(".toggle-gamebar").addEventListener("click", e => {
			document.querySelector("#sidebar").classList.add("show");
		});

		document.querySelector(".toggle-gamelog").addEventListener("click", e => {
			document.querySelector(".game-log-wrap").classList.add("show");
		});

		document.querySelector("#sidebar .btn-close").addEventListener("click", e => {
			document.querySelector("#sidebar").classList.remove("show");
		});

		document.querySelector(".game-log-wrap .btn-close").addEventListener("click", e => {
			document.querySelector(".game-log-wrap").classList.remove("show");
		});
	});
})();