1 files changed, 51 insertions, 0 deletions
diff --git a/app/client/common/buttonGrid.component.js b/app/client/common/buttonGrid.component.js
new file mode 100644
index 0000000..6c7c105
--- /dev/null
+++ b/app/client/common/buttonGrid.component.js
@@ -0,0 +1,51 @@
+import { h, Component } from 'preact'
+
+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>{" "}</th>
+          {X.map(x => (
+            <th className={x === _x && 'bold'}>{x}</th>
+          ))}
+        </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>
+    )
+  }
+}