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
-
+
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])
}
}
diff --git a/src/components/ScoreBoard.component.js b/src/components/ScoreBoard.component.js
index 4532847..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,14 +15,14 @@ const template = `
progress |
- | player_1 |
+ {{ current_player === Player.One ? '➜ ' : '' }}Player 1{{ winning_player === Player.One ? ' ★' : '' }} |
{{player_one_score}} |
- {{player_one_progress}} |
+ {{player_one_progress * 100}}% |
- | player_2 |
- {{player_one_score}} |
- {{player_two_progress}} |
+ {{ 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 74be3c2..b2f5a3d 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
+
+
@@ -140,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]
})
}
@@ -170,12 +198,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()
+ }, 2000)
+ }
}
/**
diff --git a/src/services/GameState.service.js b/src/services/GameState.service.js
index 9058142..b84a3ea 100644
--- a/src/services/GameState.service.js
+++ b/src/services/GameState.service.js
@@ -203,6 +203,15 @@ 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])]
+ }
+
/**
* get the "score" (the number of hits) that the
* current player has (counting sunk ships)
@@ -210,21 +219,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 +238,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 +256,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
+ }
}
/**
@@ -355,6 +359,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
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 {