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 }