summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--client.html250
-rw-r--r--scripts/cards/card.js220
-rw-r--r--scripts/cards/deck.js342
-rw-r--r--scripts/cards/drag.js296
-rw-r--r--scripts/client.js385
-rw-r--r--scripts/cookie.js54
-rw-r--r--scripts/gui/chat.js306
-rw-r--r--scripts/gui/input.js566
-rw-r--r--scripts/gui/table.js278
-rw-r--r--scripts/socket/message.js26
-rw-r--r--scripts/socket/sock.js114
-rw-r--r--scripts/theme.js34
-rw-r--r--styles/client/base.css298
-rw-r--r--styles/client/card.css164
-rw-r--r--styles/client/desktop.css294
-rw-r--r--styles/client/mobile.css166
-rw-r--r--styles/client/tablet.css86
-rw-r--r--styles/home/base.css102
-rw-r--r--styles/home/desktop.css8
-rw-r--r--styles/home/mobile.css18
-rw-r--r--styles/icofont.css38
-rw-r--r--styles/input.css88
-rw-r--r--styles/themes/colors-base.css192
-rw-r--r--styles/themes/colors-dark.css202
24 files changed, 2265 insertions, 2262 deletions
diff --git a/client.html b/client.html
index bc85fee..d589344 100644
--- a/client.html
+++ b/client.html
@@ -1,131 +1,131 @@
<!DOCTYPE HTML>
<html>
- <head>
- <meta name="viewport" content="width=device-width,initial-scale=1">
- <meta charset="utf-8">
-
- <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
- <link rel="stylesheet" type="text/css" href="styles/icofont.css">
-
- <link rel="stylesheet" type="text/css" href="styles/input.css">
-
- <link rel="stylesheet" type="text/css" href="styles/client/base.css">
- <link rel="stylesheet" type="text/css" href="styles/client/desktop.css">
- <link rel="stylesheet" type="text/css" href="styles/client/tablet.css">
- <link rel="stylesheet" type="text/css" href="styles/client/mobile.css">
- <link rel="stylesheet" type="text/css" href="styles/client/card.css">
+ <head>
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <meta charset="utf-8">
+
+ <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" type="text/css" href="styles/icofont.css">
+
+ <link rel="stylesheet" type="text/css" href="styles/input.css">
+
+ <link rel="stylesheet" type="text/css" href="styles/client/base.css">
+ <link rel="stylesheet" type="text/css" href="styles/client/desktop.css">
+ <link rel="stylesheet" type="text/css" href="styles/client/tablet.css">
+ <link rel="stylesheet" type="text/css" href="styles/client/mobile.css">
+ <link rel="stylesheet" type="text/css" href="styles/client/card.css">
- <link id="theme" rel="stylesheet" type="text/css" href="styles/themes/colors-base.css">
-
- <link rel="icon" sizes="32x32" href="images/wc-icon-32.png">
- <link rel="icon" sizes="48x48" href="images/wc-icon-48.png">
- <link rel="icon" sizes="96x96" href="images/wc-icon-96.png">
- <link rel="icon" sizes="144x144" href="images/wc-icon-144.png">
- <link rel="icon" sizes="288x288" href="images/wc-icon-288.png">
-
- <script src="scripts/cookie.js"></script>
- <script src="scripts/theme.js"></script>
-
- <script src="scripts/cards/card.js"></script>
- <script src="scripts/cards/deck.js"></script>
- <script src="scripts/cards/drag.js"></script>
-
- <script src="scripts/gui/input.js"></script>
- <script src="scripts/gui/lobby.js"></script>
- <script src="scripts/gui/table.js"></script>
- <script src="scripts/gui/chat.js"></script>
-
- <script src="scripts/socket/message.js"></script>
- <script src="scripts/socket/sock.js"></script>
-
- <script src="scripts/client.js"></script>
-
- <title>WebCards - Client</title>
- </head>
-
- <body>
-
- <div class="table" state="closed">
-
- </div>
-
- <div class="topbar" style="height: auto;">
- <div class="top-buttons">
- <button id="newgame" class="top-button" onclick="game.lobby.newGame()"></button>
- <button id="settings" class="top-button" onclick="game.lobby.mobileSettings(game.settings)"></button>
- <button id="reset" class="top-button" onclick="game.reset()"></button>
- </div>
-
- <div class="new-game" style="display: none;"></div>
-
- <div class="settings mobile-settings" style="display: none;">
- </div>
-
- <div class="status"></div>
- </div>
-
- <div class="lobby">
-
- <div class="server">
- <span style="font-weight: 700;" class="status">Connecting</span>
- <span class="addr"></span>
- </div>
-
- <div class="content">
-
- <div class="games">
- </div>
-
- <div class="info">
- <div class="stats">
- <div>
- <span>Game Name:</span><span id="game">-</span>
- </div>
-
- <div>
- <span>Packs Available:</span><span id="packs">-</span>
- </div>
-
- <div>
- <span>Players Online:</span><span id="online">-</span>
- </div>
-
- <div>
- <span>Players In Game:</span><span id="ingame">-</span>
- </div>
-
- <div>
- <span>Public Games:</span><span id="pubgame">-</span>
- </div>
- </div>
-
- <div class="settings" >
- </div>
- </div>
- </div>
- </div>
-
- <div class="chat">
- <button class="toggle-chat">Toggle Chat</button>
-
- <div class="chat-select">
- </div>
-
- <div class="chat-text">
- </div>
-
- <div class="chat-input">
- <input type="text" placeholder="Chat..."/>
- <button>Send</button>
- </div>
- </div>
-
- <script>
- var params = new URLSearchParams((new URL(window.location)).search);
- var game = new Client(params.get("s"), params.get("g"));
- setTimeout(game.init.bind(game), 100);
- </script>
- </body>
+ <link id="theme" rel="stylesheet" type="text/css" href="styles/themes/colors-base.css">
+
+ <link rel="icon" sizes="32x32" href="images/wc-icon-32.png">
+ <link rel="icon" sizes="48x48" href="images/wc-icon-48.png">
+ <link rel="icon" sizes="96x96" href="images/wc-icon-96.png">
+ <link rel="icon" sizes="144x144" href="images/wc-icon-144.png">
+ <link rel="icon" sizes="288x288" href="images/wc-icon-288.png">
+
+ <script src="scripts/cookie.js"></script>
+ <script src="scripts/theme.js"></script>
+
+ <script src="scripts/cards/card.js"></script>
+ <script src="scripts/cards/deck.js"></script>
+ <script src="scripts/cards/drag.js"></script>
+
+ <script src="scripts/gui/input.js"></script>
+ <script src="scripts/gui/lobby.js"></script>
+ <script src="scripts/gui/table.js"></script>
+ <script src="scripts/gui/chat.js"></script>
+
+ <script src="scripts/socket/message.js"></script>
+ <script src="scripts/socket/sock.js"></script>
+
+ <script src="scripts/client.js"></script>
+
+ <title>WebCards - Client</title>
+ </head>
+
+ <body>
+
+ <div class="table" state="closed">
+
+ </div>
+
+ <div class="topbar" style="height: auto;">
+ <div class="top-buttons">
+ <button id="newgame" class="top-button" onclick="game.lobby.newGame()"></button>
+ <button id="settings" class="top-button" onclick="game.lobby.mobileSettings(game.settings)"></button>
+ <button id="reset" class="top-button" onclick="game.reset()"></button>
+ </div>
+
+ <div class="new-game" style="display: none;"></div>
+
+ <div class="settings mobile-settings" style="display: none;">
+ </div>
+
+ <div class="status"></div>
+ </div>
+
+ <div class="lobby">
+
+ <div class="server">
+ <span style="font-weight: 700;" class="status">Connecting</span>
+ <span class="addr"></span>
+ </div>
+
+ <div class="content">
+
+ <div class="games">
+ </div>
+
+ <div class="info">
+ <div class="stats">
+ <div>
+ <span>Game Name:</span><span id="game">-</span>
+ </div>
+
+ <div>
+ <span>Packs Available:</span><span id="packs">-</span>
+ </div>
+
+ <div>
+ <span>Players Online:</span><span id="online">-</span>
+ </div>
+
+ <div>
+ <span>Players In Game:</span><span id="ingame">-</span>
+ </div>
+
+ <div>
+ <span>Public Games:</span><span id="pubgame">-</span>
+ </div>
+ </div>
+
+ <div class="settings" >
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="chat">
+ <button class="toggle-chat">Toggle Chat</button>
+
+ <div class="chat-select">
+ </div>
+
+ <div class="chat-text">
+ </div>
+
+ <div class="chat-input">
+ <input type="text" placeholder="Chat..."/>
+ <button>Send</button>
+ </div>
+ </div>
+
+ <script>
+ var params = new URLSearchParams((new URL(window.location)).search);
+ var game = new Client(params.get("s"), params.get("g"));
+ setTimeout(game.init.bind(game), 100);
+ </script>
+ </body>
</html> \ No newline at end of file
diff --git a/scripts/cards/card.js b/scripts/cards/card.js
index 884e0d9..43dc965 100644
--- a/scripts/cards/card.js
+++ b/scripts/cards/card.js
@@ -7,114 +7,114 @@ const CardPos = ["top", "topl", "topr", "mid", "midt", "midb", "bot", "botl", "b
// Every card should have a deck.
// Use deck.appendCard or deck.prependCard to make a card visible
class Card {
- constructor (id, data)
- {
- this.e = document.createElement("card");
- this.generateElements(data);
- this.e.style.left = "0px";
- this.e.style.top = "0px";
-
- this.getID = function() {
- return id;
- }
- }
-
- // Generate a card with basic text only
- static generateBasicCard (data, el)
- {
- let t = document.createElement("carea");
- t.className = "mid";
- t.innerText = data;
- el.appendChild(t);
- }
-
- // Generate a card with a simple error message.
- static generateErrorCard (el)
- {
- Card.generateBasicCard("Card Error: data", el);
- }
-
- // Generate an area of a card
- static generateCArea (data, carea, assetURL)
- {
- // Create and set area
- let area = document.createElement("carea");
- area.className = carea;
-
- // Create inner area text and images
- for (let i in data)
- {
- if (i == "style")
- {
- for (j in data.style)
- area.style[j] = data.style[j];
- }
-
- if (data[i].type == "text")
- {
- let e = document.createElement("ctext");
-
- e.innerText = data[i].text;
-
- for (let j in data[i].style)
- e.style[j] = data[i].style[j];
-
- area.appendChild(e);
-
- }
- else if (data[i].type == "image")
- {
- let e = document.createElement("cimage");
-
- e.style.backgroundImage = "url(\"" + assetURL + data[i].image + "\")";
-
- for (let j in data[i].style)
- e.style[j] = data[i].style[j];
-
- area.appendChild(e);
- }
- }
-
- return area;
- }
-
- // Generate a card with rich visuals
- static generateObjectCard (data, el)
- {
- // Generate card areas.
- for (let i in CardPos)
- {
- if (typeof data[CardPos[i]] == "object")
- el.appendChild(this.generateCArea(data[CardPos[i]], CardPos[i], data.assetURL));
- }
- }
-
- generateElements (data)
- {
- while(this.e.firstElementChild != null)
- this.e.firstElementChild.remove();
-
- switch (typeof data)
- {
- case "object":
- Card.generateObjectCard(data, this.e);
- break;
- case "string":
- Card.generateBasicCard(data, this.e);
- break;
- default:
- Card.generateErrorCard(this.e);
- }
- }
-
- setPos (p)
- {
- this.e.style.setProperty("--cpos", p);
- }
-
- resetPos()
- {
- this.e.style.left = "0px";
- this.e.style.top = "0px";
- }
+ constructor (id, data)
+ {
+ this.e = document.createElement("card");
+ this.generateElements(data);
+ this.e.style.left = "0px";
+ this.e.style.top = "0px";
+
+ this.getID = function() {
+ return id;
+ }
+ }
+
+ // Generate a card with basic text only
+ static generateBasicCard (data, el)
+ {
+ let t = document.createElement("carea");
+ t.className = "mid";
+ t.innerText = data;
+ el.appendChild(t);
+ }
+
+ // Generate a card with a simple error message.
+ static generateErrorCard (el)
+ {
+ Card.generateBasicCard("Card Error: data", el);
+ }
+
+ // Generate an area of a card
+ static generateCArea (data, carea, assetURL)
+ {
+ // Create and set area
+ let area = document.createElement("carea");
+ area.className = carea;
+
+ // Create inner area text and images
+ for (let i in data)
+ {
+ if (i == "style")
+ {
+ for (j in data.style)
+ area.style[j] = data.style[j];
+ }
+
+ if (data[i].type == "text")
+ {
+ let e = document.createElement("ctext");
+
+ e.innerText = data[i].text;
+
+ for (let j in data[i].style)
+ e.style[j] = data[i].style[j];
+
+ area.appendChild(e);
+
+ }
+ else if (data[i].type == "image")
+ {
+ let e = document.createElement("cimage");
+
+ e.style.backgroundImage = "url(\"" + assetURL + data[i].image + "\")";
+
+ for (let j in data[i].style)
+ e.style[j] = data[i].style[j];
+
+ area.appendChild(e);
+ }
+ }
+
+ return area;
+ }
+
+ // Generate a card with rich visuals
+ static generateObjectCard (data, el)
+ {
+ // Generate card areas.
+ for (let i in CardPos)
+ {
+ if (typeof data[CardPos[i]] == "object")
+ el.appendChild(this.generateCArea(data[CardPos[i]], CardPos[i], data.assetURL));
+ }
+ }
+
+ generateElements (data)
+ {
+ while(this.e.firstElementChild != null)
+ this.e.firstElementChild.remove();
+
+ switch (typeof data)
+ {
+ case "object":
+ Card.generateObjectCard(data, this.e);
+ break;
+ case "string":
+ Card.generateBasicCard(data, this.e);
+ break;
+ default:
+ Card.generateErrorCard(this.e);
+ }
+ }
+
+ setPos (p)
+ {
+ this.e.style.setProperty("--cpos", p);
+ }
+
+ resetPos()
+ {
+ this.e.style.left = "0px";
+ this.e.style.top = "0px";
+ }
}
diff --git a/scripts/cards/deck.js b/scripts/cards/deck.js
index 4800e54..caa62bc 100644
--- a/scripts/cards/deck.js
+++ b/scripts/cards/deck.js
@@ -4,175 +4,175 @@
// Can be arranged in multiple ways.
// Decks work as FIFO
class Deck {
-
- cards = [];
- inf = false;
- smode = "";
- sct = 0;
- x = 0;
- y = 0;
- e = null;
-
- constructor(id, options = {mode: "stack", smode: "one", sct: 0, pos: [0, 0]})
- {
- // View mode
- // infdraw - infinite draw. always appears as if there are multiple cards
- // stack - stack mode
- // strip
- // horizontal
- // left (strip-hl)
- // right (strip-hr)
- // vertical
- // up (strip-vu)
- // down (strip-vd)
- this.inf = options.mode == "infdraw";
-
- // Select mode - controls what other cards are selected when one card is selected
- // above - selectes cards above the selected one
- // below - selects cards below the selected one
- // around - selects cards above and below
- // one - selects only card chosen
- // all - selects all cards when card selected
- this.smode = options.smode;
-
- // Select count (negative defaults to 0)
- // above - controls number of cards above clicked are selected
- // below - controls number of cards below clicked are selected
- // around
- // number - number above and below selected
- // array - [first number: number above selected] [second number: number below selected]
- // one - no effect
- // all - no effect
- this.sct = options.sct > 0 ? options.sct : 0;
-
- this.e = document.createElement("deck");
-
- // x and y values are on a scale from 0 to 1, 0 being top left, 1 being bottom right.
- this.e.style.setProperty("--x", options.pos[0]);
- this.e.style.setProperty("--y", options.pos[1]);
-
- this.e.setAttribute("mode", options.mode);
-
- this.getID = function() {
- return id;
- }
- }
-
- updatePos()
- {
- let len = this.cards.length - 1;
- for(let i in this.cards)
- this.cards[i].setPos(len-i);
- this.updateCount();
- }
-
- appendCard(card)
- {
- this.cards.push(card);
- this.e.appendChild(card.e);
- this.updatePos();
- }
-
- prependCard(card)
- {
- this.cards.unshift(card);
- this.e.prepend(card.e);
- card.setPos(this.cards.length - 1);
- this.updateCount();
- }
-
- addCardAt(card, index)
- {
- if(index < 0 || index > this.cards.length)
- return
-
- if(index == 0) {
- this.prependCard(card);
- } else if (index == this.cards.length) {
- this.appendCard(card);
- } else {
- let temp = this.cards.slice(0, index);
- temp[temp.length - 1].e.after(card.e);
- temp.push(card);
- this.cards.unshift(...temp);
- this.updatePos();
- }
- }
-
- swapCards(index1, index2)
- {
- if(index1 < 0 || index1 >= this.cards.length || index2 < 0 || index2 >= this.cards.length)
- return
-
- var temp = this.cards[index1]
- this.cards[index1] = this.cards[index2];
- this.cards[index2] = temp;
-
- this.cards[index1 - 1].e.after(this.cards[index1]);
- this.cards[index2 - 1].e.after(this.cards[index2]);
- }
-
- removeCard(index)
- {
- if(index < 0 || index >= this.cards.length)
- return
-
- this.e.removeChild(this.cards[index].e);
- let c = this.cards.splice(index, 1)[0];
-
- this.updatePos();
- return c;
- }
-
- removeCardByID(id)
- {
- for(let i in this.cards)
- {
- if(this.cards[i].getID() == id)
- return this.removeCard(i);
- }
-
- return null;
- }
-
- removeFront()
- {
- return this.removeCard(this.cards.length - 1);
- }
-
- removeBack()
- {
- return this.removeCard(0);
- }
-
- updateCount ()
- {
- this.e.style.setProperty("--ccount", this.cards.length - 1);
- }
-
- isInside(x, y)
- {
- var rect = this.e.getBoundingClientRect();
- return (x > rect.left && x < rect.right && y > rect.top && y < rect.bottom)
- }
-
- checkCard (el)
- {
- for(let c of this.cards)
- {
- if(c.e === el)
- return c;
- }
- return null;
- }
-
- hasCard(id)
- {
- for(let c of this.cards)
- {
- if(c.getID() === id)
- return c;
- }
- return null;
- }
+
+ cards = [];
+ inf = false;
+ smode = "";
+ sct = 0;
+ x = 0;
+ y = 0;
+ e = null;
+
+ constructor(id, options = {mode: "stack", smode: "one", sct: 0, pos: [0, 0]})
+ {
+ // View mode
+ // infdraw - infinite draw. always appears as if there are multiple cards
+ // stack - stack mode
+ // strip
+ // horizontal
+ // left (strip-hl)
+ // right (strip-hr)
+ // vertical
+ // up (strip-vu)
+ // down (strip-vd)
+ this.inf = options.mode == "infdraw";
+
+ // Select mode - controls what other cards are selected when one card is selected
+ // above - selectes cards above the selected one
+ // below - selects cards below the selected one
+ // around - selects cards above and below
+ // one - selects only card chosen
+ // all - selects all cards when card selected
+ this.smode = options.smode;
+
+ // Select count (negative defaults to 0)
+ // above - controls number of cards above clicked are selected
+ // below - controls number of cards below clicked are selected
+ // around
+ // number - number above and below selected
+ // array - [first number: number above selected] [second number: number below selected]
+ // one - no effect
+ // all - no effect
+ this.sct = options.sct > 0 ? options.sct : 0;
+
+ this.e = document.createElement("deck");
+
+ // x and y values are on a scale from 0 to 1, 0 being top left, 1 being bottom right.
+ this.e.style.setProperty("--x", options.pos[0]);
+ this.e.style.setProperty("--y", options.pos[1]);
+
+ this.e.setAttribute("mode", options.mode);
+
+ this.getID = function() {
+ return id;
+ }
+ }
+
+ updatePos()
+ {
+ let len = this.cards.length - 1;
+ for(let i in this.cards)
+ this.cards[i].setPos(len-i);
+ this.updateCount();
+ }
+
+ appendCard(card)
+ {
+ this.cards.push(card);
+ this.e.appendChild(card.e);
+ this.updatePos();
+ }
+
+ prependCard(card)
+ {
+ this.cards.unshift(card);
+ this.e.prepend(card.e);
+ card.setPos(this.cards.length - 1);
+ this.updateCount();
+ }
+
+ addCardAt(card, index)
+ {
+ if(index < 0 || index > this.cards.length)
+ return
+
+ if(index == 0) {
+ this.prependCard(card);
+ } else if (index == this.cards.length) {
+ this.appendCard(card);
+ } else {
+ let temp = this.cards.slice(0, index);
+ temp[temp.length - 1].e.after(card.e);
+ temp.push(card);
+ this.cards.unshift(...temp);
+ this.updatePos();
+ }
+ }
+
+ swapCards(index1, index2)
+ {
+ if(index1 < 0 || index1 >= this.cards.length || index2 < 0 || index2 >= this.cards.length)
+ return
+
+ var temp = this.cards[index1]
+ this.cards[index1] = this.cards[index2];
+ this.cards[index2] = temp;
+
+ this.cards[index1 - 1].e.after(this.cards[index1]);
+ this.cards[index2 - 1].e.after(this.cards[index2]);
+ }
+
+ removeCard(index)
+ {
+ if(index < 0 || index >= this.cards.length)
+ return
+
+ this.e.removeChild(this.cards[index].e);
+ let c = this.cards.splice(index, 1)[0];
+
+ this.updatePos();
+ return c;
+ }
+
+ removeCardByID(id)
+ {
+ for(let i in this.cards)
+ {
+ if(this.cards[i].getID() == id)
+ return this.removeCard(i);
+ }
+
+ return null;
+ }
+
+ removeFront()
+ {
+ return this.removeCard(this.cards.length - 1);
+ }
+
+ removeBack()
+ {
+ return this.removeCard(0);
+ }
+
+ updateCount ()
+ {
+ this.e.style.setProperty("--ccount", this.cards.length - 1);
+ }
+
+ isInside(x, y)
+ {
+ var rect = this.e.getBoundingClientRect();
+ return (x > rect.left && x < rect.right && y > rect.top && y < rect.bottom)
+ }
+
+ checkCard (el)
+ {
+ for(let c of this.cards)
+ {
+ if(c.e === el)
+ return c;
+ }
+ return null;
+ }
+
+ hasCard(id)
+ {
+ for(let c of this.cards)
+ {
+ if(c.getID() === id)
+ return c;
+ }
+ return null;
+ }
}
diff --git a/scripts/cards/drag.js b/scripts/cards/drag.js
index 807e0c5..1014656 100644
--- a/scripts/cards/drag.js
+++ b/scripts/cards/drag.js
@@ -1,152 +1,152 @@
'use strict';
class MultiDrag extends EventTarget {
- del = false;
- drag = [];
- mouse = [null, null];
-
- constructor(ret = false) {
- super();
-
- window.addEventListener("mousemove", this.update.bind(this));
- window.addEventListener("mouseup", this.stopDraggingAll.bind(this));
- document.body.addEventListener("mouseleave", this.stopDraggingAll.bind(this));
-
- this.ret = ret;
- }
-
- addDragEl(el, ox, oy, px, py, pt) {
- if(this.del)
- return;
-
- el.style.transitionDuration = "0s";
-
- let push = {
- e: el,
- osx: ox,
- osy: oy,
- ptd: pt
- };
-
- if(this.ret) {
- push.prx = px;
- push.pry = py;
- }
-
- this.drag.push(push);
-
- return push;
- }
-
- dragging(e) {
- for(let i in this.drag) {
- if(this.drag[i].e == e)
- return true;
- }
- return false;
- }
-
- startDragging(e) {
- if(this.del)
- return;
-
- console.log(e);
-
- if(e.button != 0)
- return;
-
- var cap = new Event("dragstart");
-
- cap.drag = this.addDragEl(
- e.target,
- e.pageX - parseInt(e.target.style.left),
- e.pageY - parseInt(e.target.style.top),
- e.target.style.left,
- e.target.style.top,
- e.target.style.transitionDuration
- );
-
- this.dispatchEvent(cap);
- }
-
- stopDragging(i) {
- if(this.del)
- return;
-
- this.del = true;
-
- if (i < 0 || i >= this.drag.length)
- return;
-
- var cap = new Event("dragstop");
- cap.x = this.mouse[0];
- cap.y = this.mouse[1];
-
- this.drag[i].e.style.transitionDuration = this.drag[i].ptd;
-
- if(this.ret) {
- this.drag[i].e.style.left = this.drag[i].prx;
- this.drag[i].e.style.top = this.drag[i].pry;
- }
-
- cap.drag = this.drag.splice(i, 1);
-
- this.del = false;
-
- this.dispatchEvent(cap);
- }
-
- stopDraggingEl(el) {
- for(let d of this.drag) {
- if(d.e === el)
- this.stopDragging(this.drag.indexOf(d));
- }
- }
-
- stopDraggingAll() {
- if(this.del)
- return;
-
- this.del = true;
-
- var cap = new Event("dragstop");
-
- cap.x = this.mouse[0];
- cap.y = this.mouse[1];
-
- cap.drag = [];
-
- while (this.drag.length > 0) {
- this.drag[0].e.style.transitionDuration = this.drag[0].ptd;
-
- if(this.ret) {
- this.drag[0].e.style.left = this.drag[0].prx;
- this.drag[0].e.style.top = this.drag[0].pry;
- }
-
- cap.drag.push(this.drag.shift());
- }
-
- this.del = false;
-
- this.dispatchEvent(cap);
- }
-
- update(e) {
- this.mouse[0] = e.pageX;
- this.mouse[1] = e.pageY;
-
- for (let i = 0; i < this.drag.length && !this.del; i++) {
- this.drag[i].e.style.left = e.pageX - this.drag[i].osx + "px";
- this.drag[i].e.style.top = e.pageY - this.drag[i].osy + "px";
- }
- }
-
- addTarget(e) {
- e.addEventListener("mousedown", this.startDragging.bind(this));
- }
-
- removeTarget (e) {
- e.removeEventListener("mousedown", this.startDragging.bind(this));
- }
+ del = false;
+ drag = [];
+ mouse = [null, null];
+
+ constructor(ret = false) {
+ super();
+
+ window.addEventListener("mousemove", this.update.bind(this));
+ window.addEventListener("mouseup", this.stopDraggingAll.bind(this));
+ document.body.addEventListener("mouseleave", this.stopDraggingAll.bind(this));
+
+ this.ret = ret;
+ }
+
+ addDragEl(el, ox, oy, px, py, pt) {
+ if(this.del)
+ return;
+
+ el.style.transitionDuration = "0s";
+
+ let push = {
+ e: el,
+ osx: ox,
+ osy: oy,
+ ptd: pt
+ };
+
+ if(this.ret) {
+ push.prx = px;
+ push.pry = py;
+ }
+
+ this.drag.push(push);
+
+ return push;
+ }
+
+ dragging(e) {
+ for(let i in this.drag) {
+ if(this.drag[i].e == e)
+ return true;
+ }
+ return false;
+ }
+
+ startDragging(e) {
+ if(this.del)
+ return;
+
+ console.log(e);
+
+ if(e.button != 0)
+ return;
+
+ var cap = new Event("dragstart");
+
+ cap.drag = this.addDragEl(
+ e.target,
+ e.pageX - parseInt(e.target.style.left),
+ e.pageY - parseInt(e.target.style.top),
+ e.target.style.left,
+ e.target.style.top,
+ e.target.style.transitionDuration
+ );
+
+ this.dispatchEvent(cap);
+ }
+
+ stopDragging(i) {
+ if(this.del)
+ return;
+
+ this.del = true;
+
+ if (i < 0 || i >= this.drag.length)
+ return;
+
+ var cap = new Event("dragstop");
+ cap.x = this.mouse[0];
+ cap.y = this.mouse[1];
+
+ this.drag[i].e.style.transitionDuration = this.drag[i].ptd;
+
+ if(this.ret) {
+ this.drag[i].e.style.left = this.drag[i].prx;
+ this.drag[i].e.style.top = this.drag[i].pry;
+ }
+
+ cap.drag = this.drag.splice(i, 1);
+
+ this.del = false;
+
+ this.dispatchEvent(cap);
+ }
+
+ stopDraggingEl(el) {
+ for(let d of this.drag) {
+ if(d.e === el)
+ this.stopDragging(this.drag.indexOf(d));
+ }
+ }
+
+ stopDraggingAll() {
+ if(this.del)
+ return;
+
+ this.del = true;
+
+ var cap = new Event("dragstop");
+
+ cap.x = this.mouse[0];
+ cap.y = this.mouse[1];
+
+ cap.drag = [];
+
+ while (this.drag.length > 0) {
+ this.drag[0].e.style.transitionDuration = this.drag[0].ptd;
+
+ if(this.ret) {
+ this.drag[0].e.style.left = this.drag[0].prx;
+ this.drag[0].e.style.top = this.drag[0].pry;
+ }
+
+ cap.drag.push(this.drag.shift());
+ }
+
+ this.del = false;
+
+ this.dispatchEvent(cap);
+ }
+
+ update(e) {
+ this.mouse[0] = e.pageX;
+ this.mouse[1] = e.pageY;
+
+ for (let i = 0; i < this.drag.length && !this.del; i++) {
+ this.drag[i].e.style.left = e.pageX - this.drag[i].osx + "px";
+ this.drag[i].e.style.top = e.pageY - this.drag[i].osy + "px";
+ }
+ }
+
+ addTarget(e) {
+ e.addEventListener("mousedown", this.startDragging.bind(this));
+ }
+
+ removeTarget (e) {
+ e.removeEventListener("mousedown", this.startDragging.bind(this));
+ }
} \ No newline at end of file
diff --git a/scripts/client.js b/scripts/client.js
index 07e2fce..c612175 100644
--- a/scripts/client.js
+++ b/scripts/client.js
@@ -2,44 +2,39 @@
const VERSION = "1.0.0";
const DefaultUserOps = {
- a: {
- type: "color",
- title: "Player Color",
- args: ["#ff0000"]
- },
- b: {
- type: "text",
- title: "Player Name",
- args: ["User " + Math.floor(Math.random() * 10000), ""]
- },
- d: {
- type: "checkbox",
- title: "Order Check (D)",
- args: []
- },
- c: {
- type: "checkbox",
- title: "Order Check (C)",
- args: []
- }
+ color: {
+ type: "color",
+ title: "Player Color",
+ args: ["#ff0000"]
+ },
+ name: {
+ type: "text",
+ title: "Player Name",
+ args: ["User " + Math.floor(Math.random() * 10000), ""]
+ }
}
const DefaultGameOps = {
- a: {
- type: "checkbox",
- title: "Unlisted",
- args: []
- },
- b: {
- type: "checkbox",
- title: "Use Password",
- args: []
- },
- c: {
- type: "text",
- title: "Set Password",
- args: [Math.floor(Math.random() * 10000), ""]
- }
+ name: {
+ type:"text",
+ title: "Room Name",
+ args: ["", ""]
+ },
+ hidden: {
+ type: "checkbox",
+ title: "Unlisted",
+ args: []
+ },
+ usePass: {
+ type: "checkbox",
+ title: "Use Password",
+ args: []
+ },
+ pass: {
+ type: "text",
+ title: "Set Password",
+ args: [Math.floor(Math.random() * 10000), ""]
+ }
}
// Client acts as the message hub for the whole game.
@@ -47,162 +42,170 @@ const DefaultGameOps = {
// Client also performs the handshake for first starting the connection and messages everyone if the connection errors or closes.
class Client{
- constructor (serveraddr, game)
- {
- this.socket = new SockWorker(serveraddr, VERSION);
- this.socket.addEventListener("error", this.socketError.bind(this));
- this.socket.addEventListener("closed", this.socketClose.bind(this));
- this.socket.addEventListener("handshake", this.handshake.bind(this));
- this.socket.addEventListener("menu", this.menu.bind(this));
- this.socket.addEventListener("game", this.game.bind(this));
+ constructor (serveraddr, game)
+ {
+ this.socket = new SockWorker(serveraddr, VERSION);
+ this.socket.addEventListener("error", this.socketError.bind(this));
+ this.socket.addEventListener("closed", this.socketClose.bind(this));
+ this.socket.addEventListener("handshake", this.handshake.bind(this));
+ this.socket.addEventListener("menu", this.menu.bind(this));
+ this.socket.addEventListener("game", this.game.bind(this));
this.socket.addEventListener("chat", this.chat.bind(this));
- this.lobby = new Lobby(document.getElementsByClassName("lobby")[0], this.socket);
-
- this.drag = new MultiDrag();
-
- this.table = new Table(document.getElementsByClassName("table")[0], this.drag, this.socket);
-
- this.chat = new Chat(document.getElementsByClassName("chat")[0], this.socket);
- this.chat.addChannel("Global");
- this.chat.switchChannel("Global");
-
- this.settings = new Settings(DefaultUserOps);
- this.settings.putSettings(this.lobby.e.settings);
-
- this.gameOptions = new Settings(DefaultGameOps);
- this.gameOptions.putSettings(this.lobby.top.newGame);
-
- this.game = game;
- }
-
- // Initialize the connection
- init ()
- {
- this.socket.init();
- }
-
- // Callbacks for if the socket fails or closes
-
- socketError() {
- this.lobby.setState("Error", "closed", this.socket.server);
- this.table.handleClose();
- }
-
- socketClose() {
- this.lobby.setState("Closed", "closed", this.socket.server);
- this.table.handleClose();
- }
-
- // Callback when negotiating with the server for the first time and we are determining versions
- handshake (m)
- {
- switch (m.type) {
- case "verr":
- this.socket.close();
-
- alert(`Error connecting to server: version of client (${this.version}) not accepted.`);
-
- console.error(`Error connecting to server: version of client (${this.version}) not accepted.`);
-
- console.error(m.data);
-
- return;
-
- case "ready":
- this.settings.cleanup();
- this.gameOptions.cleanup();
-
- this.settings = new Settings(m.data.user);
- this.gameOptions = new Settings(m.data.game);
-
- this.gameOptions.putSettings(this.lobby.top.newGame);
-
- if(this.lobby.top.mobileSettingsOpen())
- this.settings.putSettings(this.lobby.top.mobileSettings);
- else
- this.settings.putSettings(this.lobby.e.settings);
-
- this.socket.send("ready", "");
-
- return;
- }
- }
-
- // Menu switch, called when in the lobby and a message arrives from the server
- menu (m)
- {
- switch (m.type) {
- case "plist":
- this.lobby.packList(m.data);
- break;
- case "glist":
- this.lobby.gameList(m.data, this.game);
- this.game = null;
- break;
- case "players":
- this.lobby.players(m.data);
- break;
- case "gdel":
- this.lobby.removeGame(m.data);
- break;
- case "gadd":
- this.lobby.addGame(m.data);
- break;
- case "pdel":
- this.lobby.removePlayer(m.data);
- break;
- case "padd":
- this.lobby.addPlayer(m.data);
- break;
- case "pmove":
- this.lobby.movePlayer(m.data);
- break;
- }
- }
-
- // Game switch, called when in game and a message arrives from the server
- game (m)
- {
- switch (m.type) {
- case "move":
- this.table.moveByID(m.data.card, m.data.deck, m.data.pos);
- break;
- }
- }
-
- // Callback when a chat event is recieved from the server
- chat (m)
- {
- switch (m.type) {
- case "delchan":
- this.chat.deleteChannel(m.data);
- break;
- case "newchan":
- this.chat.addChannel(m.data);
- break;
-
- case "message":
- this.chat.recieveMessage(m.data.type, m.data.data);
- }
- }
-
- // Reset the lobby and table, then attempt to reopen the connection to the server.
- reset ()
- {
- this.lobby.reset();
- this.table.reset();
-
- this.socket.init();
- }
-
- joinGame(id)
- {
- this.table.openTable();
- }
-
- leaveGame()
- {
-
- }
+ this.lobby = new Lobby(document.getElementsByClassName("lobby")[0], this.socket);
+
+ this.drag = new MultiDrag();
+
+ this.table = new Table(document.getElementsByClassName("table")[0], this.drag, this.socket);
+
+ this.chat = new Chat(document.getElementsByClassName("chat")[0], this.socket);
+ this.chat.addChannel("Global");
+ this.chat.switchChannel("Global");
+
+ this.settings = new Settings(DefaultUserOps);
+ this.settings.putSettings(this.lobby.e.settings);
+
+ this.gameOptions = new Settings(DefaultGameOps);
+ this.gameOptions.putSettings(this.lobby.top.newGame);
+
+ this.game = game;
+ }
+
+ // Initialize the connection
+ init ()
+ {
+ this.socket.init();
+ }
+
+ // Callbacks for if the socket fails or closes
+
+ socketError() {
+ alert("Connection error");
+ this.lobby.setState("Error", "closed", this.socket.server);
+ this.table.handleClose();
+ }
+
+ socketClose() {
+ alert("Connection closed by server");
+ this.lobby.setState("Closed", "closed", this.socket.server);
+ this.table.handleClose();
+ }
+
+ // Callback when negotiating with the server for the first time and we are determining versions
+ handshake (e)
+ {
+ let m = e.detail;
+ switch (m.type) {
+ case "verr":
+ this.socket.close();
+
+ alert(`Error connecting to server: version of client (${this.version}) not accepted.`);
+
+ console.error(`Error connecting to server: version of client (${this.version}) not accepted.`);
+
+ console.error(m.data);
+
+ return;
+
+ case "ready":
+ console.log(`Handshake with server OK. Running client version ${this.version}`);
+
+ this.settings.cleanup();
+ this.gameOptions.cleanup();
+
+ this.settings = new Settings(m.data.user);
+ this.gameOptions = new Settings(m.data.game);
+
+ this.gameOptions.putSettings(this.lobby.top.newGame);
+
+ if(this.lobby.top.mobileSettingsOpen())
+ this.settings.putSettings(this.lobby.top.mobileSettings);
+ else
+ this.settings.putSettings(this.lobby.e.settings);
+
+ this.socket.send("ready", "");
+
+ return;
+ }
+ }
+
+ // Menu switch, called when in the lobby and a message arrives from the server
+ menu (e)
+ {
+ let m = e.detail;
+ switch (m.type) {
+ case "plist":
+ this.lobby.packList(m.data);
+ break;
+ case "glist":
+ this.lobby.gameList(m.data, this.game);
+ this.game = null;
+ break;
+ case "players":
+ this.lobby.players(m.data);
+ break;
+ case "gdel":
+ this.lobby.removeGame(m.data);
+ break;
+ case "gadd":
+ this.lobby.addGame(m.data);
+ break;
+ case "pdel":
+ this.lobby.removePlayer(m.data);
+ break;
+ case "padd":
+ this.lobby.addPlayer(m.data);
+ break;
+ case "pmove":
+ this.lobby.movePlayer(m.data);
+ break;
+ }
+ }
+
+ // Game switch, called when in game and a message arrives from the server
+ game (e)
+ {
+ let m = e.detail;
+ switch (m.type) {
+ case "move":
+ this.table.moveByID(m.data.card, m.data.deck, m.data.pos);
+ break;
+ }
+ }
+
+ // Callback when a chat event is recieved from the server
+ chat (e)
+ {
+ let m = e.detail;
+ switch (m.type) {
+ case "delchan":
+ this.chat.deleteChannel(m.data);
+ break;
+ case "newchan":
+ this.chat.addChannel(m.data);
+ break;
+
+ case "message":
+ this.chat.recieveMessage(m.data.type, m.data.data);
+ }
+ }
+
+ // Reset the lobby and table, then attempt to reopen the connection to the server.
+ reset ()
+ {
+ this.lobby.reset();
+ this.table.reset();
+
+ this.socket.init();
+ }
+
+ joinGame(id)
+ {
+ this.table.openTable();
+ }
+
+ leaveGame()
+ {
+
+ }
}
diff --git a/scripts/cookie.js b/scripts/cookie.js
index 44a0be9..9c88963 100644
--- a/scripts/cookie.js
+++ b/scripts/cookie.js
@@ -1,36 +1,36 @@
'use strict';
class Cookies {
- static getCookie(name){
- let cookies = document.cookie.split(";");
- for(let i in cookies) {
- let cname = cookies[i].trim().split("=")[0];
- if(cname == name){
- return cookies[i].trim().slice(name.length + 1);
- }
- }
- return "";
- }
+ static getCookie(name){
+ let cookies = document.cookie.split(";");
+ for(let i in cookies) {
+ let cname = cookies[i].trim().split("=")[0];
+ if(cname == name){
+ return cookies[i].trim().slice(name.length + 1);
+ }
+ }
+ return "";
+ }
- static setCookie(name, value, data = {SameSite: "Strict"}) {
- let extra = "";
+ static setCookie(name, value, data = {SameSite: "Strict"}) {
+ let extra = "";
- for(let key in data)
- {
- extra += "; " + key + "=" + data[key];
- }
+ for(let key in data)
+ {
+ extra += "; " + key + "=" + data[key];
+ }
- document.cookie = name + "=" + value + extra;
- }
+ document.cookie = name + "=" + value + extra;
+ }
- static setYearCookie(name, value) {
- var date = new Date(Date.now());
- date.setFullYear(date.getFullYear() + 1);
- Cookies.setCookie(name, value, {SameSite: "Strict", expires: date.toUTCString()});
- }
+ static setYearCookie(name, value) {
+ var date = new Date(Date.now());
+ date.setFullYear(date.getFullYear() + 1);
+ Cookies.setCookie(name, value, {SameSite: "Strict", expires: date.toUTCString()});
+ }
- static removeCookie(name) {
- var date = new Date(0);
- Cookies.setCookie(name, "", {SameSite: "Strict", expires: date.toUTCString()});
- }
+ static removeCookie(name) {
+ var date = new Date(0);
+ Cookies.setCookie(name, "", {SameSite: "Strict", expires: date.toUTCString()});
+ }
}
diff --git a/scripts/gui/chat.js b/scripts/gui/chat.js
index dda541e..f3b0975 100644
--- a/scripts/gui/chat.js
+++ b/scripts/gui/chat.js
@@ -1,102 +1,102 @@
'use strict';
class Chat {
- constructor(e, soc)
- {
- this.chats = [];
- this.root = e;
+ constructor(e, soc)
+ {
+ this.chats = [];
+ this.root = e;
this.socket = soc;
- e.getElementsByClassName("toggle-chat")[0].onclick = this.toggle.bind(this);
+ e.getElementsByClassName("toggle-chat")[0].onclick = this.toggle.bind(this);
let cin = e.getElementsByClassName("chat-input")[0];
this.chatInput = cin.children[0];
cin.children[0].addEventListener("keydown", this.checkEnter.bind(this));
cin.children[1].addEventListener("click", this.sendMessage.bind(this));
- }
-
- getChannel (name)
- {
- for(let i in this.chats)
- {
- if (this.chats[i].name == name)
- {
- return this.chats[i];
- }
- }
-
- return null;
- }
-
- isActive (name)
- {
- for(let i in this.chats)
- {
- if (this.chats[i].name == name)
- {
- if(this.chats[i].btn.getAttribute("active") == "true")
- return true;
- return false;
- }
- }
-
- return false;
- }
-
- addChannel (name, follow = true)
- {
- if(this.getChannel(name) != null)
- return;
-
- let d = document.createElement("div");
- let b = document.createElement("button");
-
- this.root.getElementsByClassName("chat-select")[0].appendChild(b);
-
- b.setAttribute("active", false);
-
- b.onclick = this.switchChannel.bind(this, name);
-
- b.innerText = name;
-
- d.className = "chat-text";
-
- this.chats.push({name: name, e: d, btn: b});
-
- if(follow)
- this.switchChannel(name)
- }
-
- getActiveChannel ()
- {
- for(let i in this.chats)
- {
- if (this.chats[i].btn.getAttribute("active") == "true")
- {
- return this.chats[i];
- }
- }
-
- return null;
- }
-
- switchChannel (name)
- {
- let c = this.getChannel(name);
-
- if(c == null)
- return;
-
- if(this.getActiveChannel() != null)
- this.getActiveChannel().btn.setAttribute("active", false);
-
- c.btn.setAttribute("active", true);
- var ct = this.root.getElementsByClassName("chat-text")[0];
- ct.replaceWith(c.e);
-
- c.e.scroll({
- top: c.e.scrollTopMax
- });
- }
+ }
+
+ getChannel (name)
+ {
+ for(let i in this.chats)
+ {
+ if (this.chats[i].name == name)
+ {
+ return this.chats[i];
+ }
+ }
+
+ return null;
+ }
+
+ isActive (name)
+ {
+ for(let i in this.chats)
+ {
+ if (this.chats[i].name == name)
+ {
+ if(this.chats[i].btn.getAttribute("active") == "true")
+ return true;
+ return false;
+ }
+ }
+
+ return false;
+ }
+
+ addChannel (name, follow = true)
+ {
+ if(this.getChannel(name) != null)
+ return;
+
+ let d = document.createElement("div");
+ let b = document.createElement("button");
+
+ this.root.getElementsByClassName("chat-select")[0].appendChild(b);
+
+ b.setAttribute("active", false);
+
+ b.onclick = this.switchChannel.bind(this, name);
+
+ b.innerText = name;
+
+ d.className = "chat-text";
+
+ this.chats.push({name: name, e: d, btn: b});
+
+ if(follow)
+ this.switchChannel(name)
+ }
+
+ getActiveChannel ()
+ {
+ for(let i in this.chats)
+ {
+ if (this.chats[i].btn.getAttribute("active") == "true")
+ {
+ return this.chats[i];
+ }
+ }
+
+ return null;
+ }
+
+ switchChannel (name)
+ {
+ let c = this.getChannel(name);
+
+ if(c == null)
+ return;
+
+ if(this.getActiveChannel() != null)
+ this.getActiveChannel().btn.setAttribute("active", false);
+
+ c.btn.setAttribute("active", true);
+ var ct = this.root.getElementsByClassName("chat-text")[0];
+ ct.replaceWith(c.e);
+
+ c.e.scroll({
+ top: c.e.scrollTopMax
+ });
+ }
checkEnter(e)
{
@@ -113,67 +113,67 @@ class Chat {
}
- recieveMessage (channel, msg)
- {
- let c = this.getChannel(channel);
-
- if(c == null)
- return;
-
- let autoscroll = c.e.scrollTop == c.e.scrollTopMax;
-
- let csp = document.createElement("span")
- let tsp = document.createElement("span");
-
- if(msg.server === true){
- csp.style.color = "white";
- csp.style.backgroundColor = "black";
- csp.innerText = "[SERVER]";
- tsp.innerText = " " + msg.text;
- } else {
- csp.style.color = msg.color;
- csp.innerText = msg.user + ": ";
- tsp.innerText = msg.text;
- }
-
- let d = document.createElement("div");
- d.appendChild(csp);
- d.appendChild(tsp);
-
- c.e.appendChild(d);
-
- if(autoscroll)
- c.e.scroll({top: c.e.scrollTopMax});
- }
-
- clearChannel (name)
- {
- let c = this.getChannel(name);
- if(c == null)
- return;
-
- while(c.e.firstElementChild != null)
- c.e.firstElementChild.remove();
- }
-
- deleteChannel (name)
- {
- let c = this.getChannel(name);
- if(c == null)
- return;
-
- while(c.e.firstElementChild != null)
- c.e.firstElementChild.remove();
-
- c.btn.remove();
-
- this.chats.splice(this.chats.indexOf(c), 1);
- }
-
- toggle () {
- if(this.root.getAttribute("show") != "true")
- this.root.setAttribute("show", "true");
- else
- this.root.setAttribute("show", "false");
- }
+ recieveMessage (channel, msg)
+ {
+ let c = this.getChannel(channel);
+
+ if(c == null)
+ return;
+
+ let autoscroll = c.e.scrollTop == c.e.scrollTopMax;
+
+ let csp = document.createElement("span")
+ let tsp = document.createElement("span");
+
+ if(msg.server === true){
+ csp.style.color = "white";
+ csp.style.backgroundColor = "black";
+ csp.innerText = "[SERVER]";
+ tsp.innerText = " " + msg.text;
+ } else {
+ csp.style.color = msg.color;
+ csp.innerText = msg.user + ": ";
+ tsp.innerText = msg.text;
+ }
+
+ let d = document.createElement("div");
+ d.appendChild(csp);
+ d.appendChild(tsp);
+
+ c.e.appendChild(d);
+
+ if(autoscroll)
+ c.e.scroll({top: c.e.scrollTopMax});
+ }
+
+ clearChannel (name)
+ {
+ let c = this.getChannel(name);
+ if(c == null)
+ return;
+
+ while(c.e.firstElementChild != null)
+ c.e.firstElementChild.remove();
+ }
+
+ deleteChannel (name)
+ {
+ let c = this.getChannel(name);
+ if(c == null)
+ return;
+
+ while(c.e.firstElementChild != null)
+ c.e.firstElementChild.remove();
+
+ c.btn.remove();
+
+ this.chats.splice(this.chats.indexOf(c), 1);
+ }
+
+ toggle () {
+ if(this.root.getAttribute("show") != "true")
+ this.root.setAttribute("show", "true");
+ else
+ this.root.setAttribute("show", "false");
+ }
}
diff --git a/scripts/gui/input.js b/scripts/gui/input.js
index a44784b..ddaa4a3 100644
--- a/scripts/gui/input.js
+++ b/scripts/gui/input.js
@@ -2,239 +2,239 @@
//Mostly fixed now
class MakeInput {
- static createInput(type = "text", wrap = false, getset = true)
- {
- var el = document.createElement("input");
- el.setAttribute("type", type);
-
- if(wrap)
- {
- return this.wrapInputs(type, el);
- }
-
- if(getset) {
- el.getValue = function () {
- return this.value;
- }
-
- el.setValue = function(value) {
- this.value = value
- }
- }
-
- return el;
- }
-
- // Function deprecated, finding another way to do this
- static inputLabel(text, id)
- {
- var el = document.createElement("label");
- el.innerText = text;
- if(typeof id == "string")
- el.setAttribute("for", id);
- return el;
- }
-
- static colorInput (value) {
- var el = MakeInput.createInput("color", true);
- el.setValue(value);
- return el;
- }
-
- static textInput (value, placeholder)
- {
- var el = MakeInput.createInput("text");
- el.setAttribute("placeholder", placeholder);
- el.value = value;
- return el;
- }
-
- static numberInput (value)
- {
- var el = MakeInput.createInput("number");
- el.value = value;
- return el;
- }
-
- static fileInput (accepts = "", multiple = false) {
- var el = MakeInput.createInput("file", true, false);
-
- let e = el.getElement();
- e.setAttribute("accepts", accepts);
- e.multiple = multiple;
- el.getValue = function() {
- return e.files;
- }
-
- el.setAttribute("data-files", "Choose a file");
-
- el.firstElementChild.onchange = function () {
- let text = "";
- switch (this.files.length) {
- case 0:
- text = "Choose a file";
- break;
- case 1:
- text = "File: " + this.files[0].name;
- break;
- default:
- text = "Files: " + this.files[0].name + "...";
- break;
- }
- el.setAttribute("data-files", text);
- }
-
- return el;
- }
-
- static checkboxInput (value = false) {
- var el = MakeInput.createInput("checkbox", false, false);
-
- el.getValue = function() {
- return el.checked;
- }
-
- el.setValue = function(check) {
- el.checked = check;
- }
-
- el.setValue(value);
-
- return el;
- }
-
- static radio (value, group, checked = false) {
- var el = MakeInput.createInput("radio", false, false);
- el.setAttribute("name", group);
- el.setAttribute("value", value);
- if(checked)
- el.checked = true;
- return el;
- }
-
- static radioInput (values, names, group, prompt = "Select One", select = 0) {
-
- let toWrap = [];
-
- for(let i = 0; i < values.length; i++) {
- toWrap.push(MakeInput.inputLabel(names[i]));
- if(i == select)
- toWrap.push(MakeInput.radio(values[i], group, true));
- else
- toWrap.push(MakeInput.radio(values[i], group, false));
- toWrap.push(document.createElement("br"));
- }
-
- var wrapper = MakeInput.wrapInputs("radio", ...toWrap);
-
- wrapper.setAttribute("data-prompt", prompt);
-
- wrapper.getValue = function() {
- for(let i = 0; i < this.children.length; i++){
- if(this.children[i].checked)
- return this.children[i].value;
- }
- };
-
- wrapper.setValue = function(value) {
- for(let i = 0; i < this.children.length; i++){
- if(this.children[i].value == value){
- this.children[i].checked = true;
- return;
- }
- }
- };
-
- return wrapper;
- }
-
- static wrapInputs (type, ...el) {
-
- var wrapper = document.createElement("div");
- wrapper.className = "input-container";
- wrapper.setAttribute("type", type);
-
- for(let i = 0; i < el.length; i++)
- {
- wrapper.appendChild(el[i]);
- }
-
- if(el.length == 1)
- {
- wrapper.getValue = function () {return el[0].value;}
-
- wrapper.setValue = function(value) {el[0].value = value;}
-
- wrapper.onclick = el[0].click.bind(el[0]);
-
- wrapper.getElement = function(){return el[0];}
- }
-
- return wrapper;
- }
-
- static selectOption (value, text, index, selected) {
- var so = document.createElement("div");
- so.innerText = text;
- so.selectValue = value;
- so.selectIndex = index;
- so.addEventListener("mousedown", MakeInput.selOption.bind(null, so));
-
- if(selected === true)
- so.setAttribute("selected", true);
-
- return so
- }
-
- static selectInput (values, names, select = 0) {
- var se = document.createElement("div");
- se.className = "input-select";
- se.setAttribute("tabindex", 0);
- se.setAttribute("selected", select);
-
- for(let i in names)
- {
- se.appendChild(MakeInput.selectOption(values[i], names[i], i, i == select));
- }
-
- var wrapper = MakeInput.wrapInputs("select", se);
- wrapper.getValue = MakeInput.selValue.bind(null, se);
+ static createInput(type = "text", wrap = false, getset = true)
+ {
+ var el = document.createElement("input");
+ el.setAttribute("type", type);
+
+ if(wrap)
+ {
+ return this.wrapInputs(type, el);
+ }
+
+ if(getset) {
+ el.getValue = function () {
+ return this.value;
+ }
+
+ el.setValue = function(value) {
+ this.value = value
+ }
+ }
+
+ return el;
+ }
+
+ // Function deprecated, finding another way to do this
+ static inputLabel(text, id)
+ {
+ var el = document.createElement("label");
+ el.innerText = text;
+ if(typeof id == "string")
+ el.setAttribute("for", id);
+ return el;
+ }
+
+ static colorInput (value) {
+ var el = MakeInput.createInput("color", true);
+ el.setValue(value);
+ return el;
+ }
+
+ static textInput (value, placeholder)
+ {
+ var el = MakeInput.createInput("text");
+ el.setAttribute("placeholder", placeholder);
+ el.value = value;
+ return el;
+ }
+
+ static numberInput (value)
+ {
+ var el = MakeInput.createInput("number");
+ el.value = value;
+ return el;
+ }
+
+ static fileInput (accepts = "", multiple = false) {
+ var el = MakeInput.createInput("file", true, false);
+
+ let e = el.getElement();
+ e.setAttribute("accepts", accepts);
+ e.multiple = multiple;
+ el.getValue = function() {
+ return e.files;
+ }
+
+ el.setAttribute("data-files", "Choose a file");
+
+ el.firstElementChild.onchange = function () {
+ let text = "";
+ switch (this.files.length) {
+ case 0:
+ text = "Choose a file";
+ break;
+ case 1:
+ text = "File: " + this.files[0].name;
+ break;
+ default:
+ text = "Files: " + this.files[0].name + "...";
+ break;
+ }
+ el.setAttribute("data-files", text);
+ }
+
+ return el;
+ }
+
+ static checkboxInput (value = false) {
+ var el = MakeInput.createInput("checkbox", false, false);
+
+ el.getValue = function() {
+ return el.checked;
+ }
+
+ el.setValue = function(check) {
+ el.checked = check;
+ }
+
+ el.setValue(value);
+
+ return el;
+ }
+
+ static radio (value, group, checked = false) {
+ var el = MakeInput.createInput("radio", false, false);
+ el.setAttribute("name", group);
+ el.setAttribute("value", value);
+ if(checked)
+ el.checked = true;
+ return el;
+ }
+
+ static radioInput (values, names, group, prompt = "Select One", select = 0) {
+
+ let toWrap = [];
+
+ for(let i = 0; i < values.length; i++) {
+ toWrap.push(MakeInput.inputLabel(names[i]));
+ if(i == select)
+ toWrap.push(MakeInput.radio(values[i], group, true));
+ else
+ toWrap.push(MakeInput.radio(values[i], group, false));
+ toWrap.push(document.createElement("br"));
+ }
+
+ var wrapper = MakeInput.wrapInputs("radio", ...toWrap);
+
+ wrapper.setAttribute("data-prompt", prompt);
+
+ wrapper.getValue = function() {
+ for(let i = 0; i < this.children.length; i++){
+ if(this.children[i].checked)
+ return this.children[i].value;
+ }
+ };
+
+ wrapper.setValue = function(value) {
+ for(let i = 0; i < this.children.length; i++){
+ if(this.children[i].value == value){
+ this.children[i].checked = true;
+ return;
+ }
+ }
+ };
+
+ return wrapper;
+ }
+
+ static wrapInputs (type, ...el) {
+
+ var wrapper = document.createElement("div");
+ wrapper.className = "input-container";
+ wrapper.setAttribute("type", type);
+
+ for(let i = 0; i < el.length; i++)
+ {
+ wrapper.appendChild(el[i]);
+ }
+
+ if(el.length == 1)
+ {
+ wrapper.getValue = function () {return el[0].value;}
+
+ wrapper.setValue = function(value) {el[0].value = value;}
+
+ wrapper.onclick = el[0].click.bind(el[0]);
+
+ wrapper.getElement = function(){return el[0];}
+ }
+
+ return wrapper;
+ }
+
+ static selectOption (value, text, index, selected) {
+ var so = document.createElement("div");
+ so.innerText = text;
+ so.selectValue = value;
+ so.selectIndex = index;
+ so.addEventListener("mousedown", MakeInput.selOption.bind(null, so));
+
+ if(selected === true)
+ so.setAttribute("selected", true);
+
+ return so
+ }
+
+ static selectInput (values, names, select = 0) {
+ var se = document.createElement("div");
+ se.className = "input-select";
+ se.setAttribute("tabindex", 0);
+ se.setAttribute("selected", select);
+
+ for(let i in names)
+ {
+ se.appendChild(MakeInput.selectOption(values[i], names[i], i, i == select));
+ }
+
+ var wrapper = MakeInput.wrapInputs("select", se);
+ wrapper.getValue = MakeInput.selValue.bind(null, se);
wrapper.getIndex = MakeInput.selIndex.bind(null, se);
wrapper.addOption = MakeInput.selAdd.bind(se);
wrapper.removeOption = MakeInput.selRem.bind(se);
wrapper.setIndex = MakeInput.selSet.bind(se);
- wrapper.setAttribute("tabindex", 0);
+ wrapper.setAttribute("tabindex", 0);
+
+ return wrapper;
+ }
- return wrapper;
- }
+ static selValue (el) {
+ let sel = parseInt(el.getAttribute("selected"));
+
+ if(typeof sel != "undefined") {
+ return el.children[sel].selectValue;
+ }
- static selValue (el) {
- let sel = parseInt(el.getAttribute("selected"));
-
- if(typeof sel != "undefined") {
- return el.children[sel].selectValue;
- }
-
- return "";
- }
+ return "";
+ }
static selIndex (el) {
return parseInt(el.getAttribute("selected"));
}
-
- static selOption (el, dispatch = true) {
- let sn = el.selectIndex;
- let psn = parseInt(el.parentElement.getAttribute("selected"));
-
- if(Number.isInteger(psn) && psn < el.parentElement.childElementCount)
- el.parentElement.children[psn].setAttribute("selected", false);
-
- el.parentElement.setAttribute("selected", sn);
- el.setAttribute("selected", true);
+
+ static selOption (el, dispatch = true) {
+ let sn = el.selectIndex;
+ let psn = parseInt(el.parentElement.getAttribute("selected"));
+
+ if(Number.isInteger(psn) && psn < el.parentElement.childElementCount)
+ el.parentElement.children[psn].setAttribute("selected", false);
+
+ el.parentElement.setAttribute("selected", sn);
+ el.setAttribute("selected", true);
if(dispatch)
el.parentElement.parentElement.dispatchEvent(new InputEvent("change"));
- }
+ }
static selSet (index) {
MakeInput.selOption(this.children[index], false);
@@ -258,71 +258,71 @@ class MakeInput {
return true;
}
- static titleWrap(el, title) {
- var wrapper = document.createElement("div");
- wrapper.className = "input-title-wrapper";
- wrapper.setAttribute("type", el.getAttribute("type"));
- wrapper.setAttribute("data-title", title);
-
- wrapper.appendChild(el);
-
- if(el.getAttribute("type") == "checkbox")
- {
- wrapper.onclick = el.click.bind(el);
- }
-
- return wrapper;
- }
+ static titleWrap(el, title) {
+ var wrapper = document.createElement("div");
+ wrapper.className = "input-title-wrapper";
+ wrapper.setAttribute("type", el.getAttribute("type"));
+ wrapper.setAttribute("data-title", title);
+
+ wrapper.appendChild(el);
+
+ if(el.getAttribute("type") == "checkbox")
+ {
+ wrapper.onclick = el.click.bind(el);
+ }
+
+ return wrapper;
+ }
}
// Mostly fixed now
class Settings {
- constructor (template = {})
- {
- this.settings = Settings.genSettings(template);
-
- this.wrappers = {};
- }
-
- static genSettings (template)
- {
- var out = {};
-
- for(let key in template)
- {
- if(typeof MakeInput[template[key].type+"Input"] != null)
- out[key] = {el: MakeInput[template[key].type+"Input"](...template[key].args), title: template[key].title};
- }
-
- return out;
- }
-
- getSettings ()
- {
- var out = {};
-
- for(let key in this.settings)
- out[key] = this.settings[key].el.getValue();
-
- return out;
- }
-
- putSettings (el)
- {
- this.cleanup();
-
- this.wrappers = {};
-
- for(let key in this.settings) {
- this.wrappers[key] = MakeInput.titleWrap(this.settings[key].el, this.settings[key].title)
- el.appendChild(this.wrappers[key]);
- }
-
- }
-
- cleanup ()
- {
- for(let key in this.wrappers)
- this.wrappers[key].remove();
- }
+ constructor (template = {})
+ {
+ this.settings = Settings.genSettings(template);
+
+ this.wrappers = {};
+ }
+
+ static genSettings (template)
+ {
+ var out = {};
+
+ for(let key in template)
+ {
+ if(typeof MakeInput[template[key].type+"Input"] != null)
+ out[key] = {el: MakeInput[template[key].type+"Input"](...template[key].args), title: template[key].title};
+ }
+
+ return out;
+ }
+
+ getSettings ()
+ {
+ var out = {};
+
+ for(let key in this.settings)
+ out[key] = this.settings[key].el.getValue();
+
+ return out;
+ }
+
+ putSettings (el)
+ {
+ this.cleanup();
+
+ this.wrappers = {};
+
+ for(let key in this.settings) {
+ this.wrappers[key] = MakeInput.titleWrap(this.settings[key].el, this.settings[key].title)
+ el.appendChild(this.wrappers[key]);
+ }
+
+ }
+
+ cleanup ()
+ {
+ for(let key in this.wrappers)
+ this.wrappers[key].remove();
+ }
}
diff --git a/scripts/gui/table.js b/scripts/gui/table.js
index 9aac2ae..e242ac6 100644
--- a/scripts/gui/table.js
+++ b/scripts/gui/table.js
@@ -1,143 +1,143 @@
'use strict';
// 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) {
- this.root = e;
- this.drag = drag;
-
- drag.addEventListener("dragstart", (e) => {console.log(e)});
- drag.addEventListener("dragstop", this.dragMsg.bind(this));
-
- this.socket = socket;
-
- this.decks = [];
- }
-
- openTable ()
- {
- let state = this.root.getAttribute("state")
- if((state == "close" || state == "closed") && state != "") {
- this.root.setAttribute("state", "closed");
- setTimeout(this.root.setAttribute.bind(this.root), 50, "state", "open");
- }
- }
-
- closeTable ()
- {
- let state = this.root.getAttribute("state")
- if(state != "close" && state != "closed") {
- this.root.setAttribute("state", "");
- setTimeout(this.root.setAttribute.bind(this.root), 50, "state", "close");
- }
- }
-
- handleClose ()
- {
- this.reset();
- }
-
- reset ()
- {
- while(this.root.firstElementChild != null)
- this.root.firstElementChild.remove();
-
- this.decks = [];
-
- this.closeTable();
- this.drag.stopDraggingAll();
- }
-
- /* Deck and card functions */
- newDeck(id, options)
- {
- var d = new Deck(id, options);
- this.decks.push(d);
- this.root.appendChild(d.e);
- }
-
- newCard(id, data, deck = 0)
- {
- var c = new Card(id, data);
- this.decks[deck].appendCard(c);
- this.drag.addTarget(c.e);
- }
-
- checkDeck(x, y)
- {
- for(let d of this.decks)
- {
- if(d.isInside(x, y))
- return d;
- }
- return null;
- }
-
- checkCard (el)
- {
- for(let d of this.decks)
- {
- let c = d.checkCard(el);
- if(c !== null)
- return c;
- }
- return null;
- }
-
- moveCard(card, newDeck, index = -1)
- {
- for(let d of this.decks)
- {
- if (d.removeCardByID(card.getID()) !== null)
- break;
- }
- card.resetPos();
-
- if(index < 0)
- newDeck.appendCard(card);
- else
- newDeck.addCardAt(card, index);
- }
-
- moveByID(cardID, deckID, index = -1)
- {
- let card, deck;
- for(let d of this.decks)
- {
- let c = d.hasCard(cardID)
- if(c !== null)
- card = c;
-
- if(d.getID() == deckID)
- deck = d;
- }
-
- this.moveCard(card, deck, index);
- }
-
- checkMove(cardID, deckID, index = -1)
- {
- this.socket.send("game", {type: "move", card: cardID, deck: deckID, pos: index});
- }
-
- dragCheck(cap)
- {
- console.log(cap);
- }
-
- dragMsg (event)
- {
- if(event.drag.length < 1)
- return;
-
- var c = this.checkCard(event.drag[0].e);
- var d = this.checkDeck(event.x, event.y);
-
- if(c !== null)
- {
- if(d !== null)
- this.checkMove(c.getID(), d.getID());
- else
- c.resetPos();
- }
- }
+ constructor(e, drag, socket) {
+ this.root = e;
+ this.drag = drag;
+
+ drag.addEventListener("dragstart", (e) => {console.log(e)});
+ drag.addEventListener("dragstop", this.dragMsg.bind(this));
+
+ this.socket = socket;
+
+ this.decks = [];
+ }
+
+ openTable ()
+ {
+ let state = this.root.getAttribute("state")
+ if((state == "close" || state == "closed") && state != "") {
+ this.root.setAttribute("state", "closed");
+ setTimeout(this.root.setAttribute.bind(this.root), 50, "state", "open");
+ }
+ }
+
+ closeTable ()
+ {
+ let state = this.root.getAttribute("state")
+ if(state != "close" && state != "closed") {
+ this.root.setAttribute("state", "");
+ setTimeout(this.root.setAttribute.bind(this.root), 50, "state", "close");
+ }
+ }
+
+ handleClose ()
+ {
+ this.reset();
+ }
+
+ reset ()
+ {
+ while(this.root.firstElementChild != null)
+ this.root.firstElementChild.remove();
+
+ this.decks = [];
+
+ this.closeTable();
+ this.drag.stopDraggingAll();
+ }
+
+ /* Deck and card functions */
+ newDeck(id, options)
+ {
+ var d = new Deck(id, options);
+ this.decks.push(d);
+ this.root.appendChild(d.e);
+ }
+
+ newCard(id, data, deck = 0)
+ {
+ var c = new Card(id, data);
+ this.decks[deck].appendCard(c);
+ this.drag.addTarget(c.e);
+ }
+
+ checkDeck(x, y)
+ {
+ for(let d of this.decks)
+ {
+ if(d.isInside(x, y))
+ return d;
+ }
+ return null;
+ }
+
+ checkCard (el)
+ {
+ for(let d of this.decks)
+ {
+ let c = d.checkCard(el);
+ if(c !== null)
+ return c;
+ }
+ return null;
+ }
+
+ moveCard(card, newDeck, index = -1)
+ {
+ for(let d of this.decks)
+ {
+ if (d.removeCardByID(card.getID()) !== null)
+ break;
+ }
+ card.resetPos();
+
+ if(index < 0)
+ newDeck.appendCard(card);
+ else
+ newDeck.addCardAt(card, index);
+ }
+
+ moveByID(cardID, deckID, index = -1)
+ {
+ let card, deck;
+ for(let d of this.decks)
+ {
+ let c = d.hasCard(cardID)
+ if(c !== null)
+ card = c;
+
+ if(d.getID() == deckID)
+ deck = d;
+ }
+
+ this.moveCard(card, deck, index);
+ }
+
+ checkMove(cardID, deckID, index = -1)
+ {
+ this.socket.send("game", {type: "move", card: cardID, deck: deckID, pos: index});
+ }
+
+ dragCheck(cap)
+ {
+ console.log(cap);
+ }
+
+ dragMsg (event)
+ {
+ if(event.drag.length < 1)
+ return;
+
+ var c = this.checkCard(event.drag[0].e);
+ var d = this.checkDeck(event.x, event.y);
+
+ if(c !== null)
+ {
+ if(d !== null)
+ this.checkMove(c.getID(), d.getID());
+ else
+ c.resetPos();
+ }
+ }
}
diff --git a/scripts/socket/message.js b/scripts/socket/message.js
index 044027d..0288cbc 100644
--- a/scripts/socket/message.js
+++ b/scripts/socket/message.js
@@ -1,18 +1,18 @@
'use strict';
class Message{
- constructor (type, data)
- {
- this.t = type;
- this.d = data;
- }
+ constructor (type, data)
+ {
+ this.t = type;
+ this.d = data;
+ }
- stringify ()
- {
- var dat = this.d
- if(typeof dat !== "string"){
- dat = JSON.stringify(dat);
- }
- return JSON.stringify({type: this.t, data: dat});
- }
+ stringify ()
+ {
+ var dat = this.d
+ if(typeof dat !== "string"){
+ dat = JSON.stringify(dat);
+ }
+ return JSON.stringify({type: this.t, data: dat});
+ }
}
diff --git a/scripts/socket/sock.js b/scripts/socket/sock.js
index 36e28bc..0a04b63 100644
--- a/scripts/socket/sock.js
+++ b/scripts/socket/sock.js
@@ -1,71 +1,71 @@
'use strict';
// A wrapper around the wrapper
class SockWorker extends EventTarget{
- constructor (serveraddr, version)
- {
- super();
+ constructor (serveraddr, version)
+ {
+ super();
- this.server = serveraddr;
- this.version = version;
- }
+ this.server = serveraddr;
+ this.version = version;
+ }
- // Initialize the connection.
- init () {
- if(this.server == "" || this.server == null) {
- return;
- }
- try {
- this.socket = new WebSocket(this.server);
+ // Initialize the connection.
+ init () {
+ if(this.server == "" || this.server == null) {
+ return;
+ }
+ try {
+ this.socket = new WebSocket(this.server);
- this.socket.addEventListener("open", this.o.bind(this));
- this.socket.addEventListener("message", this.msg.bind(this));
+ this.socket.addEventListener("open", this.o.bind(this));
+ this.socket.addEventListener("message", this.msg.bind(this));
- this.socket.addEventListener("closed", this.c.bind(this));
- this.socket.addEventListener("error", this.err.bind(this));
- } catch (e) {
- this.err();
- }
- }
+ this.socket.addEventListener("closed", this.c.bind(this));
+ this.socket.addEventListener("error", this.err.bind(this));
+ } catch (e) {
+ this.err();
+ }
+ }
- // Called when the connection connects to the server
- o () {
- this.send("version", this.version);
- }
+ // Called when the connection connects to the server
+ o () {
+ this.send("version", this.version);
+ }
- // Called when the connection gets a message from the server
- // Attempts to turn the message into a usable object and pass it to the callback
- msg (e) {
- if(typeof e.data == "string") {
- var dat = JSON.parse(e.data)
- this.dispatchEvent(new Event(dat.type, dat.data));
- }
- }
+ // Called when the connection gets a message from the server
+ // Attempts to turn the message into a usable object and pass it to the callback
+ msg (e) {
+ if(typeof e.data == "string") {
+ var dat = JSON.parse(e.data);
+ this.dispatchEvent(new CustomEvent(dat.type, {detail: dat.data}));
+ }
+ }
- // Called when the connection closes.
- // Passes a close object to the callback.
- c () {
- this.dispatchEvent(new Event("closed"));
- }
+ // Called when the connection closes.
+ // Passes a close object to the callback.
+ c () {
+ this.dispatchEvent(new Event("closed"));
+ }
- // Called when the connection encounters an error.
- // Passes an error to the callback
- err () {
- this.dispatchEvent(new Event("error"));
- }
-
- // Call to close the connection to the server
- close () {
- this.socket.close();
- }
+ // Called when the connection encounters an error.
+ // Passes an error to the callback
+ err () {
+ this.dispatchEvent(new Event("error"));
+ }
- // Send a message to the server
- send (type, data) {
- var m = new Message(type, data);
- this.socket.send(m.stringify())
- }
+ // Call to close the connection to the server
+ close () {
+ this.socket.close();
+ }
- // Raw message the server
- sendRaw (s) {
- this.socket.send(s)
- }
+ // Send a message to the server
+ send (type, data) {
+ var m = new Message(type, data);
+ this.socket.send(m.stringify())
+ }
+
+ // Raw message the server
+ sendRaw (s) {
+ this.socket.send(s)
+ }
}
diff --git a/scripts/theme.js b/scripts/theme.js
index b9dcb37..886a3a1 100644
--- a/scripts/theme.js
+++ b/scripts/theme.js
@@ -10,11 +10,11 @@ const BASE_THEMES = [[
]];
class Theme{
- static theme = document.getElementById("theme");
+ static theme = document.getElementById("theme");
static UserThemes = [[],[]];
- static init()
- {
+ static init()
+ {
let uth = Cookies.getCookie("userThemes").split(',');
for (let i = 1; i < uth.length; i += 2)
@@ -23,22 +23,22 @@ class Theme{
this.UserThemes[1].push(uth[i]);
}
- if(Cookies.getCookie("theme") == ""){
- Cookies.setYearCookie("theme", "styles/themes/colors-base.css");
- }
- }
+ if(Cookies.getCookie("theme") == ""){
+ Cookies.setYearCookie("theme", "styles/themes/colors-base.css");
+ }
+ }
- static restore()
- {
- Theme.init();
- Theme.theme.setAttribute("href", Cookies.getCookie("theme") + "?v=" + Date.now());
- }
+ static restore()
+ {
+ Theme.init();
+ Theme.theme.setAttribute("href", Cookies.getCookie("theme") + "?v=" + Date.now());
+ }
- static set(sheet)
- {
- Cookies.setYearCookie("theme", sheet);
- Theme.theme.setAttribute("href", sheet + "?v=" + Date.now());
- }
+ static set(sheet)
+ {
+ Cookies.setYearCookie("theme", sheet);
+ Theme.theme.setAttribute("href", sheet + "?v=" + Date.now());
+ }
static setUserThemes() {
let out = "";
diff --git a/styles/client/base.css b/styles/client/base.css
index a0178fd..60631ce 100644
--- a/styles/client/base.css
+++ b/styles/client/base.css
@@ -1,348 +1,348 @@
* {
- font-family: 'Montserrat', sans-serif;
+ font-family: 'Montserrat', sans-serif;
transition-duration: 0.2s;
}
html, body {
- margin: 0;
- padding: 0;
+ margin: 0;
+ padding: 0;
- min-width: 100vw;
- min-height: 100vh;
+ min-width: 100vw;
+ min-height: 100vh;
- display: block;
+ display: block;
- background-color: var(--main-bg);
- color: var(--main-color);
+ background-color: var(--main-bg);
+ color: var(--main-color);
- overflow: hidden;
+ overflow: hidden;
}
/* Topbar rules */
.topbar
{
- position: fixed;
+ position: fixed;
- background-color: var(--gui-bg-main);
+ background-color: var(--gui-bg-main);
- top: 0;
- left: 0;
+ top: 0;
+ left: 0;
- display: flex;
+ display: flex;
- flex-direction: column;
+ flex-direction: column;
- width: 100vw;
- z-index: 1;
+ width: 100vw;
+ z-index: 1;
}
.top-buttons
{
- display: flex;
+ display: flex;
}
button.top-button
{
- border-radius: 0;
- background-color: var(--top-bg-button);
- color: var(--top-color-button);
- flex: 1;
+ border-radius: 0;
+ background-color: var(--top-bg-button);
+ color: var(--top-color-button);
+ flex: 1;
- border-left: 1px solid var(--top-border);
- border-right: 1px solid var(--top-border);
+ border-left: 1px solid var(--top-border);
+ border-right: 1px solid var(--top-border);
- transition-duration: 0.2s;
+ transition-duration: 0.2s;
}
button.top-button:hover {
- background-color: var(--top-bg-button-hover);
- color: var(--top-color-button-hover);
+ background-color: var(--top-bg-button-hover);
+ color: var(--top-color-button-hover);
}
button.top-button:active {
- background-color: var(--top-bg-button-active);
- color: var(--top-color-button-active);
+ background-color: var(--top-bg-button-active);
+ color: var(--top-color-button-active);
}
.top-buttons > button:first-child
{
- border-left: none;
+ border-left: none;
}
.top-buttons > button:last-child
{
- border-right: none;
+ border-right: none;
}
div.new-game
{
- flex: 1;
- flex-grow: 1;
- border-top: 2px solid var(--top-border);
+ flex: 1;
+ flex-grow: 1;
+ border-top: 2px solid var(--top-border);
}
div.mobile-settings
{
- flex: 1;
- flex-grow: 1;
- border-top: 2px solid var(--top-border);
+ flex: 1;
+ flex-grow: 1;
+ border-top: 2px solid var(--top-border);
}
div.topbar > div.status
{
- height: 5px;
- flex-basis: auto;
+ height: 5px;
+ flex-basis: auto;
- background-color: var(--server-bg-loading);
+ background-color: var(--server-bg-loading);
}
div.topbar > div.status[s=loading] {
- background-color: var(--server-bg-loading);
+ background-color: var(--server-bg-loading);
}
div.topbar > div.status[s=ok] {
- background-color: var(--server-bg-ok);
+ background-color: var(--server-bg-ok);
}
div.topbar > div.status[s=closed] {
- background-color: var(--server-bg-closed);
+ background-color: var(--server-bg-closed);
}
/* Content rules */
div.stats
{
- padding: 5px;
- display: flex;
- flex-direction: column;
+ padding: 5px;
+ display: flex;
+ flex-direction: column;
}
div.stats > div
{
- flex: 1;
- display: flex;
+ flex: 1;
+ display: flex;
}
div.stats > div > span
{
- flex-basis: content;
- display: inline-block;
+ flex-basis: content;
+ display: inline-block;
}
div.stats > div > span:last-child {
- text-align: right;
- flex: 1;
- display: inline-block;
+ text-align: right;
+ flex: 1;
+ display: inline-block;
}
div.game {
- background-color: var(--gui-bg-game);
- color: var(--gui-color-game);
- border-radius: 5px;
- box-shadow: var(--gui-shadow-game) 3px 3px 2px;
- box-sizing: border-box;
- margin-bottom: 10px;
- padding: 5px;
+ background-color: var(--gui-bg-game);
+ color: var(--gui-color-game);
+ border-radius: 5px;
+ box-shadow: var(--gui-shadow-game) 3px 3px 2px;
+ box-sizing: border-box;
+ margin-bottom: 10px;
+ padding: 5px;
- display: block;
- position: relative;
+ display: block;
+ position: relative;
- text-align: left;
+ text-align: left;
}
div.game:last-child {
- margin-bottom: none;
+ margin-bottom: none;
}
div.settings {
- display:flex;
- flex-direction: column;
- padding: 5px;
- overflow-y: auto;
+ display:flex;
+ flex-direction: column;
+ padding: 5px;
+ overflow-y: auto;
}
/* Table rules */
.table {
- position: absolute;
- z-index: 2;
- width: 100vw;
- height: 100vh;
+ position: absolute;
+ z-index: 2;
+ width: 100vw;
+ height: 100vh;
- animation-duration: 0.8s;
+ animation-duration: 0.8s;
- background-color: var(--table-bg);
+ background-color: var(--table-bg);
- overflow: hidden;
+ overflow: hidden;
}
.table[state=open] ,.table[state=close]{
- animation-name: slide-in;
- animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
- animation-iteration-count: 1;
- animation-direction: normal;
- animation-fill-mode: forwards;
+ animation-name: slide-in;
+ animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
+ animation-iteration-count: 1;
+ animation-direction: normal;
+ animation-fill-mode: forwards;
}
.table[state=close] {
- animation-direction: reverse;
+ animation-direction: reverse;
}
.table[state=closed] {
- transform: translate(0, -100vh);
- opacity: 0;
+ transform: translate(0, -100vh);
+ opacity: 0;
}
@keyframes slide-in {
- from {
- transform: translate(0, -100vh);
- opacity: 0;
- }
+ from {
+ transform: translate(0, -100vh);
+ opacity: 0;
+ }
- to {
- transform: translate(0, 0);
- opacity: 1;
- }
+ to {
+ transform: translate(0, 0);
+ opacity: 1;
+ }
}
/* Chat */
div.chat {
- border-top-left-radius: 10px;
- background-color: var(--chat-bg);
- color: var(--chat-color);
+ border-top-left-radius: 10px;
+ background-color: var(--chat-bg);
+ color: var(--chat-color);
- width: 50vw;
- height: 50vh;
- display: flex;
- flex-direction: column;
- position: absolute;
- right: -50vw;
+ width: 50vw;
+ height: 50vh;
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ right: -50vw;
- box-sizing: border-box;
+ box-sizing: border-box;
- top: 50vh;
+ top: 50vh;
- transition-duration: 0.2s;
+ transition-duration: 0.2s;
- padding: 5px;
+ padding: 5px;
- z-index: 4;
+ z-index: 4;
}
div.chat[show=true] {
- right: 0;
+ right: 0;
}
button.toggle-chat {
- position: absolute;
- bottom: 5px;
- left: -5px;
- transform-origin: bottom left;
- transform: rotate(-90deg);
+ position: absolute;
+ bottom: 5px;
+ left: -5px;
+ transform-origin: bottom left;
+ transform: rotate(-90deg);
}
div.chat > div {
- box-sizing: border-box;
- margin: 5px;
+ box-sizing: border-box;
+ margin: 5px;
}
div.chat-select, div.chat-input {
- flex-basis: content;
- display: flex;
+ flex-basis: content;
+ display: flex;
}
div.chat-text {
- flex: 1;
- overflow-y: auto;
- overflow-x: hidden;
- padding: 5px;
- background-color: var(--chat-bg-text);
- border-radius: 10px;
- border: 5px solid rgba(0, 0, 0, 0);
+ flex: 1;
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding: 5px;
+ background-color: var(--chat-bg-text);
+ border-radius: 10px;
+ border: 5px solid rgba(0, 0, 0, 0);
}
div.chat-select > button {
- flex: 1;
+ flex: 1;
- margin-right: 2px;
- margin-left: 2px;
+ margin-right: 2px;
+ margin-left: 2px;
}
div.chat-select > button[active="false"] {
- background-color: var(--chat-bg-inactive);
+ background-color: var(--chat-bg-inactive);
}
div.chat-select > button[active="false"]:hover {
- background-color: var(--chat-bg-inactive-hover);
+ background-color: var(--chat-bg-inactive-hover);
}
div.chat-select > button[active="false"]:active {
- background-color: var(--chat-bg-inactive-active);
+ background-color: var(--chat-bg-inactive-active);
}
div.chat-select > button[active="true"] {
- background-color: var(--chat-bg-active);
+ background-color: var(--chat-bg-active);
}
div.chat-select > button[active="true"]:hover {
- background-color: var(--chat-bg-active-hover);
+ background-color: var(--chat-bg-active-hover);
}
div.chat-select > button[active="true"]:active {
- background-color: var(--chat-bg-active-active);
+ background-color: var(--chat-bg-active-active);
}
div.chat-select > button:first-child {
- margin-left: 0;
+ margin-left: 0;
}
div.chat-select > button:last-child {
- margin-right: 0;
+ margin-right: 0;
}
div.chat-input > input {
- flex: 5;
+ flex: 5;
- margin: 0;
- margin-right: 5px;
+ margin: 0;
+ margin-right: 5px;
- border-radius: 5px;
+ border-radius: 5px;
- transition-duration: 0.2s;
- border: none;
+ transition-duration: 0.2s;
+ border: none;
- background-color: var(--chat-bg-input);
+ background-color: var(--chat-bg-input);
}
div.chat-input > input:hover {
- background-color: var(--chat-bg-input-hover);
+ background-color: var(--chat-bg-input-hover);
}
div.chat-input > input:focus {
- background-color: var(--chat-bg-input-active);
+ background-color: var(--chat-bg-input-active);
}
div.chat-input > button {
- flex: 1;
+ flex: 1;
}
div.chat-text > div {
- word-wrap: break-word;
- word-break: break-all;
+ word-wrap: break-word;
+ word-break: break-all;
}
/* Game card element */
div.game > h2 {
- margin: 0;
+ margin: 0;
}
button.join {
- position: absolute;
+ position: absolute;
- bottom: 5px;
- right: 5px;
+ bottom: 5px;
+ right: 5px;
}
diff --git a/styles/client/card.css b/styles/client/card.css
index 0ee8f6a..b19b17a 100644
--- a/styles/client/card.css
+++ b/styles/client/card.css
@@ -1,192 +1,192 @@
card
{
- position: absolute;
- display: block;
- width: 150px;
- height: 230px;
- background-color: var(--card-bg);
- color: var(--card-color);
- border: 2px solid var(--card-border);
- border-radius: 10px;
- transition-duration: 0.2s;
- cursor: pointer;
- flex-direction: column;
- overflow: hidden;
- user-select: none;
- box-sizing: border-box;
-
- z-index: 3;
+ position: absolute;
+ display: block;
+ width: 150px;
+ height: 230px;
+ background-color: var(--card-bg);
+ color: var(--card-color);
+ border: 2px solid var(--card-border);
+ border-radius: 10px;
+ transition-duration: 0.2s;
+ cursor: pointer;
+ flex-direction: column;
+ overflow: hidden;
+ user-select: none;
+ box-sizing: border-box;
+
+ z-index: 3;
}
card:hover
{
- box-shadow: 0 0 10px var(--card-hover);
+ box-shadow: 0 0 10px var(--card-hover);
- z-index: 4;
+ z-index: 4;
}
card > * {
- pointer-events: none;
+ pointer-events: none;
}
carea
{
- padding-left: 2px;
- padding-right: 2px;
- position: absolute;
- display: flex;
- vertical-align: middle;
- width: 100%;
- box-sizing: border-box;
+ padding-left: 2px;
+ padding-right: 2px;
+ position: absolute;
+ display: flex;
+ vertical-align: middle;
+ width: 100%;
+ box-sizing: border-box;
}
carea.top, carea.topl, carea.topr
{
- top: 0;
- height: 8%;
- text-align: center;
+ top: 0;
+ height: 8%;
+ text-align: center;
}
carea.topl
{
- width: 50%;
- text-align: left;
+ width: 50%;
+ text-align: left;
}
carea.topr
{
- right: 0;
- width: 50%;
- text-align: right;
+ right: 0;
+ width: 50%;
+ text-align: right;
}
carea.mid
{
- top: 8%;
- height: 84%;
+ top: 8%;
+ height: 84%;
}
carea.midt
{
- top: 8%;
- height: 42%;
+ top: 8%;
+ height: 42%;
}
carea.midb
{
- top: 50%;
- height: 42%;
+ top: 50%;
+ height: 42%;
}
carea.bot, carea.botl, carea.botr
{
- bottom: 0;
- height: 8%;
- text-align: center;
+ bottom: 0;
+ height: 8%;
+ text-align: center;
}
carea.botl
{
- width: 50%;
- text-align: left;
+ width: 50%;
+ text-align: left;
}
carea.botr
{
- right: 0;
- width: 50%;
- text-align: right;
+ right: 0;
+ width: 50%;
+ text-align: right;
}
carea.all
{
- top: 0;
- height: 100%;
+ top: 0;
+ height: 100%;
}
ctext
{
- display: inline-block;
- flex: 1;
- font-size: small;
- height: auto;
+ display: inline-block;
+ flex: 1;
+ font-size: small;
+ height: auto;
}
cimage
{
- background-position: center center;
- background-repeat: no-repeat;
- background-size: contain;
- flex: 1;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ flex: 1;
}
card[drag=true]
{
- z-index: 3;
+ z-index: 3;
}
/* Deck */
deck {
- --ccount: 0;
+ --ccount: 0;
- position: absolute;
- width: 166px;
- height: 250px;
+ position: absolute;
+ width: 166px;
+ height: 250px;
- top: calc(var(--y) * (100vh - 250px));
- left: calc(var(--x) * (100vw - 166px));
+ top: calc(var(--y) * (100vh - 250px));
+ left: calc(var(--x) * (100vw - 166px));
- overflow: visible;
+ overflow: visible;
- border-radius: 10px;
+ border-radius: 10px;
- transition-duration: 0.2s;
+ transition-duration: 0.2s;
- border: 3px solid var(--deck-shadow);
- box-sizing: border-box;
+ border: 3px solid var(--deck-shadow);
+ box-sizing: border-box;
}
deck:hover {
- border: 3px solid var(--deck-hover);
+ border: 3px solid var(--deck-hover);
}
/* Deck modes */
deck[mode="stack"] > card {
- transform: translate(5px, calc(var(--cpos) * 3px + 7px));
+ transform: translate(5px, calc(var(--cpos) * 3px + 7px));
}
deck[mode="stack"] {
- height: calc(var(--ccount) * 3px + 250px);
- top: calc(var(--y) * (100vh - (var(--ccount) * 3px + 250px)));
+ height: calc(var(--ccount) * 3px + 250px);
+ top: calc(var(--y) * (100vh - (var(--ccount) * 3px + 250px)));
}
deck[mode="strip-hl"] > card {
- transform: translate(calc(var(--ccount) * 75px + var(--cpos) * -75px + 5px), 7px);
+ transform: translate(calc(var(--ccount) * 75px + var(--cpos) * -75px + 5px), 7px);
}
deck[mode="strip-hr"] > card {
- transform: translate(calc(var(--cpos) * 75px + 5px), 7px);
+ transform: translate(calc(var(--cpos) * 75px + 5px), 7px);
}
deck[mode="strip-hl"], deck[mode="strip-hr"] {
- width: calc(var(--ccount) * 75px + 160px);
- left: calc(var(--x) * (100vw - (var(--ccount) * 75px + 160px)));
+ width: calc(var(--ccount) * 75px + 160px);
+ left: calc(var(--x) * (100vw - (var(--ccount) * 75px + 160px)));
}
deck[mode="strip-vu"] > card {
- transform: translate(5px, calc(var(--ccount) * 115px + var(--cpos) * -115px + 7px));
+ transform: translate(5px, calc(var(--ccount) * 115px + var(--cpos) * -115px + 7px));
}
deck[mode="strip-vd"] > card {
- transform: translate(5px, calc(var(--cpos) * 115px + 7px));
+ transform: translate(5px, calc(var(--cpos) * 115px + 7px));
}
deck[mode="strip-vu"], deck[mode="strip-vd"] {
- height: calc(var(--ccount) * 115px + 240px);
- top: calc(var(--y) * (100vh - (var(--ccount) * 115px + 240px)));
+ height: calc(var(--ccount) * 115px + 240px);
+ top: calc(var(--y) * (100vh - (var(--ccount) * 115px + 240px)));
}
diff --git a/styles/client/desktop.css b/styles/client/desktop.css
index 10caa15..410b516 100644
--- a/styles/client/desktop.css
+++ b/styles/client/desktop.css
@@ -1,149 +1,149 @@
@media (min-width: 600px) and (min-height: 501px) {
- body {
- display: flex;
-
- align-items: center;
- justify-content: center;
- }
-
- /*
- TopBar rules
- */
-
- button#newgame:before{
- content: "Create Game";
- }
-
- button#settings {
- display: none;
- }
-
- button#reset:before{
- content: "Reset Connection";
- }
-
- /*
- Lobby rules
- */
- div.lobby {
- min-width: 70vw;
- min-height: 70vh;
- max-height: 70vh;
-
- display: flex;
- text-align: center;
- flex-direction: column;
-
- align-items: center;
- }
-
- div.server {
- width: 100%;
- display: flex;
- flex-direction: row;
- margin-bottom: 10px;
- box-sizing: border-box;
- }
-
- span.status {
- box-sizing: border-box;
- font-size: larger;
-
- margin-right: 10px;
- padding: 10px;
- border-radius: 10px;
- flex-basis: content;
-
- background-color: var(--server-bg-loading);
- color: var(--server-color-loading);
- }
-
- span.status[s=loading] {
- background-color: var(--server-bg-loading);
- color: var(--server-color-loading);
- }
-
- span.status[s=ok] {
- background-color: var(--server-bg-ok);
- color: var(--server-color-ok);
- }
-
- span.status[s=closed] {
- background-color: var(--server-bg-closed);
- color: var(--server-color-closed);
- }
-
- span.addr {
- font-size: larger;
- padding: 10px;
- border-radius: 10px;
-
- background-color: var(--gui-bg-main);
-
- flex: 1;
- }
-
- div.content {
- min-width: 70vw;
- min-height: 70vh;
-
- display: flex;
- flex-direction: row;
-
- box-sizing: border-box;
- }
-
- div.info {
- display: flex;
- text-align: center;
- flex-direction: column;
-
- flex: 1;
-
- margin-left: 10px;
-
- box-sizing: border-box;
- }
-
- div.games {
- box-sizing: border-box;
- overflow-y: auto;
- overflow-x: hidden;
- padding: 10px;
- border-radius: 10px;
- background-color: var(--gui-bg-main);
- flex: 2;
-
- border: 5px solid var(--gui-bg-main);
- }
-
- div.stats, div.settings {
- border-radius: 10px;
- background-color: var(--gui-bg-main);
-
- box-sizing: border-box;
-
- flex: 1;
-
- height: auto;
- width: 100%;
-
- text-align: left;
- }
-
- div.settings {
- margin-top: 10px;
- }
-
- div.game {
- height: 20%;
- }
-
- /*
- Table rules
- */
-
- /*
- Chat
- */
+ body {
+ display: flex;
+
+ align-items: center;
+ justify-content: center;
+ }
+
+ /*
+ TopBar rules
+ */
+
+ button#newgame:before{
+ content: "Create Game";
+ }
+
+ button#settings {
+ display: none;
+ }
+
+ button#reset:before{
+ content: "Reset Connection";
+ }
+
+ /*
+ Lobby rules
+ */
+ div.lobby {
+ min-width: 70vw;
+ min-height: 70vh;
+ max-height: 70vh;
+
+ display: flex;
+ text-align: center;
+ flex-direction: column;
+
+ align-items: center;
+ }
+
+ div.server {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 10px;
+ box-sizing: border-box;
+ }
+
+ span.status {
+ box-sizing: border-box;
+ font-size: larger;
+
+ margin-right: 10px;
+ padding: 10px;
+ border-radius: 10px;
+ flex-basis: content;
+
+ background-color: var(--server-bg-loading);
+ color: var(--server-color-loading);
+ }
+
+ span.status[s=loading] {
+ background-color: var(--server-bg-loading);
+ color: var(--server-color-loading);
+ }
+
+ span.status[s=ok] {
+ background-color: var(--server-bg-ok);
+ color: var(--server-color-ok);
+ }
+
+ span.status[s=closed] {
+ background-color: var(--server-bg-closed);
+ color: var(--server-color-closed);
+ }
+
+ span.addr {
+ font-size: larger;
+ padding: 10px;
+ border-radius: 10px;
+
+ background-color: var(--gui-bg-main);
+
+ flex: 1;
+ }
+
+ div.content {
+ min-width: 70vw;
+ min-height: 70vh;
+
+ display: flex;
+ flex-direction: row;
+
+ box-sizing: border-box;
+ }
+
+ div.info {
+ display: flex;
+ text-align: center;
+ flex-direction: column;
+
+ flex: 1;
+
+ margin-left: 10px;
+
+ box-sizing: border-box;
+ }
+
+ div.games {
+ box-sizing: border-box;
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding: 10px;
+ border-radius: 10px;
+ background-color: var(--gui-bg-main);
+ flex: 2;
+
+ border: 5px solid var(--gui-bg-main);
+ }
+
+ div.stats, div.settings {
+ border-radius: 10px;
+ background-color: var(--gui-bg-main);
+
+ box-sizing: border-box;
+
+ flex: 1;
+
+ height: auto;
+ width: 100%;
+
+ text-align: left;
+ }
+
+ div.settings {
+ margin-top: 10px;
+ }
+
+ div.game {
+ height: 20%;
+ }
+
+ /*
+ Table rules
+ */
+
+ /*
+ Chat
+ */
}
diff --git a/styles/client/mobile.css b/styles/client/mobile.css
index ed2e19d..70e17dd 100644
--- a/styles/client/mobile.css
+++ b/styles/client/mobile.css
@@ -1,85 +1,85 @@
@media (max-width: 599px), (max-height: 500px) {
- /*
- Hide stuff
- */
- div.server {
- display: none;
- }
-
- div.info {
- display: none;
- }
-
- div.chat {
- display: none;
- }
-
- /*
- TopBar for mobile
- */
-
- div.topbar > div.status {
- height: 10px;
- }
-
- div.top-buttons {
- height: 50px;
- }
-
- button.top-button {
- padding: 5px;
- }
-
- button#reset:before, button#newgame:before, button#settings:before {
- font-family: "IcoFont";
- font-size: xx-large;
- }
-
- button#newgame:before{
- content: "\efc2";
- }
-
- button#settings {
- display: inline-block;
- }
-
- button#settings:before {
- content: "\ef3a";
- }
-
- button#reset:before{
- content: "\efd1";
- }
-
- /*
- Mobile lobby
- */
-
- div.lobby {
- display: flex;
- flex-direction: column;
- height: 100vh;
- }
-
- div.content {
- margin-top: 60px;
- box-sizing: border-box;
- flex: 1;
- }
-
- div.games {
- height: 100%;
- width: 100%;
- overflow-x: hidden;
- overflow-y: auto;
-
- background-color: var(--gui-bg-main);
- padding: 5px;
- box-sizing: border-box;
-
- }
-
- div.game {
- height: 12.5%;
- }
+ /*
+ Hide stuff
+ */
+ div.server {
+ display: none;
+ }
+
+ div.info {
+ display: none;
+ }
+
+ div.chat {
+ display: none;
+ }
+
+ /*
+ TopBar for mobile
+ */
+
+ div.topbar > div.status {
+ height: 10px;
+ }
+
+ div.top-buttons {
+ height: 50px;
+ }
+
+ button.top-button {
+ padding: 5px;
+ }
+
+ button#reset:before, button#newgame:before, button#settings:before {
+ font-family: "IcoFont";
+ font-size: xx-large;
+ }
+
+ button#newgame:before{
+ content: "\efc2";
+ }
+
+ button#settings {
+ display: inline-block;
+ }
+
+ button#settings:before {
+ content: "\ef3a";
+ }
+
+ button#reset:before{
+ content: "\efd1";
+ }
+
+ /*
+ Mobile lobby
+ */
+
+ div.lobby {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ }
+
+ div.content {
+ margin-top: 60px;
+ box-sizing: border-box;
+ flex: 1;
+ }
+
+ div.games {
+ height: 100%;
+ width: 100%;
+ overflow-x: hidden;
+ overflow-y: auto;
+
+ background-color: var(--gui-bg-main);
+ padding: 5px;
+ box-sizing: border-box;
+
+ }
+
+ div.game {
+ height: 12.5%;
+ }
}
diff --git a/styles/client/tablet.css b/styles/client/tablet.css
index b9b5bd1..a4f135d 100644
--- a/styles/client/tablet.css
+++ b/styles/client/tablet.css
@@ -1,45 +1,45 @@
@media (min-width: 600px) and (orientation: portrait) {
- body {
- display: flex;
-
- align-items: center;
- justify-content: center;
- }
-
- div.lobby {
- max-width: 500px;
-
- display: flex;
- text-align: center;
- flex-direction: column;
-
- align-items: center;
- }
-
- div.content {
- min-width: 70vw;
- min-height: 70vh;
-
- display: flex;
- flex-direction: column;
- }
-
- div.info {
- flex-direction: row;
- margin-left: 0px;
- margin-top: 10px;
- }
-
- div.settings, div.stats {
- width: auto;
- }
-
- div.settings {
- margin-top: 0px;
- margin-left: 10px;
- }
-
- div.games {
- flex: 4;
- }
+ body {
+ display: flex;
+
+ align-items: center;
+ justify-content: center;
+ }
+
+ div.lobby {
+ max-width: 500px;
+
+ display: flex;
+ text-align: center;
+ flex-direction: column;
+
+ align-items: center;
+ }
+
+ div.content {
+ min-width: 70vw;
+ min-height: 70vh;
+
+ display: flex;
+ flex-direction: column;
+ }
+
+ div.info {
+ flex-direction: row;
+ margin-left: 0px;
+ margin-top: 10px;
+ }
+
+ div.settings, div.stats {
+ width: auto;
+ }
+
+ div.settings {
+ margin-top: 0px;
+ margin-left: 10px;
+ }
+
+ div.games {
+ flex: 4;
+ }
}
diff --git a/styles/home/base.css b/styles/home/base.css
index bfd7b46..8daae31 100644
--- a/styles/home/base.css
+++ b/styles/home/base.css
@@ -1,58 +1,58 @@
* {
- font-family: 'Montserrat', sans-serif;
+ font-family: 'Montserrat', sans-serif;
transition-duration: 0.2s;
}
html, body {
- margin: 0;
- padding: 0;
+ margin: 0;
+ padding: 0;
- min-width: 100vw;
- min-height: 100vh;
+ min-width: 100vw;
+ min-height: 100vh;
- display: block;
+ display: block;
}
body {
- display: flex;
+ display: flex;
- align-items: center;
- justify-content: center;
+ align-items: center;
+ justify-content: center;
- background-color: var(--main-bg);
+ background-color: var(--main-bg);
}
div.content {
- padding: 20px;
+ padding: 20px;
- background-color: var(--gui-bg-main);
+ background-color: var(--gui-bg-main);
color: var(--main-color);
- border-radius: 10px;
+ border-radius: 10px;
- display: flex;
- text-align: center;
- flex-direction: column;
+ display: flex;
+ text-align: center;
+ flex-direction: column;
- align-items: center;
+ align-items: center;
- width: min-content;
+ width: min-content;
}
a, button {
- font-size: 1em;
- display: block;
- color: white;
- box-sizing: border-box;
+ font-size: 1em;
+ display: block;
+ color: white;
+ box-sizing: border-box;
- border-radius: 5px;
- border: none;
- padding: 5px;
+ border-radius: 5px;
+ border: none;
+ padding: 5px;
- background-color: #0084ff;
-
- transition-duration: 0.2s;
+ background-color: #0084ff;
- text-decoration: none;
+ transition-duration: 0.2s;
+
+ text-decoration: none;
margin: 5px;
}
@@ -60,53 +60,53 @@ a, button {
div.content > div.prev {
- width: 100%;
- margin: 10px;
+ width: 100%;
+ margin: 10px;
- display: block;
+ display: block;
- padding: 0;
+ padding: 0;
}
div.prev > a{
- display: inline-block;
- width: 80%;
- margin: 0;
- padding: 5px;
- border-radius: 0;
+ display: inline-block;
+ width: 80%;
+ margin: 0;
+ padding: 5px;
+ border-radius: 0;
- text-align: left;
+ text-align: left;
}
div.prev > a:first-of-type {
- border-top-left-radius: 5px;
+ border-top-left-radius: 5px;
}
div.prev > a:last-of-type {
- border-bottom-left-radius: 5px;
+ border-bottom-left-radius: 5px;
}
div.prev > button {
- display: inline-block;
- width: 20%;
- margin: 0;
- background-color: #ff1e00;
- padding: 5px;
- border-radius: 0;
+ display: inline-block;
+ width: 20%;
+ margin: 0;
+ background-color: #ff1e00;
+ padding: 5px;
+ border-radius: 0;
}
div.prev > button:first-of-type {
- border-top-right-radius: 5px;
+ border-top-right-radius: 5px;
}
div.prev > button:last-of-type {
- border-bottom-right-radius: 5px;
+ border-bottom-right-radius: 5px;
}
div.prev > button:hover {
- background-color: #ff5741;
+ background-color: #ff5741;
}
div.prev > button:active {
- background-color: #9c1200;
+ background-color: #9c1200;
} \ No newline at end of file
diff --git a/styles/home/desktop.css b/styles/home/desktop.css
index 64ca05f..9860f9a 100644
--- a/styles/home/desktop.css
+++ b/styles/home/desktop.css
@@ -1,6 +1,6 @@
@media (min-width: 900px) {
- div.content > div {
- display: flex;
- flex-direction: row;
- }
+ div.content > div {
+ display: flex;
+ flex-direction: row;
+ }
} \ No newline at end of file
diff --git a/styles/home/mobile.css b/styles/home/mobile.css
index a57a988..1334ac1 100644
--- a/styles/home/mobile.css
+++ b/styles/home/mobile.css
@@ -1,12 +1,12 @@
@media (max-width: 899px) {
- div.content > div {
- display: flex;
- flex-direction: column;
- }
+ div.content > div {
+ display: flex;
+ flex-direction: column;
+ }
- div.content {
- border-radius: 0px;
- width:100%;
- height: 100%;
- }
+ div.content {
+ border-radius: 0px;
+ width:100%;
+ height: 100%;
+ }
} \ No newline at end of file
diff --git a/styles/icofont.css b/styles/icofont.css
index 3bc40e5..6e214a6 100644
--- a/styles/icofont.css
+++ b/styles/icofont.css
@@ -1,25 +1,25 @@
@font-face
{
- font-family: "IcoFont";
- font-weight: 400;
- font-style: normal;
- src: url("../fonts/icofont.woff2") format("woff2"),
- url("../fonts/icofont.woff") format("woff");
+ font-family: "IcoFont";
+ font-weight: 400;
+ font-style: normal;
+ src: url("../fonts/icofont.woff2") format("woff2"),
+ url("../fonts/icofont.woff") format("woff");
}
.icofont {
- font-family: 'IcoFont' !important;
- speak: none;
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
- white-space: nowrap;
- word-wrap: normal;
- direction: ltr;
- line-height: 1;
- /* Better Font Rendering =========== */
- font-feature-settings: "liga";
- -webkit-font-feature-settings: "liga";
- -webkit-font-smoothing: antialiased;
+ font-family: 'IcoFont' !important;
+ speak: none;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ white-space: nowrap;
+ word-wrap: normal;
+ direction: ltr;
+ line-height: 1;
+ /* Better Font Rendering =========== */
+ font-feature-settings: "liga";
+ -webkit-font-feature-settings: "liga";
+ -webkit-font-smoothing: antialiased;
} \ No newline at end of file
diff --git a/styles/input.css b/styles/input.css
index 8101ae2..0b56982 100644
--- a/styles/input.css
+++ b/styles/input.css
@@ -4,14 +4,14 @@
input, select
{
- -webkit-appearance: none;
+ -webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 5px;
-
+
display: block;
-
+
box-sizing: border-box;
}
@@ -19,19 +19,19 @@ input, select
input[type=button], input[type=submit], button, a
{
- padding: 10px;
+ padding: 10px;
- border: none;
- border-radius: 5px;
+ border: none;
+ border-radius: 5px;
- background-color: var(--input-bg-button);
+ background-color: var(--input-bg-button);
color: var(--input-color-button);
-
- font-size: medium;
- transition-duration: 0.2s;
+ font-size: medium;
- cursor: pointer;
+ transition-duration: 0.2s;
+
+ cursor: pointer;
}
input[type=button]:hover, input[type=submit]:hover, button:hover, a:hover
@@ -72,14 +72,14 @@ input[type=radio]
{
width: 20px;
height: 20px;
-
+
border: 3px solid var(--input-border-bool);
border-radius: 50%;
-
+
transition-duration: 0.2s;
-
+
background-color: var(--input-bg-bool);
-
+
cursor: pointer;
display: inline-block;
@@ -115,21 +115,21 @@ input[type=checkbox]
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-
+
display: inline-block;
vertical-align: middle;
-
+
width: 20px;
height: 20px;
-
+
border: 3px solid var(--input-border-bool);
-
+
border-radius: 2px;
-
+
transition-duration: 0.2s;
-
+
background-color: var(--input-bg-bool);
-
+
cursor: pointer;
}
@@ -156,23 +156,23 @@ input[type=checkbox]::after
{
height: 15px;
width: 10px;
-
+
box-sizing: border-box;
-
+
position: relative;
-
+
display: block;
-
+
border-color: var(--input-bg-bool-true);
border-style: solid;
border-width: 0px 0px 0px 0px;
-
+
top: calc(50% - 10px);
left: calc(50% - 5px);
-
+
transform-origin: center;
transform: rotate(45deg);
-
+
content: '';
}
@@ -186,17 +186,17 @@ input[type=checkbox]:checked::after
input[type=color]
{
display: inline-block;
-
+
vertical-align: middle;
-
+
height: 20px;
width: 20px;
-
+
margin: 0;
padding: 0;
-
+
border: 0;
-
+
cursor: pointer;
}
@@ -216,7 +216,7 @@ div.input-select
display: block;
position: absolute;
z-index: 0;
-
+
pointer-events: none;
overflow-y: auto;
@@ -286,23 +286,23 @@ div.input-container:focus > div.input-select > div[selected=true]:after
div.input-container[type=color]
{
text-align: center;
-
+
background-color: var(--input-bg-button);
color: var(--input-color-button);
transition-duration: 0.2s;
-
+
cursor: pointer;
-
+
width: max-content;
}
div.input-container[type=color]::after
{
display: inline;
-
+
vertical-align: middle;
-
+
content: ' Pick a color';
}
@@ -322,11 +322,11 @@ div.input-container[type=file]
{
background-color: var(--input-bg-button);
color: var(--input-color-button);
-
+
transition-duration: 0.2s;
cursor: pointer;
-
+
text-align: center;
width: max-content;
@@ -346,9 +346,9 @@ div.input-container[type=file]:active
div.input-container[type=file]::after
{
display: inline;
-
+
vertical-align: middle;
-
+
content: attr(data-files);
}
diff --git a/styles/themes/colors-base.css b/styles/themes/colors-base.css
index 56b06d8..86e6483 100644
--- a/styles/themes/colors-base.css
+++ b/styles/themes/colors-base.css
@@ -1,98 +1,98 @@
* {
- /* Main */
- --main-bg: white;
- --main-color: black;
-
- /* Server */
- --server-bg-ok: #0C0;
- --server-bg-loading: #DA0;
- --server-bg-closed: #D00;
- --server-color-ok: white;
- --server-color-loading: white;
- --server-color-closed: white;
-
- /* Gui and topbar */
- --gui-bg-main: #ddd;
- --gui-bg-game: white;
- --gui-color-game: black;
- --gui-shadow-game: gray;
-
- --top-border: black;
- --top-bg: #eee;
- --top-bg-button: #eee;
- --top-bg-button-hover: #ccc;
- --top-bg-button-active: white;
- --top-color-button: black;
- --top-color-button-hover: black;
- --top-color-button-active: black;
-
- /* Table */
- --table-bg: rgb(20, 110, 50);
-
- /* Card defaults */
- --card-color: black;
- --card-bg: white;
- --card-border: #bbb;
- --card-hover: #0f0;
-
- --deck-shadow: #2696ff;
- --deck-hover: #73bbff;
-
- /* Input */
-
- --input-color-text: black;
- --input-color-text-hover: black;
- --input-color-text-active: black;
- --input-bg-text: white;
- --input-bg-text-hover: white;
- --input-bg-text-active: white;
- --input-border-text: #555;
- --input-border-text-hover: black;
- --input-border-text-active: #0084ff;
-
- --input-color-button: white;
- --input-color-button-hover: white;
- --input-color-button-active: white;
- --input-bg-button: #0084ff;
- --input-bg-button-hover: #3ea2ff;
- --input-bg-button-active:#0056a7;
-
- --input-bg-bool: white;
- --input-bg-bool-hover: white;
- --input-bg-bool-active: white;
- --input-border-bool: black;
- --input-border-bool-hover: #3ea2ff;
- --input-border-bool-active: black;
- --input-border-bool-true: #0084ff;
-
- --input-color-select: black;
- --input-color-select-hover: black;
- --input-color-select-active: #555;
- --input-bg-select: white;
- --input-bg-select-hover: white;
- --input-bg-select-active: white;
- --input-border-select: #555;
- --input-border-select-hover: black;
- --input-border-select-active: #0084ff;
-
- --input-bg-multi: rgba(30, 30, 30, 0.3);
- --input-bg-multi-hover: rgba(200, 200, 200, 0.3);
-
- /* Chat */
- --chat-color: black;
- --chat-bg: white;
-
- --chat-bg-text: rgba(0, 0, 0, 0.2);
-
- --chat-bg-input: rgb(220, 220, 220);
- --chat-bg-input-hover: rgb(220, 220, 220);
- --chat-bg-input-active: rgb(220, 220, 220);
-
- --chat-bg-inactive: rgb(80, 80, 80);
- --chat-bg-inactive-hover: rgb(130, 130, 130);
- --chat-bg-inactive-active: rgb(40, 40, 40);
-
- --chat-bg-active: #0084ff;
- --chat-bg-active-hover: #3ea2ff;
- --chat-bg-active-active:#0056a7;
+ /* Main */
+ --main-bg: white;
+ --main-color: black;
+
+ /* Server */
+ --server-bg-ok: #0C0;
+ --server-bg-loading: #DA0;
+ --server-bg-closed: #D00;
+ --server-color-ok: white;
+ --server-color-loading: white;
+ --server-color-closed: white;
+
+ /* Gui and topbar */
+ --gui-bg-main: #ddd;
+ --gui-bg-game: white;
+ --gui-color-game: black;
+ --gui-shadow-game: gray;
+
+ --top-border: black;
+ --top-bg: #eee;
+ --top-bg-button: #eee;
+ --top-bg-button-hover: #ccc;
+ --top-bg-button-active: white;
+ --top-color-button: black;
+ --top-color-button-hover: black;
+ --top-color-button-active: black;
+
+ /* Table */
+ --table-bg: rgb(20, 110, 50);
+
+ /* Card defaults */
+ --card-color: black;
+ --card-bg: white;
+ --card-border: #bbb;
+ --card-hover: #0f0;
+
+ --deck-shadow: #2696ff;
+ --deck-hover: #73bbff;
+
+ /* Input */
+
+ --input-color-text: black;
+ --input-color-text-hover: black;
+ --input-color-text-active: black;
+ --input-bg-text: white;
+ --input-bg-text-hover: white;
+ --input-bg-text-active: white;
+ --input-border-text: #555;
+ --input-border-text-hover: black;
+ --input-border-text-active: #0084ff;
+
+ --input-color-button: white;
+ --input-color-button-hover: white;
+ --input-color-button-active: white;
+ --input-bg-button: #0084ff;
+ --input-bg-button-hover: #3ea2ff;
+ --input-bg-button-active:#0056a7;
+
+ --input-bg-bool: white;
+ --input-bg-bool-hover: white;
+ --input-bg-bool-active: white;
+ --input-border-bool: black;
+ --input-border-bool-hover: #3ea2ff;
+ --input-border-bool-active: black;
+ --input-border-bool-true: #0084ff;
+
+ --input-color-select: black;
+ --input-color-select-hover: black;
+ --input-color-select-active: #555;
+ --input-bg-select: white;
+ --input-bg-select-hover: white;
+ --input-bg-select-active: white;
+ --input-border-select: #555;
+ --input-border-select-hover: black;
+ --input-border-select-active: #0084ff;
+
+ --input-bg-multi: rgba(30, 30, 30, 0.3);
+ --input-bg-multi-hover: rgba(200, 200, 200, 0.3);
+
+ /* Chat */
+ --chat-color: black;
+ --chat-bg: white;
+
+ --chat-bg-text: rgba(0, 0, 0, 0.2);
+
+ --chat-bg-input: rgb(220, 220, 220);
+ --chat-bg-input-hover: rgb(220, 220, 220);
+ --chat-bg-input-active: rgb(220, 220, 220);
+
+ --chat-bg-inactive: rgb(80, 80, 80);
+ --chat-bg-inactive-hover: rgb(130, 130, 130);
+ --chat-bg-inactive-active: rgb(40, 40, 40);
+
+ --chat-bg-active: #0084ff;
+ --chat-bg-active-hover: #3ea2ff;
+ --chat-bg-active-active:#0056a7;
} \ No newline at end of file
diff --git a/styles/themes/colors-dark.css b/styles/themes/colors-dark.css
index f630ac0..e294889 100644
--- a/styles/themes/colors-dark.css
+++ b/styles/themes/colors-dark.css
@@ -1,103 +1,103 @@
* {
- /* Main */
- --main-bg: #333;
- --main-color: white;
-
- /* Server */
- --server-bg-ok: #0B0;
- --server-bg-loading: #DA0;
- --server-bg-closed: #D00;
- --server-color-ok: white;
- --server-color-loading: white;
- --server-color-closed: white;
-
- /* Gui and topbar */
- --gui-bg-main: #555;
- --gui-bg-game: #777;
- --gui-color-game: white;
- --gui-shadow-game: #444;
-
- --top-border: #999;
- --top-bg: #333;
- --top-bg-button: #555;
- --top-bg-button-hover: #999;
- --top-bg-button-active: #777;
- --top-color-button: white;
- --top-color-button-hover: white;
- --top-color-button-active: white;
-
- /* Table */
- --table-bg: rgb(20, 110, 50);
-
- /* Card defaults */
- --card-color: black;
- --card-bg: white;
- --card-border: #bbb;
- --card-hover: #0f0;
-
- --deck-shadow: #2696ff;
- --deck-hover: #3ea2ff;
-
- /* Input */
-
- --input-color-text: white;
- --input-color-text-hover: white;
- --input-color-text-active: white;
- --input-bg-text: #777;
- --input-bg-text-hover: #777;
- --input-bg-text-active: #777;
- --input-border-text: #222;
- --input-border-text-hover: #AAA;
- --input-border-text-active: #3ea2ff;
-
- --input-color-button: white;
- --input-color-button-hover: white;
- --input-color-button-active: white;
- --input-bg-button: #0084ff;
- --input-bg-button-hover: #3ea2ff;
- --input-bg-button-active:#0056a7;
-
- --input-bg-bool: #555;
- --input-bg-bool-hover: #999;
- --input-bg-bool-active: #777;
- --input-bg-bool-true: white;
- --input-border-bool: #999;
- --input-border-bool-hover: #999;
- --input-border-bool-active: #999;
- --input-border-bool-true: #999;
-
- --input-color-select: white;
- --input-color-select-hover: white;
- --input-color-select-active: white;
- --input-bg-select: #777;
- --input-bg-select-hover: #888;
- --input-bg-select-active: #777;
- --input-border-select: #222;
- --input-border-select-hover: #AAA;
- --input-border-select-active: #3ea2ff;
-
- --input-bg-multi: rgba(30, 30, 30, 0.3);
- --input-bg-multi-hover: rgba(200, 200, 200, 0.3);
-
- /* Chat */
- --chat-color: white;
- --chat-bg: #555;
-
- --chat-bg-text: #444;
-
- --chat-bg-input: #555;
- --chat-bg-input-hover: #777;
- --chat-bg-input-active: #444;
-
- --chat-bg-select: #444;
- --chat-bg-select-hover: #777;
- --chat-bg-select-active: #333;
-
- --chat-bg-inactive: #444;
- --chat-bg-inactive-hover: #777;
- --chat-bg-inactive-active: #333;
-
- --chat-bg-active: rgb(255, 133, 34);
- --chat-bg-active-hover: rgb(255, 165, 92);
- --chat-bg-active-active: rgb(226, 102, 0);
+ /* Main */
+ --main-bg: #333;
+ --main-color: white;
+
+ /* Server */
+ --server-bg-ok: #0B0;
+ --server-bg-loading: #DA0;
+ --server-bg-closed: #D00;
+ --server-color-ok: white;
+ --server-color-loading: white;
+ --server-color-closed: white;
+
+ /* Gui and topbar */
+ --gui-bg-main: #555;
+ --gui-bg-game: #777;
+ --gui-color-game: white;
+ --gui-shadow-game: #444;
+
+ --top-border: #999;
+ --top-bg: #333;
+ --top-bg-button: #555;
+ --top-bg-button-hover: #999;
+ --top-bg-button-active: #777;
+ --top-color-button: white;
+ --top-color-button-hover: white;
+ --top-color-button-active: white;
+
+ /* Table */
+ --table-bg: rgb(20, 110, 50);
+
+ /* Card defaults */
+ --card-color: black;
+ --card-bg: white;
+ --card-border: #bbb;
+ --card-hover: #0f0;
+
+ --deck-shadow: #2696ff;
+ --deck-hover: #3ea2ff;
+
+ /* Input */
+
+ --input-color-text: white;
+ --input-color-text-hover: white;
+ --input-color-text-active: white;
+ --input-bg-text: #777;
+ --input-bg-text-hover: #777;
+ --input-bg-text-active: #777;
+ --input-border-text: #222;
+ --input-border-text-hover: #AAA;
+ --input-border-text-active: #3ea2ff;
+
+ --input-color-button: white;
+ --input-color-button-hover: white;
+ --input-color-button-active: white;
+ --input-bg-button: #0084ff;
+ --input-bg-button-hover: #3ea2ff;
+ --input-bg-button-active:#0056a7;
+
+ --input-bg-bool: #555;
+ --input-bg-bool-hover: #999;
+ --input-bg-bool-active: #777;
+ --input-bg-bool-true: white;
+ --input-border-bool: #999;
+ --input-border-bool-hover: #999;
+ --input-border-bool-active: #999;
+ --input-border-bool-true: #999;
+
+ --input-color-select: white;
+ --input-color-select-hover: white;
+ --input-color-select-active: white;
+ --input-bg-select: #777;
+ --input-bg-select-hover: #888;
+ --input-bg-select-active: #777;
+ --input-border-select: #222;
+ --input-border-select-hover: #AAA;
+ --input-border-select-active: #3ea2ff;
+
+ --input-bg-multi: rgba(30, 30, 30, 0.3);
+ --input-bg-multi-hover: rgba(200, 200, 200, 0.3);
+
+ /* Chat */
+ --chat-color: white;
+ --chat-bg: #555;
+
+ --chat-bg-text: #444;
+
+ --chat-bg-input: #555;
+ --chat-bg-input-hover: #777;
+ --chat-bg-input-active: #444;
+
+ --chat-bg-select: #444;
+ --chat-bg-select-hover: #777;
+ --chat-bg-select-active: #333;
+
+ --chat-bg-inactive: #444;
+ --chat-bg-inactive-hover: #777;
+ --chat-bg-inactive-active: #333;
+
+ --chat-bg-active: rgb(255, 133, 34);
+ --chat-bg-active-hover: rgb(255, 165, 92);
+ --chat-bg-active-active: rgb(226, 102, 0);
} \ No newline at end of file