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

Add basic grid layout and grid cell component; start styles

Browse Source
issue-2
Garrett Mills 4 years ago
parent 3425b1d988
commit fb0efa14b9
Signed by: garrettmills
GPG Key ID: D2BF5FBA8298F246
6 changed files with 108 additions and 5 deletions
Show Stats Download Patch File Download Diff File

1
index.html
Unescape View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Battleship | EECS 448</title> <title>Battleship | EECS 448</title>
<link rel="stylesheet" href="./src/style/components.css">
</head> </head>
<body> <body>
<h1>Battleship - EECS 448 Project 1</h1> <h1>Battleship - EECS 448 Project 1</h1>

4
src/components.js
Unescape View File

@ -1,9 +1,11 @@
import GameBoardComponent from './components/GameBoard.component.js' import GameBoardComponent from './components/GameBoard.component.js'
import GridCellComponent from './components/GridCell.component.js'
/* /*
* This is where various components we define should be registered. * This is where various components we define should be registered.
* Once they are listed here, they will be automatically loaded by Vue.js. * Once they are listed here, they will be automatically loaded by Vue.js.
*/ */
export default { export default {
GameBoardComponent GameBoardComponent,
GridCellComponent,
} }

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

@ -1,4 +1,5 @@
import {Component} from '../../lib/vues6.js' import {Component} from '../../lib/vues6.js'
import {GridCellState} from '../module/util.js'
/* /*
* This is the HTML/JavaScript for the game board component. * This is the HTML/JavaScript for the game board component.
@ -15,10 +16,19 @@ import {Component} from '../../lib/vues6.js'
* *
* We can also use components w/in components, to keep code clean. For example, we could have * 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. * a battleship component that we reference inside this game board component.
*
* Battleship grid is 14x14.
*/ */
const template = ` const template = `
<div> <div class="game-board-component" v-if="ready">
<p>The game board will go here. {{ greeting }}</p> <div class="grid-container">
<div class="grid-row" v-for="row of rows">
<app-game-cell
v-for="cell of row"
v-bind:render="cell.render"
></app-game-cell>
</div>
</div>
</div> </div>
` `
export default class GameBoardComponent extends Component { export default class GameBoardComponent extends Component {
@ -26,9 +36,42 @@ export default class GameBoardComponent extends Component {
static get template() { return template } static get template() { return template }
static get props() { return [] } static get props() { return [] }
greeting = 'Hello, world.' /**
* 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 = []
/**
* The number of rows in the grid.
* @type {number}
*/
n_rows = 14
/**
* The number of columns in a row.
* @type {number}
*/
n_cols = 14
async vue_on_create() { async vue_on_create() {
console.log('The game board has been created!') // Generate the data structure for the grid
this.rows = Array(this.n_rows).fill('').map(_ => {
return Array(this.n_cols).fill('').map(_ => {
return {
render: GridCellState.Available,
}
})
})
this.ready = true
} }
} }

25
src/components/GridCell.component.js
Unescape View File

@ -0,0 +1,25 @@
import {Component} from '../../lib/vues6.js'
import {GridCellState} from '../module/util.js'
const template = `
<div
class="game-board-cell-component"
v-bind:class="{ disabled: render === GridCellState.Disabled, available: render === GridCellState.Available }"
>
</div>
`
export default class GridCellComponent extends Component {
static get selector() { return 'app-game-cell' }
static get template() { return template }
/** Properties that can be passed into this component. */
static get props() {
return [
'render',
]
}
/** Make the "GridCellState" enum available in the template. */
GridCellState = GridCellState
}

5
src/module/util.js
Unescape View File

@ -0,0 +1,5 @@
export const GridCellState = {
Available: 'available',
Disabled: 'disabled',
}

27
src/style/components.css
Unescape View File

@ -0,0 +1,27 @@
.game-board-component .grid-container .grid-row {
display: flex;
}
/* Styles for the various grid cell states. */
.game-board-cell-component {
width: 40px;
height: 40px;
border: 1px solid grey;
}
.game-board-cell-component.available {
background: #eeeeee;
}
.game-board-cell-component.available:hover {
background: #cccccc;
}
.game-board-cell-component.disabled {
background: #cccccc;
}
.game-board-cell-component.disabled:hover {
background: #bbbbbb;
}
Write Preview
Loading…
Cancel
Save