summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--webcards/README.md2
-rw-r--r--webcards/client.html19
-rw-r--r--webcards/index.html33
-rw-r--r--webcards/scripts/cards/card.js45
-rw-r--r--webcards/scripts/cards/deck.js27
-rw-r--r--webcards/scripts/client.js5
-rw-r--r--webcards/scripts/cookie.js39
-rw-r--r--webcards/scripts/gui/input.js132
-rw-r--r--webcards/scripts/gui/lobby.js15
-rw-r--r--webcards/scripts/gui/table.js4
-rw-r--r--webcards/scripts/theme.js24
-rw-r--r--webcards/styles/client/base.css51
-rw-r--r--webcards/styles/client/card.css49
-rw-r--r--webcards/styles/client/desktop.css31
-rw-r--r--webcards/styles/client/mobile.css2
-rw-r--r--webcards/styles/home/base.css5
-rw-r--r--webcards/styles/input.css203
-rw-r--r--webcards/styles/themes/colors-base.css76
-rw-r--r--webcards/styles/themes/colors-dark.css77
19 files changed, 678 insertions, 161 deletions
diff --git a/webcards/README.md b/webcards/README.md
index 0c6b070..820db2b 100644
--- a/webcards/README.md
+++ b/webcards/README.md
@@ -1,5 +1,5 @@
# WebCardsClient
-![WebCards](http://35.11.215.147:3000/CCGKyle/WebCardsClient/raw/branch/master/images/wc-icon-144.png)
+WebCards
An in-browser client to play WebCards \ No newline at end of file
diff --git a/webcards/client.html b/webcards/client.html
index 0b06712..069a041 100644
--- a/webcards/client.html
+++ b/webcards/client.html
@@ -16,12 +16,17 @@
<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>
@@ -40,7 +45,7 @@
<body>
- <div class="table" state="closed">
+ <div class="table" state="closed" onmouseup="d.stopDraggingAll()">
</div>
@@ -60,13 +65,13 @@
<button id="set">Accept Settings</button>
</div>
- <div class="status" style="background-color: #DA0;"></div>
+ <div class="status"></div>
</div>
<div class="lobby">
<div class="server">
- <span style="background-color: #DA0; font-weight: bold; color: white;" class="status">Connecting</span>
+ <span style="font-weight: 700;" class="status">Connecting</span>
<span class="addr"></span>
</div>
@@ -129,6 +134,14 @@
{
type: "image",
image: "assets/standard/heart.svg"
+ },
+ {
+ type: "image",
+ image: "assets/standard/heart.svg"
+ },
+ {
+ type: "image",
+ image: "assets/standard/heart.svg"
}
]
});
diff --git a/webcards/index.html b/webcards/index.html
index c322ec1..d34a950 100644
--- a/webcards/index.html
+++ b/webcards/index.html
@@ -20,6 +20,13 @@
<link rel="stylesheet" type="text/css" href="styles/input.css">
+ <link id="theme" rel="stylesheet" type="text/css" href="styles/themes/colors-base.css">
+
+ <script src="scripts/gui/input.js"></script>
+
+ <script src="scripts/cookie.js"></script>
+ <script src="scripts/theme.js"></script>
+
<title>WebCards</title>
</head>
@@ -27,10 +34,12 @@
<div class="content">
<p style="font-size: 30px; font-weight: normal;">Web<span style="color: #0084ff; font-weight: bold;">Cards</span></p>
<div>
- <select id="type">
- <option value="ws://" selected>ws</option>
- <option value="wss://">wss</option>
- </select>
+ <div class="input-container" tabindex="0" type="select">
+ <div id="protocol" tabindex="0" selected="0" class="input-select">
+ <div value="ws://" onmousedown="customSelectOption(this)" selected="true">ws</div>
+ <div value="wss://" onmousedown="customSelectOption(this)">wss</div>
+ </div>
+ </div>
<input id="addr" type="text" value="127.0.0.1">
@@ -41,17 +50,17 @@
</div>
<script>
- var t = document.getElementById("type");
- var a = document.getElementById("addr");
- var p = document.getElementById("port");
- var c = document.getElementById("conn");
+ var proto = document.getElementById("protocol");
+ var addr = document.getElementById("addr");
+ var port = document.getElementById("port");
+ var conn = document.getElementById("conn");
- t.onchange = updateLink;
- a.onchange = updateLink;
- p.onchange = updateLink;
+ //t.onchange = updateLink;
+ //a.onchange = updateLink;
+ //p.onchange = updateLink;
function connect() {
- var url = "./client.html?s=" + t.value + a.value + ":" + p.value + "&g=-1";
+ var url = "client.html?s=" + customSelectValue(proto) + addr.value + ":" + port.value + "&g=-1";
//c.setAttribute("href", url);
window.location = url;
}
diff --git a/webcards/scripts/cards/card.js b/webcards/scripts/cards/card.js
index 015995d..0f045fe 100644
--- a/webcards/scripts/cards/card.js
+++ b/webcards/scripts/cards/card.js
@@ -1,45 +1,44 @@
-var CardPos = ["top", "topl", "topr", "mid", "midt", "midb", "bot", "botl", "botr", "all"];
+const CardPos = ["top", "topl", "topr", "mid", "midt", "midb", "bot", "botl", "botr", "all"];
// Card class represents one card.
// Every card should have a deck.
// Use deck.appendCard or deck.prependCard to make a card visible
function Card (data) {
- this.e = this.generateElements(data);
+ this.e = document.createElement("card");
+ this.generateElements(data);
this.e.style.left = "0px";
this.e.style.top = "0px";
}
// Internal
Card.prototype = {
- // Main generation func
+ // Main generation func, only for use in contructor
generateElements: function (data) {
+ while(this.e.firstElementChild != null)
+ this.e.firstElementChild.remove();
+
switch (typeof data) {
case "object":
- return this.generateObjectCard(data);
+ this.generateObjectCard(data, this.e);
+ break;
case "string":
- return this.generateBasicCard(data);
+ this.generateBasicCard(data, this.e);
+ break;
+ default:
+ this.generateErrorCard(this.e);
}
- let e = document.createElement("card");
- let t = document.createElement("carea");
- t.className = "mid";
- t.innerText = "Card Error: data";
- e.append(t);
- return e;
},
// Generate a card with basic text only
- generateBasicCard: function (data) {
- let e = document.createElement("card");
+ generateBasicCard: function (data, el) {
let t = document.createElement("carea");
t.className = "mid";
t.innerText = data;
- e.appendChild(t);
- return e;
+ el.appendChild(t);
},
// Generate a card with rich visuals
- generateObjectCard: function (data) {
- let e = document.createElement("card");
+ generateObjectCard: function (data, el) {
// Check for an asset URL
if (typeof data.assetURL != "string") {
@@ -48,16 +47,14 @@ Card.prototype = {
// Set card styles
for (let i in data.style) {
- e.style[i] = data.style[i];
+ el.style[i] = data.style[i];
}
// Generate card areas.
for (let i in CardPos) {
if (typeof data[CardPos[i]] == "object")
- e.appendChild(this.generateCArea(data[CardPos[i]], CardPos[i], data.assetURL));
+ el.appendChild(this.generateCArea(data[CardPos[i]], CardPos[i], data.assetURL));
}
-
- return e;
},
generateCArea: function (data, carea, assetURL) {
@@ -92,6 +89,10 @@ Card.prototype = {
}
return area;
- }
+ },
+ generateErrorCard: function(el)
+ {
+ this.generateBasicCard("Card Error: data", el);
+ }
}; \ No newline at end of file
diff --git a/webcards/scripts/cards/deck.js b/webcards/scripts/cards/deck.js
index 544a9ef..620a038 100644
--- a/webcards/scripts/cards/deck.js
+++ b/webcards/scripts/cards/deck.js
@@ -1,6 +1,6 @@
// Deck class represents multiple cards.
// Can be arranged in multiple ways.
-function Deck (options = {}){
+function Deck (options = {mode: "stack", smode: "one", sct: 0, pos: [0, 0]}){
this.cards = [];
// View mode
@@ -11,19 +11,19 @@ function Deck (options = {}){
// left (strip-hl)
// right (strip-hr)
// vertical
- // top (strip-vt)
- // bottom (strip-vb)
- this.mode = options.mode;
+ // up (strip-vu)
+ // down (strip-vd)
+ this.inf = options.mode == "infdraw";
- // Select mode
- // above
- // below
- // around
- // one
- // all
+ // 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 (-1 = all available)
+ // 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
@@ -31,7 +31,7 @@ function Deck (options = {}){
// array - [first number: number above selected] [second number: number below selected]
// one - no effect
// all - no effect
- this.sct = options.sct;
+ this.sct = options.sct > 0 ? options.sct : 0;
// Position
// array of where the deck is centered
@@ -39,6 +39,9 @@ function Deck (options = {}){
this.y = options.pos[1];
this.e = document.createElement("deck");
+ this.e.style.left = this.x + "px";
+ this.e.style.top = this.y + "px";
+ this.e.setAttribute("mode", options.mode);
}
Deck.prototype = {
diff --git a/webcards/scripts/client.js b/webcards/scripts/client.js
index ea62e26..0bf2e75 100644
--- a/webcards/scripts/client.js
+++ b/webcards/scripts/client.js
@@ -26,13 +26,14 @@ Client.prototype = {
if(m.type == "error" || m.type == "closed") {
var t = m.type;
t = t[0].toUpperCase() + t.slice(1)
- this.lob.setState(t, "#D00", this.soc.server);
+ this.lob.setState(t, "closed", this.soc.server);
this.tab.handleClose();
return;
}
switch(this.state) {
case "handshake":
+ this.lob.setState("Connected", "ok", this.soc.server);
this.handshake(m);
break;
case "lobby":
@@ -49,7 +50,7 @@ Client.prototype = {
case "verr":
this.soc.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(`Error connecting to server: version of client (${this.version}) not accepted.`);
console.error(m.data);
return;
case "lobby":
diff --git a/webcards/scripts/cookie.js b/webcards/scripts/cookie.js
new file mode 100644
index 0000000..2eb5977
--- /dev/null
+++ b/webcards/scripts/cookie.js
@@ -0,0 +1,39 @@
+function CookieManager() {
+}
+
+CookieManager.prototype = {
+ getCookie: function(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 "";
+ },
+
+ setCookie: function(name, value, data={}) {
+ let extra = "";
+
+ for(let key in data)
+ {
+ extra += "; " + key + "=" + data[key];
+ }
+
+ document.cookie = name + "=" + value + extra;
+ },
+
+ setYearCookie: function(name, value) {
+ var date = new Date(Date.now());
+ date.setFullYear(date.getFullYear() + 1);
+ this.setCookie(name, value, {expires: date.toUTCString()});
+ },
+
+ removeCookie: function(name) {
+ var date = new Date(0);
+ this.setCookie(name, "", {expires: date.toUTCString()});
+ }
+};
+
+var Cookies = new CookieManager(); \ No newline at end of file
diff --git a/webcards/scripts/gui/input.js b/webcards/scripts/gui/input.js
index c349a07..b0bbec0 100644
--- a/webcards/scripts/gui/input.js
+++ b/webcards/scripts/gui/input.js
@@ -1,24 +1,39 @@
-var inputFuncs = {
- createInput: function(type = "text", wrapped = false, id) {
+function customSelectValue (el) {
+ var sel = el.getAttribute("selected");
+
+ if(typeof sel != "undefined") {
+ return el.children[parseInt(sel)].getAttribute("value");
+ }
+
+ return "";
+}
+
+function customSelectOption (el) {
+ var sn = Array.prototype.indexOf.call(el.parentElement.children, el);
+ var psn = el.parentElement.getAttribute("selected");
+
+ if(typeof psn == "string")
+ el.parentElement.children[parseInt(psn)].setAttribute("selected", false);
+
+ if(typeof sn == "string")
+ el.parentElement.setAttribute("selected", parseInt(sn));
+
+ el.setAttribute("selected", true);
+ el.parentElement.setAttribute("selected", parseInt(sn));
+}
+
+var InputFuncs = {
+ createInput: function(type = "text", id) {
var el = document.createElement("input");
el.setAttribute("type", type);
if(typeof id == "string")
el.setAttribute("id", id);
- if(wrapped) {
- var wrapper = document.createElement("div");
- wrapper.className = "input-container";
- wrapper.setAttribute("type", type);
- wrapper.setAttribute("onclick", "this.firstElementChild.click()");
- wrapper.appendChild(el);
- wrapper.input = el;
- return wrapper;
- }
-
el.getValue = function () {
return this.value;
}
+
return el;
},
@@ -31,26 +46,27 @@ var inputFuncs = {
},
colorInput: function(value, id) {
- var el = this.createInput("color", true, id);
+ var el = this.createInput("color", id);
el.value = value;
return el;
},
textInput: function(value, placeholder, id) {
- var el = this.createInput("text", false, id);
+ var el = this.createInput("text", id);
el.setAttribute("placeholder", placeholder);
el.value = value;
return el;
},
numberInput: function(value, id) {
- var el = this.createInput("number", false, id);
+ var el = this.createInput("number", id);
el.value = value;
return el;
},
+ //To fix
fileInput: function(value, id) {
- var el = this.createInput("file", true, id);
+ var el = this.createInput("file", id);
el.value = value;
@@ -91,11 +107,21 @@ var inputFuncs = {
return el;
},
- radioInputs: function(group, names, values, checked = 0) {
- var wrapper = document.createElement("div");
- wrapper.className = "input-container";
- wrapper.setAttribute("type", "radio");
-
+ radioInputs: function(group, names, values, checked = 0, id) {
+
+ let toWrap = [];
+
+ for(let i = 0; i < values.length; i++) {
+ toWrap.push(this.inputLabel(names[i], group+"-"+i));
+ if(i == checked)
+ toWrap.push(this.radioInput(group, values[i], true, group+"-"+i));
+ else
+ toWrap.push(this.radioInput(group, values[i], false, group+"-"+i));
+ toWrap.push(document.createElement("br"));
+ }
+
+ var wrapper = this.wrapInputs("radio", ...toWrap);
+
wrapper.getValue = function() {
for(let i = 0; i < this.children.length; i++){
if(this.children[i].checked)
@@ -103,30 +129,62 @@ var inputFuncs = {
}
};
- for(let i = 0; i < values.length; i++) {
- wrapper.appendChild(this.inputLabel(names[i], group+"-"+i));
- if(i == checked)
- wrapper.appendChild(this.radioInput(group, values[i], true, group+"-"+i));
- else
- wrapper.appendChild(this.radioInput(group, values[i], false, group+"-"+i));
- wrapper.appendChild(document.createElement("br"));
- }
+ if(typeof id == "string")
+ wrapper.setAttribute("id", id);
return wrapper;
},
- wrapInput: function(el) {
+ selectOption: function(text, value, selected) {
+ var so = document.createElement("div");
+ so.innerText = text;
+ so.setAttribute("value", value);
+ so.addEventListener("mousedown", customSelectOption.bind(null, so));
+
+ if(selected === true)
+ so.setAttribute("selected", true);
+
+ return so
+ },
+
+ selectInput: function(names, values, id, 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(this.selectOption(names[i], values[i], i == select));
+ }
+
+ if(typeof id == "string")
+ se.setAttribute("id", id);
+ var wrapper = this.wrapInputs("select", se);
+ wrapper.getValue = customSelectValue.bind(null, se);
+ wrapper.setAttribute("tabindex", 0);
+
+ return wrapper;
+ },
+
+ wrapInputs: function(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]);
+ }
+
+ return wrapper;
}
};
-function Settings () {
- this.settings = {
- username: {
- type: "text",
- args: [Math.floor(Math.random() * 100000), "Username", "userName"]
- }
- };
+function Settings (settings = {}) {
+ this.settings = settings;
this.genSettings();
}
diff --git a/webcards/scripts/gui/lobby.js b/webcards/scripts/gui/lobby.js
index 731d9ec..07f8223 100644
--- a/webcards/scripts/gui/lobby.js
+++ b/webcards/scripts/gui/lobby.js
@@ -131,11 +131,12 @@ Lobby.prototype = {
},
// Called when the WebSocket state has changed.
- setState: function(text, color, server) {
- this.e.status.style.backgroundColor = color;
- this.e.status.innerText = text;
+ setState: function(text, s, server) {
+ this.e.status.setAttribute("s", s);
+ if(this.e.status.innerText != "Error" || ( this.e.status.innerText == "Error" && text != "Closed"))
+ this.e.status.innerText = text;
this.e.addr.innerText = server;
- this.top.setColor(color);
+ this.top.setStatus(s);
},
// Called when we are resetting the game.
@@ -144,7 +145,7 @@ Lobby.prototype = {
this.e.games.removeChild(this.e.games.firstElementChild)
}
- this.setState("Connecting", "#DA0", this.e.addr.innerText);
+ this.setState("Connecting", "loading", this.e.addr.innerText);
this.init = false;
}
};
@@ -165,8 +166,8 @@ function TopBar(el) {
TopBar.prototype = {
// Set color of status bar
- setColor: function(color) {
- this.status.style.backgroundColor = color;
+ setStatus: function(s) {
+ this.status.setAttribute("s", s);
},
// Toggle showing the new game screen
diff --git a/webcards/scripts/gui/table.js b/webcards/scripts/gui/table.js
index db67529..2776f80 100644
--- a/webcards/scripts/gui/table.js
+++ b/webcards/scripts/gui/table.js
@@ -1,4 +1,4 @@
-// Table represents and manages the actual game. It accepts inputs from the server and tries to queries the server when the player makes a move.
+// 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.
function Table(el, soc) {
this.root = el;
this.soc = soc;
@@ -22,8 +22,6 @@ Table.prototype = {
}
},
-
-
handleClose: function() {
this.reset();
},
diff --git a/webcards/scripts/theme.js b/webcards/scripts/theme.js
new file mode 100644
index 0000000..8e69377
--- /dev/null
+++ b/webcards/scripts/theme.js
@@ -0,0 +1,24 @@
+function Theme(){
+ this.t = document.getElementById("theme");
+}
+
+Theme.prototype = {
+ init: function() {
+ if(Cookies.getCookie("theme") == ""){
+ Cookies.setYearCookie("theme", "styles/themes/colors-base.css");
+ }
+ },
+
+ restore: function() {
+ this.init();
+ this.t.setAttribute("href", Cookies.getCookie("theme") + "?v=" + Date.now());
+ },
+
+ set: function(sheet) {
+ Cookies.setYearCookie("theme", sheet);
+ this.restore();
+ }
+};
+
+var GlobalTheme = new Theme();
+GlobalTheme.restore();
diff --git a/webcards/styles/client/base.css b/webcards/styles/client/base.css
index fc8e310..52c2722 100644
--- a/webcards/styles/client/base.css
+++ b/webcards/styles/client/base.css
@@ -11,6 +11,8 @@ html, body {
display: block;
+ background-color: var(--main-bg);
+ color: var(--main-color);
}
/* Topbar rules */
@@ -19,7 +21,7 @@ html, body {
{
position: fixed;
- background-color: white;
+ background-color: var(--gui-bg-main);
top: 0;
left: 0;
@@ -40,18 +42,24 @@ html, body {
button.top-button
{
border-radius: 0;
- background-color: white;
- color: black;
+ background-color: var(--top-bg-button);
+ color: var(--top-color-button);
flex: 1;
- border-left: 1px solid black;
- border-right: 1px solid black;
+ border-left: 1px solid var(--top-border);
+ border-right: 1px solid var(--top-border);
transition-duration: 0.2s;
}
button.top-button:hover {
- background-color: #ddd;
+ 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);
}
.top-buttons > button:first-child
@@ -68,20 +76,34 @@ div.new-game
{
flex: 1;
flex-grow: 1;
- border-top: 2px solid black;
+ border-top: 2px solid var(--top-border);
}
div.mobile-settings
{
flex: 1;
flex-grow: 1;
- border-top: 2px solid black;
+ border-top: 2px solid var(--top-border);
}
div.topbar > div.status
{
height: 5px;
flex-basis: auto;
+
+ background-color: var(--server-bg-loading);
+}
+
+div.topbar > div.status[s=loading] {
+ background-color: var(--server-bg-loading);
+}
+
+div.topbar > div.status[s=ok] {
+ background-color: var(--server-bg-ok);
+}
+
+div.topbar > div.status[s=closed] {
+ background-color: var(--server-bg-closed);
}
/* Content rules */
@@ -112,9 +134,10 @@ div.stats > div > span:last-child {
}
div.game {
- background-color: white;
+ background-color: var(--gui-bg-game);
+ color: var(--gui-color-game);
border-radius: 5px;
- box-shadow: lightgray 3px 3px 2px;
+ box-shadow: var(--gui-shadow-game) 3px 3px 2px;
box-sizing: border-box;
margin-bottom: 10px;
}
@@ -140,9 +163,11 @@ div.settings {
animation-duration: 0.8s;
background-color: rgba(0, 0, 0, 0.5);
+
+ overflow: hidden;
}
-.table[state="open"] ,.table[state="close"]{
+.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;
@@ -150,11 +175,11 @@ div.settings {
animation-fill-mode: forwards;
}
-.table[state="close"] {
+.table[state=close] {
animation-direction: reverse;
}
-.table[state="closed"] {
+.table[state=closed] {
transform: translate(0, -100vh);
opacity: 0;
}
diff --git a/webcards/styles/client/card.css b/webcards/styles/client/card.css
index 62b4054..01cdcc5 100644
--- a/webcards/styles/client/card.css
+++ b/webcards/styles/client/card.css
@@ -3,20 +3,22 @@ card
position: absolute;
display: block;
width: 150px;
- height: 225px;
- background-color: white;
- border: 6px double #bbb;
+ 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;
}
card:hover
{
- box-shadow: 0 0 10px #0f0;
+ box-shadow: 0 0 10px var(--card-hover);
}
carea
@@ -27,6 +29,7 @@ carea
display: flex;
vertical-align: middle;
width: 100%;
+ box-sizing: border-box;
}
carea.top, carea.topl, carea.topr
@@ -110,7 +113,43 @@ cimage
flex: 1;
}
-card[drag = "true"]
+card[drag=true]
{
z-index: 3;
}
+
+/* Deck */
+
+deck {
+ position: absolute;
+ width: 0;
+ height: 0;
+
+ top: 0;
+ left: 0;
+
+ overflow: visible;
+ display: flex;
+ justify-content: center;
+ align-content: center;
+}
+
+deck > card {
+ transform: translate(-75px, calc(-115px + ( var(--cpos) * 3px )));
+}
+
+deck[mode="strip-hl"] > card {
+ transform: translate(calc(-75px - ( var(--cpos) * 75px )), -115px);
+}
+
+deck[mode="strip-hr"] > card {
+ transform: translate(calc(-75px + ( var(--cpos) * 75px )), -115px);
+}
+
+deck[mode="strip-vu"] > card {
+ transform: translate(-75px, calc(-115px - ( var(--cpos) * 115px )));
+}
+
+deck[mode="strip-vd"] > card {
+ transform: translate(-75px, calc(-115px + ( var(--cpos) * 115px )));
+}
diff --git a/webcards/styles/client/desktop.css b/webcards/styles/client/desktop.css
index 08e24fe..f072a71 100644
--- a/webcards/styles/client/desktop.css
+++ b/webcards/styles/client/desktop.css
@@ -52,6 +52,24 @@
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 {
@@ -59,7 +77,7 @@
padding: 10px;
border-radius: 10px;
- background-color: #ddd;
+ background-color: var(--gui-bg-main);
flex: 1;
}
@@ -92,15 +110,15 @@
overflow-x: hidden;
padding: 10px;
border-radius: 10px;
- background-color: #ddd;
+ background-color: var(--gui-bg-main);
flex: 2;
- border: 5px solid #ddd;
+ border: 5px solid var(--gui-bg-main);
}
div.stats, div.settings {
border-radius: 10px;
- background-color: #ddd;
+ background-color: var(--gui-bg-main);
box-sizing: border-box;
@@ -123,4 +141,9 @@
/*
Table rules
*/
+
+ /*
+ Chat
+ */
+
}
diff --git a/webcards/styles/client/mobile.css b/webcards/styles/client/mobile.css
index 4659ce6..5770dde 100644
--- a/webcards/styles/client/mobile.css
+++ b/webcards/styles/client/mobile.css
@@ -69,7 +69,7 @@
overflow-x: hidden;
overflow-y: auto;
- background-color: #ddd;
+ background-color: var(--gui-bg-main);
padding: 5px;
box-sizing: border-box;
diff --git a/webcards/styles/home/base.css b/webcards/styles/home/base.css
index 99bb148..80d0948 100644
--- a/webcards/styles/home/base.css
+++ b/webcards/styles/home/base.css
@@ -17,14 +17,15 @@ body {
align-items: center;
justify-content: center;
+
+ background-color: var(--main-bg);
}
div.content {
padding: 20px;
- background-color: #ddd;
+ background-color: var(--gui-bg-main);
border-radius: 10px;
- max-width: 500px;
display: flex;
text-align: center;
diff --git a/webcards/styles/input.css b/webcards/styles/input.css
index 16a5385..0553fc2 100644
--- a/webcards/styles/input.css
+++ b/webcards/styles/input.css
@@ -2,7 +2,7 @@
/* All input */
-input
+input, select
{
-webkit-appearance: none;
-moz-appearance: none;
@@ -11,7 +11,8 @@ input
margin: 5px;
display: block;
- z-index: 1;
+
+ box-sizing: border-box;
}
/* Button input */
@@ -19,14 +20,13 @@ input
input[type=button], input[type=submit], button
{
padding: 10px;
- box-sizing: border-box;
border: none;
border-radius: 5px;
- color: white;
- background-color: #0084ff;
-
+ background-color: var(--input-bg-button);
+ color: var(--input-color-button);
+
font-size: medium;
transition-duration: 0.2s;
@@ -36,33 +36,34 @@ input[type=button], input[type=submit], button
input[type=button]:hover, input[type=submit]:hover, button:hover
{
- background-color: #3ea2ff;
+ background-color: var(--input-bg-button-hover);
}
input[type=button]:active, input[type=submit]:active, button:active
{
- background-color: #0056a7;
+ background-color: var(--input-bg-button-active);
}
/* Text, date, number, and time input */
input[type=text], input[type=date], input[type=time], input[type="number"]
{
- border: 2px solid #555;
+ border: 2px solid var(--input-border-text);
border-radius: 3px;
padding: 5px;
- background-color: white;
+ background-color: var(--input-bg-text);
+ color: var(--input-color-text);
font-size: 1em;
}
input[type=text]:hover, input[type=date]:hover, input[type=time]:hover, input[type="number"]:hover
{
- border-color: black;
+ border-color: var(--input-border-text-hover);
}
input[type=text]:focus, input[type=date]:focus, input[type=time]:focus, input[type="number"]:focus
{
- border-color: #0084ff;
+ border-color: var(--input-border-text-active);
}
/* Radial input */
@@ -72,12 +73,12 @@ input[type=radio]
width: 20px;
height: 20px;
- border: 3px solid black;
+ border: 3px solid var(--input-border-bool);
border-radius: 50%;
transition-duration: 0.2s;
- background-color: white;
+ background-color: var(--input-bg-bool);
cursor: pointer;
@@ -91,18 +92,20 @@ input[type=radio]:checked, input[type=radio]:hover{
input[type=radio]:checked
{
- background-color: black;
- border-color: #0084ff;
+ background-color: var(--input-bg-bool-true);
+ border-color: var(--input-border-bool-true);
}
input[type=radio]:hover
{
- border-color: #3ea2ff;
+ background-color: var(--input-bg-bool-hover);
+ border-color: var(--input-border-bool-hover);
}
input[type=radio]:active
{
- border-color: black;
+ background-color: var(--input-bg-bool-active);
+ border-color: var(--input-border-bool-active);
}
/* Checkbox input */
@@ -119,13 +122,13 @@ input[type=checkbox]
width: 20px;
height: 20px;
- border: 3px solid black;
+ border: 3px solid var(--input-border-bool);
border-radius: 2px;
transition-duration: 0.2s;
- background-color: white;
+ background-color: var(--input-bg-bool);
cursor: pointer;
}
@@ -133,22 +136,25 @@ input[type=checkbox]
input[type=checkbox]:checked
{
border-width: 10px;
- border-color: #0084ff;
+ background-color: var(--input-border-bool-true);
+ border-color: var(--input-border-bool-true);
}
input[type=checkbox]:hover
{
- border-color: #3ea2ff;
+ background-color: var(--input-bg-bool-hover);
+ border-color: var(--input-border-bool-hover);
}
input[type=checkbox]:active
{
- border-color: black;
+ background-color: var(--input-bg-bool-active);
+ border-color: var(--input-border-bool-active);
}
input[type=checkbox]::after
{
- height: 16px;
+ height: 15px;
width: 10px;
box-sizing: border-box;
@@ -157,7 +163,7 @@ input[type=checkbox]::after
display: block;
- border-color: black;
+ border-color: var(--input-bg-bool-true);
border-style: solid;
border-width: 0px 0px 0px 0px;
@@ -201,13 +207,68 @@ input[type=file]
display: none;
}
+/* Custom select */
+
+div.input-select
+{
+ font-size: 1em;
+
+ display: block;
+ position: absolute;
+
+}
+
+div.input-select > div
+{
+ display: none;
+ pointer-events: none;
+}
+
+div.input-select > div[selected=true]
+{
+ display: block;
+}
+
+div.input-container:focus > div.input-select
+{
+ pointer-events: all;
+
+ transform: translate(0, 2em);
+
+ border: 2px solid var(--input-border-select-active);
+ background-color: var(--input-bg-select-active);
+}
+
+div.input-container:focus > div.input-select > div
+{
+ pointer-events: all;
+ display: block;
+ padding: 5px;
+ width: 6em;
+}
+
+div.input-container:focus > div.input-select > div:hover
+{
+ background-color: var(--input-bg-select-hover);
+ color: var(--input-color-select-hover);
+}
+
+div.input-container:focus > div.input-select > div[selected=true]:after
+{
+ font-family: "IcoFont";
+ content: '\eed8';
+ font-size: medium;
+}
+
/* Input container */
-div.input-container {
+*.input-container {
margin: 5px;
padding: 5px;
border-radius: 3px;
+
+ display: inline-block;
}
/* Color container */
@@ -216,8 +277,8 @@ div.input-container[type=color]
{
text-align: center;
- background-color: #0084ff;
- color: white;
+ background-color: var(--input-bg-button);
+ color: var(--input-color-button);
transition-duration: 0.2s;
@@ -237,20 +298,20 @@ div.input-container[type=color]::after
div.input-container[type=color]:hover
{
- background-color: #3ea2ff;
+ background-color: var(--input-bg-button-hover);
}
div.input-container[type=color]:active
{
- background-color: #0056a7;
+ background-color: var(--input-bg-button-active);
}
/* File input container */
div.input-container[type=file]
{
- background-color: #0084ff;
- color: white;
+ background-color: var(--input-bg-button);
+ color: var(--input-color-button);
transition-duration: 0.2s;
@@ -264,12 +325,12 @@ div.input-container[type=file]
div.input-container[type=file]:hover
{
- background-color: #3ea2ff;
+ background-color: var(--input-bg-button-hover);
}
div.input-container[type=file]:active
{
- background-color: #0056a7;
+ background-color: var(--input-bg-button-active);
}
div.input-container[type=file]::after
@@ -283,14 +344,82 @@ div.input-container[type=file]::after
/* Radio input container */
-div.input-container[type=radio]::before {
+div.input-container[type=radio]::before
+{
display: block;
- content: 'Radio';
+ content: 'Select one';
+ transition-duration: 0.2s;
}
div.input-container[type=radio]
{
- background-color: rgba(255, 255, 255, 0.3);
+ background-color: var(--input-bg-multi);
+}
+
+div.input-container[type=radio]:hover
+{
+ background-color: var(--input-bg-multi);
+}
+
+/* Select input container */
+
+div.input-container[type=select]
+{
+ border: 2px solid var(--input-border-select);
+ background-color: var(--input-bg-select);
+ min-height: 1em;
+ width: 7em;
+
+ color: var(--input-color-select);
+
+ cursor: pointer;
+
+ overflow: hidden;
+
+ display: inline-block;
+
+ text-align: left;
+}
+
+div.input-container[type=select]:hover
+{
+ border-color: var(--input-border-select-hover);
+ background-color: var(--input-bg-select-hover);
+
+ color: var(--input-color-select-hover);
+}
+
+div.input-container[type=select]:focus
+{
+ border-color: var(--input-border-select-active);
+ background-color: var(--input-bg-select-active);
+
+ color: var(--input-color-select-active);
+
+ overflow: visible;
+}
+
+div.input-container[type=select]:after
+{
+ font-family: "IcoFont";
+ font-size: medium;
+ content: '\eab2';
+ display: block;
+ height: 100%;
+ width: 100%;
+ color: var(--input-color-select);
+ text-align: right;
+}
+
+div.input-container[type=select]:after:hover
+{
+ color: var(--input-color-select-hover);
+}
+
+div.input-container[type=select]:focus::after
+{
+ content: '\eab9';
+ color: var(--input-color-select-active);
}
/* End Input CSS */ \ No newline at end of file
diff --git a/webcards/styles/themes/colors-base.css b/webcards/styles/themes/colors-base.css
new file mode 100644
index 0000000..4f878da
--- /dev/null
+++ b/webcards/styles/themes/colors-base.css
@@ -0,0 +1,76 @@
+* {
+ /* 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: white;
+ --top-bg-button: white;
+ --top-bg-button-hover: #ddd;
+ --top-bg-button-active: ;
+ --top-color-button: black;
+ --top-color-button-hover: black;
+ --top-color-button-active: black;
+
+ /* Table */
+
+ /* Card defaults */
+ --card-color: black;
+ --card-bg: white;
+ --card-border: #bbb;
+ --card-hover: #0f0;
+
+ /* 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);
+} \ No newline at end of file
diff --git a/webcards/styles/themes/colors-dark.css b/webcards/styles/themes/colors-dark.css
new file mode 100644
index 0000000..8020491
--- /dev/null
+++ b/webcards/styles/themes/colors-dark.css
@@ -0,0 +1,77 @@
+* {
+ /* 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: #222;
+
+ --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 */
+
+ /* Card defaults */
+ --card-color: black;
+ --card-bg: white;
+ --card-border: #bbb;
+ --card-hover: #0f0;
+
+ /* 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);
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-09-19 21:52:25 +0000