-
The game board will go here. {{ greeting }}
+
`
export default class GameBoardComponent extends Component {
@@ -26,9 +36,42 @@ export default class GameBoardComponent extends Component {
static get template() { return template }
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
>}
+ */
+ 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() {
- 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
}
}
diff --git a/src/components/GridCell.component.js b/src/components/GridCell.component.js
new file mode 100644
index 0000000..f9b88bf
--- /dev/null
+++ b/src/components/GridCell.component.js
@@ -0,0 +1,25 @@
+import {Component} from '../../lib/vues6.js'
+import {GridCellState} from '../module/util.js'
+
+const template = `
+
+
+
+`
+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
+}
diff --git a/src/module/util.js b/src/module/util.js
new file mode 100644
index 0000000..8f66827
--- /dev/null
+++ b/src/module/util.js
@@ -0,0 +1,5 @@
+
+export const GridCellState = {
+ Available: 'available',
+ Disabled: 'disabled',
+}
diff --git a/src/style/components.css b/src/style/components.css
new file mode 100644
index 0000000..bccf08a
--- /dev/null
+++ b/src/style/components.css
@@ -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;
+}