1 files changed, 46 insertions, 27 deletions
diff --git a/app/client/common/buttonGrid.component.js b/app/client/common/buttonGrid.component.js
index 4b86d62..6c7c105 100644
--- a/app/client/common/buttonGrid.component.js
+++ b/app/client/common/buttonGrid.component.js
@@ -1,32 +1,51 @@
 import { h, Component } from 'preact'
 
-export default function ButtonGrid(props) {
-  const max = props.max || Infinity
-  return (
-    <table className='buttonGrid'>
-      <tr className='row'>
-        <th>{" "}</th>
-        {props.x.map(x => (
-          <th>{x}</th>
-        ))}
-      </tr>          
-      {props.y.map(y => (
+export default class ButtonGrid extends Component {
+  state = {
+    x: 0, y: 0,
+  }
+
+  render() {
+    const {
+      x: _x,
+      y: _y,
+    } = this.state
+    const {
+      x: X,
+      y: Y,
+      max = Infinity,
+      onClick,
+      onHover,
+    } = this.props
+    return (
+      <table className='buttonGrid'>
         <tr className='row'>
-          <th>{y}</th>
-          {props.x.map(x => (
-            <td>
-              {x * y > max ? " " :
-                <button
-                  onClick={() => props.onClick(x, y)}
-                  onMouseEnter={() => props.onHover(x, y)}
-                >
-                  {" "}
-                </button>
-              }
-            </td>
+          <th>{" "}</th>
+          {X.map(x => (
+            <th className={x === _x && 'bold'}>{x}</th>
           ))}
-        </tr>
-      ))}
-    </table>
-  )
+        </tr>          
+        {Y.map(y => (
+          <tr className='row'>
+            <th className={y === _y && 'bold'}>{y}</th>
+            {X.map(x => (
+              <td>
+                {x * y > max ? " " :
+                  <button
+                    onClick={() => onClick(x, y)}
+                    onMouseEnter={() => {
+                      this.setState({ x, y })
+                      onHover(x, y)
+                    }}
+                  >
+                    {" "}
+                  </button>
+                }
+              </td>
+            ))}
+          </tr>
+        ))}
+      </table>
+    )
+  }
 }