Refactored map tile and added badges option

This commit is contained in:
Mitchell McCaffrey 2020-10-01 16:16:40 +10:00
parent 3215efffa3
commit 02ae9dc765
4 changed files with 138 additions and 98 deletions

122
src/components/Tile.js Normal file
View 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;

View File

@ -1,7 +1,6 @@
import React from "react"; 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 useDataSource from "../../helpers/useDataSource";
import { mapSources as defaultMapSources, unknownSource } from "../../maps"; import { mapSources as defaultMapSources, unknownSource } from "../../maps";
@ -14,6 +13,7 @@ function MapTile({
onDone, onDone,
large, large,
canEdit, canEdit,
badges,
}) { }) {
const isDefault = map.type === "default"; const isDefault = map.type === "default";
const mapSource = useDataSource( const mapSource = useDataSource(
@ -27,100 +27,17 @@ function MapTile({
); );
return ( return (
<Flex <Tile
key={map.id} src={mapSource}
sx={{ title={map.name}
position: "relative", isSelected={isSelected}
width: large ? "48%" : "32%", onSelect={() => onMapSelect(map)}
height: "0", onEdit={() => onMapEdit(map.id)}
paddingTop: large ? "48%" : "32%", onDoubleClick={onDone}
borderRadius: "4px", large={large}
justifyContent: "center", canEdit={canEdit}
alignItems: "center", badges={badges}
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>
); );
} }

View File

@ -73,6 +73,7 @@ function MapTiles({
canEdit={ canEdit={
isSelected && selectMode === "single" && selectedMaps.length === 1 isSelected && selectMode === "single" && selectedMaps.length === 1
} }
badges={[`${map.gridX}x${map.gridY}`]}
/> />
); );
} }

View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
function EditMapIcon() { function EditTileIcon() {
return ( return (
<svg <svg
width="24" width="24"
@ -15,4 +15,4 @@ function EditMapIcon() {
); );
} }
export default EditMapIcon; export default EditTileIcon;