little improvements

main.js

@@ -37,11 +37,11 @@ b_logout = logout_container.create_button("logout");
 
 // match control
 match_control = sub_menu.create_infocontainer();
-b_end_game = match_control.create_button("End Game");
+b_end_game = match_control.create_button("Close Match");
 
 // fill subcontainer:
 match_slot_container = sub_menu.create_infocontainer();
-match_slot_container.create_label("online matches");
+match_slot_container.create_label("Running Matches<br>(click to open)");
 
 // search match:
 search_match_container = main_menu.create_infocontainer();
@@ -59,6 +59,7 @@ status_container = main_menu.create_infocontainer();
 l_status_head = status_container.create_label("Status:");
 l_status = status_container.create_label("select gamemode. click <br> <a href=https://en.wikipedia.org/wiki/Ultimate_tic-tac-toe#Rules>[here]</a> for the rules!");
 
+
 // global vars:
 
 game_manager = null;

online_match_manager.js

@@ -26,7 +26,14 @@ class OnlineMatchManager
         this.match_button.addEventListener("click", () => this.open_match());
         this.match_button.style.background = "rbg(0,255,0)";
 
-        this.match_button.className = "infobar-button-active";
+        if (this.online_opponent.get_name() == this.match_state.active_player)
+        {
+            this.match_button.className = "infobar-button-red";
+        }
+        else
+        {
+            this.match_button.className = "infobar-button-green"
+        }
 
         this.is_closed = false;
 
@@ -68,7 +75,15 @@ class OnlineMatchManager
     update_match_state(match_state)
     {
         this.match_state = match_state;
-        this.match_button.className = "infobar-button-active";
+        
+        if (this.online_opponent.get_name() == this.match_state.active_player)
+        {
+            this.match_button.className = "infobar-button-red";
+        }
+        else
+        {
+            this.match_button.className = "infobar-button-green"
+        }
 
         if (this.match_state.active_player == this.local_player.get_name())
         {
@@ -76,6 +91,18 @@ class OnlineMatchManager
         }
     }
 
+    on_focus_loose()
+    {
+        if (this.online_opponent.get_name() == this.match_state.active_player)
+        {
+            this.match_button.className = "infobar-button-red";
+        }
+        else
+        {
+            this.match_button.className = "infobar-button-green"
+        }
+    }
+
     open_match()
     {
         this.grid.register_click_callback(null);
@@ -83,7 +110,7 @@ class OnlineMatchManager
         this.grid.deactivate_all();
         this.grid.unblock_all();
 
-        this.match_button.className = "infobar-button";
+        this.match_button.className = "infobar-button-active";
 
         this.game_server_connection.set_active_match(this.match_id);
 
@@ -160,7 +187,14 @@ class OnlineMatchManager
         }
         else if(game_over)
         {
-            this.status_label.innerHTML = "Game was closed by server or opponent";
+            if (this.grid.is_complete())
+            {
+                this.status_label.innerHTML = "Draw. Everyone looses!";
+            }
+            else
+            {
+                this.status_label.innerHTML = "Game was closed by server or opponent";
+            }
             return;
         }
 

style.css

@@ -170,7 +170,6 @@ a:visited {
     flex-direction: column;
     font-size: calc(2 * var(--border-radius));
     width: calc(var(--sidebar-width) - 4 * var(--border-radius));
-    text-align: left;
 }
 
 @media (max-aspect-ratio: 1/1) {
@@ -194,6 +193,7 @@ a:visited {
     vertical-align: middle;
     display: flex;
     flex-direction: column;
+    text-align: center;
 }
 
 @media (max-aspect-ratio: 1/1) {
@@ -204,13 +204,61 @@ a:visited {
     }
 }
 
+.infobar-button-green {
+    border-radius: var(--border-radius);
+    margin: var(--border-radius);
+    border: none;
+    outline: 0;
+    transition-duration: 0.3s;
+    background: rgba(0, 255, 0, 0.2);
+    color: rgb(255, 255, 255);
+    font-size: calc(2.8 * var(--border-radius));
+    height: calc(4 * var(--border-radius));
+    width: calc(var(--sidebar-width) - 4 * var(--border-radius));
+    vertical-align: middle;
+    display: flex;
+    flex-direction: column;
+}
+
+@media (max-aspect-ratio: 1/1) {
+
+    .infobar-button-green{
+        width: calc(0.25 * var(--sidebar-width));
+        height: calc(0.18 * var(--sidebar-height));
+    }
+}
+
+.infobar-button-red {
+    border-radius: var(--border-radius);
+    margin: var(--border-radius);
+    border: none;
+    outline: 0;
+    transition-duration: 0.3s;
+    background: rgba(255, 0, 0, 0.2);
+    color: rgb(255, 255, 255);
+    font-size: calc(2.8 * var(--border-radius));
+    height: calc(4 * var(--border-radius));
+    width: calc(var(--sidebar-width) - 4 * var(--border-radius));
+    vertical-align: middle;
+    display: flex;
+    flex-direction: column;
+}
+
+@media (max-aspect-ratio: 1/1) {
+
+    .infobar-button-red{
+        width: calc(0.25 * var(--sidebar-width));
+        height: calc(0.18 * var(--sidebar-height));
+    }
+}
+
 .infobar-button-active {
     border-radius: var(--border-radius);
     margin: var(--border-radius);
     border: none;
     outline: 0;
     transition-duration: 0.3s;
-    background: rgba(0, 255, 0, 0.5);
+    background: rgba(126,87,194, 0.8) ;
     color: rgb(255, 255, 255);
     font-size: calc(2.8 * var(--border-radius));
     height: calc(4 * var(--border-radius));
@@ -230,11 +278,11 @@ a:visited {
 
 
 .infobar-button:hover {
-    background: rgba(255, 255, 255, 0.2);
+    background: rgba(126,87,194, 0.2);
 }
 
 .infobar-button:active {
-    background: rgba(255, 255, 255, 0.4);
+    background: rgba(126,87,194, 0.4);
 }
 
 .infobar-button:disabled {

websocket_connection.js

@@ -126,6 +126,14 @@ class WebsocketConnection
 
     set_active_match(id)
     {
+        for (var key in this.openmatches)
+        {
+            if (key == id)
+            {
+                continue;
+            }
+            this.openmatches[key].on_focus_loose();
+        }
         this.active_match = id;
     }
 
@@ -243,6 +251,11 @@ class WebsocketConnection
 
     reconnect(session_id)
     {
+        for (var key in this.openmatches)
+        {
+            this.openmatches[key].remove_match();
+        }
+        this.openmatches = {};
         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));