rate my elo system
This commit is contained in:
		| @ -1,15 +1,15 @@ | |||||||
| class Infobar | class Infobar | ||||||
| { | { | ||||||
|     constructor(parent) |     constructor(parent, css_class) | ||||||
|     { |     { | ||||||
|         this.parent = parent; |         this.parent = parent; | ||||||
|         this.container = document.createElement("div"); |         this.container = document.createElement("div"); | ||||||
|         this.container.className = "infobar-container"; |         this.container.className = css_class; | ||||||
|         this.parent.appendChild(this.container); |         this.parent.appendChild(this.container); | ||||||
|     } |     } | ||||||
|  |  | ||||||
|     create_infocontainer() |     create_infocontainer(head_text = null) | ||||||
|     { |     { | ||||||
|         return new Infocontainer(this.container); |         return new Infocontainer(this.container, head_text); | ||||||
|     } |     } | ||||||
| } | } | ||||||
| @ -1,18 +1,56 @@ | |||||||
| class Infocontainer | class Infocontainer | ||||||
| { | { | ||||||
|     constructor(parent) |     constructor(parent, heading_text=null) | ||||||
|     { |     { | ||||||
|         this.parent = parent; |         this.parent = parent; | ||||||
|         this.container = document.createElement("div"); |         this.container = document.createElement("div"); | ||||||
|         this.container.className = "info-container"; |         this.container.className = "info-container"; | ||||||
|         this.parent.appendChild(this.container); |         this.parent.appendChild(this.container); | ||||||
|  |         this.head_elem = null; | ||||||
|  |         this.timeout_id = null; | ||||||
|  |  | ||||||
|  |         if (heading_text != null) | ||||||
|  |         { | ||||||
|  |             this.head_elem = document.createElement("label"); | ||||||
|  |             this.head_elem.className = "infobar-head-label"; | ||||||
|  |             this.head_elem.innerHTML = heading_text; | ||||||
|  |             this.container.appendChild(this.head_elem); | ||||||
|  |         } | ||||||
|  |  | ||||||
|  |     } | ||||||
|  |  | ||||||
|  |     update_head(text) | ||||||
|  |     { | ||||||
|  |         if (this.head_elem == null) | ||||||
|  |         { | ||||||
|  |             console.warn("cannot update head text"); | ||||||
|  |             return; | ||||||
|  |         } | ||||||
|  |         this.head_elem.innerHTML = text; | ||||||
|  |     } | ||||||
|  |  | ||||||
|  |     set_background_color(color) | ||||||
|  |     { | ||||||
|  |         this.container.style.backgroundColor = color; | ||||||
|  |     } | ||||||
|  |  | ||||||
|  |     clear_background_color() | ||||||
|  |     { | ||||||
|  |         this.container.style.backgroundColor = null; | ||||||
|  |     } | ||||||
|  |  | ||||||
|  |     blink(color, time = 500) | ||||||
|  |     { | ||||||
|  |         this.set_background_color(color); | ||||||
|  |         this.timeout_id = setTimeout(c => this.clear_background_color(), time); | ||||||
|  |  | ||||||
|     } |     } | ||||||
|  |  | ||||||
|     create_button(text) |     create_button(text) | ||||||
|     { |     { | ||||||
|         var b = document.createElement("button"); |         var b = document.createElement("button"); | ||||||
|         b.className = "infobar-button"; |         b.className = "infobar-button"; | ||||||
|         b.appendChild(document.createTextNode(text)); |         b.innerHTML = text; | ||||||
|         this.container.appendChild(b) |         this.container.appendChild(b) | ||||||
|         return b; |         return b; | ||||||
|     } |     } | ||||||
| @ -52,8 +90,7 @@ class Infocontainer | |||||||
|         b1.style.width = "80%"; |         b1.style.width = "80%"; | ||||||
|         b2.style.width = "20%"; |         b2.style.width = "20%"; | ||||||
|  |  | ||||||
|  |         b1.innerHTML = "<span>" + text + "</span>" | ||||||
|         b1.appendChild(document.createTextNode(text)); |  | ||||||
|         b2.appendChild(document.createTextNode(option)); |         b2.appendChild(document.createTextNode(option)); | ||||||
|  |  | ||||||
|         div.appendChild(b1); |         div.appendChild(b1); | ||||||
|  | |||||||
| @ -8,6 +8,8 @@ class LocalMatchManager | |||||||
|         this.control_container = control_container; |         this.control_container = control_container; | ||||||
|  |  | ||||||
|         this.control_container.show(); |         this.control_container.show(); | ||||||
|  |         this.control_container.clear_background_color(); | ||||||
|  |         this.control_container.update_head("local game"); | ||||||
|  |  | ||||||
|         this.local_player_a = new Player("red player", 255,0,0); |         this.local_player_a = new Player("red player", 255,0,0); | ||||||
|         this.local_player_b = new Player("green player", 0,255,0); |         this.local_player_b = new Player("green player", 0,255,0); | ||||||
| @ -25,15 +27,18 @@ class LocalMatchManager | |||||||
|     click_listener(sub_x, sub_y, x,y) |     click_listener(sub_x, sub_y, x,y) | ||||||
|     { |     { | ||||||
|         // check whether the game is over: |         // check whether the game is over: | ||||||
|         if (grid.is_won()) |         if (this.grid.is_won()) | ||||||
|         { |         { | ||||||
|             this.status_label.innerHTML = "" + grid.get_won_player().get_name() + " has won."; |             this.status_label.innerHTML = "" + this.grid.get_won_player().get_name() + " has won."; | ||||||
|             this.end_game(); |             this.control_container.update_head("" + this.grid.get_won_player().get_name() + " won"); | ||||||
|  |             this.control_container.set_background_color(this.grid.get_won_player().get_color_with_alpha(0.4)); | ||||||
|         } |         } | ||||||
|         else if (grid.is_complete()) |         else if (this.grid.is_complete()) | ||||||
|         { |         { | ||||||
|             this.status_label.innerHTML = "Draw. Everybody looses!"; |             this.status_label.innerHTML = "Draw. Everybody looses!"; | ||||||
|             this.end_game(false); |             this.control_container.update_head("Draw"); | ||||||
|  |             this.control_container.set_background_color(theme_color_highlight); | ||||||
|  |  | ||||||
|         } |         } | ||||||
|         else |         else | ||||||
|         { |         { | ||||||
| @ -56,6 +61,8 @@ class LocalMatchManager | |||||||
|         var next_player = this.is_local_player_a ? this.local_player_a : this.local_player_b; |         var next_player = this.is_local_player_a ? this.local_player_a : this.local_player_b; | ||||||
|          |          | ||||||
|         this.status_label.innerHTML = "" + "it's " + next_player.get_name() + "'s turn..."; |         this.status_label.innerHTML = "" + "it's " + next_player.get_name() + "'s turn..."; | ||||||
|  |         this.control_container.update_head("" + next_player.get_name() + "'s move"); | ||||||
|  |         this.control_container.blink(theme_color_highlight); | ||||||
|         this.grid.player_change_listener(next_player); |         this.grid.player_change_listener(next_player); | ||||||
|     } |     } | ||||||
|  |  | ||||||
|  | |||||||
							
								
								
									
										65
									
								
								main.js
									
									
									
									
									
								
							
							
						
						
									
										65
									
								
								main.js
									
									
									
									
									
								
							| @ -6,9 +6,9 @@ var ground_color = style.getPropertyValue("--ground-color"); | |||||||
| var main_container = document.getElementById("main-container"); | var main_container = document.getElementById("main-container"); | ||||||
|  |  | ||||||
|  |  | ||||||
| var main_menu = new Infobar(main_container); | var main_menu = new Infobar(main_container, "infobar-container"); | ||||||
| var grid = new Grid(n, main_container, tilesize, tilesize, ground_color); | var grid = new Grid(n, main_container, tilesize, tilesize, ground_color); | ||||||
| var sub_menu = new Infobar(main_container); | var sub_menu = new Infobar(main_container, "infobar-container"); | ||||||
|  |  | ||||||
|  |  | ||||||
| // fill containers with buttons and containers: | // fill containers with buttons and containers: | ||||||
| @ -18,41 +18,37 @@ dummy_main = main_menu.create_infocontainer(); | |||||||
| dummy_sub = sub_menu.create_infocontainer(); | dummy_sub = sub_menu.create_infocontainer(); | ||||||
|  |  | ||||||
| // start container: | // start container: | ||||||
| create_game_container = main_menu.create_infocontainer(); | create_game_container = main_menu.create_infocontainer("Start Local Game"); | ||||||
| create_game_container.create_label("Start Local Game"); |  | ||||||
| b_local_game = create_game_container.create_button("Local Game"); | b_local_game = create_game_container.create_button("Local Game"); | ||||||
|  |  | ||||||
|  |  | ||||||
|  |  | ||||||
| // register container: | // register container: | ||||||
| register_container = main_menu.create_infocontainer(); | register_container = main_menu.create_infocontainer("Login to play online"); | ||||||
| register_container.create_label("Login to play online"); |  | ||||||
| i_register_username = register_container.create_input("username"); | i_register_username = register_container.create_input("username"); | ||||||
| i_register_pw = register_container.create_input("password", true); | i_register_pw = register_container.create_input("password", true); | ||||||
| b_register = register_container.create_button("register/login"); | b_register = register_container.create_button("register/login"); | ||||||
| //register_container.create_label("(creates new account for a new username)"); | //register_container.create_label("(creates new account for a new username)"); | ||||||
|  |  | ||||||
| // logout: | // logout: | ||||||
| logout_container = main_menu.create_infocontainer(); | logout_container = main_menu.create_infocontainer("logged in as: "); | ||||||
| l_username = logout_container.create_label("logged in as: "); |  | ||||||
| b_logout = logout_container.create_button("logout"); | b_logout = logout_container.create_button("logout"); | ||||||
|  |  | ||||||
|  |  | ||||||
| // fill subcontainer: | // fill subcontainer: | ||||||
| match_slot_container = sub_menu.create_infocontainer(); | match_slot_container = sub_menu.create_infocontainer("Running Matches<br>(click to open)"); | ||||||
| match_slot_container.create_label("Running Matches<br>(click to open)"); |  | ||||||
|  |  | ||||||
|  |  | ||||||
| // local match control: | // match control: | ||||||
| match_control = sub_menu.create_infocontainer(); | match_control = sub_menu.create_infocontainer(" -- vs. --"); | ||||||
| b_end_game = match_control.create_button("Close Match"); | b_end_game = match_control.create_button("Close Match"); | ||||||
|  |  | ||||||
|  |  | ||||||
| // search match: |  | ||||||
| search_match_container = sub_menu.create_infocontainer(); |  | ||||||
| search_match_container.create_label("Create Online Match"); |  | ||||||
| b_match_search = search_match_container.create_button("random match"); |  | ||||||
|  |  | ||||||
|  | // search match: | ||||||
|  | search_match_container = sub_menu.create_infocontainer("Create Online Match"); | ||||||
|  | b_match_search = search_match_container.create_button("random match"); | ||||||
|  | search_match_container.create_label("invite player by name:"); | ||||||
| l_match_op = search_match_container.create_input("player name"); | l_match_op = search_match_container.create_input("player name"); | ||||||
| b_match_invite = search_match_container.create_button("invite player"); | b_match_invite = search_match_container.create_button("invite player"); | ||||||
|  |  | ||||||
| @ -61,9 +57,9 @@ search_match_container.create_label("Invite friends:") | |||||||
|  |  | ||||||
|  |  | ||||||
| //status: | //status: | ||||||
| status_container = main_menu.create_infocontainer(); | status_container = main_menu.create_infocontainer("Status"); | ||||||
| l_status_head = status_container.create_label("Status:"); | l_status = status_container.create_label(""); | ||||||
| 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: | // global vars: | ||||||
| @ -109,7 +105,27 @@ function check_cookie(cname) { | |||||||
|     return false; |     return false; | ||||||
| } | } | ||||||
|  |  | ||||||
|  | status_message = function(text, blink = true) | ||||||
|  | { | ||||||
|  |     l_status.innerHTML = text; | ||||||
|  |     if (blink) | ||||||
|  |     { | ||||||
|  |         status_container.blink("rgba(126,87,194, 0.5)"); | ||||||
|  |     } | ||||||
|  | } | ||||||
|  |  | ||||||
|  | status_error = function(text, blink=true) | ||||||
|  | { | ||||||
|  |     l_status.innerHTML = text; | ||||||
|  |     if (blink) | ||||||
|  |     { | ||||||
|  |         status_container.blink("rgba(128,0,0,0.5"); | ||||||
|  |     } | ||||||
|  | } | ||||||
|  |  | ||||||
|  |  | ||||||
|  |  | ||||||
|  | status_message("select gamemode. click <br> <a href=https://en.wikipedia.org/wiki/Ultimate_tic-tac-toe#Rules>[here]</a> for the rules!"); | ||||||
|  |  | ||||||
|  |  | ||||||
| // global funcs: | // global funcs: | ||||||
| @ -172,6 +188,8 @@ start_local_game = function() | |||||||
|  |  | ||||||
|     status_container.show(); |     status_container.show(); | ||||||
|  |  | ||||||
|  |     b_end_game.innerHTML="Close Match"; | ||||||
|  |  | ||||||
|     game_manager = new LocalMatchManager(grid, l_status, match_control, end_local_game); |     game_manager = new LocalMatchManager(grid, l_status, match_control, end_local_game); | ||||||
|  |  | ||||||
| } | } | ||||||
| @ -188,7 +206,8 @@ login_callback = function() | |||||||
|          |          | ||||||
|     } |     } | ||||||
|     end_local_game(); |     end_local_game(); | ||||||
|     l_username.innerHTML = "logged in as: " + connection.player.get_name(); |     logout_container.update_head("logged in as: " + connection.player.get_name()); | ||||||
|  |     //logout_container.blink("rgba(128,128,128,0.5)"); | ||||||
|  |  | ||||||
|     set_cookie("sessionid", connection.session_id, 30); |     set_cookie("sessionid", connection.session_id, 30); | ||||||
|  |  | ||||||
| @ -227,7 +246,7 @@ reconnect = function() | |||||||
|         { |         { | ||||||
|             connection.close(); |             connection.close(); | ||||||
|         } |         } | ||||||
|         connection = new WebsocketConnection(server_url, server_port, grid, l_status, match_slot_container, match_control, search_match_container, login_callback, on_connection_error); |         connection = new WebsocketConnection(server_url, server_port, grid, status_message, status_error, match_slot_container, match_control, b_end_game, logout_container, search_match_container, login_callback, on_connection_error); | ||||||
|         connection.reconnect(session_id); |         connection.reconnect(session_id); | ||||||
|     } |     } | ||||||
| } | } | ||||||
| @ -244,7 +263,7 @@ login = function(){ | |||||||
|     { |     { | ||||||
|         connection.close(); |         connection.close(); | ||||||
|     } |     } | ||||||
|     connection = new WebsocketConnection(server_url, server_port, grid, l_status, match_slot_container, match_control, search_match_container, login_callback, on_connection_error); |     connection = new WebsocketConnection(server_url, server_port, grid, status_message, status_error, match_slot_container, match_control, b_end_game, logout_container, search_match_container, login_callback, on_connection_error); | ||||||
|     connection.connect(i_register_username.value.toLowerCase(), i_register_pw.value); |     connection.connect(i_register_username.value.toLowerCase(), i_register_pw.value); | ||||||
| } | } | ||||||
|  |  | ||||||
| @ -262,7 +281,7 @@ invite_player = function() | |||||||
|     { |     { | ||||||
|         if (l_match_op.value == "") |         if (l_match_op.value == "") | ||||||
|         { |         { | ||||||
|             l_status.innerHTML = "choose your opponent first!"; |             status_error("choose your opponent first!"); | ||||||
|         } |         } | ||||||
|         else |         else | ||||||
|         { |         { | ||||||
|  | |||||||
| @ -1,12 +1,13 @@ | |||||||
| class OnlineMatchManager | class OnlineMatchManager | ||||||
| { | { | ||||||
|     constructor(grid, status_label, matches_container, control_container, 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, player_name) | ||||||
|     { |     { | ||||||
|         this.grid = grid; |         this.grid = grid; | ||||||
|         this.status_label = status_label; |  | ||||||
|  |  | ||||||
|         this.match_id = match_id; |         this.match_id = match_id; | ||||||
|  |  | ||||||
|  |         this.info_func = info_func; | ||||||
|  |  | ||||||
|         this.game_server_connection = game_server_connection; |         this.game_server_connection = game_server_connection; | ||||||
|  |  | ||||||
|  |  | ||||||
| @ -21,6 +22,7 @@ class OnlineMatchManager | |||||||
|  |  | ||||||
|         // create match button in match list: |         // create match button in match list: | ||||||
|         this.control_container = control_container; |         this.control_container = control_container; | ||||||
|  |         this.end_button = end_button; | ||||||
|         this.matches_container = matches_container; |         this.matches_container = matches_container; | ||||||
|  |  | ||||||
|         var tmp = matches_container.create_double_button("" + this.online_opponent.get_name(), "+") |         var tmp = matches_container.create_double_button("" + this.online_opponent.get_name(), "+") | ||||||
| @ -62,7 +64,7 @@ class OnlineMatchManager | |||||||
|  |  | ||||||
|         this.game_server_connection.send_move(sub_x, sub_y, x, y, this.match_id); |         this.game_server_connection.send_move(sub_x, sub_y, x, y, this.match_id); | ||||||
|  |  | ||||||
|         this.status_label.innerHTML = "waiting for " + this.online_opponent.get_name() + "'s move"; |         this.info_func("waiting for " + this.online_opponent.get_name() + "'s move", false); | ||||||
|     } |     } | ||||||
|  |  | ||||||
|     on_user_close() |     on_user_close() | ||||||
| @ -80,7 +82,7 @@ class OnlineMatchManager | |||||||
|             this.matches_container.container.removeChild(this.match_button_div); |             this.matches_container.container.removeChild(this.match_button_div); | ||||||
|             this.match_button_div = null; |             this.match_button_div = null; | ||||||
|         } |         } | ||||||
|         this.status_label.innerHTML = "match is closed"; |         this.info_func("match is closed"); | ||||||
|         this.control_container.hide(); |         this.control_container.hide(); | ||||||
|         this.is_closed = true; |         this.is_closed = true; | ||||||
|          |          | ||||||
| @ -125,6 +127,55 @@ class OnlineMatchManager | |||||||
|         { |         { | ||||||
|             this.match_button.className = "infobar-button-green" |             this.match_button.className = "infobar-button-green" | ||||||
|         } |         } | ||||||
|  |  | ||||||
|  |         this.control_container.clear_background_color(); | ||||||
|  |         this.control_container.update_head(""); | ||||||
|  |     } | ||||||
|  |  | ||||||
|  |     update_button_text() | ||||||
|  |     { | ||||||
|  |  | ||||||
|  |         if (this.match_state.game_over) | ||||||
|  |         { | ||||||
|  |             this.end_button.innerHTML = "Close Match"; | ||||||
|  |             return; | ||||||
|  |         } | ||||||
|  |  | ||||||
|  |         var contains_move_of_a = false; | ||||||
|  |         var contains_move_of_b = false; | ||||||
|  |         var i; | ||||||
|  |         for (i = 0; i < this.match_state.complete_field.length; i++) | ||||||
|  |         { | ||||||
|  |             if (this.match_state.complete_field[i].includes(1)) | ||||||
|  |             { | ||||||
|  |                 contains_move_of_a = true; | ||||||
|  |             } | ||||||
|  |             if (this.match_state.complete_field[i].includes(2)) | ||||||
|  |             { | ||||||
|  |                 contains_move_of_b = true; | ||||||
|  |             } | ||||||
|  |         } | ||||||
|  |  | ||||||
|  |         if (contains_move_of_a && contains_move_of_b) | ||||||
|  |         { | ||||||
|  |             this.end_button.innerHTML = "Abandon Match"; | ||||||
|  |             return; | ||||||
|  |         } | ||||||
|  |  | ||||||
|  |         if (this.match_state.player_a == this.player_name && !contains_move_of_a) | ||||||
|  |         { | ||||||
|  |             this.end_button.innerHTML = "Reject Invite"; | ||||||
|  |             return; | ||||||
|  |         } | ||||||
|  |  | ||||||
|  |         if (this.match_state.player_b == this.player_name && !contains_move_of_b) | ||||||
|  |         { | ||||||
|  |             this.end_button.innerHTML = "Reject Invite"; | ||||||
|  |             return; | ||||||
|  |         } | ||||||
|  |  | ||||||
|  |         this.end_button.innerHTML = "Close Match"; | ||||||
|  |  | ||||||
|     } |     } | ||||||
|  |  | ||||||
|     open_match() |     open_match() | ||||||
| @ -194,6 +245,11 @@ class OnlineMatchManager | |||||||
|             } |             } | ||||||
|         } |         } | ||||||
|  |  | ||||||
|  |         var control_head = ""; | ||||||
|  |         this.control_container.clear_background_color(); | ||||||
|  |  | ||||||
|  |         this.update_button_text(); | ||||||
|  |  | ||||||
|         this.grid.block_all(); |         this.grid.block_all(); | ||||||
|         this.grid.register_click_callback((i,j,k,l) => this.click_listener(i,j,k,l)); |         this.grid.register_click_callback((i,j,k,l) => this.click_listener(i,j,k,l)); | ||||||
|  |  | ||||||
| @ -201,24 +257,35 @@ class OnlineMatchManager | |||||||
|         { |         { | ||||||
|             if (player_won == this.player_name) |             if (player_won == this.player_name) | ||||||
|             { |             { | ||||||
|                 this.status_label.innerHTML = "Congratulation, you won!"; |                 this.info_func("Congratulation, you won!"); | ||||||
|  |                 control_head += "You won!" | ||||||
|  |                 this.control_container.set_background_color(this.local_player.get_color_with_alpha(0.4)); | ||||||
|  |  | ||||||
|             } |             } | ||||||
|             else |             else | ||||||
|             { |             { | ||||||
|                 this.status_label.innerHTML = "Game over, you lost!"; |                 status_mesage("Game over, you lost!"); | ||||||
|  |                 control_head += "You lost"; | ||||||
|  |                 this.control_container.set_background_color(this.online_opponent.get_color_with_alpha(0.4)); | ||||||
|             } |             } | ||||||
|  |             this.control_container.update_head(control_head); | ||||||
|             return; |             return; | ||||||
|         } |         } | ||||||
|         else if(game_over) |         else if(game_over) | ||||||
|         { |         { | ||||||
|             if (this.grid.is_complete()) |             if (this.grid.is_complete()) | ||||||
|             { |             { | ||||||
|                 this.status_label.innerHTML = "Draw. Everyone looses!"; |                 this.info_func("Draw. Everyone looses!"); | ||||||
|  |                 control_head += "Draw"; | ||||||
|  |                 this.control_container.set_background_color(theme_color_highlight); | ||||||
|             } |             } | ||||||
|             else |             else | ||||||
|             { |             { | ||||||
|                 this.status_label.innerHTML = "Game was closed by server or opponent"; |                 this.info_func("Game was closed by server or opponent"); | ||||||
|  |                 control_head += "Game Closed" | ||||||
|  |                 this.control_container.set_background_color(theme_color_highlight); | ||||||
|             } |             } | ||||||
|  |             this.control_container.update_head(control_head); | ||||||
|             return; |             return; | ||||||
|         } |         } | ||||||
|  |  | ||||||
| @ -239,18 +306,26 @@ class OnlineMatchManager | |||||||
|                 { |                 { | ||||||
|                     this.grid.unblock(x,y); |                     this.grid.unblock(x,y); | ||||||
|                 } |                 } | ||||||
|                 this.status_label.innerHTML = "It's your turn!"; |                 this.info_func("It's your turn!", false); | ||||||
|  |                 this.control_container.blink(theme_color_highlight); | ||||||
|             } |             } | ||||||
|             else |             else | ||||||
|             { |             { | ||||||
|  |                 this.info_func("It's your turn!", false); | ||||||
|  |                 this.control_container.blink(theme_color_highlight); | ||||||
|                 this.grid.unblock_all(); |                 this.grid.unblock_all(); | ||||||
|             } |             } | ||||||
|         } |         } | ||||||
|         else |         else | ||||||
|         { |         { | ||||||
|             this.status_label.innerHTML = "waiting for " + this.online_opponent.get_name() + "'s move"; |             this.info_func("waiting for " + this.online_opponent.get_name() + "'s move", false); | ||||||
|  |             this.control_container.blink(theme_color_highlight); | ||||||
|         } |         } | ||||||
|  |  | ||||||
|  |         control_head += "" + current_player_name + "'s move"; | ||||||
|  |  | ||||||
|  |         this.control_container.update_head(control_head); | ||||||
|  |  | ||||||
|          |          | ||||||
|  |  | ||||||
|     } |     } | ||||||
|  | |||||||
| @ -37,6 +37,11 @@ class Player | |||||||
|         return "rgb(" + this.r + "," + this.g + "," + this.b + ")"; |         return "rgb(" + this.r + "," + this.g + "," + this.b + ")"; | ||||||
|     } |     } | ||||||
|  |  | ||||||
|  |     get_color_with_alpha(alpha) | ||||||
|  |     { | ||||||
|  |         return "rgba(" + this.r + "," + this.g + "," + this.b + "," + alpha + ")"; | ||||||
|  |     } | ||||||
|  |  | ||||||
|     get_color_values() |     get_color_values() | ||||||
|     { |     { | ||||||
|         var col = { |         var col = { | ||||||
|  | |||||||
| @ -4,3 +4,6 @@ var server_port = "5556"; | |||||||
|  |  | ||||||
| var home = "https://the-cake-is-a-lie.net/website/ultimate_tictactoe/"; | var home = "https://the-cake-is-a-lie.net/website/ultimate_tictactoe/"; | ||||||
| var rel_home = "/website/ultimate_tictactoe"; | var rel_home = "/website/ultimate_tictactoe"; | ||||||
|  |  | ||||||
|  | var theme_color = "rgb(126,87,194)"; | ||||||
|  | var theme_color_highlight = "rgba(126,87,194, 0.5)"; | ||||||
							
								
								
									
										59
									
								
								style.css
									
									
									
									
									
								
							
							
						
						
									
										59
									
								
								style.css
									
									
									
									
									
								
							| @ -2,6 +2,10 @@ html, body { | |||||||
|     overflow-x: hidden; |     overflow-x: hidden; | ||||||
| } | } | ||||||
|  |  | ||||||
|  | input, body, button, textarea{ | ||||||
|  |     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; | ||||||
|  | } | ||||||
|  |  | ||||||
| body {  | body {  | ||||||
|     margin: 0; |     margin: 0; | ||||||
|     background: rgb(49, 54, 74) ; |     background: rgb(49, 54, 74) ; | ||||||
| @ -9,6 +13,10 @@ body { | |||||||
|     position: relative; |     position: relative; | ||||||
| } | } | ||||||
|  |  | ||||||
|  | small { | ||||||
|  |     font-size: x-small; | ||||||
|  | } | ||||||
|  |  | ||||||
| :root{ | :root{ | ||||||
|     --tictactoe_n: 3; |     --tictactoe_n: 3; | ||||||
|     --button-margin: 0.5vh; |     --button-margin: 0.5vh; | ||||||
| @ -156,14 +164,15 @@ a:visited { | |||||||
| } | } | ||||||
|  |  | ||||||
| .info-container { | .info-container { | ||||||
|     border-radius: var(--border-radius); |     border-radius: var(--button-margin); | ||||||
|     padding: var(--border-radius); |     padding: var(--button-margin); | ||||||
|     bottom: 0; |     bottom: 0; | ||||||
|     display: inline-block; |     display: inline-block; | ||||||
|     vertical-align: middle; |     vertical-align: middle; | ||||||
|     text-align: center; |     text-align: center; | ||||||
|     background: none; |     background: rgba(0,0,0,0); | ||||||
|     white-space: normal; |     white-space: normal; | ||||||
|  |     transition-duration: 0.3s; | ||||||
|     overflow-y: auto; |     overflow-y: auto; | ||||||
| } | } | ||||||
|  |  | ||||||
| @ -186,6 +195,18 @@ a:visited { | |||||||
|  |  | ||||||
| } | } | ||||||
|  |  | ||||||
|  | .infobar-head-label { | ||||||
|  |     color: rgba(224, 217, 235, 0.8); | ||||||
|  |     font-size: calc(2.5 * var(--border-radius)); | ||||||
|  |     margin-left: 0; | ||||||
|  |     margin-right: 0; | ||||||
|  |     width: 100%; | ||||||
|  |     display: flex; | ||||||
|  |     flex-direction: column; | ||||||
|  |     text-align: center; | ||||||
|  |  | ||||||
|  | } | ||||||
|  |  | ||||||
| .option-button-container | .option-button-container | ||||||
| { | { | ||||||
|     border-radius: 0%; |     border-radius: 0%; | ||||||
| @ -200,8 +221,9 @@ a:visited { | |||||||
|  |  | ||||||
|  |  | ||||||
| .infobar-button { | .infobar-button { | ||||||
|     border-radius: var(--border-radius); |     border-radius: var(--button-margin); | ||||||
|     margin: var(--border-radius); |     margin: var(--button-margin); | ||||||
|  |     padding-top: 1%; | ||||||
|     border: none; |     border: none; | ||||||
|     outline: 0; |     outline: 0; | ||||||
|     transition-duration: 0.3s; |     transition-duration: 0.3s; | ||||||
| @ -217,18 +239,21 @@ a:visited { | |||||||
|     vertical-align: middle; |     vertical-align: middle; | ||||||
|     flex-direction: column; |     flex-direction: column; | ||||||
|     text-align: center; |     text-align: center; | ||||||
|  |     overflow-x: auto; | ||||||
| } | } | ||||||
|  |  | ||||||
| @media (max-aspect-ratio: 1/1) { | @media (max-aspect-ratio: 1/1) { | ||||||
|  |  | ||||||
|     .infobar-button{ |     .infobar-button{ | ||||||
|  |         padding-top: 2%; | ||||||
|         height: calc(0.18 * var(--sidebar-height)); |         height: calc(0.18 * var(--sidebar-height)); | ||||||
|     } |     } | ||||||
| } | } | ||||||
|  |  | ||||||
| .infobar-button-green { | .infobar-button-green { | ||||||
|     border-radius: var(--border-radius); |     border-radius: var(--button-margin); | ||||||
|     margin: var(--border-radius); |     margin: var(--button-margin); | ||||||
|  |     padding-top: 1%; | ||||||
|     border: none; |     border: none; | ||||||
|     outline: 0; |     outline: 0; | ||||||
|     transition-duration: 0.3s; |     transition-duration: 0.3s; | ||||||
| @ -242,18 +267,21 @@ a:visited { | |||||||
|     display: flex; |     display: flex; | ||||||
|     vertical-align: middle; |     vertical-align: middle; | ||||||
|     flex-direction: column; |     flex-direction: column; | ||||||
|  |     overflow-x: auto; | ||||||
| } | } | ||||||
|  |  | ||||||
| @media (max-aspect-ratio: 1/1) { | @media (max-aspect-ratio: 1/1) { | ||||||
|  |  | ||||||
|     .infobar-button-green{ |     .infobar-button-green{ | ||||||
|  |         padding-top: 2%; | ||||||
|         height: calc(0.18 * var(--sidebar-height)); |         height: calc(0.18 * var(--sidebar-height)); | ||||||
|     } |     } | ||||||
| } | } | ||||||
|  |  | ||||||
| .infobar-button-red { | .infobar-button-red { | ||||||
|     border-radius: var(--border-radius); |     border-radius: var(--button-margin); | ||||||
|     margin: var(--border-radius); |     margin: var(--button-margin); | ||||||
|  |     padding-top: 1%; | ||||||
|     border: none; |     border: none; | ||||||
|     outline: 0; |     outline: 0; | ||||||
|     transition-duration: 0.3s; |     transition-duration: 0.3s; | ||||||
| @ -267,18 +295,21 @@ a:visited { | |||||||
|     display: flex; |     display: flex; | ||||||
|     vertical-align: middle; |     vertical-align: middle; | ||||||
|     flex-direction: column; |     flex-direction: column; | ||||||
|  |     overflow-x: auto; | ||||||
| } | } | ||||||
|  |  | ||||||
| @media (max-aspect-ratio: 1/1) { | @media (max-aspect-ratio: 1/1) { | ||||||
|  |  | ||||||
|     .infobar-button-red{ |     .infobar-button-red{ | ||||||
|  |         padding-top: 2%; | ||||||
|         height: calc(0.18 * var(--sidebar-height)); |         height: calc(0.18 * var(--sidebar-height)); | ||||||
|     } |     } | ||||||
| } | } | ||||||
|  |  | ||||||
| .infobar-button-active { | .infobar-button-active { | ||||||
|     border-radius: var(--border-radius); |     border-radius: var(--button-margin); | ||||||
|     margin: var(--border-radius); |     margin: var(--button-margin); | ||||||
|  |     padding-top: 1%; | ||||||
|     border: none; |     border: none; | ||||||
|     outline: 0; |     outline: 0; | ||||||
|     transition-duration: 0.3s; |     transition-duration: 0.3s; | ||||||
| @ -292,11 +323,13 @@ a:visited { | |||||||
|     display: flex; |     display: flex; | ||||||
|     vertical-align: middle; |     vertical-align: middle; | ||||||
|     flex-direction: column; |     flex-direction: column; | ||||||
|  |     overflow-x: auto; | ||||||
| } | } | ||||||
|  |  | ||||||
| @media (max-aspect-ratio: 1/1) { | @media (max-aspect-ratio: 1/1) { | ||||||
|  |  | ||||||
|     .infobar-button-active{ |     .infobar-button-active{ | ||||||
|  |         padding-top: 2%; | ||||||
|         height: calc(0.18 * var(--sidebar-height)); |         height: calc(0.18 * var(--sidebar-height)); | ||||||
|     } |     } | ||||||
| } | } | ||||||
| @ -316,8 +349,8 @@ a:visited { | |||||||
| } | } | ||||||
|  |  | ||||||
| .infobar-input { | .infobar-input { | ||||||
|     border-radius: var(--border-radius); |     border-radius: var(--button-margin); | ||||||
|     margin: var(--border-radius); |     margin: var(--button-margin); | ||||||
|     border: none; |     border: none; | ||||||
|     outline: 0; |     outline: 0; | ||||||
|     transition-duration: 0.3s; |     transition-duration: 0.3s; | ||||||
|  | |||||||
| @ -1,6 +1,6 @@ | |||||||
| class WebsocketConnection | class WebsocketConnection | ||||||
| { | { | ||||||
|     constructor(ip, port, grid, status_label, matches_container, control_container, search_container, login_callback_func, error_callback_func) |     constructor(ip, port, grid, info_func, err_func,matches_container, control_container, end_button, logout_container, search_container, login_callback_func, error_callback_func) | ||||||
|     { |     { | ||||||
|         this.ip = ip; |         this.ip = ip; | ||||||
|         this.port = port; |         this.port = port; | ||||||
| @ -9,18 +9,21 @@ class WebsocketConnection | |||||||
|         this.socket = null; |         this.socket = null; | ||||||
|         this.registered = false; |         this.registered = false; | ||||||
|  |  | ||||||
|  |         this.info_func = info_func; | ||||||
|  |         this.err_func = err_func; | ||||||
|  |  | ||||||
|         this.grid = grid; |         this.grid = grid; | ||||||
|         this.status_label = status_label; |  | ||||||
|         this.matches_container = matches_container; |         this.matches_container = matches_container; | ||||||
|         this.control_container = control_container; |         this.control_container = control_container; | ||||||
|  |         this.logout_container = logout_container; | ||||||
|         this.search_container  = search_container; |         this.search_container  = search_container; | ||||||
|  |  | ||||||
|  |         this.end_button = end_button; | ||||||
|  |  | ||||||
|         this.active_match = null; |         this.active_match = null; | ||||||
|  |  | ||||||
|         this.connected = false; |         this.connected = false; | ||||||
|  |  | ||||||
|         this.current_end_button = null; |  | ||||||
|  |  | ||||||
|         this.login_callback_func = login_callback_func; |         this.login_callback_func = login_callback_func; | ||||||
|  |  | ||||||
|         this.openmatches = {}; |         this.openmatches = {}; | ||||||
| @ -30,6 +33,7 @@ class WebsocketConnection | |||||||
|  |  | ||||||
|  |  | ||||||
|         this.friends = []; |         this.friends = []; | ||||||
|  |         this.elos = []; | ||||||
|  |  | ||||||
|         this.friend_name_divs = []; |         this.friend_name_divs = []; | ||||||
|  |  | ||||||
| @ -103,7 +107,7 @@ class WebsocketConnection | |||||||
|         this.connected = false; |         this.connected = false; | ||||||
|         if (!this.closed_by_user && !login_failed) |         if (!this.closed_by_user && !login_failed) | ||||||
|         { |         { | ||||||
|             this.status_label.innerHTML = "connection to server closed"; |             this.err_func("connection to server closed"); | ||||||
|             this.error_callback_func(); |             this.error_callback_func(); | ||||||
|         } |         } | ||||||
|          |          | ||||||
| @ -136,7 +140,7 @@ class WebsocketConnection | |||||||
|         this.connected = false; |         this.connected = false; | ||||||
|         if (!this.closed_by_user) |         if (!this.closed_by_user) | ||||||
|         { |         { | ||||||
|             this.status_label.innerHTML = "connection to server lost"; |             this.err_func("connection to server lost"); | ||||||
|             this.error_callback_func(); |             this.error_callback_func(); | ||||||
|         } |         } | ||||||
|     } |     } | ||||||
| @ -184,6 +188,11 @@ class WebsocketConnection | |||||||
|             case "friends_update": |             case "friends_update": | ||||||
|                 this.on_friends_update(msg.data); |                 this.on_friends_update(msg.data); | ||||||
|                 break; |                 break; | ||||||
|  |              | ||||||
|  |             case "elo_update": | ||||||
|  |                 this.on_elo_update(msg.data); | ||||||
|  |                 break; | ||||||
|  |              | ||||||
|         } |         } | ||||||
|  |  | ||||||
|     } |     } | ||||||
| @ -209,12 +218,6 @@ class WebsocketConnection | |||||||
|  |  | ||||||
|  |  | ||||||
|         } |         } | ||||||
|  |  | ||||||
|         if (this.current_end_button != null) |  | ||||||
|         { |  | ||||||
|             this.control_container.container.deleteChild(this.current_end_button); |  | ||||||
|             this.current_end_button = null; |  | ||||||
|         } |  | ||||||
|     } |     } | ||||||
|  |  | ||||||
|  |  | ||||||
| @ -229,15 +232,6 @@ class WebsocketConnection | |||||||
|             if (id in this.openmatches) |             if (id in this.openmatches) | ||||||
|             { |             { | ||||||
|                 delete this.openmatches[id]; |                 delete this.openmatches[id]; | ||||||
|                 if (this.active_match == id) |  | ||||||
|                 { |  | ||||||
|                     if (this.current_end_button != null) |  | ||||||
|                     { |  | ||||||
|                         this.control_container.container.deleteChild(this.current_end_button); |  | ||||||
|                         this.current_end_button = null; |  | ||||||
|                     } |  | ||||||
|  |  | ||||||
|                 } |  | ||||||
|             } |             } | ||||||
|         } |         } | ||||||
|         else |         else | ||||||
| @ -249,16 +243,21 @@ class WebsocketConnection | |||||||
|                 { |                 { | ||||||
|                     this.openmatches[id].open_match(); |                     this.openmatches[id].open_match(); | ||||||
|                 } |                 } | ||||||
|  |                 else | ||||||
|  |                 { | ||||||
|  |                     this.matches_container.blink(theme_color_highlight); | ||||||
|  |                 } | ||||||
|             } |             } | ||||||
|             else |             else | ||||||
|             { |             { | ||||||
|                 if (!match_state.game_over) |                 if (!match_state.game_over) | ||||||
|                 { |                 { | ||||||
|                     this.openmatches[id] = new OnlineMatchManager(this.grid, this.status_label, this.matches_container, this.control_container, this, id, match_state, this.player.get_name()); |                     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()); | ||||||
|                     if (match_state.last_move == null) |                     if (match_state.last_move == null) | ||||||
|                     { |                     { | ||||||
|                         this.notify("new Game against " + this.openmatches[id].online_opponent.get_name()); |                         this.notify("new Game against " + this.openmatches[id].online_opponent.get_name()); | ||||||
|                     } |                     } | ||||||
|  |                     this.matches_container.blink(theme_color_highlight); | ||||||
|                 } |                 } | ||||||
|                  |                  | ||||||
|             } |             } | ||||||
| @ -273,8 +272,10 @@ class WebsocketConnection | |||||||
|             this.registered = true; |             this.registered = true; | ||||||
|             this.session_id = data.id; |             this.session_id = data.id; | ||||||
|             this.login_callback_func(); |             this.login_callback_func(); | ||||||
|  |             this.info_func(data.msg); | ||||||
|  |             return; | ||||||
|         } |         } | ||||||
|         this.status_label.innerHTML = data.msg; |         this.err_func(data.msg); | ||||||
|          |          | ||||||
|     } |     } | ||||||
|  |  | ||||||
| @ -286,36 +287,48 @@ class WebsocketConnection | |||||||
|             this.session_id = data.id; |             this.session_id = data.id; | ||||||
|             this.player.set_name(data.user); |             this.player.set_name(data.user); | ||||||
|             this.login_callback_func(); |             this.login_callback_func(); | ||||||
|  |             this.info_func(data.msg); | ||||||
|  |             return; | ||||||
|         } |         } | ||||||
|  |         this.err_func(data.msg); | ||||||
|         this.status_label.innerHTML = data.msg; |  | ||||||
|     } |     } | ||||||
|  |  | ||||||
|     on_match_request_response(data) |     on_match_request_response(data) | ||||||
|     { |     { | ||||||
|         if (data.success) |         if (data.success) | ||||||
|         { |         { | ||||||
|             this.status_label.innerHTML = "match request sent"; |             this.info_func("match request sent"); | ||||||
|         } |         } | ||||||
|         else |         else | ||||||
|         { |         { | ||||||
|             this.status_label.innerHTML = "could not send request: " + data.msg; |             this.err_func("could not send request: " + data.msg); | ||||||
|         } |         } | ||||||
|     } |     } | ||||||
|  |  | ||||||
|     on_friend_request_response(data) |     on_friend_request_response(data) | ||||||
|     { |     { | ||||||
|         this.status_label.innerHTML = data.msg; |         if (data.success) | ||||||
|  |         { | ||||||
|  |             this.info_func(data.msg); | ||||||
|  |             return; | ||||||
|  |         } | ||||||
|  |         this.err_func(data.msg); | ||||||
|     } |     } | ||||||
|  |  | ||||||
|     on_unfriend_request_response(data) |     on_unfriend_request_response(data) | ||||||
|     { |     { | ||||||
|         this.status_label.innerHTML = data.msg; |         if (data.success) | ||||||
|  |         { | ||||||
|  |             this.info_func(data.msg); | ||||||
|  |             return; | ||||||
|  |         } | ||||||
|  |         this.err_func(data.msg); | ||||||
|     } |     } | ||||||
|  |  | ||||||
|     on_friends_update(data) |     on_friends_update(data) | ||||||
|     { |     { | ||||||
|         this.friends = data.friends; |         this.friends = data.friends; | ||||||
|  |         this.elos = data.elos; | ||||||
|  |  | ||||||
|         // remove complete friend list: |         // remove complete friend list: | ||||||
|         var n = this.friend_name_divs.length; |         var n = this.friend_name_divs.length; | ||||||
| @ -334,7 +347,13 @@ class WebsocketConnection | |||||||
|          |          | ||||||
|         for (i = 0; i < n; i++) |         for (i = 0; i < n; i++) | ||||||
|         { |         { | ||||||
|             var tmp = this.search_container.create_double_button("" + this.friends[i], "-"); |             var display_name = this.friends[i]; | ||||||
|  |             if (display_name.length > 10) | ||||||
|  |             { | ||||||
|  |                 display_name = display_name.substr(0,8) + "…"; | ||||||
|  |             }  | ||||||
|  |  | ||||||
|  |             var tmp = this.search_container.create_double_button("" + display_name + "<small>" + this.elos[i] + "</small>", "-"); | ||||||
|  |  | ||||||
|             tmp[1].name = this.friends[i]; |             tmp[1].name = this.friends[i]; | ||||||
|             tmp[2].name = this.friends[i]; |             tmp[2].name = this.friends[i]; | ||||||
| @ -354,6 +373,14 @@ 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.blink(theme_color_highlight); | ||||||
|  |         // TODO | ||||||
|  |     } | ||||||
|  |  | ||||||
|  |  | ||||||
|  |  | ||||||
|     connect(username, pw) |     connect(username, pw) | ||||||
| @ -491,7 +518,7 @@ class WebsocketConnection | |||||||
|  |  | ||||||
|     close() |     close() | ||||||
|     { |     { | ||||||
|         this.status_label.innerHTML = "logged out"; |         this.info_func("logged out"); | ||||||
|         this.closed_by_user = true; |         this.closed_by_user = true; | ||||||
|         this.socket.close(); |         this.socket.close(); | ||||||
|     } |     } | ||||||
|  | |||||||
		Reference in New Issue
	
	Block a user