diff options
| -rw-r--r-- | client.html | 250 | ||||
| -rw-r--r-- | scripts/cards/card.js | 220 | ||||
| -rw-r--r-- | scripts/cards/deck.js | 342 | ||||
| -rw-r--r-- | scripts/cards/drag.js | 296 | ||||
| -rw-r--r-- | scripts/client.js | 385 | ||||
| -rw-r--r-- | scripts/cookie.js | 54 | ||||
| -rw-r--r-- | scripts/gui/chat.js | 306 | ||||
| -rw-r--r-- | scripts/gui/input.js | 566 | ||||
| -rw-r--r-- | scripts/gui/table.js | 278 | ||||
| -rw-r--r-- | scripts/socket/message.js | 26 | ||||
| -rw-r--r-- | scripts/socket/sock.js | 114 | ||||
| -rw-r--r-- | scripts/theme.js | 34 | ||||
| -rw-r--r-- | styles/client/base.css | 298 | ||||
| -rw-r--r-- | styles/client/card.css | 164 | ||||
| -rw-r--r-- | styles/client/desktop.css | 294 | ||||
| -rw-r--r-- | styles/client/mobile.css | 166 | ||||
| -rw-r--r-- | styles/client/tablet.css | 86 | ||||
| -rw-r--r-- | styles/home/base.css | 102 | ||||
| -rw-r--r-- | styles/home/desktop.css | 8 | ||||
| -rw-r--r-- | styles/home/mobile.css | 18 | ||||
| -rw-r--r-- | styles/icofont.css | 38 | ||||
| -rw-r--r-- | styles/input.css | 88 | ||||
| -rw-r--r-- | styles/themes/colors-base.css | 192 | ||||
| -rw-r--r-- | styles/themes/colors-dark.css | 202 |
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 |