session cookies

main.js

@@ -68,6 +68,39 @@ logged_in = false;
 // connection stuff:
 
 var connection = null;
+var session_id = null;
+
+
+// cookies:
+function get_cookie(cname) {
+    var name = cname + "=";
+    var ca = document.cookie.split(';');
+    for(var i = 0; i < ca.length; i++) {
+        var c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return "";
+}
+
+function set_cookie(cname, cvalue, exdays) {
+    var d = new Date();
+    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+    var expires = "expires="+d.toUTCString();
+    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+}
+
+function check_cookie(cname) {
+    var tmp = get_cookie(cname);
+    if (tmp != "") {
+        return true;
+    }
+    return false;
+}
 
 
 
@@ -150,16 +183,8 @@ login_callback = function()
     end_local_game();
     l_username.innerHTML = "logged in as: " + connection.player.get_name();
 
-}
+    set_cookie("sessionid", connection.session_id, 30);
 
-login = function(){
-
-    if (connection != null)
-    {
-        connection.close();
-    }
-    connection = new WebsocketConnection(server_url, server_port, grid, l_status, match_slot_container, match_control, login_callback);
-    connection.connect(i_register_username.value, i_register_pw.value);
 }
 
 logout = function()
@@ -169,6 +194,12 @@ logout = function()
     {
 
         connection.close();
+        if (check_cookie("sessionid"))
+        {
+            // delete session:
+            session_id = get_cookie("sessionid");
+            set_cookie("sessionid", session_id, -100);
+        }
 
     }
 
@@ -179,6 +210,36 @@ logout = function()
     end_local_game();
 }
 
