garrettmills
/
eecs448-project-1
mirror of https://github.com/EECS-448-Battleship/project-1
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge branch 'master' of https://github.com/EECS-448-Battleship/project-1 into master

Browse Source
master
Evan Powell 4 years ago
parent 98258feb3b b1482d62f7
commit 86d412d710
6 changed files with 113 additions and 46 deletions
Show Stats Download Patch File Download Diff File

7
index.html
Unescape View File

@ -7,11 +7,12 @@
<link rel="stylesheet" href="./src/style/components.css"> <link rel="stylesheet" href="./src/style/components.css">
</head> </head>
<body> <body>
<h1>Battleship - EECS 448 Project 1</h1>
<p>Created by Lucas Brakenridge, Javier Barea Lara, Garrett Mills, Evan Powell, and Alec Horlick-Mills</p>
<!-- This is the container where the Vue.js application will render to. --> <!-- This is the container where the Vue.js application will render to. -->
<div id="wrapper"> <div id="wrapper">
<div class="header">
<h1>Battleship - EECS 448 Project 1</h1>
<p>Created by Lucas Brakenridge, Javier Barea Lara, Garrett Mills, Evan Powell, and Alec Horlick-Mills</p>
</div>
<!-- The top level component. This controls showing/hiding grids &c. --> <!-- The top level component. This controls showing/hiding grids &c. -->
<app-top-level></app-top-level> <app-top-level></app-top-level>

3
src/components/GameBoard.component.js
Unescape View File

@ -113,8 +113,9 @@ export default class GameBoardComponent extends Component {
game_service.place_ship(this.ships_to_place[0], coord_one, coord_two) game_service.place_ship(this.ships_to_place[0], coord_one, coord_two)
this.$emit('shipplaced') this.$emit('shipplaced')
this.$emit('missilefired',[row_i ,cell_i])
} }
} else if ( this.is_missile_mode ) {
this.$emit('missilefired', [row_i, cell_i])
} }
} }

23
src/components/ScoreBoard.component.js
Unescape View File

