Clean up game element

10 files changed, 99 insertions, 39 deletions

diff --git a/scripts/client.js b/scripts/client.js
index 42ca5be..4d27bc5 100644
--- a/scripts/client.js
+++ b/scripts/client.js
@@ -1,5 +1,5 @@
 'use strict';
-const VERSION = "1.0.0";
+const VERSION = "1";
 
 const DefaultUserOps = {
 	color: {
@@ -51,8 +51,10 @@ class Client{
 		this.socket.addEventListener("menu", this.menuMsg.bind(this));
 		this.socket.addEventListener("game", this.gameMsg.bind(this));
 		this.socket.addEventListener("chat", this.chatMsg.bind(this));
+		this.socket.addEventListener("ping", this.pingMsg.bind(this));
 
 		this.lobby = new Lobby(document.getElementsByClassName("lobby")[0], this.socket);
+		this.lobby.setState("Connecting", "loading", this.socket.server);
 
 		this.drag = new MultiDrag();
 		
@@ -111,8 +113,8 @@ class Client{
 				this.settings.cleanup();
 				this.gameOptions.cleanup();
 				
-				this.settings = new Settings(m.data.user);
-				this.gameOptions = new Settings(m.data.game);
+				//this.settings = new Settings(m.data.user);
+				//this.gameOptions = new Settings(m.data.game);
 
 				this.gameOptions.putSettings(this.lobby.top.newGame);
 				
@@ -131,21 +133,32 @@ class Client{
 	menuMsg (e)
 	{
 		let m = e.detail;
-		this.lobby[m.type](m.data);
+
+		if (LOBBY_RPC.includes(m.type))
+			this.lobby[m.type](m.data);
 	}
 
 	// Game switch, called when in game and a message arrives from the server
 	gameMsg (e)
 	{
 		let m = e.detail;
-		this.table[m.type](m.data);
+
+		if (TABLE_RPC.includes(m.type))
+			this.table[m.type](m.data);
 	}
 
 	// Callback when a chat event is recieved from the server
 	chatMsg (e)
 	{
 		let m = e.detail;
-		this.chat[m.type](m.data);
+
+		if (CHAT_RPC.includes(m.type))
+			this.chat[m.type](m.data);
+	}
+
+	pingMsg(e)
+	{
+		this.socket.send("pong", "");
 	}
 
 	// Reset the lobby and table, then attempt to reopen the connection to the server.
@@ -157,10 +170,10 @@ class Client{
 		this.socket.init();
 	}
 
-	joinGame(id, pass = "")
+	joinGame(id)
 	{
 		this.lobby.setState("Joining...", "loading", this.socket.server);
-		this.socket.send("join", {id: id, pass: pass});
+		this.socket.send("join", {id: id, pass: this.lobby.games[id].getPass()});
 	}
 
 	leaveGame()
diff --git a/scripts/gui/chat.js b/scripts/gui/chat.js
index 7cd1ae2..90259e2 100644
--- a/scripts/gui/chat.js
+++ b/scripts/gui/chat.js
@@ -1,5 +1,7 @@
 'use strict';
 
+const CHAT_RPC = ["addChannel", "recieveMessage", "deleteChannel"]
+
 class Chat {
 	constructor(e, soc)
 	{
diff --git a/scripts/gui/input.js b/scripts/gui/input.js
index 0e0c7ba..032d168 100644
--- a/scripts/gui/input.js
+++ b/scripts/gui/input.js
@@ -48,6 +48,14 @@ class MakeInput {
 		return el;
 	}
 
+	static passwordInput (value, placeholder)
+	{
+		let el = MakeInput.createInput("password");
+		el.setAttribute("placeholder", placeholder);
+		el.value = value;
+		return el;
+	}
+
 	static numberInput (value)
 	{
 		let el = MakeInput.createInput("number");
diff --git a/scripts/gui/lobby.js b/scripts/gui/lobby.js
index 85855b6..6517592 100644
--- a/scripts/gui/lobby.js
+++ b/scripts/gui/lobby.js
@@ -1,4 +1,7 @@
 'use strict';
+
+const LOBBY_RPC = ["packList", "gameList", "players", "addGame", "deleteGame"]
+
 // ###############
 // # TopBar Code #
 // ###############
@@ -51,35 +54,53 @@ class TopBar{
 
 // Game represents a single game in the lobby view.  It has methods for setting up the elements and such.
 class Game {
-	constructor(options = {id: 0, name: "", password: false}, el)
+	constructor(options = {id: 0, name: "", packs: [], pass: false}, el)
 	{
-		this.getName = function () {
+		this.getName = () => {
 			return options.name;
 		}
 
+		this.getID = () => {
+			return options.id;
+		}
+
+		// Main game element
 		let e = document.createElement("div");
 		e.className = "game";
 
+		// Game title
 		let title = document.createElement("h2");
 		title.textContent = options.name;
 		e.appendChild(title);
 
+		// Game stats
+		let gid = document.createElement("span");
+		gid.textContent = `Game ID: ${options.id}`;
+		e.appendChild(gid);
+
+		let pid = document.createElement("span");
+		pid.textContent = `Pack count: ${options.packs.length}`;
+		e.appendChild(pid);
+
+		// Join/password
+		let jap = document.createElement("div");
+
 		let join = document.createElement("button");
-		join.className = "join";
 		join.textContent = "Join";
 		join.addEventListener("click", game.joinGame.bind(game, options.id));
-		e.appendChild(join);
+		jap.appendChild(join);
 
-		if(usePass) {
-			let pass = MakeInput.textInput("", "Game password");
-			pass.classList.add("pass");
-			e.appendChild(pass);
+		this.getPass = () => {
+			return "";
+		}
 
-			this.getUserPass = function () {
-				return pass.value;
-			}
+		if(options.pass) {
+			let pass = MakeInput.passwordInput("", "Game password");
+			jap.appendChild(pass);
+			this.getPass = pass.getValue.bind(pass);
 		}
 
+		e.appendChild(jap);
 		el.appendChild(e);
 
 		this.remove = function () {
@@ -168,14 +189,16 @@ class Lobby {
 	// { data.name } room name
 	// { data.packs } list of the pack names used by this game
 	// { data.id } room identifier (uuid)
+	// { data.pass } true or false weather the game has a password
+
 	addGame (data) {
 		let g = new Game(data, this.e.games);
-		this.games.push(g);
+		this.games[data.id] = g;
 	}
 
 	// Called when a new public game is removed on the server
 	// { data string } the uuid of the game to delete
-	removeGame (data) {
+	deleteGame (data) {
 
 	}
 
diff --git a/scripts/gui/table.js b/scripts/gui/table.js
index 911e513..e4d6770 100644
--- a/scripts/gui/table.js
+++ b/scripts/gui/table.js
@@ -1,4 +1,7 @@
 'use strict';
+
+const TABLE_RPC = ["newDeck", "newCard", "deleteDeck", "deleteCard", "moveByID", "swapCard"]
+
 // Table represents and manages the actual game.  It accepts inputs from the server and tries to query the server when the player makes a move.
 class Table{
 	constructor(e, drag, socket) {
diff --git a/scripts/socket/sock.js b/scripts/socket/sock.js
index 2135551..4c64e02 100644
--- a/scripts/socket/sock.js
+++ b/scripts/socket/sock.js
@@ -1,16 +1,22 @@
 'use strict';
+
+const VALID_EVENTS = ["error", "closed", "handshake", "menu", "game", "chat", "ping"];
+
 // A wrapper around the wrapper 
 class SockWorker extends EventTarget{
+
 	constructor (serveraddr, version)
 	{
 		super();
 
 		this.server = serveraddr;
 		this.version = version;
+		this.handshake = false;
 	}
 
 	// Initialize the connection.
 	init () {
+		this.handshake = false;
 		if(this.server == "" || this.server == null) {
 			return;
 		}
@@ -37,7 +43,16 @@ class SockWorker extends EventTarget{
 	msg (e) {
 		if(typeof e.data == "string") {
 			let dat = JSON.parse(e.data);
-			this.dispatchEvent(new CustomEvent(dat.type, {detail: dat.data}));
+
+			if (!this.handshake) {
+				if (dat.type == "ready")
+					this.handshake = true;
+				this.dispatchEvent(new CustomEvent("handshake", {detail: dat.type}));
+				return;
+			}
+			
+			if (VALID_EVENTS.includes(dat.type))
+				this.dispatchEvent(new CustomEvent(dat.type, {detail: dat.data}));
 		}
 	}
 
diff --git a/styles/client/base.css b/styles/client/base.css
index 60631ce..85bec49 100644
--- a/styles/client/base.css
+++ b/styles/client/base.css
@@ -337,12 +337,16 @@ div.chat-text > div {
 
 div.game > h2 {
 	margin: 0;
+	overflow: hidden;
+	white-space: nowrap;
 }
 
-button.join {
-	position: absolute;
-
-	bottom: 5px;
-	right: 5px;
+div.game > span {
+	width: 50%;
+	display: inline-block;
 }
 
+div.game > div {
+	display: flex;
+	flex-direction: row-reverse;
+}
diff --git a/styles/client/desktop.css b/styles/client/desktop.css
index 410b516..2f5bb65 100644
--- a/styles/client/desktop.css
+++ b/styles/client/desktop.css
@@ -84,7 +84,7 @@
 	}
 
 	div.content {
-		min-width: 70vw;
+		width: 70vw;
 		min-height: 70vh;
 
 		display: flex;
@@ -135,10 +135,6 @@
 		margin-top: 10px;
 	}
 
-	div.game {
-		height: 20%;
-	}
-
 	/*
 		Table rules
 	*/
diff --git a/styles/client/mobile.css b/styles/client/mobile.css
index 70e17dd..92bf6e4 100644
--- a/styles/client/mobile.css
+++ b/styles/client/mobile.css
@@ -78,8 +78,4 @@
 		box-sizing: border-box;
 
 	}
-
-	div.game {
-		height: 12.5%;
-	}
 }
diff --git a/styles/input.css b/styles/input.css
index f39a7f1..714910f 100644
--- a/styles/input.css
+++ b/styles/input.css
@@ -46,7 +46,7 @@ input[type=button]:active, input[type=submit]:active, button:active, a:active
 
 /*    Text, date, number, and time input    */
 
-input[type=text], input[type=date], input[type=time], input[type="number"]
+input[type=text], input[type=password], input[type=date], input[type=time], input[type="number"]
 {
 	border: 2px solid var(--input-border-text);
 	border-radius: 3px;
@@ -56,12 +56,12 @@ input[type=text], input[type=date], input[type=time], input[type="number"]
 	font-size: 1em;
 }
 
-input[type=text]:hover, input[type=date]:hover, input[type=time]:hover, input[type="number"]:hover
+input[type=text]:hover, input[type=password]:hover, input[type=date]:hover, input[type=time]:hover, input[type="number"]:hover
 {
 	border-color: var(--input-border-text-hover);
 }
 
-input[type=text]:focus, input[type=date]:focus, input[type=time]:focus, input[type="number"]:focus
+input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, input[type=time]:focus, input[type="number"]:focus
 {
 	border-color: var(--input-border-text-active);
 }