design and user interface changes

This commit is contained in:
Jonas Weinz 2019-03-10 13:30:18 +01:00
parent 465d809137
commit e0c76da398
7 changed files with 67 additions and 20 deletions

View File

@ -38,7 +38,12 @@ class GameManager
// check whether the game is over: // check whether the game is over:
if (grid.is_won()) if (grid.is_won())
{ {
this.status_change_listener("" + grid.get_won_player().get_name() + " has won.") this.status_change_listener("" + grid.get_won_player().get_name() + " has won.", "Game Over")
this.end_game();
}
else if (grid.is_complete())
{
this.status_change_listener("Draw. Everybody looses!", "Game Over");
this.end_game(); this.end_game();
} }
else else
@ -46,7 +51,7 @@ class GameManager
this.toggle_local_player(); this.toggle_local_player();
this.grid.block_all() this.grid.block_all()
this.grid.subgrids[y][x].unblock(); this.grid.subgrids[y][x].unblock();
if (this.grid.subgrids[y][x].is_draw()) if (this.grid.subgrids[y][x].is_draw() || this.grid.subgrids[y][x].is_won())
{ {
this.grid.unblock_all(); this.grid.unblock_all();
} }
@ -66,14 +71,19 @@ class GameManager
{ {
if (this.remote_is_local_turn) if (this.remote_is_local_turn)
{ {
this.status_change_listener("Congratulation, you won!"); this.status_change_listener("Congratulation, you won!", "Game Over");
} }
else else
{ {
this.status_change_listener("Game over, you lost!"); this.status_change_listener("You lost!", "Game Over");
} }
this.end_game(); this.end_game();
} }
else if (grid.is_complete())
{
this.status_change_listener("Draw. Everybody looses!", "Game Over");
this.end_game();
}
else else
{ {
@ -85,7 +95,7 @@ class GameManager
this.grid.subgrids[y][x].unblock(); this.grid.subgrids[y][x].unblock();
if (this.grid.subgrids[y][x].is_draw()) if (this.grid.subgrids[y][x].is_draw()|| this.grid.subgrids[y][x].is_won())
{ {
this.grid.unblock_all(); this.grid.unblock_all();
} }
@ -120,6 +130,8 @@ class GameManager
this.is_local_player_a = false; this.is_local_player_a = false;
this.status_change_listener("", "local game")
this.toggle_local_player(); this.toggle_local_player();
} }
@ -156,7 +168,7 @@ class GameManager
if (is_accepted) if (is_accepted)
{ {
this.status_change_listener("Waiting for matchmaking"); this.status_change_listener("Connected. Waiting for matchmaking...");
} }
else else
{ {
@ -178,6 +190,8 @@ class GameManager
this.remote_opponent.set_name(opponent_name); this.remote_opponent.set_name(opponent_name);
this.remote_is_local_turn = is_first_move; this.remote_is_local_turn = is_first_move;
var status_title = "" + this.remote_player.get_name() + " vs. " + opponent_name;
if (is_first_move) if (is_first_move)
{ {
this.grid.deactivate_all(); this.grid.deactivate_all();
@ -185,7 +199,7 @@ class GameManager
this.grid.player_change_listener(this.remote_player); this.grid.player_change_listener(this.remote_player);
this.status_change_listener("game aginst " + opponent_name + " started. It's your turn"); this.status_change_listener("game aginst " + opponent_name + " started. It's your turn", status_title);
} }
else else
{ {
@ -222,7 +236,7 @@ class GameManager
this.set_game_mode("none"); this.set_game_mode("none");
this.grid.block_all(); this.grid.block_all();
this.status_change_listener("game was closed by server or opponent"); this.status_change_listener("game was closed by server or opponent", "Game Over");
} }
toggle_local_player() toggle_local_player()
@ -230,7 +244,7 @@ class GameManager
this.is_local_player_a = !this.is_local_player_a; this.is_local_player_a = !this.is_local_player_a;
var next_player = this.is_local_player_a ? this.local_player_a : this.local_player_b; var next_player = this.is_local_player_a ? this.local_player_a : this.local_player_b;
this.status_change_listener("" + "it's " + next_player.get_name() + "s turn..."); this.status_change_listener("" + "it's " + next_player.get_name() + "'s turn...");
this.grid.player_change_listener(next_player); this.grid.player_change_listener(next_player);
} }
@ -244,7 +258,7 @@ class GameManager
} }
else else
{ {
this.status_change_listener("waiting for opponents turn..."); this.status_change_listener("waiting for " + this.remote_opponent.get_name() + "'s move...");
this.grid.player_change_listener(this.remote_opponent); this.grid.player_change_listener(this.remote_opponent);
} }
} }
@ -255,13 +269,17 @@ class GameManager
{ {
this.game_server_connection.close(); this.game_server_connection.close();
} }
else if (this.game_mode == "local")
{
this.status_change_listener("game is closed", "Game Over");
}
this.set_game_mode("none"); this.set_game_mode("none");
this.grid.block_all(); this.grid.block_all();
} }
connection_error_listener() connection_error_listener()
{ {
this.status_change_listener("connection error"); this.status_change_listener("connection error", "Game Over");
this.end_game(); this.end_game();
} }
} }

