summaryrefslogtreecommitdiff
path: root/scripts
diff options
context:
space:
mode:
authorKyle Gunger <kgunger12@gmail.com>2021-10-16 17:12:32 -0400
committerKyle Gunger <kgunger12@gmail.com>2021-10-16 17:12:32 -0400
commitb8c91f08adc7bdb0095fb61a59bc03f0d568f478 (patch)
tree1c9f39c2d2c2279593d2117ef64274b561981db6 /scripts
parent8f71df8341224a0898984a9bc67005fdbea9ee30 (diff)
[Formatting] Tabs instead of spaces
Diffstat (limited to 'scripts')
-rw-r--r--scripts/cards/card.js220
-rw-r--r--scripts/cards/deck.js342
-rw-r--r--scripts/cards/drag.js296
-rw-r--r--scripts/client.js385
-rw-r--r--scripts/cookie.js54
-rw-r--r--scripts/gui/chat.js306
-rw-r--r--scripts/gui/input.js566
-rw-r--r--scripts/gui/table.js278
-rw-r--r--scripts/socket/message.js26
-rw-r--r--scripts/socket/sock.js114
-rw-r--r--scripts/theme.js34
11 files changed, 1312 insertions, 1309 deletions
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 = "";