Add basic grid layout and grid cell component; start styles

4 years ago · fb0efa14b9
parent 3425b1d988
commit fb0efa14b9
6 changed files with 108 additions and 5 deletions
--- a/index.html
+++ b/index.html
@ -4,6 +4,7 @@
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Battleship | EECS 448</title>
+        <link rel="stylesheet" href="./src/style/components.css">
    </head>
    <body>
        <h1>Battleship - EECS 448 Project 1</h1>
--- a/src/components.js
+++ b/src/components.js
@ -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,
 }
--- a/src/components/GameBoard.component.js
+++ b/src/components/GameBoard.component.js
@ -1,4 +1,5 @@
 import {Component} from '../../lib/vues6.js'
+import {GridCellState} from '../module/util.js'

 /*
 * 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
 * a battleship component that we reference inside this game board component.
+ *
+ * Battleship grid is 14x14.
 */
 const template  = `
-<div>
-    <p>The game board will go here. {{ greeting }}</p>
+<div class="game-board-component" v-if="ready">
+    <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>
 `
 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<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
    }
 }
--- a/src/components/GridCell.component.js
+++ b/src/components/GridCell.component.js
@ -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
+}
--- a/src/module/util.js
+++ b/src/module/util.js
@ -0,0 +1,5 @@
+
+export const GridCellState = {
+    Available: 'available',
+    Disabled: 'disabled',
+}
--- a/src/style/components.css
+++ 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;
+}