summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--scripts/client.js29
-rw-r--r--scripts/gui/chat.js2
-rw-r--r--scripts/gui/input.js8
-rw-r--r--scripts/gui/lobby.js49
-rw-r--r--scripts/gui/table.js3
-rw-r--r--scripts/socket/sock.js17
-rw-r--r--styles/client/base.css14
-rw-r--r--styles/client/desktop.css6
-rw-r--r--styles/client/mobile.css4
-rw-r--r--styles/input.css6
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);
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-07 09:01:17 +0000