5 files changed, 289 insertions, 0 deletions
diff --git a/webcards/scripts/client/client.js b/webcards/scripts/client/client.js
new file mode 100644
index 0000000..b5dd4bf
--- /dev/null
+++ b/webcards/scripts/client/client.js
@@ -0,0 +1,105 @@
+// 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));
+
+    this.lob = new Lobby(document.getElementsByClassName("lobby")[0], this.soc);
+    this.tab = new Table(document.getElementsByClassName("table")[0], this.soc);
+
+    this.game = game;
+}
+
+Client.prototype = {
+    init: function() {
+        this.soc.init();
+    },
+
+    // Entry point for a message.
+    // If it's a close message, the
+    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, "#D00", this.soc.server);
+            this.tab.handleClose();
+            return;
+        }
+
+        switch(this.state) {
+            case "handshake":
+                this.handshake(m);
+                break;
+            case "lobby":
+                this.lobby(m);
+                break;
+            case "game":
+                break;
+        }
+    },
+
+    handshake: function(m) {
+        switch (m.type) {
+            case "verr":
+                this.soc.close();
+                alert(`Error connecting to server: version of client (${this.version}) not accepted.`);
+                console.error("Error connecting to server: version of client (${this.version}) not accepted.");
+                console.error(m.data);
+                return;
+            case "lobby":
+                this.state = "lobby";
+                this.soc.send("ready", "");
+                return;
+        }
+    },
+
+    lobby: function (m) {
+        switch (m.type) {
+            case "plist":
+                this.lob.packList(m.data);
+                break;
+            case "glist":
+                this.lob.gameList(m.data, this.game);
+                this.game = null;
+                break;
+            case "players":
+                this.lob.players(m.data);
+                break;
+            case "gdel":
+                this.lob.removeGame(m.data);
+                break;
+            case "gadd":
+                this.lob.addGame(m.data);
+                break;
+            case "pdel":
+                this.lob.removePlayer(m.data);
+                break;
+            case "padd":
+                this.lob.addPlayer(m.data);
+                break;
+            case "pmove":
+                this.lob.movePlayer(m.data);
+                break;
+        }
+    },
+
+    game: function (m) {
+        switch (m.type) {
+            
+        }
+    },
+
+    // Reset the lobby and table, then attempt to reopen the connection to the server.
+    reset: function() {
+        this.state = "handshake";
+
+        this.lob.reset();
+        this.tab.reset();
+
+        this.soc.init();
+    }
+};
diff --git a/webcards/scripts/client/lobby.js b/webcards/scripts/client/lobby.js
new file mode 100644
index 0000000..8d46352
--- /dev/null
+++ b/webcards/scripts/client/lobby.js
@@ -0,0 +1,102 @@
+// 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.elements = {
+        status: this.root.getElementsByClassName("status")[0],
+        addr:   this.root.getElementsByClassName("addr")[0],
+
+        stats:  {
+            game:       document.getElementById("game"),
+            packs:      document.getElementById("packs"),
+            online:     document.getElementById("online"),
+            ingame:     document.getElementById("ingame"),
+            pubgame:    document.getElementById("pubgame")
+        },
+
+        settings: {
+            name:   document.getElementById("name"),
+            color:  document.getElementById("usercolor")
+        }
+    };
+
+    this.top = new TopBar(document.getElementsByClassName("topbar")[0]);
+    
+    this.init = false;
+    this.online = [];
+    this.games = [];
+    this.packs = [];
+    this.players = [];
+}
+
+Lobby.prototype = {
+    packList: function(data){
+
+        this.elements.stats.packs.innerText = this.packs.length();
+    },
+
+    gameList: function(data, game){
+
+        this.elements.stats.pubgame.innerText = this.games.length();
+    },
+
+    players: function(data) {
+
+        this.elements.stats.online.innerText = this.players.length();
+        this.init = true;
+    },
+
+    addGame: function(data){
+
+    },
+
+    removeGame: function(data){
+
+    },
+
+    addPlayer: function(data){
+
+    },
+
+    movePlayer: function(data){
+
+    },
+
+    removePlayer: function(data){
+
+    },
+
+    newGameScreen: function(){
+        if(this.init) return;
+    },
+
+    setState: function(text, color, server){
+        this.elements.status.style.backgroundColor = color;
+        this.elements.status.innerText = text;
+        this.elements.addr.innerText = server;
+        this.top.setColor(color);
+    },
+
+    reset: function(){
+        this.setState("Connecting", "#DA0", this.elements.addr.innerText);
+        this.init = false;
+    }
+};
+
+// ###############
+// # TopBar Code #
+// ###############
+
+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 = {
+    setColor: function(color) {
+        this.status.style.backgroundColor = color;
+    }
+};
diff --git a/webcards/scripts/client/message.js b/webcards/scripts/client/message.js
new file mode 100644
index 0000000..5e821c4
--- /dev/null
+++ b/webcards/scripts/client/message.js
@@ -0,0 +1,14 @@
+function Message(type, data){
+    this.t = type;
+    this.d = data;
+}
+
+Message.prototype = {
+    stringify: function(){
+        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/client/sock.js b/webcards/scripts/client/sock.js
new file mode 100644
index 0000000..78c4195
--- /dev/null
+++ b/webcards/scripts/client/sock.js
@@ -0,0 +1,52 @@
+function SockWorker(serveraddr, version, callback) {
+    this.server = serveraddr;
+    this.version = version;
+    this.cb = callback;
+}
+
+SockWorker.prototype = {
+    init: function() {
+        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("closed", this.c.bind(this));
+            this.socket.addEventListener("error", this.err.bind(this));
+        } catch (e) {
+            this.err();
+        }
+    },
+
+    o: function() {
+        this.send("version", this.version);
+    },
+
+    msg: function(e) {
+        if(typeof e.data == "string") {
+            var dat = JSON.parse(e.data)
+            this.cb(dat);
+        }
+    },
+
+    c: function() {
+        this.cb({type: "close", data: ""});
+    },
+
+    err: function() {
+        this.cb({type: "error", data: ""});
+    },
+
+    close: function() {
+        this.socket.close();
+    },
+
+    send: function(type, data) {
+        var m = new Message(type, data);
+        this.socket.send(m.stringify())
+    }
+};
+\ No newline at end of file
diff --git a/webcards/scripts/client/table.js b/webcards/scripts/client/table.js
new file mode 100644
index 0000000..911763a
--- /dev/null
+++ b/webcards/scripts/client/table.js
@@ -0,0 +1,16 @@
+// 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 = {
+    
+    handleClose: function() {
+
+    },
+
+    reset: function() {
+
+    }
+}
+\ No newline at end of file