feature(main page) - Add color picker

Use the tachyons framework to create a color picker and allow changing colors on the grid

catalogs/colors.js

@@ -0,0 +1,11 @@
+module.exports = [
+  'red',
+  'orange',
+  'gold',
+  'yellow',
+  'purple',
+  'pink',
+  'green',
+  'navy',
+  'blue'
+]

catalogs/styles.js

@@ -0,0 +1,14 @@
+'use strict'
+
+module.exports = [
+  'box empty',
+  'box full',
+  'box top-left',
+  'box top-right',
+  'box bottom-right',
+  'box bottom-left',
+  'flat-border top-left',
+  'flat-border top-right',
+  'flat-border bottom-right',
+  'flat-border bottom-left'
+]

index.js

@@ -3,49 +3,64 @@
 const choo = require('choo')
 const xtend = require('xtend')
 const css = require('sheetify')
-const stylesMap = require('./styles-map')
-
+const styles = require('./catalogs/styles')
 css('css-wipe')
+css('tachyons')
 css('./styles.css')
 const app = choo()
 
 const width = 8
 const height = 8
-const stylesMapLength = Object.keys(stylesMap).length
 const grid = []
+const stylesLength = Object.keys(styles).length
 
 for (let m = 0; m < height; m += 1) {
   const column = []
   for (let n = 0; n < width; n += 1) {
     column.push({
       element: '',
-      styleID: 0
+      styleID: 0,
+      colorID: 0
     })
   }
 
   grid.push(column)
 }
 
 app.model({
-  state: { grid },
+  state: {
+    grid,
+    colorPicker: {
+      selectionID: 0
+    }
+  },
   reducers: {
-    changeBorder: (state, { m, n }) => {
+    changeStyle: (state, { m, n, colorID }) => {
       const newState = xtend(state)
       const nextID = newState.grid[m][n].styleID + 1
 
-      if (nextID === stylesMapLength) {
+      if (nextID === stylesLength) {
         newState.grid[m][n].styleID = 0
       } else {
         newState.grid[m][n].styleID += 1
       }
 
+      newState.grid[m][n].colorID = state.colorPicker.selectionID
+
+      return newState
+    },
+
+    changeColor: (state, { selectionID }) => {
+      const newState = xtend(state)
+      newState.colorPicker.selectionID = selectionID
+
       return newState
     }
   }
 })
 
 app.router([
-  ['/', require('./pages/grid')]
+  ['/', require('./pages/main')]
 ])
 
 const tree = app.start()

package.json

@@ -20,6 +20,7 @@
     "choo": "^4.1.0",
     "css-wipe": "^4.2.2",
     "sheetify": "^6.0.1",
+    "tachyons": "^4.6.2",
     "xtend": "^4.0.1"
   },
   "devDependencies": {

pages/main.js

@@ -0,0 +1,60 @@
+'use strict'
+
+const html = require('choo/html')
+const styles = require('../catalogs/styles')
+const colors = require('../catalogs/colors')
+
+
+module.exports = (state, prev, send) => {
+  return html`
+    <div>
+      <div class="header">
+        <h2>Go ahead, click it!</h2>
+      </div>
+
+      <table class="grid">
+        ${state.grid.map((row, m) => html`
+          <tr>
+            ${row.map((value, n) => {
+              const { element, styleID, colorID } = state.grid[m][n]
+              const color = colors[colorID]
+
+              return html`
+                <td>
+                  <div class="bg-${color} b--${color} ${styles[styleID]}" onclick=${changeStyle(m, n)}>
+                    ${element}
+                  </div>
+                </td>
+              `
+            })}
+          </tr>
+        `)}
+      </table>
+
+      <table class="color-picker">
+        <tr>
+          ${colors.map((color, colorID) => {
+            const border = colorID === state.colorPicker.selectionID ? 'ba bw1 b--gray' : ''
+            return html`
+              <td>
+                <div class="fl w-10 color-box bg-${color} ${border}" onclick=${changeColor(colorID)}></div>
+              </td>
+            `
+          })}
+        </tr>
+      </table>
+
+      <div class="footer">
+        <iframe src="https://ghbtns.com/github-btn.html?user=delaguilaluis&repo=patchwork&type=star&count=true" frameborder="0" scrolling="0" width="80px" height="20px"></iframe>
+      </div>
+    </div>
+  `
+
+  function changeStyle (m, n) {
+    return () => send('changeStyle', { m, n })
+  }
+
+  function changeColor (colorID) {
+    return () => send('changeColor', { selectionID: colorID })
+  }
+}

styles.css

@@ -3,11 +3,18 @@
   margin: 20px auto;
 }
 
+.color-picker {
+  margin: auto;
+}
+
 .box {
-  background-color: blue;
   padding: 25px;
 }
 
+.color-box {
+  padding: 15px;
+}
+
 .flat-border {
   background-color: transparent;
   padding: 0;
@@ -38,22 +45,26 @@
 }
 
 .flat-border.top-left {
-  border-bottom: 50px solid blue;
+  border-bottom-width: 50px;
+  border-bottom-style: solid;
   border-left: 50px solid transparent; 
 }
 
 .flat-border.top-right {
-  border-bottom: 50px solid blue;
+  border-bottom-width: 50px;
+  border-bottom-style: solid;
 	border-right: 50px solid transparent;
 }
 
 .flat-border.bottom-right {
-  border-top: 50px solid blue;
+  border-top-width: 50px;
+  border-top-style: solid;
 	border-right: 50px solid transparent;
 }
 
 .flat-border.bottom-left {
-  border-top: 50px solid blue;
+  border-top-width: 50px;
+  border-top-style: solid;
 	border-left: 50px solid transparent;
 }