Added initial token label

Added token pop up menu Added token label Added better token positioning Split tokens into list and map variants Moved size input to more generic number input Changed game handler names to be more consistent
2020-04-13 00:24:03 +10:00
parent da0f80316c
commit cb93922d59
12 changed files with 388 additions and 123 deletions
--- a/src/components/NumberInput.js
+++ b/src/components/NumberInput.js
@@ -0,0 +1,59 @@
+import React from "react";
+import { Box, Flex, IconButton, Text } from "theme-ui";
+
+function NumberInput({ value, onChange, title, min, max }) {
+  return (
+    <Box>
+      <Text sx={{ textAlign: "center" }} variant="heading" as="h1">
+        {title}
+      </Text>
+      <Flex sx={{ alignItems: "center", justifyContent: "center" }}>
+        <IconButton
+          aria-label={`Decrease ${title}`}
+          title={`Decrease ${title}`}
+          onClick={() => value > min && onChange(value - 1)}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            fill="currentcolor"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path d="M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1z" />
+          </svg>
+        </IconButton>
+        <Text as="p" aria-label={`Current ${title}`}>
+          {value}
+        </Text>
+        <IconButton
+          aria-label={`Increase ${title}`}
+          title={`Increase ${title}`}
+          onClick={() => value < max && onChange(value + 1)}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            fill="currentcolor"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path d="M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z" />
+          </svg>
+        </IconButton>
+      </Flex>
+    </Box>
+  );
+}
+
+NumberInput.defaultProps = {
+  value: 1,
+  onChange: () => {},
+  title: "Number",
+  min: 0,
+  max: 10,
+};
+
+export default NumberInput;