cardGame/public/main.js

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

const cardWidth = 240;
const cardHeight = 360;

const cards = new Image();
const back = new Image();

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

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

	ctx.font = "12px Arial";
	canvas.style.backgroundColor = 'rgb(143 153 150)';
	cards.src = 'images/deck.svg';
	back.src = 'images/uno.svg';

	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){
	
}
socket.on('returnCreateRoom', function (data) {
	console.log('<< returnCreateRoom');
	console.log(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);

		// Room Name
		ctx.fillText(name, 0, 10);

		// Deck
		deck = new Rectangle({
			name: 'deck',
			x: canvas.width-cardWidth/2-40,
			y: canvas.height-cardHeight/2-60,
			width: cardWidth/2,
			height: cardHeight/2,
			fillStyle: "#FF0000"
		});
		deck.draw();
		//ctx.fillRect(canvas.width-cardWidth/2-60, canvas.height/2-cardHeight/4, cardWidth/2, cardHeight/2);

		// Player Name
		ctx.fillText(playerName, 100, 390);
	} else {
		socket.disconnect();
		alert('Rooms are full! Try again later');
	}
});