diff --git a/main.js b/main.js index 56fc021..09c8b4d 100644 --- a/main.js +++ b/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
(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
[here] for the rules!"); + // global vars: game_manager = null; diff --git a/online_match_manager.js b/online_match_manager.js index a9b5dc0..d80c93d 100644 --- a/online_match_manager.js +++ b/online_match_manager.js @@ -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); @@ -160,7 +187,14 @@ class OnlineMatchManager } else if(game_over) { - this.status_label.innerHTML = "Game was closed by server or opponent"; + 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; } diff --git a/style.css b/style.css index 783a480..1a09803 100644 --- a/style.css +++ b/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 { diff --git a/websocket_connection.js b/websocket_connection.js index f581b18..26f4dc7 100644 --- a/websocket_connection.js +++ b/websocket_connection.js @@ -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));