diff --git a/game_manager.js b/game_manager.js index 9b31dfe..314bf67 100644 --- a/game_manager.js +++ b/game_manager.js @@ -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(); } } \ No newline at end of file diff --git a/game_server_connection.js b/game_server_connection.js index 515bdb7..5ae101d 100644 --- a/game_server_connection.js +++ b/game_server_connection.js @@ -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()); diff --git a/grid.js b/grid.js index ec3e217..08f4b78 100644 --- a/grid.js +++ b/grid.js @@ -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() diff --git a/icon.png b/icon.png new file mode 100644 index 0000000..84a6070 Binary files /dev/null and b/icon.png differ diff --git a/index.html b/index.html index f25f233..e44b153 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + ultimate tictactoe diff --git a/sidebar.js b/sidebar.js index e67203a..7e8bb17 100644 --- a/sidebar.js +++ b/sidebar.js @@ -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.
here are the rules "); 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 = "

" + title + "

"; + } } - - } \ No newline at end of file diff --git a/style.css b/style.css index ae15424..6200329 100644 --- a/style.css +++ b/style.css @@ -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;