Added token transition for when an other user moves a token

src/components/map/Map.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from "react";
+import React, { useRef, useEffect, useState, useContext } from "react";
 import { Box, Image } from "theme-ui";
 
 import ProxyToken from "../token/ProxyToken";
@@ -12,6 +12,8 @@ import { omit } from "../../helpers/shared";
 import useDataSource from "../../helpers/useDataSource";
 import MapInteraction from "./MapInteraction";
 
+import AuthContext from "../../contexts/AuthContext";
+
 import { mapSources as defaultMapSources } from "../../maps";
 
 const mapTokenProxyClassName = "map-token__proxy";
@@ -36,15 +38,16 @@ function Map({
   disabledTokens,
   loading,
 }) {
+  const { userId } = useContext(AuthContext);
   const mapSource = useDataSource(map, defaultMapSources);
 
   function handleProxyDragEnd(isOnMap, tokenState) {
     if (isOnMap && onMapTokenStateChange) {
-      onMapTokenStateChange(tokenState);
+      onMapTokenStateChange({ ...tokenState, lastEditedBy: userId });
     }
 
     if (!isOnMap && onMapTokenStateRemove) {
-      onMapTokenStateRemove(tokenState);
+      onMapTokenStateRemove({ ...tokenState, lastEditedBy: userId });
     }
   }
 

src/components/map/MapToken.js

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useContext } from "react";
 import { Box, Image } from "theme-ui";
 
 import TokenLabel from "../token/TokenLabel";
@@ -7,9 +7,12 @@ import TokenStatus from "../token/TokenStatus";
 import usePreventTouch from "../../helpers/usePreventTouch";
 import useDataSource from "../../helpers/useDataSource";
 
+import AuthContext from "../../contexts/AuthContext";
+
 import { tokenSources } from "../../tokens";
 
 function MapToken({ token, tokenState, tokenSizePercent, className }) {
+  const { userId } = useContext(AuthContext);
   const imageSource = useDataSource(token, tokenSources);
 
   const imageRef = useRef();
@@ -22,6 +25,10 @@ function MapToken({ token, tokenState, tokenSizePercent, className }) {
         transform: `translate(${tokenState.x * 100}%, ${tokenState.y * 100}%)`,
         width: "100%",
         height: "100%",
+        transition:
+          tokenState.lastEditedBy === userId
+            ? "initial"
+            : "transform 0.5s ease",
       }}
       sx={{
         position: "absolute",
@@ -51,6 +58,8 @@ function MapToken({ token, tokenState, tokenSizePercent, className }) {
               userSelect: "none",
               touchAction: "none",
               width: "100%",
+              // Fix image from being clipped when transitioning
+              willChange: "transform",
             }}
             src={imageSource}
             // pass id into the dom element which is then used by the ProxyToken