[WEBCARDS] Update some webcards stuff

3 files changed, 389 insertions, 0 deletions

diff --git a/webcards/scripts/gui/input.js b/webcards/scripts/gui/input.js
new file mode 100644
index 0000000..c349a07
--- /dev/null
+++ b/webcards/scripts/gui/input.js
@@ -0,0 +1,159 @@
+var inputFuncs = {
+    createInput: function(type = "text", wrapped = false, id) {
+        var el = document.createElement("input");
+        el.setAttribute("type", type);
+        
+        if(typeof id == "string")
+            el.setAttribute("id", id);
+
+        if(wrapped) {
+            var wrapper = document.createElement("div");
+            wrapper.className = "input-container";
+            wrapper.setAttribute("type", type);
+            wrapper.setAttribute("onclick", "this.firstElementChild.click()");
+            wrapper.appendChild(el);
+            wrapper.input = el;
+            return wrapper;
+        }
+
+        el.getValue = function () {
+            return this.value;
+        }
+        return el;
+    },
+
+    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", true, id);
+        el.value = value;
+        return el;
+    },
+
+    textInput: function(value, placeholder, id) {
+        var el = this.createInput("text", false, id);
+        el.setAttribute("placeholder", placeholder);
+        el.value = value;
+        return el;
+    },
+
+    numberInput: function(value, id) {
+        var el = this.createInput("number", false, id);
+        el.value = value;
+        return el;
+    },
+
+    fileInput: function(value, id) {
+        var el = this.createInput("file", true, id);
+        
+        el.value = value;
+        
+        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;
+    },
+
+    checkboxInput: function(checked = false, id) {
+        var el = this.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);
+        el.setAttribute("name", group);
+        el.setAttribute("value", value);
+        if(checked)
+            el.checked = true;
+        return el;
+    },
+
+    radioInputs: function(group, names, values, checked = 0) {
+        var wrapper = document.createElement("div");
+        wrapper.className = "input-container";
+        wrapper.setAttribute("type", "radio");
+        
+        wrapper.getValue = function() {
+            for(let i = 0; i < this.children.length; i++){
+                if(this.children[i].checked)
+                    return this.children[i].value;
+            }
+        };
+
+        for(let i = 0; i < values.length; i++) {
+            wrapper.appendChild(this.inputLabel(names[i], group+"-"+i));
+            if(i == checked)
+                wrapper.appendChild(this.radioInput(group, values[i], true, group+"-"+i));
+            else
+                wrapper.appendChild(this.radioInput(group, values[i], false, group+"-"+i));
+            wrapper.appendChild(document.createElement("br"));
+        }
+
+        return wrapper;
+    },
+
+    wrapInput: function(el) {
+        
+    }
+};
+
+function Settings () {
+    this.settings = {
+        username: {
+            type: "text",
+            args: [Math.floor(Math.random() * 100000), "Username", "userName"]
+        }
+    };
+
+    this.genSettings();
+}
+
+Settings.prototype = {
+    getSettings: function() {
+        var out = {};
+        for(let key in this.settings) {
+
+        }
+    },
+
+    putSettings: function (el) {
+        for(let key in this.settings) {
+            el.appendChild(this.settings[key]);
+        }
+    },
+
+    genSettings: function() {
+        for(let key in this.settings) {
+            switch(this.settings[key].type) {
+                case "radio":
+                    this.settings[key] = inputFuncs.radioInputs(...this.settings[key].args);
+                default:
+                    if(typeof inputFuncs[this.settings[key].type+"Input"] != null)
+                        this.settings[key] = inputFuncs[this.settings[key].type+"Input"](...this.settings[key].args);
+            }
+        }
+    }
+};
\ No newline at end of file
diff --git a/webcards/scripts/gui/lobby.js b/webcards/scripts/gui/lobby.js
new file mode 100644
index 0000000..731d9ec
--- /dev/null
+++ b/webcards/scripts/gui/lobby.js
@@ -0,0 +1,196 @@
+// 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 = [];
+}
+
+Lobby.prototype = {
+    // Set initial pack list
+    // {data array} array of strings representing pack names
+    packList: function(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}
+    // { data.name string } name of the game the server runs
+    // { data.games array } array of public games the server is running
+    // { data.games[n].name } room name
+    // { 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) {
+        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);
+            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
+    // { data[n].name string } name of the player
+    // { 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) {
+
+        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) {
+
+    },
+
+    // Called when a new public game is removed on the server
+    // { data string } the uuid of the game to delete
+    removeGame: function(data) {
+
+    },
+
+    // Called when a new player enters the lobby.
+    // { data object } an object representing the player
+    // { data.name string } name of the player
+    // { 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) {
+
+    },
+
+    // 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) {
+
+    },
+
+    // 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) {
+
+    },
+
+    // Called when a player exits the game (from lobby or game)
+    // {data string } uuid of player
+    removePlayer: function(data) {
+
+    },
+
+    // Called when the client wants to toggle the new game screen
+    newGame: function() {
+        //if(this.init) return;
+        this.top.toggleNewGame();
+    },
+
+    // Called when the client wants to toggle the mobile settings screen
+    mobileSettings: function() {
+        //if(this.init) return;
+        this.top.toggleMobileSettings();
+    },
+
+    // Called when the WebSocket state has changed.
+    setState: function(text, color, server) {
+        this.e.status.style.backgroundColor = color;
+        this.e.status.innerText = text;
+        this.e.addr.innerText = server;
+        this.top.setColor(color);
+    },
+
+    // Called when we are resetting the game.
+    reset: function() {
+        while (this.e.games.firstElementChild != null) {
+            this.e.games.removeChild(this.e.games.firstElementChild)
+        }
+
+        this.setState("Connecting", "#DA0", 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
+    setColor: function(color) {
+        this.status.style.backgroundColor = color;
+    },
+
+    // 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
new file mode 100644
index 0000000..db67529
--- /dev/null
+++ b/webcards/scripts/gui/table.js
@@ -0,0 +1,34 @@
+// Table represents and manages the actual game.  It accepts inputs from the server and tries to queries the server when the player makes a move.
+function Table(el, soc) {
+    this.root = el;
+    this.soc = soc;
+}
+
+Table.prototype = {
+    
+    openTable: function(){
+        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(){
+        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() {
+        this.reset();
+    },
+
+    reset: function() {
+        this.closeTable();
+    }
+}
\ No newline at end of file