diff options
Diffstat (limited to 'scripts')
| -rw-r--r-- | scripts/cards/card.js | 220 | ||||
| -rw-r--r-- | scripts/cards/deck.js | 342 | ||||
| -rw-r--r-- | scripts/cards/drag.js | 296 | ||||
| -rw-r--r-- | scripts/client.js | 385 | ||||
| -rw-r--r-- | scripts/cookie.js | 54 | ||||
| -rw-r--r-- | scripts/gui/chat.js | 306 | ||||
| -rw-r--r-- | scripts/gui/input.js | 566 | ||||
| -rw-r--r-- | scripts/gui/table.js | 278 | ||||
| -rw-r--r-- | scripts/socket/message.js | 26 | ||||
| -rw-r--r-- | scripts/socket/sock.js | 114 | ||||
| -rw-r--r-- | scripts/theme.js | 34 |
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 = ""; |