Moved change map button to map component and centered it
This commit is contained in:
parent
33ea19fef6
commit
8b412ad482
@ -13,7 +13,7 @@ import Modal from "./Modal";
|
|||||||
|
|
||||||
const defaultMapSize = 22;
|
const defaultMapSize = 22;
|
||||||
|
|
||||||
function AddMapButton({ handleMapChange }) {
|
function AddMapButton({ onMapChanged }) {
|
||||||
const fileInputRef = useRef();
|
const fileInputRef = useRef();
|
||||||
|
|
||||||
function openImageDialog() {
|
function openImageDialog() {
|
||||||
@ -54,7 +54,7 @@ function AddMapButton({ handleMapChange }) {
|
|||||||
|
|
||||||
function handleDone() {
|
function handleDone() {
|
||||||
if (mapDataRef.current && mapSource) {
|
if (mapDataRef.current && mapSource) {
|
||||||
handleMapChange(mapDataRef.current, mapSource);
|
onMapChanged(mapDataRef.current, mapSource);
|
||||||
}
|
}
|
||||||
closeModal();
|
closeModal();
|
||||||
}
|
}
|
||||||
|
@ -3,11 +3,19 @@ import { Box, Image } from "theme-ui";
|
|||||||
|
|
||||||
import Token from "../components/Token";
|
import Token from "../components/Token";
|
||||||
import ProxyToken from "../components/ProxyToken";
|
import ProxyToken from "../components/ProxyToken";
|
||||||
|
import AddMapButton from "../components/AddMapButton";
|
||||||
|
|
||||||
const mapTokenClassName = "map-token";
|
const mapTokenClassName = "map-token";
|
||||||
const defaultTokenSize = 48;
|
const defaultTokenSize = 48;
|
||||||
|
|
||||||
function Map({ mapSource, mapData, tokens, onMapTokenMove, onMapTokenRemove }) {
|
function Map({
|
||||||
|
mapSource,
|
||||||
|
mapData,
|
||||||
|
tokens,
|
||||||
|
onMapTokenMove,
|
||||||
|
onMapTokenRemove,
|
||||||
|
onMapChanged
|
||||||
|
}) {
|
||||||
function handleProxyDragEnd(isOnMap, token) {
|
function handleProxyDragEnd(isOnMap, token) {
|
||||||
if (isOnMap && onMapTokenMove) {
|
if (isOnMap && onMapTokenMove) {
|
||||||
onMapTokenMove(token);
|
onMapTokenMove(token);
|
||||||
@ -27,7 +35,12 @@ function Map({ mapSource, mapData, tokens, onMapTokenMove, onMapTokenRemove }) {
|
|||||||
<>
|
<>
|
||||||
<Box
|
<Box
|
||||||
className="map"
|
className="map"
|
||||||
sx={{ flexGrow: 1, position: "relative", overflow: "hidden" }}
|
sx={{
|
||||||
|
flexGrow: 1,
|
||||||
|
position: "relative",
|
||||||
|
overflow: "hidden",
|
||||||
|
backgroundColor: "rgba(0, 0, 0, 0.1)"
|
||||||
|
}}
|
||||||
bg="background"
|
bg="background"
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
@ -83,6 +96,17 @@ function Map({ mapSource, mapData, tokens, onMapTokenMove, onMapTokenRemove }) {
|
|||||||
))}
|
))}
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
<Box
|
||||||
|
p={2}
|
||||||
|
sx={{
|
||||||
|
position: "absolute",
|
||||||
|
top: "0",
|
||||||
|
left: "50%",
|
||||||
|
transform: "translateX(-50%)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AddMapButton onMapChanged={onMapChanged} />
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
<ProxyToken
|
<ProxyToken
|
||||||
tokenClassName={mapTokenClassName}
|
tokenClassName={mapTokenClassName}
|
||||||
|
@ -5,7 +5,7 @@ import React, {
|
|||||||
useRef,
|
useRef,
|
||||||
useCallback
|
useCallback
|
||||||
} from "react";
|
} from "react";
|
||||||
import { Box, Flex } from "theme-ui";
|
import { Flex } from "theme-ui";
|
||||||
|
|
||||||
import { omit } from "../helpers/shared";
|
import { omit } from "../helpers/shared";
|
||||||
|
|
||||||
@ -15,7 +15,6 @@ import useSession from "../helpers/useSession";
|
|||||||
import Party from "../components/Party";
|
import Party from "../components/Party";
|
||||||
import Tokens from "../components/Tokens";
|
import Tokens from "../components/Tokens";
|
||||||
import Map from "../components/Map";
|
import Map from "../components/Map";
|
||||||
import AddMapButton from "../components/AddMapButton";
|
|
||||||
|
|
||||||
function Game() {
|
function Game() {
|
||||||
const { gameId } = useContext(GameContext);
|
const { gameId } = useContext(GameContext);
|
||||||
@ -35,7 +34,7 @@ function Game() {
|
|||||||
const [mapSource, setMapSource] = useState(null);
|
const [mapSource, setMapSource] = useState(null);
|
||||||
const mapDataRef = useRef(null);
|
const mapDataRef = useRef(null);
|
||||||
|
|
||||||
function handleMapChange(mapData, mapSource) {
|
function handleMapChanged(mapData, mapSource) {
|
||||||
mapDataRef.current = mapData;
|
mapDataRef.current = mapData;
|
||||||
setMapSource(mapSource);
|
setMapSource(mapSource);
|
||||||
for (let connection of Object.values(connections)) {
|
for (let connection of Object.values(connections)) {
|
||||||
@ -107,20 +106,10 @@ function Game() {
|
|||||||
tokens={mapTokens}
|
tokens={mapTokens}
|
||||||
onMapTokenMove={handleEditMapToken}
|
onMapTokenMove={handleEditMapToken}
|
||||||
onMapTokenRemove={handleRemoveMapToken}
|
onMapTokenRemove={handleRemoveMapToken}
|
||||||
|
onMapChanged={handleMapChanged}
|
||||||
/>
|
/>
|
||||||
<Tokens onCreateMapToken={handleEditMapToken} />
|
<Tokens onCreateMapToken={handleEditMapToken} />
|
||||||
</Flex>
|
</Flex>
|
||||||
<Box
|
|
||||||
p={2}
|
|
||||||
sx={{
|
|
||||||
position: "absolute",
|
|
||||||
top: "0",
|
|
||||||
left: "50%",
|
|
||||||
transform: "translateX(-50%)"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<AddMapButton handleMapChange={handleMapChange} />
|
|
||||||
</Box>
|
|
||||||
</Flex>
|
</Flex>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user