+reconnect = function()
+{
+    if (check_cookie("sessionid"))
+    {
+        session_id = get_cookie("sessionid");
+        if (connection != null)
+        {
+            connection.close();
+        }
+        connection = new WebsocketConnection(server_url, server_port, grid, l_status, match_slot_container, match_control, login_callback, on_connection_error);
+        connection.reconnect(session_id);
+    }
+}
+
+on_connection_error = function()
+{
+    connection = null;
+    logout();
+}
+
+login = function(){
+
+    if (connection != null)
+    {
+        connection.close();
+    }
+    connection = new WebsocketConnection(server_url, server_port, grid, l_status, match_slot_container, match_control, login_callback, on_connection_error);
+    connection.connect(i_register_username.value, i_register_pw.value);
+}
+
 search_match = function()
 {
     if (connection != null)
@@ -215,6 +276,8 @@ b_logout.addEventListener("click", logout);
 b_match_search.addEventListener("click", search_match);
 b_match_invite.addEventListener("click", invite_player);
 
+reconnect();
+
 
 /*
 var websocket_connection = new WebsocketConnection('127.0.0.1', 5556);

settings.js

@@ -1,2 +1,6 @@
-var server_url = "the-cake-is-a-lie.net";
-var server_port = "5556";
+var server_protocol = "ws://"
+var server_url = "127.0.0.1";
+var server_port = "5556";
+
+var home = "https://the-cake-is-a-lie.net/website/ultimate_tictactoe/";
+var rel_home = "/website/ultimate_tictactoe";

sw.js

@@ -32,4 +32,28 @@ self.addEventListener('install', function(e) {
         return response || fetch(event.request);
       })
     );
+});
+
+self.addEventListener('notificationclick', function(event) {
+  event.waitUntil(async function() {
+      const allClients = await clients.matchAll({
+          includeUncontrolled: true
+      });
+
+      var instance = None;
+
+
+      // Let's see if we already have a window open:
+      for (const client of allClients) {
+          client.focus();
+          instance = client;
+          break;
+      }
+
+      // If we didn't find an existing window,
+      // open a new one:
+      if (!instance) {
+          instance = await clients.openWindow(rel_home);
+      }
+  }());
 });

websocket_connection.js

@@ -1,6 +1,6 @@
 class WebsocketConnection
 {
-    constructor(ip, port, grid, status_label, matches_container, control_container, login_callback_func)
+    constructor(ip, port, grid, status_label, matches_container, control_container, login_callback_func, error_callback_func)
     {
         this.ip = ip;
         this.port = port;
@@ -23,8 +23,9 @@ class WebsocketConnection
         this.login_callback_func = login_callback_func;
 
         this.openmatches = {};
+        this.error_callback_func = error_callback_func;
 
-        this.
+        this.closed_by_user = false;
 
         matches_container.hide();
 
@@ -57,10 +58,22 @@ class WebsocketConnection
         this.login(username, pw)
     }
 
+    on_reopen(session_id)
+    {
+        this.connected = true;
+        this.relogin(session_id);
+    }
+
     on_close()
     {
         this.registered = false;
         this.connected = false;
+        if (!this.closed_by_user)
+        {
+            this.status_label.innerHTML = "connection to server closed";
+            this.error_callback_func();
+        }
+        
     }
 
     on_error()
@@ -68,6 +81,11 @@ class WebsocketConnection
         console.log("error in websocket connection");
         this.registered = false;
         this.connected = false;
+        if (!this.closed_by_user)
+        {
+            this.status_label.innerHTML = "connection to server lost";
+            this.error_callback_func();
+        }
     }
 
     
@@ -90,9 +108,8 @@ class WebsocketConnection
                 this.on_register_response(msg.data);
                 break;
             
-            case "temp_session_response":
-                console.log(json_msg)
-                this.on_temp_session_response(msg.data);
+            case "reconnect_response":
+                this.on_reconnect_response(msg.data);
                 break;
             
             case "match_update":
@@ -118,7 +135,13 @@ class WebsocketConnection
             this.openmatches[this.active_match].on_user_close();
 
 
-        } 
+        }
+
+        if (this.current_end_button != null)
+        {
+            this.control_container.container.deleteChild(this.current_end_button);
+            this.current_end_button = null;
+        }
     }
 
 
@@ -149,7 +172,6 @@ class WebsocketConnection
             if (id in this.openmatches)
             {
                 this.openmatches[id].update_match_state(match_state)
-                console.log("update!!!");
                 if (this.active_match == id)
                 {
                     this.openmatches[id].open_match();
@@ -179,9 +201,17 @@ class WebsocketConnection
         
     }
 
-    on_temp_session_response(data)
+    on_reconnect_response(data)
     {
-        console.log("not supported yet");
+        if (data.success)
+        {
+            this.registered = true;
+            this.session_id = data.id;
+            this.player.set_name(data.user);
+            this.login_callback_func();
+        }
+
+        this.status_label.innerHTML = data.msg;
     }
 
     on_match_request_response(data)
@@ -199,13 +229,22 @@ class WebsocketConnection
 
     connect(username, pw)
     {
-        this.socket = new WebSocket("wss://" + this.ip + ":" + this.port);
+        this.socket = new WebSocket(server_protocol + this.ip + ":" + this.port);
         this.socket.onmessage = (e => this.on_message(e));
         this.socket.onopen = (() => this.on_open(username, pw));
         this.socket.onerror = (() => this.on_error());
         this.socket.onclose = (() => this.on_close());
     }
 
+    reconnect(session_id)
+    {
+        this.socket = new WebSocket(server_protocol + this.ip + ":" + this.port);
+        this.socket.onmessage = (e => this.on_message(e));
+        this.socket.onopen = (() => this.on_reopen(session_id));
+        this.socket.onerror = (() => this.on_error());
+        this.socket.onclose = (() => this.on_close());
+    }
+
     send_move(sub_x, sub_y, x, y, match_id)
     {
         var msg_object = {
@@ -261,6 +300,19 @@ class WebsocketConnection
         this.socket.send(JSON.stringify(msg_object));
     }
 
+    relogin(session_id)
+    {
+        // register for game queue
+        var msg_object = {
+            type: "reconnect",
+            data: {
+                id: session_id
+            }
+        };
+
+        this.socket.send(JSON.stringify(msg_object));
+    }
+
     send_disconnect()
     {
         if (!this.is_connected)
@@ -283,6 +335,8 @@ class WebsocketConnection
         {
             this.openmatches[key].remove_match();
         }
+        this.status_label.innerHTML = "logged out";
+        this.closed_by_user = true;
         this.socket.close();
     }