cardGame/public/main.js

const socket = io({autoConnect: false});
const canvas = document.getElementById('canvas');;

let room;
let hand = [];
let turn;
let playerName;

// Canvas Initialisation
init();
function init() {
	console.log('init');

	// Init board here? Or keep in board JS?

	document.addEventListener('touchstart', onclick, false);
	document.addEventListener('click', onclick, false);
	playerName = getCookie('playerName');

	if (playerName == null) {
		playerName = prompt('Enter your name: ', 'Guest');

		if (playerName == null || playerName == "") {
			playerName = 'Guest';
		}

		setCookie('playerName', playerName, 24 * 3600);
	}

	console.log('>> socket.connect()');
	socket.connect();
}


// Cookies are temp, will need logins, etc.
function setCookie(name, value, seconds) {
	let date = new Date();
	date.setTime(date.getTime() + (seconds * 1000));
	let expires = "expires=" + date.toUTCString();
	document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

function getCookie(name) {
	name += "=";
	let cookies = document.cookie.split(';');

	for(let i = 0; i < cookies.length; i++) {
		let cookie = cookies[i];
		while (cookie.charAt(0) == ' ') {
			cookie = cookie.substring(1);
		}
		if (cookie.indexOf(name) == 0) {
			return cookie.substring(name.length, cookie.length);
		}
	}
	return null;
}


// Connect
socket.on('connect', connect);
function connect(){
	console.log('+ Frontend Connect');
}

// getRooms
function requestRooms(filter = 'all'){
	console.log('>> requestRooms:'+filter);
	socket.emit('requestRooms', filter);
}
function clearRoomList(){
	// Create a list of Rooms
	let list = document.getElementById('joinRoomButtons');
	// Empty the ul, as to not dupe room buttons, or have rooms that's don't exist
	list.innerHTML = "";
}
function returnRooms(data){
	clearRoomList();

	// Create a list of Rooms
	let list = document.getElementById('joinRoomButtons');

	let roomCount = Object.keys(data['roomData']).length;
	if(roomCount < 1){
		alert('No Rooms');
		return 0;
	}

	let rooms = data['roomData'];
	// Loops the returned rooms, and add to the list (to be joinable)
	for (let room in rooms) {
		//console.log(rooms[room].name);

		// Making something akin to this:
		//<li><button onclick="requestRoom(1)">Room 1</button></li>
		let button	= document.createElement('button');
			button.appendChild(document.createTextNode(rooms[room].name));
			button.setAttribute("onclick","requestJoinRoom("+rooms[room].id+");");
		let li		= document.createElement('li');
			li.appendChild(button);

		list.appendChild(li);
	}

}
socket.on('returnRooms', function (data) {
	console.log('<< returnRooms');
	returnRooms(data);
});


// createRoom
function requestCreateRoom(){
	console.log('+ requestCreateRoom');
	socket.emit('requestCreateRoom', playerName);
}
function returnCreateRoom(data){
	console.log(data);
	if(!data.success){
		alert(data.message);
	}
}
socket.on('returnCreateRoom', function (data) {
	console.log('<< returnCreateRoom');
	returnCreateRoom(data);
});


// joinRoom
function requestJoinRoom(roomId) {
	console.log('+ requestJoinRoom '.roomId);
	socket.emit('requestJoinRoom', playerName, roomId);
	room = 0;
	hand = [];
	turn = false;
	console.log('>> Room Request');
}

socket.on('responseJoinRoom', function (name) {
	if (name != 'error') {
		room = name;
		console.log('<< Room Response: ' + name);
		//board.drawBoard();
	} else {
		socket.disconnect();
		alert('Rooms are full! Try again later');
	}
});

// getCards (TODO: remove if test below is a-okay)
function requestGetCards(deckId, playerId){
	console.log('+ requestGetCards');
	socket.emit('requestGetCards', deckId, playerId);
}
function responseGetCards(data){
	console.log(data);
	if(!data.success){
		alert(data.message);
	}
}
socket.on('responseGetCards', function (data) {
	console.log('<< responseGetCards');
	responseGetCards(data);
});

// When game starts, loadBoard to add data for clients
// and display the starting board
function responseStartGame(data){
	if(!data.success){
		alert(data.message);
		return false;
	}
	return data;
}
socket.on('responseStartGame', function (data) {
	console.log('<< responseStartGame');
	responseStartGame(data);
	if(data.success !== true){
		alert('Err with responseStartGame. '+data.message);
	}
	// Pass only the data to loadBoard
	loadBoard(data.message);
});