highscore

infocontainer.js

@@ -75,7 +75,7 @@ class Infocontainer
         return l;
     }
 
-    create_double_button(text, option)
+    create_double_button(text, option, left_width = "80%", right_width = "20%")
     {
         var div = document.createElement("div");
         div.className = "option-button-container";
@@ -87,8 +87,8 @@ class Infocontainer
         b1.className = "infobar-button";
         b2.className = "infobar-button";
 
-        b1.style.width = "80%";
+        b1.style.width = left_width;
-        b2.style.width = "20%";
+        b2.style.width = right_width;
 
         b2.style.marginLeft = "2%";
         b1.style.marginTop = "1%";

main.js

@@ -30,9 +30,15 @@ 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)");
 
-// logout:
+// logout TODO: rename container:
-logout_container = main_menu.create_infocontainer("logged in as: ");
+logout_container = main_menu.create_infocontainer("Logged in as: ");
-b_logout = logout_container.create_button("logout");
+b_logout = logout_container.create_button("Logout");
+b_show_highscores = logout_container.create_button("Highscores");
+
+highscore_container = main_menu.create_infocontainer("Highscores");
+b_close_highscores = highscore_container.create_button("Close Highscores");
+l_highscores = highscore_container.create_label("...");
+l_highscores.style.textAlign = "left"
 
 
 // fill subcontainer:
@@ -139,6 +145,7 @@ disable_all_containers = function()
     search_match_container.hide();
     match_control.hide();
     status_container.hide();
+    highscore_container.hide();
 
     dummy_main.hide();
     dummy_sub.hide();
@@ -290,6 +297,40 @@ invite_player = function()
     }
 }
 
+show_highscores = function()
+{
+    l_highscores.innerHTML = "";
+    var new_text = "";
+    if (connection != null)
+    {
+        if (connection.top_names != null && connection.top_elos != null)
+        {
+            var n = connection.top_names.length;
+            var i;
+            for (i = 0; i < n; i++)
+            {
+                name = connection.top_names[i];
+                if (name.length > 10)
+                {
+                    name=name.substring(0,10) + "…";
+                }
+                new_text += "\#" + (i+1) + ": " + name + " [" + connection.top_elos[i] + "]<br>";
+            }
+
+            l_highscores.innerHTML = new_text;
+        }
+    }
+
+    logout_container.hide();
+    highscore_container.show();
+}
+
+close_highscores = function()
+{
+    highscore_container.hide();
+    logout_container.show();
+}
+
 
 
 // initiate stuff and connect events:
@@ -305,6 +346,10 @@ b_logout.addEventListener("click", logout);
 b_match_search.addEventListener("click", search_match);
 b_match_invite.addEventListener("click", invite_player);
 
+b_show_highscores.addEventListener("click", show_highscores);
+b_close_highscores.addEventListener("click", close_highscores);
+
+
 reconnect();
 
 // register resize event:

websocket_connection.js

@@ -35,6 +35,9 @@ class WebsocketConnection
         this.friends = [];
         this.elos = [];
 
+        this.top_names = [];
+        this.top_elos = [];
+
         this.friend_name_divs = [];
 
         matches_container.hide();
@@ -376,8 +379,12 @@ class WebsocketConnection
     on_elo_update(data)
     {
         console.log("received elo update: " + data.elo);
-        this.logout_container.update_head("logged in as: " + connection.player.get_name() + "<br>Score: " + data.elo);
+        this.logout_container.update_head("logged in as: " + connection.player.get_name() + "<br>Score: " + data.elo + "<br>Rank: " + data.rank);
+        this.top_names = data.top_names;
+        this.top_elos = data.top_elos;
         this.logout_container.blink(theme_color_highlight);
+
+
         // TODO
     }