little improvements
This commit is contained in:
		
							
								
								
									
										5
									
								
								main.js
									
									
									
									
									
								
							
							
						
						
									
										5
									
								
								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; | ||||
|  | ||||
| @ -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); | ||||
|  | ||||
| @ -159,8 +186,15 @@ class OnlineMatchManager | ||||
|             return; | ||||
|         } | ||||
|         else if(game_over) | ||||
|         { | ||||
|             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; | ||||
|         } | ||||
|  | ||||
|  | ||||
							
								
								
									
										56
									
								
								style.css
									
									
									
									
									
								
							
							
						
						
									
										56
									
								
								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 { | ||||
|  | ||||
| @ -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)); | ||||
|  | ||||
		Reference in New Issue
	
	Block a user