little improvements

This commit is contained in:
Jonas Weinz 2019-03-22 22:05:30 +01:00
parent a9429685ec
commit 6650b9fc89
4 changed files with 106 additions and 10 deletions

View File

@ -37,11 +37,11 @@ b_logout = logout_container.create_button("logout");
// match control // match control
match_control = sub_menu.create_infocontainer(); 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: // fill subcontainer:
match_slot_container = sub_menu.create_infocontainer(); 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:
search_match_container = main_menu.create_infocontainer(); 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_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!"); 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:
game_manager = null; game_manager = null;

View File

@ -26,7 +26,14 @@ class OnlineMatchManager
this.match_button.addEventListener("click", () => this.open_match()); this.match_button.addEventListener("click", () => this.open_match());
this.match_button.style.background = "rbg(0,255,0)"; 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; this.is_closed = false;
@ -68,7 +75,15 @@ class OnlineMatchManager
update_match_state(match_state) update_match_state(match_state)
{ {
this.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()) 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() open_match()
{ {
this.grid.register_click_callback(null); this.grid.register_click_callback(null);
@ -83,7 +110,7 @@ class OnlineMatchManager
this.grid.deactivate_all(); this.grid.deactivate_all();
this.grid.unblock_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); this.game_server_connection.set_active_match(this.match_id);
@ -159,8 +186,15 @@ class OnlineMatchManager
return; return;
} }
else if(game_over) 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"; this.status_label.innerHTML = "Game was closed by server or opponent";
}
return; return;
} }

View File

@ -170,7 +170,6 @@ a:visited {
flex-direction: column; flex-direction: column;
font-size: calc(2 * var(--border-radius)); font-size: calc(2 * var(--border-radius));
width: calc(var(--sidebar-width) - 4 * var(--border-radius)); width: calc(var(--sidebar-width) - 4 * var(--border-radius));
text-align: left;
} }
@media (max-aspect-ratio: 1/1) { @media (max-aspect-ratio: 1/1) {
@ -194,6 +193,7 @@ a:visited {
vertical-align: middle; vertical-align: middle;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: center;
} }
@media (max-aspect-ratio: 1/1) { @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 { .infobar-button-active {
border-radius: var(--border-radius); border-radius: var(--border-radius);
margin: var(--border-radius); margin: var(--border-radius);
border: none; border: none;
outline: 0; outline: 0;
transition-duration: 0.3s; transition-duration: 0.3s;
background: rgba(0, 255, 0, 0.5); background: rgba(126,87,194, 0.8) ;
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: calc(2.8 * var(--border-radius)); font-size: calc(2.8 * var(--border-radius));
height: calc(4 * var(--border-radius)); height: calc(4 * var(--border-radius));
@ -230,11 +278,11 @@ a:visited {
.infobar-button:hover { .infobar-button:hover {
background: rgba(255, 255, 255, 0.2); background: rgba(126,87,194, 0.2);
} }
.infobar-button:active { .infobar-button:active {
background: rgba(255, 255, 255, 0.4); background: rgba(126,87,194, 0.4);
} }
.infobar-button:disabled { .infobar-button:disabled {

View File

@ -126,6 +126,14 @@ class WebsocketConnection
set_active_match(id) set_active_match(id)
{ {
for (var key in this.openmatches)
{
if (key == id)
{
continue;
}
this.openmatches[key].on_focus_loose();
}
this.active_match = id; this.active_match = id;
} }
@ -243,6 +251,11 @@ class WebsocketConnection
reconnect(session_id) 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 = new WebSocket(server_protocol + this.ip + ":" + this.port);
this.socket.onmessage = (e => this.on_message(e)); this.socket.onmessage = (e => this.on_message(e));
this.socket.onopen = (() => this.on_reopen(session_id)); this.socket.onopen = (() => this.on_reopen(session_id));