2020-09-05 02:42:09 +00:00
|
|
|
import {Component} from '../../lib/vues6.js'
|
2020-09-07 20:29:35 +00:00
|
|
|
import game_service from '../services/GameState.service.js'
|
2020-09-05 02:42:09 +00:00
|
|
|
|
|
|
|
/*
|
|
|
|
* This is the HTML/JavaScript for the game board component.
|
|
|
|
* The "template" variable at the top defines the HTML for this component. It can contain references
|
|
|
|
* to methods and properties on the "GameBoardComponent" class shown below.
|
|
|
|
*
|
|
|
|
* For example, the "greeting" property is referenced in the template as "{{ greeting }}". When
|
|
|
|
* the page loads, this will be replaced by the value of the "greeting" property.
|
|
|
|
*
|
|
|
|
* The class below manages the logic referenced by the template. Then, we can use the component
|
|
|
|
* in the application by creating an HTML tag with the value of the "selector()" getter.
|
|
|
|
*
|
|
|
|
* In this case, that's the <app-game-board></app-game-board> tag in index.html.
|
|
|
|
*
|
|
|
|
* We can also use components w/in components, to keep code clean. For example, we could have
|
|
|
|
* a battleship component that we reference inside this game board component.
|
2020-09-06 22:38:29 +00:00
|
|
|
*
|
|
|
|
* Battleship grid is 14x14.
|
2020-09-05 02:42:09 +00:00
|
|
|
*/
|
|
|
|
const template = `
|
2020-09-06 22:38:29 +00:00
|
|
|
<div class="game-board-component" v-if="ready">
|
|
|
|
<div class="grid-container">
|
2020-09-08 02:06:06 +00:00
|
|
|
<div class="grid-row" v-for="(row,i) of rows">
|
2020-09-09 16:23:50 +00:00
|
|
|
<br> <span class="label">{{ i + 1 }}</span>
|
2020-09-06 22:38:29 +00:00
|
|
|
<app-game-cell
|
|
|
|
v-for="cell of row"
|
|
|
|
v-bind:render="cell.render"
|
|
|
|
></app-game-cell>
|
|
|
|
</div>
|
2020-09-09 16:23:50 +00:00
|
|
|
<div class="column_labels">
|
|
|
|
<div class="label" v-for="(label,i) of column_labels">{{ label }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-09-05 02:42:09 +00:00
|
|
|
</div>
|
|
|
|
`
|
|
|
|
export default class GameBoardComponent extends Component {
|
|
|
|
static get selector() { return 'app-game-board' }
|
|
|
|
static get template() { return template }
|
|
|
|
static get props() { return [] }
|
|
|
|
|
2020-09-06 22:38:29 +00:00
|
|
|
/**
|
|
|
|
* If true, the grid is ready to be rendered. If false,
|
|
|
|
* the grid will be hidden.
|
|
|
|
* @type {boolean}
|
|
|
|
*/
|
|
|
|
ready = false
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Array of grid rows. Each element in this array is itself
|
|
|
|
* an array of grid cell values.
|
|
|
|
* @type {Array<Array<*>>}
|
|
|
|
*/
|
|
|
|
rows = []
|
2020-09-08 02:06:06 +00:00
|
|
|
column_labels = ["A", "B", "C", "D", "E", "F", "G", "H", "I"]
|
2020-09-09 02:44:25 +00:00
|
|
|
|
2020-09-06 22:38:29 +00:00
|
|
|
|
2020-09-05 02:42:09 +00:00
|
|
|
async vue_on_create() {
|
2020-09-07 20:29:35 +00:00
|
|
|
this.rows = game_service.get_current_player_state()
|
2020-09-09 02:44:25 +00:00
|
|
|
this.ready = true
|
2020-09-08 02:06:06 +00:00
|
|
|
|
2020-09-05 02:42:09 +00:00
|
|
|
}
|
|
|
|
}
|