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));