58 lines
1.5 KiB
JavaScript
58 lines
1.5 KiB
JavaScript
|
import React, { useRef } from "react";
|
||
|
|
import { Box, Image } from "theme-ui";
|
||
|
|
|
||
|
|
import TokenLabel from "./TokenLabel";
|
||
|
|
|
||
|
|
import usePreventTouch from "../helpers/usePreventTouch";
|
||
|
|
|
||
|
|
function MapToken({ token, tokenSizePercent, className }) {
|
||
|
|
const imageRef = useRef();
|
||
|
|
// Stop touch to prevent 3d touch gesutre on iOS
|
||
|
|
usePreventTouch(imageRef);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
style={{
|
||
|
|
transform: `translate(${token.x * 100}%, ${token.y * 100}%)`,
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
}}
|
||
|
|
sx={{
|
||
|
|
position: "absolute",
|
||
|
|
pointerEvents: "none",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Box
|
||
|
|
style={{
|
||
|
|
width: `${tokenSizePercent * (token.size || 1)}%`,
|
||
|
|
}}
|
||
|
|
sx={{
|
||
|
|
position: "absolute",
|
||
|
|
pointerEvents: "all",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Box sx={{ position: "absolute", display: "flex", width: "100%" }}>
|
||
|
|
<Image
|
||
|
|
className={className}
|
||
|
|
sx={{
|
||
|
|
userSelect: "none",
|
||
|
|
touchAction: "none",
|
||
|
|
width: "100%",
|
||
|
|
position: "absolute", // Fix image stretch in safari
|
||
|
|
}}
|
||
|
|
src={token.image}
|
||
|
|
// pass data into the dom element used to pass state to the ProxyToken
|
||
|
|
data-id={token.id}
|
||
|
|
data-size={token.size}
|
||
|
|
data-label={token.label}
|
||
|
|
ref={imageRef}
|
||
|
|
/>
|
||
|
|
{token.label && <TokenLabel label={token.label} />}
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default MapToken;
|