Refactored map tile and added badges option
This commit is contained in:
parent
3215efffa3
commit
02ae9dc765
122
src/components/Tile.js
Normal file
122
src/components/Tile.js
Normal file
@ -0,0 +1,122 @@
|
||||
import React from "react";
|
||||
import { Flex, Image as UIImage, IconButton, Box, Text, Badge } from "theme-ui";
|
||||
|
||||
import EditTileIcon from "../icons/EditTileIcon";
|
||||
|
||||
function Tile({
|
||||
src,
|
||||
title,
|
||||
isSelected,
|
||||
onSelect,
|
||||
onEdit,
|
||||
onDoubleClick,
|
||||
large,
|
||||
canEdit,
|
||||
badges,
|
||||
editTitle,
|
||||
}) {
|
||||
return (
|
||||
<Flex
|
||||
sx={{
|
||||
position: "relative",
|
||||
width: large ? "48%" : "32%",
|
||||
height: "0",
|
||||
paddingTop: large ? "48%" : "32%",
|
||||
borderRadius: "4px",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
cursor: "pointer",
|
||||
overflow: "hidden",
|
||||
userSelect: "none",
|
||||
}}
|
||||
my={1}
|
||||
mx={`${large ? 1 : 2 / 3}%`}
|
||||
bg="muted"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSelect();
|
||||
}}
|
||||
onDoubleClick={(e) => {
|
||||
if (canEdit) {
|
||||
onDoubleClick(e);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<UIImage
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "contain",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
}}
|
||||
src={src}
|
||||
/>
|
||||
<Flex
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background:
|
||||
"linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.65) 100%);",
|
||||
alignItems: "flex-end",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
p={2}
|
||||
>
|
||||
<Text
|
||||
as="p"
|
||||
variant="heading"
|
||||
color="hsl(210, 50%, 96%)"
|
||||
sx={{ textAlign: "center" }}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
borderColor: "primary",
|
||||
borderStyle: isSelected ? "solid" : "none",
|
||||
borderWidth: "4px",
|
||||
pointerEvents: "none",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ position: "absolute", top: 0, left: 0 }}>
|
||||
{badges.map((badge, i) => (
|
||||
<Badge m={2} key={i} bg="overlay">
|
||||
{badge}
|
||||
</Badge>
|
||||
))}
|
||||
</Box>
|
||||
{canEdit && (
|
||||
<Box sx={{ position: "absolute", top: 0, right: 0 }}>
|
||||
<IconButton
|
||||
aria-label={editTitle}
|
||||
title={editTitle}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onEdit();
|
||||
}}
|
||||
bg="overlay"
|
||||
sx={{ borderRadius: "50%" }}
|
||||
m={2}
|
||||
>
|
||||
<EditTileIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Tile;
|
@ -1,7 +1,6 @@
|
||||
import React from "react";
|
||||
import { Flex, Image as UIImage, IconButton, Box, Text } from "theme-ui";
|
||||
|
||||
import EditMapIcon from "../../icons/EditMapIcon";
|
||||
import Tile from "../Tile";
|
||||
|
||||
import useDataSource from "../../helpers/useDataSource";
|
||||
import { mapSources as defaultMapSources, unknownSource } from "../../maps";
|
||||
@ -14,6 +13,7 @@ function MapTile({
|
||||
onDone,
|
||||
large,
|
||||
canEdit,
|
||||
badges,
|
||||
}) {
|
||||
const isDefault = map.type === "default";
|
||||
const mapSource = useDataSource(
|
||||
@ -27,100 +27,17 @@ function MapTile({
|
||||
);
|
||||
|
||||
return (
|
||||
<Flex
|
||||
key={map.id}
|
||||
sx={{
|
||||
position: "relative",
|
||||
width: large ? "48%" : "32%",
|
||||
height: "0",
|
||||
paddingTop: large ? "48%" : "32%",
|
||||
borderRadius: "4px",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
cursor: "pointer",
|
||||
overflow: "hidden",
|
||||
userSelect: "none",
|
||||
}}
|
||||
my={1}
|
||||
mx={`${large ? 1 : 2 / 3}%`}
|
||||
bg="muted"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onMapSelect(map);
|
||||
}}
|
||||
onDoubleClick={(e) => {
|
||||
if (canEdit) {
|
||||
onDone(e);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<UIImage
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "contain",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
}}
|
||||
src={mapSource}
|
||||
/>
|
||||
<Flex
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background:
|
||||
"linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.65) 100%);",
|
||||
alignItems: "flex-end",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
p={2}
|
||||
>
|
||||
<Text
|
||||
as="p"
|
||||
variant="heading"
|
||||
color="hsl(210, 50%, 96%)"
|
||||
sx={{ textAlign: "center" }}
|
||||
>
|
||||
{map.name}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
borderColor: "primary",
|
||||
borderStyle: isSelected ? "solid" : "none",
|
||||
borderWidth: "4px",
|
||||
pointerEvents: "none",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
/>
|
||||
{canEdit && (
|
||||
<Box sx={{ position: "absolute", top: 0, right: 0 }}>
|
||||
<IconButton
|
||||
aria-label="Edit Map"
|
||||
title="Edit Map"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onMapEdit(map.id);
|
||||
}}
|
||||
bg="overlay"
|
||||
sx={{ borderRadius: "50%" }}
|
||||
m={2}
|
||||
>
|
||||
<EditMapIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
</Flex>
|
||||
<Tile
|
||||
src={mapSource}
|
||||
title={map.name}
|
||||
isSelected={isSelected}
|
||||
onSelect={() => onMapSelect(map)}
|
||||
onEdit={() => onMapEdit(map.id)}
|
||||
onDoubleClick={onDone}
|
||||
large={large}
|
||||
canEdit={canEdit}
|
||||
badges={badges}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -73,6 +73,7 @@ function MapTiles({
|
||||
canEdit={
|
||||
isSelected && selectMode === "single" && selectedMaps.length === 1
|
||||
}
|
||||
badges={[`${map.gridX}x${map.gridY}`]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
|
||||
function EditMapIcon() {
|
||||
function EditTileIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
@ -15,4 +15,4 @@ function EditMapIcon() {
|
||||
);
|
||||
}
|
||||
|
||||
export default EditMapIcon;
|
||||
export default EditTileIcon;
|
Loading…
Reference in New Issue
Block a user