View File

@ -136,7 +136,7 @@ class GameServerConnection
connect(callback_func) connect(callback_func)
{ {
this.socket = new WebSocket("ws://" + this.ip + ":" + this.port); this.socket = new WebSocket("wss://" + 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_open(callback_func)); this.socket.onopen = (() => this.on_open(callback_func));
this.socket.onerror = (() => this.on_error()); this.socket.onerror = (() => this.on_error());

18
grid.js
View File

@ -9,6 +9,7 @@ class Grid
this.ground_color = ground_color; this.ground_color = ground_color;
this.won_player = null; this.won_player = null;
this.n_complete_subgrids = 0;
this.subgrids = [] this.subgrids = []
@ -47,7 +48,8 @@ class Grid
click_listener(sub_x, sub_y, x,y) click_listener(sub_x, sub_y, x,y)
{ {
this.check_win(sub_x, sub_y, x, y); this.check_win(sub_x, sub_y, x, y);
this.click_callback(sub_x, sub_y, x,y); this.check_complete(sub_x, sub_y, x, y);
this.click_callback(sub_x, sub_y, x, y);
} }
player_change_listener(player) player_change_listener(player)
@ -62,6 +64,11 @@ class Grid
} }
} }
is_complete()
{
return !(this.n_complete_subgrids < this.n * this.n);
}
is_won() is_won()
{ {
return this.won_player != null; return this.won_player != null;
@ -72,6 +79,14 @@ class Grid
return this.won_player; return this.won_player;
} }
check_complete(sub_x, sub_y, x, y)
{
if (this.subgrids[sub_x][sub_y].is_won() || this.subgrids[sub_x][sub_y].is_draw())
{
this.n_complete_subgrids++;
}
}
check_win(sub_x, sub_y, x,y) check_win(sub_x, sub_y, x,y)
{ {
// check whether the game is won // check whether the game is won
@ -169,6 +184,7 @@ class Grid
} }
this.won_player = null; this.won_player = null;
this.n_complete_subgrids = 0;
} }
block_all() block_all()

BIN
icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

View File

@ -3,7 +3,7 @@
<head> <head>
<meta name="viewport" content="width=device-width, user-scalable=no" /> <meta name="viewport" content="width=device-width, user-scalable=no" />
<!-- <link rel="manifest" href="manifest.json" /> --> <!-- <link rel="manifest" href="manifest.json" /> -->
<!-- <link rel="icon" href="icon.png" type="image/png"/> --> <link rel="icon" href="icon.png" type="image/png"/>
<!-- <script defer src="site.js"></script> --> <!-- <script defer src="site.js"></script> -->
<title>ultimate tictactoe</title> <title>ultimate tictactoe</title>
</head> </head>

View File

@ -73,9 +73,10 @@ class Sidebar
// status area: // status area:
this.info_container.appendChild(this.create_label("status:")); this.status_title = this.create_label("");
this.info_container.appendChild(this.status_title);
this.status_text = this.create_label("select gamemode"); this.status_text = this.create_label("select gamemode. <br> <a href=https://en.wikipedia.org/wiki/Ultimate_tic-tac-toe#Rules>here are the rules </a>");
this.info_container.appendChild(this.status_text); this.info_container.appendChild(this.status_text);
this.info_container.style.display = "none"; this.info_container.style.display = "none";
@ -88,7 +89,7 @@ class Sidebar
{ {
// TODO // TODO
this.game_manager.register_game_mode_change_listener((c) => this.game_mode_change_listener(c)); this.game_manager.register_game_mode_change_listener((c) => this.game_mode_change_listener(c));
this.game_manager.register_status_change_listener((c) => this.status_change_listener(c)); this.game_manager.register_status_change_listener((c,t=null) => this.status_change_listener(c, t));
this.b_local.addEventListener("click", () => this.game_manager.start_local_game()); this.b_local.addEventListener("click", () => this.game_manager.start_local_game());
this.b_end_game.addEventListener("click", () => this.game_manager.end_game()); this.b_end_game.addEventListener("click", () => this.game_manager.end_game());
@ -171,11 +172,13 @@ class Sidebar
} }
} }
status_change_listener(statustext) status_change_listener(statustext, title=null)
{ {
this.status_text.innerHTML = statustext; this.status_text.innerHTML = statustext;
if (title != null)
{
this.status_title.innerHTML = "<p>" + title + "</p>";
}
} }
} }

View File

@ -34,6 +34,16 @@ body {
} }
/* unvisited link */
a:link {
color: white;
}
/* visited link */
a:visited {
color: white;
}
.main-container { .main-container {
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;