Moved maps and tokens to a data source model

This will allow for easier custom token support as well as changing default tokens

src/components/map/Map.js

@@ -9,6 +9,8 @@ import MapDrawing from "./MapDrawing";
 import MapControls from "./MapControls";
 
 import { omit } from "../../helpers/shared";
+import useDataSource from "../../helpers/useDataSource";
+import { mapSources as defaultMapSources } from "../../maps";
 
 const mapTokenProxyClassName = "map-token__proxy";
 const mapTokenMenuClassName = "map-token__menu";
@@ -27,6 +29,8 @@ function Map({
   onMapDrawUndo,
   onMapDrawRedo,
 }) {
+  const mapSource = useDataSource(map, defaultMapSources);
+
   function handleProxyDragEnd(isOnMap, token) {
     if (isOnMap && onMapTokenChange) {
       onMapTokenChange(token);
@@ -219,7 +223,7 @@ function Map({
           userSelect: "none",
           touchAction: "none",
         }}
-        src={map && map.source}
+        src={mapSource}
       />
     </Box>
   );
@@ -323,10 +327,12 @@ function Map({
       <ProxyToken
         tokenClassName={mapTokenProxyClassName}
         onProxyDragEnd={handleProxyDragEnd}
+        tokens={mapState && mapState.tokens}
       />
       <TokenMenu
         tokenClassName={mapTokenMenuClassName}
         onTokenChange={onMapTokenChange}
+        tokens={mapState && mapState.tokens}
       />
     </>
   );

src/components/map/MapTile.js

@@ -7,6 +7,9 @@ import RemoveMapIcon from "../../icons/RemoveMapIcon";
 import ResetMapIcon from "../../icons/ResetMapIcon";
 import ExpandMoreDotIcon from "../../icons/ExpandMoreDotIcon";
 
+import useDataSource from "../../helpers/useDataSource";
+import { mapSources as defaultMapSources } from "../../maps";
+
 function MapTile({
   map,
   isSelected,
@@ -15,8 +18,10 @@ function MapTile({
   onMapReset,
   onSubmit,
 }) {
+  const mapSource = useDataSource(map, defaultMapSources);
   const [isMapTileMenuOpen, setIsTileMenuOpen] = useState(false);
   const [hasMapState, setHasMapState] = useState(false);
+  const isDefault = map.type === "default";
 
   useEffect(() => {
     async function checkForMapState() {
@@ -28,7 +33,6 @@ function MapTile({
         setHasMapState(true);
       }
     }
-
     checkForMapState();
   }, [map]);
 
@@ -120,18 +124,18 @@ function MapTile({
     >
       <UIImage
         sx={{ width: "100%", height: "100%", objectFit: "contain" }}
-        src={map.source}
+        src={mapSource}
       />
       {/* Show expand button only if both reset and remove is available */}
       {isSelected && (
         <Box sx={{ position: "absolute", top: 0, right: 0 }}>
-          {map.default && hasMapState && resetButton(map)}
-          {!map.default && hasMapState && !isMapTileMenuOpen && expandButton}
-          {!map.default && !hasMapState && removeButton(map)}
+          {isDefault && hasMapState && resetButton(map)}
+          {!isDefault && hasMapState && !isMapTileMenuOpen && expandButton}
+          {!isDefault && !hasMapState && removeButton(map)}
         </Box>
       )}
       {/* Tile menu for two actions */}
-      {!map.default && isMapTileMenuOpen && isSelected && (
+      {!isDefault && isMapTileMenuOpen && isSelected && (
         <Flex
           sx={{
             position: "absolute",
@@ -145,7 +149,7 @@ function MapTile({
           bg="muted"
           onClick={() => setIsTileMenuOpen(false)}
         >
-          {!map.default && removeButton(map)}
+          {!isDefault && removeButton(map)}
           {hasMapState && resetButton(map)}
         </Flex>
       )}

src/components/map/MapToken.js

@@ -5,8 +5,13 @@ import TokenLabel from "../token/TokenLabel";
 import TokenStatus from "../token/TokenStatus";
 
 import usePreventTouch from "../../helpers/usePreventTouch";
+import useDataSource from "../../helpers/useDataSource";
+
+import { tokenSources } from "../../tokens";
 
 function MapToken({ token, tokenSizePercent, className }) {
+  const imageSource = useDataSource(token, tokenSources);
+
   const imageRef = useRef();
   // Stop touch to prevent 3d touch gesutre on iOS
   usePreventTouch(imageRef);
@@ -47,15 +52,12 @@ function MapToken({ token, tokenSizePercent, className }) {
               touchAction: "none",
               width: "100%",
             }}
-            src={token.image}
-            // pass data into the dom element used to pass state to the ProxyToken
+            src={imageSource}
+            // pass id into the dom element which is then used by the ProxyToken
             data-id={token.id}
-            data-size={token.size}
-            data-label={token.label}
-            data-status={token.status}
             ref={imageRef}
           />
-          {token.status && <TokenStatus statuses={token.status.split(" ")} />}
+          {token.statuses && <TokenStatus statuses={token.statuses} />}
           {token.label && <TokenLabel label={token.label} />}
         </Box>
       </Box>