Create basic grid logic and styles

client.js

@@ -1,18 +1,45 @@
 'use strict'
 
 const choo = require('choo')
+const xtend = require('xtend')
+const css = require('sheetify')
+const stylesMap = require('./styles-map')
+
+css('css-wipe')
+css('./styles.css')
 const app = choo()
 
 const width = 8
 const height = 8
+const stylesMapLength = Object.keys(stylesMap).length
+const grid = []
+
+for (let m = 0; m < height; m++) {
+  const column = []
+  for (let n = 0; n < width; n++) {
+    column.push({
+      element: '',
+      styleID: 0
+    })
+  }
+
+  grid.push(column)
+}
 
 app.model({
-  state: {
-    grid: {
-      rows: Array.from({ length: width })
-        .map(item => Array.from({ length: height })
-          .map((/* item */) => ({ element: 'x' }))
-        )
+  state: { grid },
+  reducers: {
+    changeBorder: (state, { m, n }) => {
+      const newState = xtend(state)
+      const potentialNewID = newState.grid[m][n].styleID + 1
+
+      if (potentialNewID === stylesMapLength) {
+        newState.grid[m][n].styleID = 0
+      } else {
+        newState.grid[m][n].styleID++
+      }
+
+      return newState
     }
   }
 })

package.json

@@ -18,6 +18,7 @@
   "license": "ISC",
   "dependencies": {
     "choo": "^4.1.0",
+    "css-wipe": "^4.2.2",
     "sheetify": "^6.0.1",
     "xtend": "^4.0.1"
   },

pages/grid.js

@@ -1,21 +1,25 @@
 'use strict'
 
 const html = require('choo/html')
-const css = require('sheetify')
-const prefix = css('../styles.css')
+const stylesMap = require('../styles-map')
 
 module.exports = (state, prev, send) => {
-  const rows = state.grid.rows
   return html`
     <div>
       <table>
-        ${rows.map(row => html`
+        ${state.grid.map((row, m) => html`
           <tr>
-            ${row.map(column => html `
-              <td>
-                <div class=${prefix}>${column.element}</div>
-              </td>
-            `)}
+            ${row.map((value, n) => {
+              const { element, styleID } = state.grid[m][n]
+
+              return html`
+                <td>
+                  <div class=${stylesMap[styleID]} onclick=${() => send('changeBorder', { m, n })}>
+                    ${element}
+                  </div>
+                </td>
+              `
+            })}
           </tr>
         `)}
       </table>

styles-map.js

@@ -0,0 +1,10 @@
+'use strict'
+
+module.exports = {
+  0: 'box empty',
+  1: 'box top-left',
+  2: 'box top-right',
+  3: 'box bottom-left',
+  4: 'box bottom-right',
+  5: 'box full'
+}

styles.css

@@ -1,3 +1,32 @@
-:host {
-  border: 1px solid blue;
-}
+table {
+  border: 1px solid black;
+}
+
+.box {
+  background-color: blue;
+  padding: 5px;
+}
+
+.box.empty {
+  background-color: transparent;
+}
+
+.box.full {
+  border-radius: 0;
+}
+
+.box.top-left {
+  border-top-left-radius: 50%; 
+}
+
+.box.top-right {
+  border-top-right-radius: 50%; 
+}
+
+.box.bottom-left {
+  border-bottom-left-radius: 50%; 
+}
+
+.box.bottom-right {
+  border-bottom-right-radius: 50%; 
+}