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">
</head>
<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. -->
<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. -->
<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)
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 game_service from '../services/GameState.service.js'
import {Player} from '../module/util.js'
import {Player, GameState} from '../module/util.js'
const template = `
<div class="app-scoreboard-component">
@ -15,14 +15,14 @@ const template = `
<td class="scoreboard_data">progress</td>
</tr>
<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_progress}}</td>
<td class="scoreboard_data">{{player_one_progress * 100}}%</td>
</tr>
<tr class="scoreboard_lastRow">
<td class="scoreboard_player">player_2</td>
<td class="scoreboard_data">{{player_one_score}}</td>
<td class="scoreboard_data">{{player_two_progress}}</td>
<td class="scoreboard_player">{{ current_player === Player.Two ? '➜ ' : '' }}Player 2{{ winning_player === Player.Two ? ' ★' : '' }}</td>
<td class="scoreboard_data">{{player_two_score}}</td>
<td class="scoreboard_data">{{player_two_progress * 100}}%</td>
</tr>
</table>
</div>
@ -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()
}
}
}

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"
class="instructions"
>
{{ instructions }}
{{ instructions.replace('{player}', current_player_display) }}
</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"
>
<!-- Opponent's board -->
@ -51,6 +53,26 @@ const template = `
<div class="fleet-label">Your fleet</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 class="scoreboard-container">
<app-scoreboard></app-scoreboard>
@ -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)
}
}
/**

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
* 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

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 */
.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 {

Write Preview
Loading…
Cancel
Save