feat(canvas): change field render to canvas

This PR changes the field rendering to use canvas instead of a table.

It basically adds a `draw-square` and triggers the rendering when the component mounts.

Closes weslleyaraujo#21.

src/assets/js/components/field.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import classNames from 'classnames';
+import drawSquare from '../helpers/draw-square';
 
 export default class Field extends Component {
 
@@ -10,6 +11,11 @@ export default class Field extends Component {
   }
 
   static defaultProps = {
+    pixel: 10,
+    colors: {
+      active: '#92E56C',
+      inactive: '#1D3507',
+    },
     row: {
       lines: []
     }
@@ -19,28 +25,18 @@ export default class Field extends Component {
     return this.props.row !== props.row;
   }
 
+  componentDidMount() {
+    let canvas = this.refs.container;
+    let {pixel, row, colors} = this.props;
+
+    drawSquare({pixel, canvas, row, colors});
+  }
+
   render = () => {
+    let size = this.props.pixel * this.props.row.get('lines').size;
+
     return (
-      <table className='c-field'>
-        <tbody>
-        { this.props.row.get('lines').map((row, i) => {
-          return (<tr key={i} className='c-field__line'>
-            {
-              row.map((line, x) => {
-                return (<td
-                  key={x}
-                  className={classNames({
-                    'c-field__item': true,
-                    'is-active': line.get('active')
-                  })}
-                >
-                </td>)
-              })
-            }
-          </tr>)
-      }) }
-      </tbody>
-    </table>
-    )
+      <canvas ref='container' width={size} height={size}></canvas>
+    );
   }
 }

src/assets/js/helpers/draw-square.js

@@ -0,0 +1,14 @@
+export default function({pixel, canvas, row, colors}) {
+  let lines = row.get('lines');
+  let context = canvas.getContext('2d');
+
+  lines.forEach((line, x) => line.forEach((item, y) => {
+    context.fillStyle = item.get('active') ? colors.active : colors.inactive;
+    context.fillRect(
+      x * pixel,
+      y * pixel,
+      pixel,
+      pixel
+    );
+  }));
+};