parent
3425b1d988
commit
fb0efa14b9
@ -1,9 +1,11 @@
|
||||
import GameBoardComponent from './components/GameBoard.component.js'
|
||||
import GridCellComponent from './components/GridCell.component.js'
|
||||
|
||||
/*
|
||||
* This is where various components we define should be registered.
|
||||
* Once they are listed here, they will be automatically loaded by Vue.js.
|
||||
*/
|
||||
export default {
|
||||
GameBoardComponent
|
||||
GameBoardComponent,
|
||||
GridCellComponent,
|
||||
}
|
||||
|
@ -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
|
||||
}
|
@ -0,0 +1,5 @@
|
||||
|
||||
export const GridCellState = {
|
||||
Available: 'available',
|
||||
Disabled: 'disabled',
|
||||
}
|
@ -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;
|
||||
}
|
Loading…
Reference in new issue