Add footer, use port 3000 and use index.js as entry point

client.js → index.js

@@ -14,9 +14,9 @@ const height = 8
 const stylesMapLength = Object.keys(stylesMap).length
 const grid = []
 
-for (let m = 0; m < height; m++) {
+for (let m = 0; m < height; m += 1) {
   const column = []
-  for (let n = 0; n < width; n++) {
+  for (let n = 0; n < width; n += 1) {
     column.push({
       element: '',
       styleID: 0
@@ -31,12 +31,12 @@ app.model({
   reducers: {
     changeBorder: (state, { m, n }) => {
       const newState = xtend(state)
-      const potentialNewID = newState.grid[m][n].styleID + 1
+      const nextID = newState.grid[m][n].styleID + 1
 
-      if (potentialNewID === stylesMapLength) {
+      if (nextID === stylesMapLength) {
         newState.grid[m][n].styleID = 0
       } else {
-        newState.grid[m][n].styleID++
+        newState.grid[m][n].styleID += 1
       }
 
       return newState

package.json

@@ -4,9 +4,9 @@
   "description": "Web app based on the mobile Patchwork app",
   "main": "index.js",
   "scripts": {
-    "start": "bankai client.js -p 8080",
-    "start:open": "bankai client.js -p 8080 --open",
-    "build": "bankai build client.js dist/",
+    "start": "bankai index.js -p 3000",
+    "start:open": "bankai index.js -p 3000 --open",
+    "build": "bankai build index.js dist/",
     "lint": "standard --verbose | snazzy",
     "test": "npm run lint"
   },

pages/grid.js

@@ -6,15 +6,15 @@ const stylesMap = require('../styles-map')
 module.exports = (state, prev, send) => {
   return html`
     <div>
-      <table>
+      <table class="grid">
         ${state.grid.map((row, m) => html`
           <tr>
             ${row.map((value, n) => {
               const { element, styleID } = state.grid[m][n]
 
               return html`
                 <td>
-                  <div class=${stylesMap[styleID]} onclick=${() => send('changeBorder', { m, n })}>
+                  <div class="box ${stylesMap[styleID]}" onclick=${() => send('changeBorder', { m, n })}>
                     ${element}
                   </div>
                 </td>
@@ -23,6 +23,10 @@ module.exports = (state, prev, send) => {
           </tr>
         `)}
       </table>
+
+      <div class="footer">
+        <a href="https://twitter.com/delaguilaluis">@delaguilaluis</a>
+      </div>
     </div>
   `
 }

styles-map.js

@@ -1,10 +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'
+  0: 'empty',
+  1: 'top-left',
+  2: 'top-right',
+  3: 'bottom-left',
+  4: 'bottom-right',
+  5: 'full'
 }

styles.css

@@ -1,10 +1,11 @@
-table {
-  border: 1px solid black;
+.grid {
+  border: 3px solid black;
+  margin: 30px auto;
 }
 
 .box {
   background-color: blue;
-  padding: 5px;
+  padding: 30px;
 }
 
 .box.empty {
@@ -30,3 +31,9 @@ table {
 .box.bottom-right {
   border-bottom-right-radius: 50%; 
 }
+
+.footer {
+  text-align: center;
+  font-family: sans-serif;
+  padding-top: 40px;
+}