Refactored modal, added popup for image selection and changed map data layout
This commit is contained in:
parent
a75cbb0c56
commit
247505bb93
@ -1,25 +1,47 @@
|
|||||||
import React, { useRef } from "react";
|
import React, { useRef, useState } from "react";
|
||||||
import { IconButton } from "theme-ui";
|
import { IconButton, Box, Button, Image, Flex, Label, Input } from "theme-ui";
|
||||||
|
|
||||||
|
import Modal from "./Modal";
|
||||||
|
|
||||||
|
const defaultMapSize = 22;
|
||||||
|
|
||||||
function AddMapButton({ handleMapChange }) {
|
function AddMapButton({ handleMapChange }) {
|
||||||
const fileInputRef = useRef();
|
const fileInputRef = useRef();
|
||||||
|
|
||||||
function handleIconClicked() {
|
function openImageDialog(e) {
|
||||||
if (fileInputRef.current) {
|
if (fileInputRef.current) {
|
||||||
fileInputRef.current.click();
|
fileInputRef.current.click();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
|
||||||
|
function openModal() {
|
||||||
|
setIsAddModalOpen(true);
|
||||||
|
}
|
||||||
|
function closeModal() {
|
||||||
|
setIsAddModalOpen(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
const mapDataRef = useRef(null);
|
||||||
|
const [mapSource, setImageSource] = useState(null);
|
||||||
|
function handleImageUpload(event) {
|
||||||
|
mapDataRef.current = { file: event.target.files[0], rows, columns };
|
||||||
|
setImageSource(URL.createObjectURL(mapDataRef.current.file));
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDone() {
|
||||||
|
if (mapDataRef.current && mapSource) {
|
||||||
|
handleMapChange(mapDataRef.current, mapSource);
|
||||||
|
}
|
||||||
|
closeModal();
|
||||||
|
}
|
||||||
|
|
||||||
|
const [rows, setRows] = useState(defaultMapSize);
|
||||||
|
const [columns, setColumns] = useState(defaultMapSize);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<input
|
<IconButton aria-label="Add Map" onClick={openModal}>
|
||||||
onChange={handleMapChange}
|
|
||||||
type="file"
|
|
||||||
accept="image/*"
|
|
||||||
style={{ display: "none" }}
|
|
||||||
ref={fileInputRef}
|
|
||||||
/>
|
|
||||||
<IconButton aria-label="Add Map" onClick={handleIconClicked}>
|
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
height="24"
|
height="24"
|
||||||
@ -31,6 +53,72 @@ function AddMapButton({ handleMapChange }) {
|
|||||||
<path d="M21.02 5H19V2.98c0-.54-.44-.98-.98-.98h-.03c-.55 0-.99.44-.99.98V5h-2.01c-.54 0-.98.44-.99.98v.03c0 .55.44.99.99.99H17v2.01c0 .54.44.99.99.98h.03c.54 0 .98-.44.98-.98V7h2.02c.54 0 .98-.44.98-.98v-.04c0-.54-.44-.98-.98-.98zM16 9.01V8h-1.01c-.53 0-1.03-.21-1.41-.58-.37-.38-.58-.88-.58-1.44 0-.36.1-.69.27-.98H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8.28c-.3.17-.64.28-1.02.28-1.09-.01-1.98-.9-1.98-1.99zM15.96 19H6c-.41 0-.65-.47-.4-.8l1.98-2.63c.21-.28.62-.26.82.02L10 18l2.61-3.48c.2-.26.59-.27.79-.01l2.95 3.68c.26.33.03.81-.39.81z" />
|
<path d="M21.02 5H19V2.98c0-.54-.44-.98-.98-.98h-.03c-.55 0-.99.44-.99.98V5h-2.01c-.54 0-.98.44-.99.98v.03c0 .55.44.99.99.99H17v2.01c0 .54.44.99.99.98h.03c.54 0 .98-.44.98-.98V7h2.02c.54 0 .98-.44.98-.98v-.04c0-.54-.44-.98-.98-.98zM16 9.01V8h-1.01c-.53 0-1.03-.21-1.41-.58-.37-.38-.58-.88-.58-1.44 0-.36.1-.69.27-.98H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8.28c-.3.17-.64.28-1.02.28-1.09-.01-1.98-.9-1.98-1.99zM15.96 19H6c-.41 0-.65-.47-.4-.8l1.98-2.63c.21-.28.62-.26.82.02L10 18l2.61-3.48c.2-.26.59-.27.79-.01l2.95 3.68c.26.33.03.81-.39.81z" />
|
||||||
</svg>
|
</svg>
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
<Modal isOpen={isAddModalOpen} onRequestClose={closeModal}>
|
||||||
|
<Box
|
||||||
|
as="form"
|
||||||
|
onSubmit={e => {
|
||||||
|
e.preventDefault();
|
||||||
|
handleDone();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
onChange={handleImageUpload}
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
style={{ display: "none" }}
|
||||||
|
ref={fileInputRef}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Flex sx={{ flexDirection: "column" }}>
|
||||||
|
<Image
|
||||||
|
my={2}
|
||||||
|
sx={{
|
||||||
|
width: "500px",
|
||||||
|
minHeight: "200px",
|
||||||
|
maxHeight: "500px",
|
||||||
|
objectFit: "contain",
|
||||||
|
borderRadius: "4px"
|
||||||
|
}}
|
||||||
|
src={mapSource}
|
||||||
|
onClick={openImageDialog}
|
||||||
|
bg="muted"
|
||||||
|
/>
|
||||||
|
<Flex>
|
||||||
|
<Box mb={2} mr={1} sx={{ flexGrow: 1 }}>
|
||||||
|
<Label htmlFor="rows">Rows</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
name="rows"
|
||||||
|
value={rows}
|
||||||
|
onChange={e => setRows(e.target.value)}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Box mb={2} ml={1} sx={{ flexGrow: 1 }}>
|
||||||
|
<Label htmlFor="columns">Columns</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
name="columns"
|
||||||
|
value={columns}
|
||||||
|
onChange={e => setColumns(e.target.value)}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Flex>
|
||||||
|
{mapSource ? (
|
||||||
|
<Button variant="primary">Done</Button>
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
varient="primary"
|
||||||
|
onClick={e => {
|
||||||
|
e.preventDefault();
|
||||||
|
openImageDialog();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Select Image
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
</Modal>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,23 +1,13 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import Modal from "react-modal";
|
import { IconButton, Flex, Box, Label, Text } from "theme-ui";
|
||||||
import {
|
|
||||||
IconButton,
|
import Modal from "./Modal";
|
||||||
Flex,
|
|
||||||
Box,
|
|
||||||
Label,
|
|
||||||
Close,
|
|
||||||
useThemeUI,
|
|
||||||
Text
|
|
||||||
} from "theme-ui";
|
|
||||||
|
|
||||||
function AddPartyMemberButton({ streamId }) {
|
function AddPartyMemberButton({ streamId }) {
|
||||||
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
|
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
|
||||||
const { theme } = useThemeUI();
|
|
||||||
|
|
||||||
function openModal() {
|
function openModal() {
|
||||||
setIsAddModalOpen(true);
|
setIsAddModalOpen(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeModal() {
|
function closeModal() {
|
||||||
setIsAddModalOpen(false);
|
setIsAddModalOpen(false);
|
||||||
}
|
}
|
||||||
@ -38,32 +28,12 @@ function AddPartyMemberButton({ streamId }) {
|
|||||||
</svg>
|
</svg>
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Flex>
|
</Flex>
|
||||||
<Modal
|
<Modal isOpen={isAddModalOpen} onRequestClose={closeModal}>
|
||||||
isOpen={isAddModalOpen}
|
|
||||||
onRequestClose={closeModal}
|
|
||||||
style={{
|
|
||||||
overlay: { backgroundColor: "rgba(0, 0, 0, 0.73)" },
|
|
||||||
content: {
|
|
||||||
backgroundColor: theme.colors.background,
|
|
||||||
top: "50%",
|
|
||||||
left: "50%",
|
|
||||||
right: "auto",
|
|
||||||
bottom: "auto",
|
|
||||||
marginRight: "-50%",
|
|
||||||
transform: "translate(-50%, -50%)"
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box>
|
<Box>
|
||||||
<Label p={2}>Other people can join using your ID (ノ◕ヮ◕)ノ*:・゚✧</Label>
|
<Label p={2}>Other people can join using your ID (ノ◕ヮ◕)ノ*:・゚✧</Label>
|
||||||
<Box p={2} bg="hsla(230, 20%, 0%, 20%)">
|
<Box p={2} bg="hsla(230, 20%, 0%, 20%)">
|
||||||
<Text>{streamId}</Text>
|
<Text>{streamId}</Text>
|
||||||
</Box>
|
</Box>
|
||||||
<Close
|
|
||||||
m={1}
|
|
||||||
sx={{ position: "absolute", top: 0, right: 0 }}
|
|
||||||
onClick={closeModal}
|
|
||||||
/>
|
|
||||||
</Box>
|
</Box>
|
||||||
</Modal>
|
</Modal>
|
||||||
</>
|
</>
|
||||||
|
35
src/components/Modal.js
Normal file
35
src/components/Modal.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import React from "react";
|
||||||
|
import Modal from "react-modal";
|
||||||
|
import { useThemeUI, Close } from "theme-ui";
|
||||||
|
|
||||||
|
function StyledModal({ isOpen, onRequestClose, children }) {
|
||||||
|
const { theme } = useThemeUI();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
isOpen={isOpen}
|
||||||
|
onRequestClose={onRequestClose}
|
||||||
|
style={{
|
||||||
|
overlay: { backgroundColor: "rgba(0, 0, 0, 0.73)" },
|
||||||
|
content: {
|
||||||
|
backgroundColor: theme.colors.background,
|
||||||
|
top: "50%",
|
||||||
|
left: "50%",
|
||||||
|
right: "auto",
|
||||||
|
bottom: "auto",
|
||||||
|
marginRight: "-50%",
|
||||||
|
transform: "translate(-50%, -50%)"
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<Close
|
||||||
|
m={1}
|
||||||
|
sx={{ position: "absolute", top: 0, right: 0 }}
|
||||||
|
onClick={onRequestClose}
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default StyledModal;
|
@ -32,14 +32,14 @@ function Game() {
|
|||||||
}
|
}
|
||||||
}, [gameId, peerId, connectTo, streams]);
|
}, [gameId, peerId, connectTo, streams]);
|
||||||
|
|
||||||
const [imageSource, setImageSource] = useState(null);
|
const [mapSource, setMapSource] = useState(null);
|
||||||
const imageDataRef = useRef(null);
|
const mapDataRef = useRef(null);
|
||||||
|
|
||||||
function handleMapChange(event) {
|
function handleMapChange(mapData, mapSource) {
|
||||||
imageDataRef.current = event.target.files[0];
|
mapDataRef.current = mapData;
|
||||||
setImageSource(URL.createObjectURL(imageDataRef.current));
|
setMapSource(mapSource);
|
||||||
for (let connection of Object.values(connections)) {
|
for (let connection of Object.values(connections)) {
|
||||||
connection.send({ id: "image", data: imageDataRef.current });
|
connection.send({ id: "map", data: mapDataRef.current });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -69,10 +69,10 @@ function Game() {
|
|||||||
|
|
||||||
function handleConnectionOpen(connection) {
|
function handleConnectionOpen(connection) {
|
||||||
connection.on("data", data => {
|
connection.on("data", data => {
|
||||||
if (data.id === "image") {
|
if (data.id === "map") {
|
||||||
const blob = new Blob([data.data]);
|
const blob = new Blob([data.data.file]);
|
||||||
imageDataRef.current = blob;
|
mapDataRef.current = { ...data.data, file: blob };
|
||||||
setImageSource(URL.createObjectURL(imageDataRef.current));
|
setMapSource(URL.createObjectURL(mapDataRef.current.file));
|
||||||
}
|
}
|
||||||
if (data.id === "tokenEdit") {
|
if (data.id === "tokenEdit") {
|
||||||
setMapTokens(prevMapTokens => ({
|
setMapTokens(prevMapTokens => ({
|
||||||
@ -89,8 +89,8 @@ function Game() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function handleConnectionSync(connection) {
|
function handleConnectionSync(connection) {
|
||||||
if (imageSource) {
|
if (mapSource) {
|
||||||
connection.send({ id: "image", data: imageDataRef.current });
|
connection.send({ id: "map", data: mapDataRef.current });
|
||||||
}
|
}
|
||||||
connection.send({ id: "tokenEdit", data: mapTokens });
|
connection.send({ id: "tokenEdit", data: mapTokens });
|
||||||
}
|
}
|
||||||
@ -113,7 +113,7 @@ function Game() {
|
|||||||
>
|
>
|
||||||
<Party streams={streams} localStreamId={peerId} />
|
<Party streams={streams} localStreamId={peerId} />
|
||||||
<Map
|
<Map
|
||||||
imageSource={imageSource}
|
imageSource={mapSource}
|
||||||
tokens={mapTokens}
|
tokens={mapTokens}
|
||||||
onMapTokenMove={handleEditMapToken}
|
onMapTokenMove={handleEditMapToken}
|
||||||
onMapTokenRemove={handleRemoveMapToken}
|
onMapTokenRemove={handleRemoveMapToken}
|
||||||
|
Loading…
Reference in New Issue
Block a user