several improvements, implemented revoke stuff

main.js

@@ -28,7 +28,7 @@ register_container = main_menu.create_infocontainer("Login to play online");
 i_register_username = register_container.create_input("username");
 i_register_pw = register_container.create_input("password", true);
 b_register = register_container.create_button("register/login");
-//register_container.create_label("(creates new account for a new username)");
+register_container.create_label("If the username does not exists yet, a new account is created automatically");
 
 // logout TODO: rename container:
 logout_container = main_menu.create_infocontainer("Logged in as: ");
@@ -42,7 +42,7 @@ l_highscores.style.textAlign = "left"
 
 
 // fill subcontainer:
-match_slot_container = sub_menu.create_infocontainer("Running Matches<br>(click to open)");
+match_slot_container = sub_menu.create_infocontainer("Running Matches");
 
 
 // match control:

online_match_manager.js

@@ -1,6 +1,6 @@
 class OnlineMatchManager
 {
-    constructor(grid, info_func, matches_container, control_container, end_button, game_server_connection, match_id, match_state, player_name)
+    constructor(grid, info_func, matches_container, control_container, end_button, game_server_connection, match_id, match_state, revoke_time, player_name)
     {
         this.grid = grid;
 
@@ -12,7 +12,8 @@ class OnlineMatchManager
 
 
         this.match_state = match_state;
-        this.player_name = player_name
+        this.revoke_time = Date.create_from_mysql(revoke_time);
+        this.player_name = player_name;
 
         var player_a = this.match_state.player_a;
         var player_b = this.match_state.player_b;
@@ -98,9 +99,10 @@ class OnlineMatchManager
         }
     }
 
-    update_match_state(match_state)
+    update_match_state(match_state, revoke_time)
     {
         this.match_state = match_state;
+        this.revoke_time = Date.create_from_mysql(revoke_time);
         
         if (this.online_opponent.get_name() == this.match_state.active_player)
         {
@@ -289,6 +291,10 @@ class OnlineMatchManager
         var current_player = this.player_name == current_player_name ? this.local_player : this.online_opponent;
         this.grid.player_change_listener(current_player);
 
+
+        // date difference in hours:
+        var dt = Math.floor(Math.abs(Date.now() - this.revoke_time) / 36e5);
+
         
         if (this.player_name == current_player_name)
         {
@@ -303,19 +309,19 @@ class OnlineMatchManager
                 {
                     this.grid.unblock(x,y);
                 }
-                this.info_func("It's your turn!", false);
+                this.info_func("It's your turn! (" + dt + "h left)", false);
                 this.control_container.blink(theme_color_highlight);
             }
             else
             {
-                this.info_func("It's your turn!", false);
+                this.info_func("It's your turn! (" + dt + "h left)", false);
                 this.control_container.blink(theme_color_highlight);
                 this.grid.unblock_all();
             }
         }
         else
         {
-            this.info_func("waiting for " + encodeHTML(this.online_opponent.get_name()) + "'s move", false);
+            this.info_func("waiting for " + encodeHTML(this.online_opponent.get_name()) + "'s move  (" + dt + "h left)", false);
             this.control_container.blink(theme_color_highlight);
         }
 

tools.js

@@ -16,4 +16,19 @@ function clearInner(node) {
 // encoding helper (found here: https://stackoverflow.com/a/2794366)
 function encodeHTML(s) {
     return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
-}
+}
+
+Date.create_from_mysql = function(mysql_string)
+{ 
+   var t, result = null;
+
+   if( typeof mysql_string === 'string' )
+   {
+      t = mysql_string.split(/[- :]/);
+
+      //when t[3], t[4] and t[5] are missing they defaults to zero
+      result = new Date(t[0], t[1] - 1, t[2], t[3] || 0, t[4] || 0, t[5] || 0);          
+   }
+
+   return result;   
+}

websocket_connection.js

@@ -20,6 +20,8 @@ class WebsocketConnection
 
         this.end_button = end_button;
 
+        this.l_matches_container = null;
+
         this.active_match = null;
 
         this.connected = false;
@@ -90,6 +92,13 @@ class WebsocketConnection
             this.openmatches[key].remove_match();
         }
         this.openmatches = {};
+        // remove match info label if exists:
+        if (this.l_matches_container != null)
+        {
+            this.matches_container.container.removeChild(this.l_matches_container);
+            clearInner(this.l_matches_container);
+            this.l_matches_container = null;
+        }
         
         // remove complete friend list:
         var n = this.friend_name_divs.length;
@@ -123,6 +132,13 @@ class WebsocketConnection
             this.openmatches[key].remove_match();
         }
         this.openmatches = {};
+        // remove match info label if exists:
+        if (this.l_matches_container != null)
+        {
+            this.matches_container.container.removeChild(this.l_matches_container);
+            clearInner(this.l_matches_container);
+            this.l_matches_container = null;
+        }
 
         // remove complete friend list:
         var n = this.friend_name_divs.length;
@@ -228,6 +244,7 @@ class WebsocketConnection
     {
         var id = data.id
         var match_state = data.match_state;
+        var revoke_time = data.revoke_time;
 
         if (match_state == null)
         {
@@ -241,7 +258,7 @@ class WebsocketConnection
         {
             if (id in this.openmatches)
             {
-                this.openmatches[id].update_match_state(match_state)
+                this.openmatches[id].update_match_state(match_state, revoke_time)
                 if (this.active_match == id)
                 {
                     this.openmatches[id].open_match();
@@ -255,12 +272,24 @@ class WebsocketConnection
             {
                 if (!match_state.game_over)
                 {
-                    this.openmatches[id] = new OnlineMatchManager(this.grid, this.info_func, this.matches_container, this.control_container, this.end_button, this, id, match_state, this.player.get_name());
+
+                    // remove match info label if exists:
+                    if (this.l_matches_container != null)
+                    {
+                        this.matches_container.container.removeChild(this.l_matches_container);
+                        clearInner(this.l_matches_container);
+                        this.l_matches_container = null;
+                    }
+
+                    this.openmatches[id] = new OnlineMatchManager(this.grid, this.info_func, this.matches_container, this.control_container, this.end_button, this, id, match_state, revoke_time, this.player.get_name());
                     if (match_state.last_move == null)
                     {
                         this.notify("new Game against " + encodeHTML(this.openmatches[id].online_opponent.get_name()));
                     }
                     this.matches_container.blink(theme_color_highlight);
+
+                    // create new info:
+                    this.l_matches_container = this.matches_container.create_label("click on name to open,<br>click '+' to add as friend");
                 }
                 
             }