Added token dragging from side bar into map view

src/components/Map.js

@@ -1,9 +1,36 @@
 import React from "react";
-import { Image, Flex } from "theme-ui";
+import { Image, Flex, Box } from "theme-ui";
 
-function Map({ imageSource }) {
+import Token from "../components/Token";
+
+function Map({ imageSource, tokens }) {
   return (
-    <Flex sx={{ justifyContent: "center", flexGrow: 1 }} bg="background">
+    <Flex
+      className="map"
+      sx={{ justifyContent: "center", flexGrow: 1 }}
+      bg="background"
+    >
+      <Box
+        sx={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          userSelect: "none"
+        }}
+      >
+        {Object.values(tokens).map(token => (
+          <Box
+            key={token.id}
+            sx={{
+              position: "absolute",
+              transform: `translate(${token.x}px, ${token.y}px)`
+            }}
+          >
+            <Token image={token.image} className="map-token" />
+          </Box>
+        ))}
+      </Box>
       <Image src={imageSource} sx={{ objectFit: "contain" }} />
     </Flex>
   );