90 lines
2.4 KiB
JavaScript
90 lines
2.4 KiB
JavaScript
import React, { useContext } from "react";
|
|
import { Box, Flex } from "theme-ui";
|
|
import shortid from "shortid";
|
|
import SimpleBar from "simplebar-react";
|
|
|
|
import ListToken from "./ListToken";
|
|
import ProxyToken from "./ProxyToken";
|
|
|
|
import SelectTokensButton from "./SelectTokensButton";
|
|
|
|
import { fromEntries } from "../../helpers/shared";
|
|
import useSetting from "../../helpers/useSetting";
|
|
|
|
import AuthContext from "../../contexts/AuthContext";
|
|
import TokenDataContext from "../../contexts/TokenDataContext";
|
|
|
|
const listTokenClassName = "list-token";
|
|
|
|
function Tokens({ onMapTokenStateCreate }) {
|
|
const { userId } = useContext(AuthContext);
|
|
const { ownedTokens, tokens, updateToken } = useContext(TokenDataContext);
|
|
const [fullScreen] = useSetting("map.fullScreen");
|
|
|
|
function handleProxyDragEnd(isOnMap, token) {
|
|
if (isOnMap && onMapTokenStateCreate) {
|
|
// Create a token state from the dragged token
|
|
onMapTokenStateCreate({
|
|
id: shortid.generate(),
|
|
tokenId: token.id,
|
|
owner: userId,
|
|
size: token.defaultSize,
|
|
label: "",
|
|
statuses: [],
|
|
x: token.x,
|
|
y: token.y,
|
|
lastModifiedBy: userId,
|
|
lastModified: Date.now(),
|
|
rotation: 0,
|
|
locked: false,
|
|
visible: true,
|
|
});
|
|
// Update last used for cache invalidation
|
|
updateToken(token.id, { lastUsed: Date.now() });
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Box
|
|
sx={{
|
|
height: "100%",
|
|
width: "80px",
|
|
minWidth: "80px",
|
|
overflow: "hidden",
|
|
display: fullScreen ? "none" : "block",
|
|
}}
|
|
>
|
|
<SimpleBar style={{ height: "calc(100% - 48px)", overflowX: "hidden" }}>
|
|
{ownedTokens
|
|
.filter((token) => !token.hideInSidebar)
|
|
.map((token) => (
|
|
<ListToken
|
|
key={token.id}
|
|
token={token}
|
|
className={listTokenClassName}
|
|
/>
|
|
))}
|
|
</SimpleBar>
|
|
<Flex
|
|
bg="muted"
|
|
sx={{
|
|
justifyContent: "center",
|
|
height: "48px",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<SelectTokensButton />
|
|
</Flex>
|
|
</Box>
|
|
<ProxyToken
|
|
tokenClassName={listTokenClassName}
|
|
onProxyDragEnd={handleProxyDragEnd}
|
|
tokens={fromEntries(tokens.map((token) => [token.id, token]))}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Tokens;
|