From 3b1c834babd75f2bad5ab5195bedba4e56c79bfe Mon Sep 17 00:00:00 2001 From: garrettmills Date: Sat, 12 Sep 2020 14:17:33 -0500 Subject: [PATCH 1/9] Modify top-level styles to align scoreboard to bottom --- index.html | 7 ++++--- src/style/components.css | 19 +++++++++++++++++++ 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 55e4596..4a69e10 100644 --- a/index.html +++ b/index.html @@ -7,11 +7,12 @@ -

Battleship - EECS 448 Project 1

-

Created by Lucas Brakenridge, Javier Barea Lara, Garrett Mills, Evan Powell, and Alec Horlick-Mills

-
+
+

Battleship - EECS 448 Project 1

+

Created by Lucas Brakenridge, Javier Barea Lara, Garrett Mills, Evan Powell, and Alec Horlick-Mills

+
diff --git a/src/style/components.css b/src/style/components.css index a59f13f..80c1fe5 100644 --- a/src/style/components.css +++ b/src/style/components.css @@ -1,3 +1,21 @@ +#wrapper { + height: 100%; + width: 100%; + position: fixed; + top: 0; + left: 0; + overflow: hidden; + overflow-y: scroll; + display: flex; + flex-direction: column; +} + +.top-level-container { + flex: 1; + display: flex; + flex-direction: column; +} + /* Styles for top-level component */ .top-level-component .game-boards-container { display: flex; @@ -96,6 +114,7 @@ p { align-items: center; justify-content: center; flex-direction: column; + flex: 1; } .top-level-component .instructions { From 8896ded9315c46ac6f9485c53fad108390afe4f0 Mon Sep 17 00:00:00 2001 From: garrettmills Date: Sat, 12 Sep 2020 14:22:23 -0500 Subject: [PATCH 2/9] Move missile fire emitter in Game board (#5) --- src/components/GameBoard.component.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/GameBoard.component.js b/src/components/GameBoard.component.js index 9d2516e..ec91552 100644 --- a/src/components/GameBoard.component.js +++ b/src/components/GameBoard.component.js @@ -113,8 +113,9 @@ export default class GameBoardComponent extends Component { game_service.place_ship(this.ships_to_place[0], coord_one, coord_two) this.$emit('shipplaced') - this.$emit('missilefired',[row_i ,cell_i]) } + } else if ( this.is_missile_mode ) { + this.$emit('missilefired', [row_i, cell_i]) } } From 8a5c4eec79d0e7b619495065fd439d25947f5d4c Mon Sep 17 00:00:00 2001 From: garrettmills Date: Sat, 12 Sep 2020 14:29:07 -0500 Subject: [PATCH 3/9] Only allow firing missiles in missile mode (#5) --- src/components/TopLevel.component.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/TopLevel.component.js b/src/components/TopLevel.component.js index 74be3c2..6b91368 100644 --- a/src/components/TopLevel.component.js +++ b/src/components/TopLevel.component.js @@ -170,12 +170,14 @@ export default class TopLevelComponent extends Component { * @param {number} column_index */ on_missile_fired([row_index, column_index]) { - game_service.attempt_missile_fire([row_index, column_index]) + if ( this.player_is_firing_missiles ) { + game_service.attempt_missile_fire([row_index, column_index]) - // Give the user time to see whether they hit or not - setTimeout(() => { - game_service.advance_game_state() - }, 5000) + // Give the user time to see whether they hit or not + setTimeout(() => { + game_service.advance_game_state() + }, 5000) + } } /** From fbe8ac8ce638e04e4c6cf2a17a95021c1c22bb9a Mon Sep 17 00:00:00 2001 From: garrettmills Date: Sat, 12 Sep 2020 14:39:38 -0500 Subject: [PATCH 4/9] Fix math bugs for scoreboard (#4) --- src/components/ScoreBoard.component.js | 10 ++--- src/services/GameState.service.js | 53 ++++++++++++-------------- 2 files changed, 29 insertions(+), 34 deletions(-) diff --git a/src/components/ScoreBoard.component.js b/src/components/ScoreBoard.component.js index 4532847..b584179 100644 --- a/src/components/ScoreBoard.component.js +++ b/src/components/ScoreBoard.component.js @@ -15,14 +15,14 @@ const template = ` progress - player_1 + Player 1 {{player_one_score}} - {{player_one_progress}} + {{player_one_progress * 100}}% - player_2 - {{player_one_score}} - {{player_two_progress}} + Player 2 + {{player_two_score}} + {{player_two_progress * 100}}%
diff --git a/src/services/GameState.service.js b/src/services/GameState.service.js index 9058142..60f4e11 100644 --- a/src/services/GameState.service.js +++ b/src/services/GameState.service.js @@ -210,21 +210,16 @@ export class GameStateService { * @private */ get_player_score(player) { - let i = 1; - let j = 1; - let score = 0; - for(i; i<=8; i++) - { - for(j; j<=8; j++) - { - let cell = this.player_x_game_board[this.get_other_player(player)][i][j]; - if(cell.render === GridCellState.Damaged || cell.render === GridCellState.Sunk ) - { - score++; + let score = 0 + this.player_x_game_board[player].some(row => { + row.some(cell => { + if ( cell.render === GridCellState.Damaged || cell.render === GridCellState.Sunk ) { + score += 1 } - } - } - return(score); + }) + }) + + return score } /** @@ -234,21 +229,16 @@ export class GameStateService { * @private */ get_boat_count(player){ - let i = 1; - let j = 1; - let boat_count = 0; - for(i; i<=8; i++) - { - for(j; j<=8; j++) - { - let cell = this.player_x_game_board[this.get_other_player(player)][i][j]; - if(cell.render === GridCellState.Damaged || cell.render === GridCellState.Sunk || cell.render === GridCellState.Ship ) - { - boat_count++; + let boat_count = 0 + this.player_x_game_board[player].some(row => { + row.some(cell => { + if ( isShipCell(cell.render) ) { + boat_count += 1 } - } - } - return(boat_count); + }) + }) + + return boat_count } /** @@ -257,7 +247,12 @@ export class GameStateService { * @private */ get_progress(player){ - return(this.get_player_score(player) / this.get_boat_count(player)) + const boat_count = this.get_boat_count(player) + if ( boat_count !== 0 ) { + return (this.get_player_score(player) / boat_count).toFixed(2) + } else { + return 0 + } } /** From 8e0c30f01a6bf5e7153b9a60d06f0a3c3cf721eb Mon Sep 17 00:00:00 2001 From: garrettmills Date: Sat, 12 Sep 2020 14:40:48 -0500 Subject: [PATCH 5/9] Set opponent to loser if PlayerVictory in game service (#5) --- src/services/GameState.service.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/services/GameState.service.js b/src/services/GameState.service.js index 60f4e11..e87764b 100644 --- a/src/services/GameState.service.js +++ b/src/services/GameState.service.js @@ -350,6 +350,7 @@ export class GameStateService { if(winner) { this.current_state = GameState.PlayerVictory; this.current_player = winner; + this.current_opponent = this.get_other_player(winner); } this.current_turn_had_missile_attempt = false From 1e47fdd1427dc7d76711977e84932f4deedea0f7 Mon Sep 17 00:00:00 2001 From: Alec Date: Sat, 12 Sep 2020 14:43:21 -0500 Subject: [PATCH 6/9] for victory states to be shown --- src/services/GameState.service.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/services/GameState.service.js b/src/services/GameState.service.js index 9058142..5b3bfa5 100644 --- a/src/services/GameState.service.js +++ b/src/services/GameState.service.js @@ -203,6 +203,10 @@ export class GameStateService { }) } + get_player_victory_state(){ + return [clone(this.player_x_game_board[this.current_player]), clone(this.player_x_game_board[this.current_opponent])] + } + /** * get the "score" (the number of hits) that the * current player has (counting sunk ships) From 29f1a582d90bd99f60990fa1ed16ad08b286dd28 Mon Sep 17 00:00:00 2001 From: garrettmills Date: Sat, 12 Sep 2020 14:46:22 -0500 Subject: [PATCH 7/9] Add special display for victory (#5) --- src/components/TopLevel.component.js | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/src/components/TopLevel.component.js b/src/components/TopLevel.component.js index 6b91368..e47d87c 100644 --- a/src/components/TopLevel.component.js +++ b/src/components/TopLevel.component.js @@ -24,10 +24,12 @@ const template = ` v-if="current_state !== GameState.ChoosingNumberOfShips && current_state !== GameState.PromptPlayerChange && instructions" class="instructions" > - {{ instructions }} + {{ instructions.replace('{player}', current_player_display) }}
@@ -51,6 +53,26 @@ const template = `
Your fleet
+
+ +
+ +
{{ current_player_display }}'s fleet (winner)
+
+ + +
+ +
{{ current_opponent_display }}'s fleet
+
+
From 60bd974314eab573bc4029f1a97a0938f286e8e6 Mon Sep 17 00:00:00 2001 From: garrettmills Date: Sat, 12 Sep 2020 14:50:35 -0500 Subject: [PATCH 8/9] Load in victory states when appropriate (#5) --- src/components/TopLevel.component.js | 6 ++++++ src/services/GameState.service.js | 5 +++++ 2 files changed, 11 insertions(+) diff --git a/src/components/TopLevel.component.js b/src/components/TopLevel.component.js index e47d87c..2b8611d 100644 --- a/src/components/TopLevel.component.js +++ b/src/components/TopLevel.component.js @@ -162,6 +162,12 @@ export default class TopLevelComponent extends Component { this.ships_to_place = game_service.get_possible_boats() } + if ( next_state === GameState.PlayerVictory ) { + const [victor_state, loser_state] = game_service.get_player_victory_state() + this.player_rows = victor_state + this.opponent_rows = loser_state + } + this.instructions = instructions[this.current_state] }) } diff --git a/src/services/GameState.service.js b/src/services/GameState.service.js index 6e94f99..b84a3ea 100644 --- a/src/services/GameState.service.js +++ b/src/services/GameState.service.js @@ -203,6 +203,11 @@ export class GameStateService { }) } + /** + * Get the states that should be shown on the victory screen. + * First element is the winner's state, second element is the loser's state. + * @return {object[][][]} + */ get_player_victory_state(){ return [clone(this.player_x_game_board[this.current_player]), clone(this.player_x_game_board[this.current_opponent])] } From b1482d62f7e2e5fd0f6c6155e21988a81f068871 Mon Sep 17 00:00:00 2001 From: garrettmills Date: Sat, 12 Sep 2020 14:58:30 -0500 Subject: [PATCH 9/9] Enhancements to scoreboard to show current player/winner (#6) --- src/components/ScoreBoard.component.js | 17 ++++++++++++++--- src/components/TopLevel.component.js | 2 +- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/ScoreBoard.component.js b/src/components/ScoreBoard.component.js index b584179..3e837f3 100644 --- a/src/components/ScoreBoard.component.js +++ b/src/components/ScoreBoard.component.js @@ -1,6 +1,6 @@ import {Component} from '../../lib/vues6.js' import game_service from '../services/GameState.service.js' -import {Player} from '../module/util.js' +import {Player, GameState} from '../module/util.js' const template = `
@@ -15,12 +15,12 @@ const template = ` progress - Player 1 + {{ current_player === Player.One ? '➜ ' : '' }}Player 1{{ winning_player === Player.One ? ' ★' : '' }} {{player_one_score}} {{player_one_progress * 100}}% - Player 2 + {{ current_player === Player.Two ? '➜ ' : '' }}Player 2{{ winning_player === Player.Two ? ' ★' : '' }} {{player_two_score}} {{player_two_progress * 100}}% @@ -36,6 +36,10 @@ export default class ScoreBoardComponent extends Component { player_two_score = 0 player_one_progress = 0 player_two_progress = 0 + current_player = undefined + winning_player = undefined + + Player = Player async vue_on_create() { game_service.on_state_change(() => { @@ -51,5 +55,12 @@ export default class ScoreBoardComponent extends Component { this.player_two_score = game_service.get_player_score(Player.Two) this.player_one_progress = game_service.get_progress(Player.One) this.player_two_progress = game_service.get_progress(Player.Two) + + if ( game_service.get_game_state() !== GameState.PlayerVictory ) + this.current_player = game_service.get_current_player() + else { + this.current_player = undefined + this.winning_player = game_service.get_current_player() + } } } diff --git a/src/components/TopLevel.component.js b/src/components/TopLevel.component.js index 2b8611d..b2f5a3d 100644 --- a/src/components/TopLevel.component.js +++ b/src/components/TopLevel.component.js @@ -204,7 +204,7 @@ export default class TopLevelComponent extends Component { // Give the user time to see whether they hit or not setTimeout(() => { game_service.advance_game_state() - }, 5000) + }, 2000) } }