diff options
Diffstat (limited to 'webcards/scripts')
| -rw-r--r-- | webcards/scripts/cards/card.js | 123 | ||||
| -rw-r--r-- | webcards/scripts/cards/deck.js | 180 | ||||
| -rw-r--r-- | webcards/scripts/cards/drag.js | 111 | ||||
| -rw-r--r-- | webcards/scripts/client.js | 146 | ||||
| -rw-r--r-- | webcards/scripts/cookie.js | 27 | ||||
| -rw-r--r-- | webcards/scripts/gui/chat.js | 149 | ||||
| -rw-r--r-- | webcards/scripts/gui/input.js | 182 | ||||
| -rw-r--r-- | webcards/scripts/gui/lobby.js | 212 | ||||
| -rw-r--r-- | webcards/scripts/gui/table.js | 75 | ||||
| -rw-r--r-- | webcards/scripts/socket/message.js | 18 | ||||
| -rw-r--r-- | webcards/scripts/socket/sock.js | 48 | ||||
| -rw-r--r-- | webcards/scripts/theme.js | 32 |
12 files changed, 808 insertions, 495 deletions
diff --git a/webcards/scripts/cards/card.js b/webcards/scripts/cards/card.js index 932a22c..750d124 100644 --- a/webcards/scripts/cards/card.js +++ b/webcards/scripts/cards/card.js @@ -1,103 +1,110 @@ +'use strict'; + +// Possible positions of content in a card const CardPos = ["top", "topl", "topr", "mid", "midt", "midb", "bot", "botl", "botr", "all"]; // Card class represents one card. // Every card should have a deck. // Use deck.appendCard or deck.prependCard to make a card visible -function Card (data) { - this.e = document.createElement("card"); - this.generateElements(data); - this.e.style.left = "0px"; - this.e.style.top = "0px"; -} - -// Internal -Card.prototype = { - // Main generation func, only for use in contructor - generateElements: function (data) { - while(this.e.firstElementChild != null) - this.e.firstElementChild.remove(); - - switch (typeof data) { - case "object": - this.generateObjectCard(data, this.e); - break; - case "string": - this.generateBasicCard(data, this.e); - break; - default: - this.generateErrorCard(this.e); - } - }, +class Card { + constructor (data) + { + this.e = document.createElement("card"); + this.generateElements(data); + this.e.style.left = "0px"; + this.e.style.top = "0px"; + } // Generate a card with basic text only - generateBasicCard: function (data, el) { + static generateBasicCard (data, el) + { let t = document.createElement("carea"); t.className = "mid"; t.innerText = data; el.appendChild(t); - }, - - // Generate a card with rich visuals - generateObjectCard: function (data, el) { - - // Check for an asset URL - if (typeof data.assetURL != "string") { - data.assetURL = ""; - } - - // Set card styles - for (let i in data.style) { - el.style[i] = data.style[i]; - } + } - // 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)); - } - }, + // Generate a card with a simple error message. + static generateErrorCard (el) + { + Card.generateBasicCard("Card Error: data", el); + } - generateCArea: function (data, carea, assetURL) { + // 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) { + for (let i in data) + { if (i == "style") + { for (j in data.style) area.style[j] = data.style[j]; + } - if (data[i].type == "text") { + if (data[i].type == "text") + { let e = document.createElement("ctext"); e.innerText = data[i].text; - for (let j in data[i].style) { + for (let j in data[i].style) e.style[j] = data[i].style[j]; - } area.appendChild(e); - } else if (data[i].type == "image") { + } + 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)); + } + } - generateErrorCard: function(el) + generateElements (data) { - this.generateBasicCard("Card Error: data", el); - }, + while(this.e.firstElementChild != null) + this.e.firstElementChild.remove(); - setPos: function(p) + 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); } -};
\ No newline at end of file +} diff --git a/webcards/scripts/cards/deck.js b/webcards/scripts/cards/deck.js index a02142d..6da24b0 100644 --- a/webcards/scripts/cards/deck.js +++ b/webcards/scripts/cards/deck.js @@ -1,67 +1,87 @@ +'use strict'; + // Deck class represents multiple cards. // Can be arranged in multiple ways. -function Deck (options = {mode: "stack", smode: "one", sct: 0, pos: [0, 0]}){ - this.cards = []; - - // 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; +// Decks work as FIFO +class Deck { - // Position - // array of where the deck is centered - this.x = options.pos[0]; - this.y = options.pos[1]; - - this.e = document.createElement("deck"); - this.e.style.left = this.x + "px"; - this.e.style.top = this.y + "px"; - this.e.setAttribute("mode", options.mode); -} + cards = []; + inf = false; + smode = ""; + sct = 0; + x = 0; + y = 0; + e = null; + + constructor(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; + + // Position + // array of where the deck is centered + this.x = options.pos[0]; + this.y = options.pos[1]; + + this.e = document.createElement("deck"); + this.e.style.left = this.x + "px"; + this.e.style.top = this.y + "px"; + this.e.setAttribute("mode", options.mode); + } -//Decks work as FIFO -Deck.prototype = { - // Add a card to the front of the deck - appendCard: function(card) { + 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(); - }, + + } - // Add a card to the back of the deck - prependCard: function(card) { + prependCard(card) + { this.cards.unshift(card); this.e.prepend(card.e); card.setPos(this.cards.length - 1); - }, + this.updateCount(); + } - // Add a card at the index specified - addCardAt: function(card, index) { + addCardAt(card, index) + { if(index < 0 || index > this.cards.length) return @@ -74,11 +94,12 @@ Deck.prototype = { temp[temp.length - 1].e.after(card.e); temp.push(card); this.cards.unshift(...temp); + this.updatePos(); } - }, + } - // Swap the cards at the specified indexes - swapCard: function(index1, index2) { + swapCards(index1, index2) + { if(index1 < 0 || index1 >= this.cards.length || index2 < 0 || index2 >= this.cards.length) return @@ -88,31 +109,38 @@ Deck.prototype = { this.cards[index1 - 1].e.after(this.cards[index1]); this.cards[index2 - 1].e.after(this.cards[index2]); - }, - - // Remove the card at the front of the deck (index length - 1), returns the card removed (if any) - removeFront: function() { - return this.removeCard(this.cards.length - 1); - }, - - // Remove the card at the back of the deck (index 0), returns the card removed (if any) - removeBack: function() { - return this.removeCard(0); - }, - - // Remove a card from the deck, returning the card element - removeCard: function(index) { + } + removeCard(index) + { if(index < 0 || index >= this.cards.length) return this.e.removeChild(this.cards[index].e); - return this.cards.splice(index, 1)[0]; - }, + let c = this.cards.splice(index, 1)[0]; - updatePos: function() { - let len = this.cards.length - 1; - for(let i in this.cards) - this.cards[i].setPos(len-i); + this.updatePos(); + return c; + } + + removeFront() + { + return this.removeCard(this.cards.length - 1); + } + + removeBack() + { + return this.removeCard(0); } -};
\ No newline at end of file + + 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) + } +} diff --git a/webcards/scripts/cards/drag.js b/webcards/scripts/cards/drag.js index 54fb797..3b02eff 100644 --- a/webcards/scripts/cards/drag.js +++ b/webcards/scripts/cards/drag.js @@ -1,17 +1,23 @@ -function MultiDrag() { - this.del = false; - this.drag = []; - window.addEventListener("mousemove", this.update.bind(this)); - document.body.addEventListener("mouseleave", this.stopDraggingAll.bind(this)); -} +'use strict'; -MultiDrag.prototype = { - addDragEl: function(el, ox, oy, px, py, pt) { +class MultiDrag extends EventTarget { + del = false; + drag = []; + cbs = []; + + constructor() { + super(); + + window.addEventListener("mousemove", this.update.bind(this)); + document.body.addEventListener("mouseleave", this.stopDraggingAll.bind(this)); + } + + addDragEl(el, ox, oy, px, py, pt) { if(this.del) return; - + el.style.transitionDuration = "0.04s"; - + this.drag.push({ e: el, osx: ox, @@ -20,76 +26,103 @@ MultiDrag.prototype = { pry: py, ptd: pt }); - + return this.drag.length - 1; - }, + } - dragging: function(e) { + dragging(e) { for(let i in this.drag) { if(this.drag[i].e == e) return true; } return false; - }, + } - startDragging: function(e) { + startDragging(e) { if(this.del) return; - + console.log(e); - + if(e.button != 0) return; - - let pos - if(e.target.parentElement != null) - pos = e.target.parentElement.getBoundingClientRect(); - else - pos = e.target.getBoundingClientRect(); + + this.dispatchEvent(new Event("dragstart", {target: e.target})); return this.addDragEl( e.target, - e.pageX, - e.pageY, + 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 ); - }, - - stopDragging: function(i) { + } + + stopDragging(i) { + if(this.del) + return; + this.del = true; - + if (i < 0 || i >= this.drag.length) return; + var cap = {target: null, x: 0, y: 0}; + this.drag[i].e.style.transitionDuration = this.drag[i].ptd; + + cap.x = parseInt(this.drag[i].e.style.left); this.drag[i].e.style.left = this.drag[i].prx; + + cap.y = parseInt(this.drag[i].e.style.top); this.drag[i].e.style.top = this.drag[i].pry; + + cap.target = this.drag.splice(i, 1).e; + + this.del = false; - this.drag.splice(i, 1); + this.dispatchEvent(new Event("dragstop", cap)); + } - this.del = false; - }, + stopDraggingEl(el) { + for(let d of this.drag) { + if(d.e === el) + this.stopDragging(this.drag.indexOf(d)); + } + } - stopDraggingAll: function() { + stopDraggingAll() { + if(this.del) + return; + this.del = true; - + while (this.drag.length > 0) { this.drag[0].e.style.transitionDuration = this.drag[0].ptd; this.drag[0].e.style.left = this.drag[0].prx; this.drag[0].e.style.top = this.drag[0].pry; - + this.drag.shift(); } - + this.del = false; - }, - update: function(e) { + this.dispatchEvent(new Event("dragstopall")); + } + + update(e) { 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"; } } -};
\ No newline at end of file + + addTarget(e) { + e.addEventListener("mousedown", this.startDragging.bind(this)); + e.addEventListener("mouseup", this.stopDraggingEl.apply(this, [e])) + } + + removeTarget (e) { + } +}
\ No newline at end of file diff --git a/webcards/scripts/client.js b/webcards/scripts/client.js index 0bf2e75..acb3d90 100644 --- a/webcards/scripts/client.js +++ b/webcards/scripts/client.js @@ -1,110 +1,128 @@ +const VERSION = "1.0.0"; + // Client acts as the message hub for the whole game. // WebSocket messages come into Client and Client redirects them to the lobby or table based on the state of the game. // Client also performs the handshake for first starting the connection and messages everyone if the connection errors or closes. -function Client(serveraddr, game) { - this.state = "handshake"; - - this.soc = new SockWorker(serveraddr, "1", this.cb.bind(this)); +class Client{ - this.lob = new Lobby(document.getElementsByClassName("lobby")[0], this.soc); - this.tab = new Table(document.getElementsByClassName("table")[0], this.soc); + 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.game = game; -} + 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.game = game; + } -Client.prototype = { // Initialize the connection - init: function() { - this.soc.init(); - }, - - // Entry point for a message from the server. - // If it's a close message, we close the game if it is open and change the lobby to reflect the error/close. - cb: function(m) { - console.log(m); - - if(m.type == "error" || m.type == "closed") { - var t = m.type; - t = t[0].toUpperCase() + t.slice(1) - this.lob.setState(t, "closed", this.soc.server); - this.tab.handleClose(); - return; - } + init () + { + this.socket.init(); + } - switch(this.state) { - case "handshake": - this.lob.setState("Connected", "ok", this.soc.server); - this.handshake(m); - break; - case "lobby": - this.lobby(m); - break; - case "game": - break; - } - }, + // Callbacks for if the socket fails or closes + + socketError() { + this.lobby.setState("Error", "closed", this.socket.server); + this.table.handleClose(); + } - // Called when negotiating with the server for the first time and we are determining versions - handshake: function(m) { + 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.soc.close(); + 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 "lobby": - this.state = "lobby"; - this.soc.send("ready", ""); + case "ready": + this.socket.send("ready", ""); return; } - }, + } - // Lobby switch, called when in the lobby and a message arrives from the server - lobby: function (m) { + // Menu switch, called when in the lobby and a message arrives from the server + menu (m) + { switch (m.type) { case "plist": - this.lob.packList(m.data); + this.lobby.packList(m.data); break; case "glist": - this.lob.gameList(m.data, this.game); + this.lobby.gameList(m.data, this.game); this.game = null; break; case "players": - this.lob.players(m.data); + this.lobby.players(m.data); break; case "gdel": - this.lob.removeGame(m.data); + this.lobby.removeGame(m.data); break; case "gadd": - this.lob.addGame(m.data); + this.lobby.addGame(m.data); break; case "pdel": - this.lob.removePlayer(m.data); + this.lobby.removePlayer(m.data); break; case "padd": - this.lob.addPlayer(m.data); + this.lobby.addPlayer(m.data); break; case "pmove": - this.lob.movePlayer(m.data); + this.lobby.movePlayer(m.data); break; } - }, + } // Game switch, called when in game and a message arrives from the server - game: function (m) { + game (m) + { switch (m.type) { } - }, + } - // Reset the lobby and table, then attempt to reopen the connection to the server. - reset: function() { - this.state = "handshake"; + // 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); + } + } - this.lob.reset(); - this.tab.reset(); + // Reset the lobby and table, then attempt to reopen the connection to the server. + reset () + { + this.lobby.reset(); + this.table.reset(); - this.soc.init(); + this.socket.init(); } -}; +} diff --git a/webcards/scripts/cookie.js b/webcards/scripts/cookie.js index 2eb5977..d614af7 100644 --- a/webcards/scripts/cookie.js +++ b/webcards/scripts/cookie.js @@ -1,8 +1,7 @@ -function CookieManager() { -} +'use strict'; -CookieManager.prototype = { - getCookie: function(name){ +class Cookies { + static getCookie(name){ let cookies = document.cookie.split(";"); for(let i in cookies) { let cname = cookies[i].trim().split("=")[0]; @@ -11,9 +10,9 @@ CookieManager.prototype = { } } return ""; - }, + } - setCookie: function(name, value, data={}) { + static setCookie(name, value, data = {}) { let extra = ""; for(let key in data) @@ -22,18 +21,16 @@ CookieManager.prototype = { } document.cookie = name + "=" + value + extra; - }, + } - setYearCookie: function(name, value) { + static setYearCookie(name, value) { var date = new Date(Date.now()); date.setFullYear(date.getFullYear() + 1); - this.setCookie(name, value, {expires: date.toUTCString()}); - }, + Cookies.setCookie(name, value, {expires: date.toUTCString()}); + } - removeCookie: function(name) { + static removeCookie(name) { var date = new Date(0); - this.setCookie(name, "", {expires: date.toUTCString()}); + Cookies.setCookie(name, "", {expires: date.toUTCString()}); } -}; - -var Cookies = new CookieManager();
\ No newline at end of file +} diff --git a/webcards/scripts/gui/chat.js b/webcards/scripts/gui/chat.js new file mode 100644 index 0000000..68b8f5d --- /dev/null +++ b/webcards/scripts/gui/chat.js @@ -0,0 +1,149 @@ +'use strict'; + +class Chat { + constructor(e) + { + this.chats = []; + this.root = e; + e.getElementsByClassName("toggle-chat")[0].onclick = this.toggle.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[0].toUpperCase() + name.slice(1).toLowerCase(); + + 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 + }); + } + + 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"); + csp.style.color = msg.color; + csp.innerText = msg.user + ": "; + let tsp = document.createElement("span"); + 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/webcards/scripts/gui/input.js b/webcards/scripts/gui/input.js index b0bbec0..6ed3d39 100644 --- a/webcards/scripts/gui/input.js +++ b/webcards/scripts/gui/input.js @@ -1,29 +1,9 @@ -function customSelectValue (el) { - var sel = el.getAttribute("selected"); - - if(typeof sel != "undefined") { - return el.children[parseInt(sel)].getAttribute("value"); - } - - return ""; -} - -function customSelectOption (el) { - var sn = Array.prototype.indexOf.call(el.parentElement.children, el); - var psn = el.parentElement.getAttribute("selected"); - - if(typeof psn == "string") - el.parentElement.children[parseInt(psn)].setAttribute("selected", false); +'use strict'; - if(typeof sn == "string") - el.parentElement.setAttribute("selected", parseInt(sn)); - - el.setAttribute("selected", true); - el.parentElement.setAttribute("selected", parseInt(sn)); -} - -var InputFuncs = { - createInput: function(type = "text", id) { +//This whole clusterfuq of functions needs fixing. +class MakeInput { + static createInput(type = "text", id) + { var el = document.createElement("input"); el.setAttribute("type", type); @@ -35,38 +15,41 @@ var InputFuncs = { } return el; - }, + } - inputLabel(text, id) { + static inputLabel(text, id) + { var el = document.createElement("label"); el.innerText = text; if(typeof id == "string") el.setAttribute("for", id); return el; - }, + } - colorInput: function(value, id) { - var el = this.createInput("color", id); + static colorInput (value, id) { + var el = MakeInput.createInput("color", id); el.value = value; return el; - }, + } - textInput: function(value, placeholder, id) { - var el = this.createInput("text", id); + static textInput (value, placeholder, id) + { + var el = MakeInput.createInput("text", id); el.setAttribute("placeholder", placeholder); el.value = value; return el; - }, + } - numberInput: function(value, id) { - var el = this.createInput("number", id); + static numberInput (value, id) + { + var el = MakeInput.createInput("number", id); el.value = value; return el; - }, + } //To fix - fileInput: function(value, id) { - var el = this.createInput("file", id); + static fileInput (value, id) { + var el = MakeInput.createInput("file", id); el.value = value; @@ -89,38 +72,38 @@ var InputFuncs = { } return el; - }, + } - checkboxInput: function(checked = false, id) { - var el = this.createInput("checkbox", false, id); + static checkboxInput (checked = false, id) { + var el = MakeInput.createInput("checkbox", false, id); if(checked) el.setAttribute("checked"); return el; - }, + } - radioInput: function(group, value, checked = false, id) { - var el = this.createInput("radio", false, id); + static radioInput (group, value, checked = false, id) { + var el = MakeInput.createInput("radio", false, id); el.setAttribute("name", group); el.setAttribute("value", value); if(checked) el.checked = true; return el; - }, + } - radioInputs: function(group, names, values, checked = 0, id) { + static radioInputs (group, names, values, checked = 0, id) { let toWrap = []; for(let i = 0; i < values.length; i++) { - toWrap.push(this.inputLabel(names[i], group+"-"+i)); + toWrap.push(MakeInput.inputLabel(names[i], group+"-"+i)); if(i == checked) - toWrap.push(this.radioInput(group, values[i], true, group+"-"+i)); + toWrap.push(MakeInput.radioInput(group, values[i], true, group+"-"+i)); else - toWrap.push(this.radioInput(group, values[i], false, group+"-"+i)); + toWrap.push(MakeInput.radioInput(group, values[i], false, group+"-"+i)); toWrap.push(document.createElement("br")); } - var wrapper = this.wrapInputs("radio", ...toWrap); + var wrapper = MakeInput.wrapInputs("radio", ...toWrap); wrapper.getValue = function() { for(let i = 0; i < this.children.length; i++){ @@ -133,9 +116,9 @@ var InputFuncs = { wrapper.setAttribute("id", id); return wrapper; - }, + } - selectOption: function(text, value, selected) { + static selectOption (text, value, selected) { var so = document.createElement("div"); so.innerText = text; so.setAttribute("value", value); @@ -145,9 +128,9 @@ var InputFuncs = { so.setAttribute("selected", true); return so - }, + } - selectInput: function(names, values, id, select = 0) { + static selectInput (names, values, id, select = 0) { var se = document.createElement("div"); se.className = "input-select"; se.setAttribute("tabindex", 0); @@ -155,20 +138,20 @@ var InputFuncs = { for(let i in names) { - se.appendChild(this.selectOption(names[i], values[i], i == select)); + se.appendChild(MakeInput.selectOption(names[i], values[i], i == select)); } if(typeof id == "string") se.setAttribute("id", id); - var wrapper = this.wrapInputs("select", se); - wrapper.getValue = customSelectValue.bind(null, se); + var wrapper = MakeInput.wrapInputs("select", se); + wrapper.getValue = MakeInput.selValue.bind(null, se); wrapper.setAttribute("tabindex", 0); return wrapper; - }, + } - wrapInputs: function(type, ...el) { + static wrapInputs (type, ...el) { var wrapper = document.createElement("div"); wrapper.className = "input-container"; @@ -181,37 +164,68 @@ var InputFuncs = { return wrapper; } -}; -function Settings (settings = {}) { - this.settings = settings; - - this.genSettings(); + static selValue (el) { + let sel = parseInt(el.getAttribute("selected")); + + if(typeof sel != "undefined") { + return el.children[sel].getAttribute("value"); + } + + return ""; + } + + static selOption (el) { + let sn = Array.prototype.indexOf.call(el.parentElement.children, el); + let psn = parseInt(el.parentElement.getAttribute("selected")); + + if(Number.isInteger(psn)) + el.parentElement.children[psn].setAttribute("selected", false); + + el.parentElement.setAttribute("selected", sn); + el.setAttribute("selected", true); + } } -Settings.prototype = { - getSettings: function() { - var out = {}; - for(let key in this.settings) { - - } - }, +class Settings { + constructor (template = {}) + { + this.settings = Settings.genSettings(template); + } - putSettings: function (el) { - for(let key in this.settings) { - el.appendChild(this.settings[key]); - } - }, + static genSettings (template) + { + var out = {}; - genSettings: function() { - for(let key in this.settings) { - switch(this.settings[key].type) { + for(let key in template) + { + switch(template[key].type) + { case "radio": - this.settings[key] = inputFuncs.radioInputs(...this.settings[key].args); + out[key] = MakeInput.radioInputs(...template[key].args); + break; default: - if(typeof inputFuncs[this.settings[key].type+"Input"] != null) - this.settings[key] = inputFuncs[this.settings[key].type+"Input"](...this.settings[key].args); + if(typeof MakeInput[template[key].type+"Input"] != null) + out[key] = MakeInput[template[key].type+"Input"](...template[key].args); } } + + return out; + } + + getSettings () + { + var out = {}; + + for(let key in this.settings) + out[key] = this.settings[key].getValue(); + + return out; } -};
\ No newline at end of file + + putSettings (el) + { + for(let key in this.settings) + el.appendChild(this.settings[key]); + } +} diff --git a/webcards/scripts/gui/lobby.js b/webcards/scripts/gui/lobby.js index 07f8223..7d2b6cd 100644 --- a/webcards/scripts/gui/lobby.js +++ b/webcards/scripts/gui/lobby.js @@ -1,39 +1,93 @@ -// Lobby manages the players and games provided by the server and allows users to join or create their own games. -function Lobby(el){ - this.root = el; - - this.e = { - status: el.getElementsByClassName("status")[0], - addr: el.getElementsByClassName("addr")[0], - games: el.getElementsByClassName("games")[0], - settings: el.getElementsByClassName("settings")[0], - - stats: { - game: document.getElementById("game"), - packs: document.getElementById("packs"), - online: document.getElementById("online"), - ingame: document.getElementById("ingame"), - pubgame: document.getElementById("pubgame") - } - }; - - this.top = new TopBar(document.getElementsByClassName("topbar")[0]); - - this.init = false; - this.online = []; - this.games = []; - this.packs = []; - this.players = []; +// ############### +// # TopBar Code # +// ############### + +// TopBar represents the bar at the top of the screen when client is in the lobby. + +class TopBar{ + constructor (el) + { + this.root = el; + + this.newGame = el.getElementsByClassName("new-game")[0]; + this.mobileSettings = el.getElementsByClassName("mobile-settings")[0]; + this.status = el.getElementsByClassName("status")[0]; + } + + // Set color of status bar + setStatus (s) { + this.status.setAttribute("s", s); + } + + // Toggle showing the new game screen + toggleNewGame () { + if (this.newGame.style.display !== "none") + this.newGame.style.display = "none"; + else + this.newGame.style.display = "block"; + } + + // Toggle showing the mobile settings + toggleMobileSettings () { + if (this.mobileSettings.style.display !== "none") + this.mobileSettings.style.display = "none"; + else + this.mobileSettings.style.display = "block"; + } } -Lobby.prototype = { +// ############# +// # Game code # +// ############# + +// Game represents a single game in the lobby view. It has methods for setting up the elements and such. +class Game{ + constructor (name, packs, maxp, id) + { + } +} + +// ############## +// # Lobby Code # +// ############## + +// Lobby manages the players and games provided by the server and allows users to join or create their own games. +class Lobby { + constructor (el) + { + this.root = el; + + this.e = { + status: el.getElementsByClassName("status")[0], + addr: el.getElementsByClassName("addr")[0], + games: el.getElementsByClassName("games")[0], + settings: el.getElementsByClassName("settings")[0], + + stats: { + game: document.getElementById("game"), + packs: document.getElementById("packs"), + online: document.getElementById("online"), + ingame: document.getElementById("ingame"), + pubgame: document.getElementById("pubgame") + } + }; + + this.top = new TopBar(document.getElementsByClassName("topbar")[0]); + + this.init = false; + this.online = []; + this.games = []; + this.packs = []; + this.players = []; + } + // Set initial pack list // {data array} array of strings representing pack names - packList: function(data) { + packList (data) { this.packs = data; this.top.setPacks(this.packs) this.e.stats.packs.innerText = this.packs.length(); - }, + } // Set initial game list. // { data object } object containing {games} and {name} @@ -43,20 +97,20 @@ Lobby.prototype = { // { data.games[n].packs } list of the pack names used by this game // { data.games[n].id } room identifier (uuid) // { data.games[n].max } max players in room - gameList: function(data) { + gameList (data) { while (this.e.games.firstChild != null) { this.e.games.remove(this.elements.games.firstChild) } for (let i in data.games) { - let gel = new GameEl(i.name, i.packs, i.id); + let gel = new Game(i.name, i.packs, i.id); this.games.push(gel); this.e.games.appendChild(gel.getElement()); } this.e.stats.game.innerText = data.name; this.e.stats.pubgame.innerText = this.games.length(); - }, + } // Set the initial player list. // { data array } represents a list of player objects from the server @@ -64,26 +118,26 @@ Lobby.prototype = { // { data[n].game string } id of the game room (empty if not in game). // { data[n].color string } css color chosen by player. // { data[n].uuid string } uuid of the player - players: function(data) { + players (data) { this.e.stats.online.innerText = this.players.length(); this.init = true; - }, + } // Called when a new public game is created on the server // { data object } the game object // { data.name } room name // { data.packs } list of the pack names used by this game // { data.id } room identifier (uuid) - addGame: function(data) { + addGame (data) { - }, + } // Called when a new public game is removed on the server // { data string } the uuid of the game to delete - removeGame: function(data) { + removeGame (data) { - }, + } // Called when a new player enters the lobby. // { data object } an object representing the player @@ -91,56 +145,60 @@ Lobby.prototype = { // { data.game string } id of the game room (empty if not in game). // { data.color string } css color chosen by player. // { data.uuid string } uuid of the player - addPlayer: function(data) { + addPlayer (data) { - }, + } // Called when a player modifies their settings in the lobby. // { data object } new player settings // { data.name string } non null if the player has changed their name // { data.color string } non null if the player has changed their color // { data.uuid string } uuid of player changing their settings - modPlayer: function(data) { + modPlayer (data) { - }, + } // Called when a player moves between the lobby and a game, or between two games // { data object } new location // { data.player } uuid of player changing location // { data.loc } uuid of room player is moving to (empty if moving to lobby) - movePlayer: function(data) { + movePlayer (data) { - }, + } // Called when a player exits the game (from lobby or game) - // {data string } uuid of player - removePlayer: function(data) { + // { data string } uuid of player + removePlayer (data) { - }, + } // Called when the client wants to toggle the new game screen - newGame: function() { + newGame () { //if(this.init) return; this.top.toggleNewGame(); - }, + } // Called when the client wants to toggle the mobile settings screen - mobileSettings: function() { + mobileSettings () { //if(this.init) return; this.top.toggleMobileSettings(); - }, + } // Called when the WebSocket state has changed. - setState: function(text, s, server) { + setState (text, s, server) { this.e.status.setAttribute("s", s); if(this.e.status.innerText != "Error" || ( this.e.status.innerText == "Error" && text != "Closed")) this.e.status.innerText = text; this.e.addr.innerText = server; this.top.setStatus(s); - }, + } + + getState () { + return this.e.status.innerText.toLowerCase(); + } // Called when we are resetting the game. - reset: function() { + reset () { while (this.e.games.firstElementChild != null) { this.e.games.removeChild(this.e.games.firstElementChild) } @@ -148,50 +206,4 @@ Lobby.prototype = { this.setState("Connecting", "loading", this.e.addr.innerText); this.init = false; } -}; - -// ############### -// # TopBar Code # -// ############### - -// TopBar represents the bar at the top of the screen when client is in the lobby. - -function TopBar(el) { - this.root = el; - - this.newGame = el.getElementsByClassName("new-game")[0]; - this.mobileSettings = el.getElementsByClassName("mobile-settings")[0]; - this.status = el.getElementsByClassName("status")[0]; } - -TopBar.prototype = { - // Set color of status bar - setStatus: function(s) { - this.status.setAttribute("s", s); - }, - - // Toggle showing the new game screen - toggleNewGame: function() { - if (this.newGame.style.display !== "none") - this.newGame.style.display = "none"; - else - this.newGame.style.display = "block"; - }, - - // Toggle showing the mobile settings - toggleMobileSettings: function() { - if (this.mobileSettings.style.display !== "none") - this.mobileSettings.style.display = "none"; - else - this.mobileSettings.style.display = "block"; - } -}; - -// ############# -// # Game code # -// ############# - -// GameEl represents a single game in the lobby view. It has methods for setting up the elements and such. -function GameEl(name, packs, maxp, id) { - -}
\ No newline at end of file diff --git a/webcards/scripts/gui/table.js b/webcards/scripts/gui/table.js index 2776f80..c4878a0 100644 --- a/webcards/scripts/gui/table.js +++ b/webcards/scripts/gui/table.js @@ -1,32 +1,79 @@ // Table represents and manages the actual game. It accepts inputs from the server and tries to query the server when the player makes a move. -function Table(el, soc) { - this.root = el; - this.soc = soc; -} +class Table{ + constructor(e, drag, socket) { + this.root = e; + this.drag = drag; + + this.root.addEventListener("mouseup", drag.stopDraggingAll.bind(drag)); + + //drag.addEventListener("dragstop", ); + + this.socket = socket; + + this.decks = []; + } -Table.prototype = { - - openTable: function(){ + 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: function(){ + 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: function() { + handleClose () + { this.reset(); - }, + } + + reset () + { + while(this.root.firstElementChild != null) + this.root.firstElementChild.remove(); + + this.decks = []; - reset: function() { this.closeTable(); + this.drag.stopDraggingAll(); } -}
\ No newline at end of file + + /* Deck and card functions */ + newDeck(options) + { + var d = new Deck(options); + this.decks.push(d); + this.root.appendChild(d.e); + } + + newCard(data, deck = 0) + { + var c = new Card(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 true; + } + return false; + } + + dragCheck(cap) + { + console.log(cap); + } +} diff --git a/webcards/scripts/socket/message.js b/webcards/scripts/socket/message.js index 5e821c4..044027d 100644 --- a/webcards/scripts/socket/message.js +++ b/webcards/scripts/socket/message.js @@ -1,14 +1,18 @@ -function Message(type, data){ - this.t = type; - this.d = data; -} +'use strict'; + +class Message{ + constructor (type, data) + { + this.t = type; + this.d = data; + } -Message.prototype = { - stringify: function(){ + stringify () + { var dat = this.d if(typeof dat !== "string"){ dat = JSON.stringify(dat); } return JSON.stringify({type: this.t, data: dat}); } -}; +} diff --git a/webcards/scripts/socket/sock.js b/webcards/scripts/socket/sock.js index cf06a5e..4eacc18 100644 --- a/webcards/scripts/socket/sock.js +++ b/webcards/scripts/socket/sock.js @@ -1,13 +1,15 @@ // A wrapper around the wrapper -function SockWorker(serveraddr, version, callback) { - this.server = serveraddr; - this.version = version; - this.cb = callback; -} +class SockWorker extends EventTarget{ + constructor (serveraddr, version) + { + super(); + + this.server = serveraddr; + this.version = version; + } -SockWorker.prototype = { // Initialize the connection. - init: function() { + init () { if(this.server == "" || this.server == null) { return; } @@ -22,42 +24,42 @@ SockWorker.prototype = { } catch (e) { this.err(); } - }, + } // Called when the connection connects to the server - o: function() { + 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: function(e) { + msg (e) { if(typeof e.data == "string") { var dat = JSON.parse(e.data) - this.cb(dat); + this.dispatchEvent(new Event(dat.type, dat.data)); } - }, + } // Called when the connection closes. // Passes a close object to the callback. - c: function() { - this.cb({type: "close", data: ""}); - }, + c () { + this.dispatchEvent(new Event("closed")); + } // Called when the connection encounters an error. // Passes an error to the callback - err: function() { - this.cb({type: "error", data: ""}); - }, + err () { + this.dispatchEvent(new Event("error")); + } // Call to close the connection to the server - close: function() { + close () { this.socket.close(); - }, + } // Send a message to the server - send: function(type, data) { + send (type, data) { var m = new Message(type, data); this.socket.send(m.stringify()) } -};
\ No newline at end of file +} diff --git a/webcards/scripts/theme.js b/webcards/scripts/theme.js index 8e69377..e93f5b5 100644 --- a/webcards/scripts/theme.js +++ b/webcards/scripts/theme.js @@ -1,24 +1,26 @@ -function Theme(){ - this.t = document.getElementById("theme"); -} +'use strict'; + +class Theme{ + static theme = document.getElementById("theme"); -Theme.prototype = { - init: function() { + static init() + { if(Cookies.getCookie("theme") == ""){ Cookies.setYearCookie("theme", "styles/themes/colors-base.css"); } - }, + } - restore: function() { - this.init(); - this.t.setAttribute("href", Cookies.getCookie("theme") + "?v=" + Date.now()); - }, + static restore() + { + Theme.init(); + Theme.theme.setAttribute("href", Cookies.getCookie("theme") + "?v=" + Date.now()); + } - set: function(sheet) { + static set(sheet) + { Cookies.setYearCookie("theme", sheet); - this.restore(); + Theme.restore(); } -}; +} -var GlobalTheme = new Theme(); -GlobalTheme.restore(); +Theme.restore();
\ No newline at end of file |