Removed single character limit for token labels and added sizing for token size
This commit is contained in:
parent
62476ce43e
commit
542388a67f
@ -66,10 +66,8 @@ function MapToken({ token, tokenState, tokenSizePercent, className }) {
|
||||
data-id={tokenState.id}
|
||||
ref={imageRef}
|
||||
/>
|
||||
{tokenState.statuses && (
|
||||
<TokenStatus statuses={tokenState.statuses} />
|
||||
)}
|
||||
{tokenState.label && <TokenLabel label={tokenState.label} />}
|
||||
{tokenState.statuses && <TokenStatus token={tokenState} />}
|
||||
{tokenState.label && <TokenLabel token={tokenState} />}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
@ -176,10 +176,10 @@ function ProxyToken({
|
||||
}}
|
||||
/>
|
||||
{tokens[tokenId] && tokens[tokenId].statuses && (
|
||||
<TokenStatus statuses={tokens[tokenId].statuses} />
|
||||
<TokenStatus token={tokens[tokenId]} />
|
||||
)}
|
||||
{tokens[tokenId] && tokens[tokenId].label && (
|
||||
<TokenLabel label={tokens[tokenId].label} />
|
||||
<TokenLabel token={tokens[tokenId]} />
|
||||
)}
|
||||
</Box>
|
||||
</Box>,
|
||||
|
@ -1,48 +1,57 @@
|
||||
import React from "react";
|
||||
import { Image, Box, Text } from "theme-ui";
|
||||
import { Box, Text } from "theme-ui";
|
||||
|
||||
import tokenLabel from "../../images/TokenLabel.png";
|
||||
|
||||
function TokenLabel({ label }) {
|
||||
function TokenLabel({ token }) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
transform: "scale(0.3) translate(0, 20%)",
|
||||
transform: `scale(${0.3 / token.size}) translate(0, 20%)`,
|
||||
transformOrigin: "bottom center",
|
||||
pointerEvents: "none",
|
||||
width: "100%",
|
||||
display: "flex", // Set display to flex to fix height being calculated wrong
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Image sx={{ width: "100%" }} src={tokenLabel} />
|
||||
{/* Use SVG so text is scaled with token size */}
|
||||
<svg
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
}}
|
||||
viewBox="0 0 100 100"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<foreignObject width="100%" height="100%">
|
||||
<Text
|
||||
as="p"
|
||||
variant="heading"
|
||||
sx={{
|
||||
// This value is actually 66%
|
||||
fontSize: "66px",
|
||||
width: "100px",
|
||||
height: "100px",
|
||||
textAlign: "center",
|
||||
verticalAlign: "middle",
|
||||
lineHeight: 1.4,
|
||||
}}
|
||||
color="hsl(210, 50%, 96%)"
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
<foreignObject
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<Box sx={{ width: "100%", height: "100%", position: "relative" }}>
|
||||
<Text
|
||||
as="p"
|
||||
variant="heading"
|
||||
sx={{
|
||||
fontSize: "66px",
|
||||
textAlign: "center",
|
||||
verticalAlign: "middle",
|
||||
lineHeight: 1.4,
|
||||
whiteSpace: "nowrap",
|
||||
minWidth: "100%",
|
||||
display: "inline-block",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
borderRadius: "66px",
|
||||
border: "2px solid",
|
||||
borderColor: "muted",
|
||||
}}
|
||||
bg="overlay"
|
||||
px={4}
|
||||
>
|
||||
{token.label}
|
||||
</Text>
|
||||
</Box>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
</Box>
|
||||
|
@ -42,16 +42,13 @@ function TokenMenu({ tokenClassName, onTokenChange, tokens, disabledTokens }) {
|
||||
const [tokenMaxSize, setTokenMaxSize] = useState(defaultTokenMaxSize);
|
||||
|
||||
function handleLabelChange(event) {
|
||||
// Slice to remove Label: text
|
||||
const label = event.target.value;
|
||||
if (label.length <= 1) {
|
||||
setCurrentToken((prevToken) => ({
|
||||
...prevToken,
|
||||
label: label,
|
||||
}));
|
||||
setCurrentToken((prevToken) => ({
|
||||
...prevToken,
|
||||
label: label,
|
||||
}));
|
||||
|
||||
onTokenChange({ ...currentToken, label: label });
|
||||
}
|
||||
onTokenChange({ ...currentToken, label: label });
|
||||
}
|
||||
|
||||
function handleStatusChange(status) {
|
||||
@ -230,7 +227,7 @@ function TokenMenu({ tokenClassName, onTokenChange, tokens, disabledTokens }) {
|
||||
Size:
|
||||
</Text>
|
||||
<Slider
|
||||
value={currentToken.size}
|
||||
value={currentToken.size || 1}
|
||||
onChange={handleSizeChange}
|
||||
step={1}
|
||||
min={1}
|
||||
|
@ -3,7 +3,7 @@ import { Box } from "theme-ui";
|
||||
|
||||
import colors from "../../helpers/colors";
|
||||
|
||||
function TokenStatus({ statuses }) {
|
||||
function TokenStatus({ token }) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@ -13,7 +13,7 @@ function TokenStatus({ statuses }) {
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
>
|
||||
{statuses.map((status, index) => (
|
||||
{token.statuses.map((status, index) => (
|
||||
<Box
|
||||
key={status}
|
||||
sx={{
|
||||
@ -21,7 +21,7 @@ function TokenStatus({ statuses }) {
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
opacity: 0.8,
|
||||
transform: `scale(${1 - index / 10})`,
|
||||
transform: `scale(${1 - index / 10 / token.size})`,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
@ -35,7 +35,7 @@ function TokenStatus({ statuses }) {
|
||||
cy={50}
|
||||
fill="none"
|
||||
stroke={colors[status]}
|
||||
strokeWidth={4}
|
||||
strokeWidth={4 / token.size}
|
||||
/>
|
||||
</svg>
|
||||
</Box>
|
||||
|
Loading…
Reference in New Issue
Block a user