Added token images

src/components/Tokens.js

@@ -1,8 +1,32 @@
 import React from "react";
-import { Box } from "theme-ui";
+import { Flex, Image } from "theme-ui";
+
+import * as tokens from "../tokens";
+
+// import Token from "./Token";
 
 function Tokens() {
-  return <Box bg="background" sx={{ width: "128px", minWidth: "128px" }} />;
+  return (
+    <Flex
+      bg="background"
+      sx={{
+        width: "80px",
+        minWidth: "80px",
+        flexDirection: "column",
+        overflow: "auto"
+      }}
+      px={2}
+    >
+      {Object.entries(tokens).map(([id, image]) => (
+        <Image
+          p={2}
+          key={id}
+          src={image}
+          sx={{ width: "64px", height: "64px" }}
+        />
+      ))}
+    </Flex>
+  );
 }
 
 export default Tokens;

src/routes/Game.js

@@ -85,7 +85,9 @@ function Game() {
       >
         <AddMapButton handleMapChange={handleMapChange} />
       </Box>
-      <Flex sx={{ justifyContent: "space-between", flexGrow: 1 }}>
+      <Flex
+        sx={{ justifyContent: "space-between", flexGrow: 1, height: "100%" }}
+      >
         <Party streams={streams} localStreamId={peerId} />
         <Map imageSource={imageSource} />
         <Tokens />

src/tokens/index.js

@@ -0,0 +1,43 @@
+import axes from "./Axes.png";
+import bird from "./Bird.png";
+import book from "./Book.png";
+import crown from "./Crown.png";
+import dragon from "./Dragon.png";
+import eye from "./Eye.png";
+import fist from "./Fist.png";
+import horse from "./Horse.png";
+import leaf from "./Leaf.png";
+import lion from "./Lion.png";
+import money from "./Money.png";
+import moon from "./Moon.png";
+import potion from "./Potion.png";
+import shield from "./Shield.png";
+import skull from "./Skull.png";
+import snake from "./Snake.png";
+import sun from "./Sun.png";
+import swords from "./Swords.png";
+import tree from "./Tree.png";
+import triangle from "./Triangle.png";
+
+export {
+  axes,
+  bird,
+  book,
+  crown,
+  dragon,
+  eye,
+  fist,
+  horse,
+  leaf,
+  lion,
+  money,
+  moon,
+  potion,
+  shield,
+  skull,
+  snake,
+  sun,
+  swords,
+  tree,
+  triangle
+};