refactor some JS

static/main.js

@@ -1,41 +1,94 @@
-window.onload = function() {
-    const config = {
-        "tag": "config",
-        "game": "testing",
-        "user": "test_user",
-    };
-
-    const rawHash = window.location.hash;
-    if (rawHash) {
-        const hash = rawHash.substr(1, rawHash.length).split(",");
-        for (let i in hash) {
-            let elements = hash[i].split(":");
-            if (elements.length != 2) {
-                continue;
+class Configuration {
+    constructor(game, user) {
+        this.game = game;
+        this.user = user;
+    }
+
+    static fromFragment() {
+        const config = {
+            "game": "testing",
+            "user": "test_user",
+        };
+
+        const rawHash = window.location.hash;
+        if (rawHash) {
+            const hash = rawHash.substr(1, rawHash.length).split(",");
+            for (let i in hash) {
+                let elements = hash[i].split(":");
+                if (elements.length != 2) {
+                    continue;
+                }
+                config[elements[0]] = elements[1];
             }
-            config[elements[0]] = elements[1];
         }
+
+        return new Configuration(config.game, config.user);
+
     }
+}
 
-    $("#loggedin").text(`logged in as "${config.user}"`);
-    $("#gamename").text(`playing in "${config.game}"`);
+class Messages {
+    static config(game, user) {
+        return JSON.stringify({
+            "tag": "config",
+            "game": game,
+            "user": user,
+        });
+    }
+
+    static post(author, content) {
+        return JSON.stringify({
+            "tag": "post",
+            "author": author,
+            "content": content,
+        });
+    }
+}
+
+class Socket {
+    constructor() {
+        var loc = window.location, new_uri;
+        if (loc.protocol === "https:") {
+            new_uri = "wss:";
+        } else {
+            new_uri = "ws:";
+        }
+        new_uri += "//" + loc.host;
+        new_uri += loc.pathname + "socket";
 
-    var loc = window.location, new_uri;
-    if (loc.protocol === "https:") {
-        new_uri = "wss:";
-    } else {
-        new_uri = "ws:";
+        this.socket = new WebSocket(new_uri);
     }
-    new_uri += "//" + loc.host;
-    new_uri += loc.pathname + "socket";
 
-    const socket = new WebSocket(new_uri);
-    socket.addEventListener("open", function (event) {
+    onOpen(func) {
+        this.socket.addEventListener("open", func);
+    }
+
+    onMessage(func) {
+        this.socket.addEventListener("message", func);
+    }
+
+    config(game, user) {
+        this.socket.send(Messages.config(game, user));
+    }
+
+    post(author, content) {
+        this.socket.send(Messages.config(author, content));
+    }
+}
+
+window.onload = function() {
+    const config = Configuration.fromFragment();
+    const socket = new Socket();
+
+    $("#loggedin").text(`logged in as "${config.user}"`);
+    $("#gamename").text(`playing in "${config.game}"`);
+
+    socket.onOpen(function (event) {
         console.log("Connected to server!");
-        socket.send(JSON.stringify(config));
+        socket.config(config.game, config.user);
     });
 
-    socket.addEventListener("message", function (event) {
+    socket.onMessage(function (event) {
         msg = JSON.parse(event.data);
         var chat = $(".messages");
         chat.append(`<div class="msg"><span class="author">${msg.author}:</span> ${msg.content}</div>`);
@@ -46,11 +99,7 @@ window.onload = function() {
     $('#chatbox').on('keypress', function (e) {
        if (e.which === 13) {
            $(this).attr("disabled", "disabled");
-           socket.send(JSON.stringify({
-               "tag": "post",
-               "author": config.user,
-               "content": $('#chatbox').val()
-           }))
+           socket.post(config.user, $('#chatbox').val());
            $('#chatbox').val('');
            $(this).removeAttr("disabled");
        }