finish the prototype

1 files changed, 44 insertions, 4 deletions

diff --git a/src/Grid.tsx b/src/Grid.tsx
index 65cf2ec..f68c550 100644
--- a/src/Grid.tsx
+++ b/src/Grid.tsx
@@ -1,17 +1,57 @@
 import React from 'react';
 import 'typeface-roboto';
 import MGrid from '@material-ui/core/Grid';
+import orange from '@material-ui/core/colors/orange';
+import blue from '@material-ui/core/colors/blue';
+import { Theme, withStyles, StyleRules } from '@material-ui/core/styles';
+import Color from 'color';
 
+const styles = (theme: Theme): StyleRules => ({
+    gridRow: {
+        height: 24,
+        textAlign: 'center'
+    },
+    gridCell: {
+        height: 20,
+        width: 20,
+        margin: 2,
+        display: 'inline-block'
+    }
+});
 
 interface GridProps {
-    classes: {}
+    classes: {
+        gridRow: string,
+        gridCell: string
+    },
+    data: {d: number[], col: number}[][]
 }
 
 class Grid extends React.Component<GridProps> {
+    static getColor(s: {d: number[], col: number}) {
+        const color = [orange[300], blue[300]];
+        let {d, col} = s;
+        return Color(color[col]).darken(Math.min(d[col] / 10, 0.6)).hex();
+    }
     render() {
-        const { classes } = this.props;
-        return (<div></div>);
+        const { classes, data } = this.props;
+        return (
+            <div style={{margin: '0 auto'}}>
+            {
+                data.map((row, i) => (
+                    <div key={i} className={classes.gridRow}>
+                    {
+                        row.map((cell, j) => (
+                            <div key={j} className={classes.gridCell} style={{backgroundColor: Grid.getColor(cell)}}>
+                            </div>
+                        ))
+                    }
+                    </div>
+                ))
+            }
+            </div>
+        );
     }
 }
 
-export default Grid;
+export default withStyles(styles)(Grid);