diff --git a/infocontainer.js b/infocontainer.js
index eb899d2..68f2a07 100644
--- a/infocontainer.js
+++ b/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%";
- b2.style.width = "20%";
+ b1.style.width = left_width;
+ b2.style.width = right_width;
b2.style.marginLeft = "2%";
b1.style.marginTop = "1%";
diff --git a/main.js b/main.js
index 0efebdd..1d7e9a5 100644
--- a/main.js
+++ b/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_container = main_menu.create_infocontainer("logged in as: ");
-b_logout = logout_container.create_button("logout");
+// logout TODO: rename container:
+logout_container = main_menu.create_infocontainer("Logged in as: ");
+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] + "]
";
+ }
+
+ 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:
diff --git a/websocket_connection.js b/websocket_connection.js
index 80feda5..5f0b89c 100644
--- a/websocket_connection.js
+++ b/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() + "
Score: " + data.elo);
+ this.logout_container.update_head("logged in as: " + connection.player.get_name() + "
Score: " + data.elo + "
Rank: " + data.rank);
+ this.top_names = data.top_names;
+ this.top_elos = data.top_elos;
this.logout_container.blink(theme_color_highlight);
+
+
// TODO
}