Add colors to states

src/components/GridCell.component.js

@@ -4,7 +4,9 @@ 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 }"
+    v-bind:class="{ disabled: render === GridCellState.Disabled, available: render === GridCellState.Available,
+    ship: render == GridCellState.Ship, damaged: render == GridCellState.Damaged, sunk: render == GridCellState.Sunk,
+    missed: render == GridCellState.Missed }"
 >
 
 </div>

src/style/components.css

@@ -25,3 +25,19 @@
 .game-board-cell-component.disabled:hover {
     background: #bbbbbb;
 }
+
+.game-board-cell-component.ship {
+    background: #414141;
+}
+
+.game-board-cell-component.damaged {
+    background: #dd0000;
+}
+
+.game-board-cell-component.sunk {
+    background: #000000;
+}
+
+.game-board-cell-component.missed {
+    background: #eeeeee;
+}