diff --git a/src/components/ProxyToken.js b/src/components/ProxyToken.js
index 27722ad..1f0787a 100644
--- a/src/components/ProxyToken.js
+++ b/src/components/ProxyToken.js
@@ -4,12 +4,14 @@ import { Image, Box } from "theme-ui";
import interact from "interactjs";
import usePortal from "../helpers/usePortal";
+import TokenLabel from "./TokenLabel";
function ProxyToken({ tokenClassName, onProxyDragEnd }) {
const proxyContainer = usePortal("root");
const [imageSource, setImageSource] = useState("");
- const imageRef = useRef();
+ const [label, setLabel] = useState("");
+ const proxyRef = useRef();
const proxyOnMap = useRef(false);
@@ -19,10 +21,11 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
start: (event) => {
let target = event.target;
// Hide the token and copy it's image to the proxy
- target.style.opacity = "0.25";
+ target.parentElement.style.opacity = "0.25";
setImageSource(target.src);
+ setLabel(target.dataset.label || "");
- let proxy = imageRef.current;
+ let proxy = proxyRef.current;
if (proxy) {
// Find and set the initial offset of the token to the proxy
const proxyRect = proxy.getBoundingClientRect();
@@ -40,7 +43,7 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
},
move: (event) => {
- let proxy = imageRef.current;
+ let proxy = proxyRef.current;
// Move the proxy based off of the movment of the token
if (proxy) {
// keep the dragged position in the data-x/data-y attributes
@@ -69,7 +72,7 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
end: (event) => {
let target = event.target;
- let proxy = imageRef.current;
+ let proxy = proxyRef.current;
if (proxy) {
if (onProxyDragEnd) {
// TODO: look at cleaning this up with a props instead of
@@ -103,7 +106,7 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
}
// Show the token
- target.style.opacity = "1";
+ target.parentElement.style.opacity = "1";
setImageSource("");
},
},
@@ -126,15 +129,20 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
right: 0,
}}
>
-
+
+
+ {label && }
+
,
proxyContainer
);