@ -1,6 +1,6 @@
import {Component} from '../../lib/vues6.js' import {Component} from '../../lib/vues6.js'
import game_service from '../services/GameState.service.js' import game_service from '../services/GameState.service.js'
import {Player} from '../module/util.js' import {Player, GameState} from '../module/util.js'
const template = ` const template = `
<div class="app-scoreboard-component"> <div class="app-scoreboard-component">
@ -15,14 +15,14 @@ const template = `
<td class="scoreboard_data">progress</td> <td class="scoreboard_data">progress</td>
</tr> </tr>
<tr class="scoreboard_rows_score&progress"> <tr class="scoreboard_rows_score&progress">
<td class="scoreboard_player">player_1</td> <td class="scoreboard_player">{{ current_player === Player.One ? '➜ ' : '' }}Player 1{{ winning_player === Player.One ? ' ★' : '' }}</td>
<td class="scoreboard_data">{{player_one_score}}</td> <td class="scoreboard_data">{{player_one_score}}</td>
<td class="scoreboard_data">{{player_one_progress}}</td> <td class="scoreboard_data">{{player_one_progress * 100}}%</td>
</tr> </tr>
<tr class="scoreboard_lastRow"> <tr class="scoreboard_lastRow">
<td class="scoreboard_player">player_2</td> <td class="scoreboard_player">{{ current_player === Player.Two ? '➜ ' : '' }}Player 2{{ winning_player === Player.Two ? ' ★' : '' }}</td>
<td class="scoreboard_data">{{player_one_score}}</td> <td class="scoreboard_data">{{player_two_score}}</td>
<td class="scoreboard_data">{{player_two_progress}}</td> <td class="scoreboard_data">{{player_two_progress * 100}}%</td>
</tr> </tr>
</table> </table>
</div> </div>
@ -36,6 +36,10 @@ export default class ScoreBoardComponent extends Component {
player_two_score = 0 player_two_score = 0
player_one_progress = 0 player_one_progress = 0
player_two_progress = 0 player_two_progress = 0
current_player = undefined
winning_player = undefined
Player = Player
async vue_on_create() { async vue_on_create() {
game_service.on_state_change(() => { 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_two_score = game_service.get_player_score(Player.Two)
this.player_one_progress = game_service.get_progress(Player.One) this.player_one_progress = game_service.get_progress(Player.One)
this.player_two_progress = game_service.get_progress(Player.Two) 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()
}
} }
} }

44
src/components/TopLevel.component.js
Unescape View File

@ -24,10 +24,12 @@ const template = `
v-if="current_state !== GameState.ChoosingNumberOfShips && current_state !== GameState.PromptPlayerChange && instructions" v-if="current_state !== GameState.ChoosingNumberOfShips && current_state !== GameState.PromptPlayerChange && instructions"
class="instructions" class="instructions"
> >
{{ instructions }} {{ instructions.replace('{player}', current_player_display) }}
</div> </div>
<div <div
v-if="current_state !== GameState.ChoosingNumberOfShips && current_state !== GameState.PromptPlayerChange" v-if="current_state !== GameState.ChoosingNumberOfShips
&& current_state !== GameState.PromptPlayerChange
&& current_state !== GameState.PlayerVictory"
class="game-boards-container" class="game-boards-container"
> >
<!-- Opponent's board --> <!-- Opponent's board -->
@ -51,6 +53,26 @@ const template = `
<div class="fleet-label">Your fleet</div> <div class="fleet-label">Your fleet</div>
</div> </div>
</div> </div>
<div
v-if="current_state === GameState.PlayerVictory"
class="game-boards-container"
>
<!-- Winner's board -->
<div class="game-board">
<app-game-board
v-bind:rows="player_rows"
></app-game-board>
<div class="fleet-label">{{ current_player_display }}'s fleet (winner)</div>
</div>
<!-- Loser's board -->
<div class="game-board">
<app-game-board
v-bind:rows="opponent_rows"
></app-game-board>
<div class="fleet-label">{{ current_opponent_display }}'s fleet</div>
</div>
</div>
</div> </div>
<div class="scoreboard-container"> <div class="scoreboard-container">
<app-scoreboard></app-scoreboard> <app-scoreboard></app-scoreboard>
@ -140,6 +162,12 @@ export default class TopLevelComponent extends Component {
this.ships_to_place = game_service.get_possible_boats() 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] this.instructions = instructions[this.current_state]
}) })
} }
@ -170,12 +198,14 @@ export default class TopLevelComponent extends Component {
* @param {number} column_index * @param {number} column_index
*/ */
on_missile_fired([row_index, 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 // Give the user time to see whether they hit or not
setTimeout(() => { setTimeout(() => {
game_service.advance_game_state() game_service.advance_game_state()
}, 5000) }, 2000)
}
} }
/** /**

63
src/services/GameState.service.js
Unescape View File

@ -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 * get the "score" (the number of hits) that the
* current player has (counting sunk ships) * current player has (counting sunk ships)
@ -210,21 +219,16 @@ export class GameStateService {
* @private * @private
*/ */
get_player_score(player) { get_player_score(player) {
let i = 1; let score = 0
let j = 1; this.player_x_game_board[player].some(row => {
let score = 0; row.some(cell => {
for(i; i<=8; i++) if ( cell.render === GridCellState.Damaged || cell.render === GridCellState.Sunk ) {
{ score += 1
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++;
} }
} })
} })
return(score);
return score
} }
/** /**
@ -234,21 +238,16 @@ export class GameStateService {
* @private * @private
*/ */
get_boat_count(player){ get_boat_count(player){
let i = 1; let boat_count = 0
let j = 1; this.player_x_game_board[player].some(row => {
let boat_count = 0; row.some(cell => {
for(i; i<=8; i++) if ( isShipCell(cell.render) ) {
{ boat_count += 1
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++;
} }
} })
} })
return(boat_count);
return boat_count
} }
/** /**
@ -257,7 +256,12 @@ export class GameStateService {
* @private * @private
*/ */
get_progress(player){ 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) { if(winner) {
this.current_state = GameState.PlayerVictory; this.current_state = GameState.PlayerVictory;
this.current_player = winner; this.current_player = winner;
this.current_opponent = this.get_other_player(winner);
} }
this.current_turn_had_missile_attempt = false this.current_turn_had_missile_attempt = false

19
src/style/components.css
Unescape View File

@ -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 */ /* Styles for top-level component */
.top-level-component .game-boards-container { .top-level-component .game-boards-container {
display: flex; display: flex;
@ -96,6 +114,7 @@ p {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
flex: 1;
} }
.top-level-component .instructions { .top-level-component .instructions {

Write Preview
Loading…
Cancel
Save