jonas/ultimate_tictactoe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

little improvements

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
main.js
View File

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

42
online_match_manager.js
View File

@ -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;
}

56
style.css
View File

@ -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 {

13
websocket_connection.js
View File

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