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

design and user interface changes

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

40
game_manager.js
View File

@ -38,7 +38,12 @@ class GameManager
// check whether the game is over:
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();
}
else
@ -46,7 +51,7 @@ class GameManager
this.toggle_local_player();
this.grid.block_all()
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();
}
@ -66,14 +71,19 @@ class GameManager
{
if (this.remote_is_local_turn)
{
this.status_change_listener("Congratulation, you won!");
this.status_change_listener("Congratulation, you won!", "Game Over");
}
else
{
this.status_change_listener("Game over, you lost!");
this.status_change_listener("You lost!", "Game Over");
}
this.end_game();
}
else if (grid.is_complete())
{
this.status_change_listener("Draw. Everybody looses!", "Game Over");
this.end_game();
}
else
{
@ -85,7 +95,7 @@ class GameManager
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();
}
@ -120,6 +130,8 @@ class GameManager
this.is_local_player_a = false;
this.status_change_listener("", "local game")
this.toggle_local_player();
}
@ -156,7 +168,7 @@ class GameManager
if (is_accepted)
{
this.status_change_listener("Waiting for matchmaking");
this.status_change_listener("Connected. Waiting for matchmaking...");
}
else
{
@ -178,6 +190,8 @@ class GameManager
this.remote_opponent.set_name(opponent_name);
this.remote_is_local_turn = is_first_move;
var status_title = "" + this.remote_player.get_name() + " vs. " + opponent_name;
if (is_first_move)
{
this.grid.deactivate_all();
@ -185,7 +199,7 @@ class GameManager
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
{
@ -222,7 +236,7 @@ class GameManager
this.set_game_mode("none");
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()
@ -230,7 +244,7 @@ class GameManager
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;
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);
}
@ -244,7 +258,7 @@ class GameManager
}
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);
}
}
@ -255,13 +269,17 @@ class GameManager
{
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.grid.block_all();
}
connection_error_listener()
{
this.status_change_listener("connection error");
this.status_change_listener("connection error", "Game Over");
this.end_game();
}
}

2
game_server_connection.js
View File

@ -136,7 +136,7 @@ class GameServerConnection
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.onopen = (() => this.on_open(callback_func));
this.socket.onerror = (() => this.on_error());

18
grid.js
View File

@ -9,6 +9,7 @@ class Grid
this.ground_color = ground_color;
this.won_player = null;
this.n_complete_subgrids = 0;
this.subgrids = []
@ -47,7 +48,8 @@ class Grid
click_listener(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)
@ -62,6 +64,11 @@ class Grid
}
}
is_complete()
{
return !(this.n_complete_subgrids < this.n * this.n);
}
is_won()
{
return this.won_player != null;
@ -72,6 +79,14 @@ class Grid
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 whether the game is won
@ -169,6 +184,7 @@ class Grid
}
this.won_player = null;
this.n_complete_subgrids = 0;
}
block_all()

BIN
icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

2
index.html
View File

@ -3,7 +3,7 @@
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<!-- <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> -->
<title>ultimate tictactoe</title>
</head>

15
sidebar.js
View File

@ -73,9 +73,10 @@ class Sidebar
// 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.style.display = "none";
@ -88,7 +89,7 @@ class Sidebar
{
// TODO
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_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;
if (title != null)
{
this.status_title.innerHTML = "<p>" + title + "</p>";
}
}
}

10
style.css
View File

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