...

3 files changed, 45 insertions, 6 deletions

diff --git a/src/Grid.css b/src/Grid.css
index a9c7802..620d114 100644
--- a/src/Grid.css
+++ b/src/Grid.css
@@ -10,26 +10,40 @@ div.grid {
     transition: background-color 0.1s ease-out;
 }
 
-.gridCell > div > div {
+.gridCell div div div {
     height: 20px;
     width: 20px;
     margin: 2px;
     display: inline-block;
 }
 
-.smallGridCell > div > div {
+.gridCell  div div {
+    height: 24px;
+    width: 24px;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.smallGridCell div div div {
     height: 15px;
     width: 15px;
     margin: 1px;
     display: inline-block;
 }
 
-.gridRow > div {
+.smallGridCell div div {
+    height: 17px;
+    width: 17px;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.gridRow div {
     height: 24px;
     text-align: center;
 }
 
-.smallGridRow > div {
+.smallGridRow div {
     height: 17px;
     text-align: center;
 }
diff --git a/src/Grid.tsx b/src/Grid.tsx
index 995e59f..1bfcaee 100644
--- a/src/Grid.tsx
+++ b/src/Grid.tsx
@@ -14,6 +14,8 @@ const styles = (theme: Theme): StyleRules => ({
 interface GridProps {
     classes: {
     },
+    onClickNode: (i: number, j: number) => void
+    onHoverNode: (i: number, j: number) => void
     data: {d: number[], col: number}[][]
 }
 
@@ -29,7 +31,7 @@ class Grid extends React.Component<GridProps> {
         return getNodeColor(s.d[s.col], s.col);
     }
     render() {
-        const { classes, data } = this.props;
+        const { classes, data, onClickNode, onHoverNode } = this.props;
         const { gr, gc } = data.length <= 20 ?
             { gr: 'gridRow', gc: 'gridCell' } :
             { gr: 'smallGridRow', gc: 'smallGridCell' };
@@ -40,9 +42,16 @@ class Grid extends React.Component<GridProps> {
                     <div key={i}>
                     {
                         row.map((cell, j) => (
+                            <div
+                                onClick={event => onClickNode(i, j)}
+                                onMouseOver={event => {
+                                    if (event.buttons === 1 || event.buttons === 3)
+                                        onHoverNode(i, j);
+                                }}>
                             <div key={j}
                                 style={{backgroundColor: Grid.getColor(cell)}}>
                             </div>
+                            </div>
                         ))
                     }
                     </div>
diff --git a/src/Snow.tsx b/src/Snow.tsx
index 89c5073..4bba422 100644
--- a/src/Snow.tsx
+++ b/src/Snow.tsx
@@ -278,13 +278,24 @@ class Snow extends React.Component<SnowProps> {
         });
     }
 
+    flipNode(i: number, j: number) {
+        let s = this.state.colorMatrix[i][j];
+        const n = this.config.n;
+        s.col = 1 - s.col;
+        this.setNodeState(n, i * n + j, s);
+    }
+
     render() {
         const { classes } = this.props;
 
         return (
             <MGrid container spacing={16} style={{minWidth: 600}}>
                 <MGrid item lg={6} xs={12} className={classes.grid}>
-                    <Grid data={this.state.colorMatrix} />
+                    <Grid
+                        data={this.state.colorMatrix}
+                        onClickNode={(i: number, j: number) => this.flipNode(i, j)}
+                        onHoverNode={(i: number, j: number) => this.flipNode(i, j)}
+                    />
                     <Line data={() => {
                         let datasets = this.state.dcnts.map((dd, c) => dd.map((line, i) => {
                                 const base = getNodeColor(watchedD[i], c);
@@ -304,6 +315,11 @@ class Snow extends React.Component<SnowProps> {
                     options={{ scales: { yAxes: [{ ticks: {min: -this.state.N, max: this.state.N}}]}}}/>
                 </MGrid>
                 <MGrid item lg={4} xs={12}>
+                    <p>
+                        Try to click or move the mouse when clicked to flip the
+                        color of squares. Are you able to prevent them from
+                        going to a single color?
+                    </p>
                     <Table>
                     <TableBody>
                     <TableRow>