Refactored modal, added popup for image selection and changed map data layout
This commit is contained in:
Mitchell McCaffrey
parent
a75cbb0c56
commit
247505bb93
|
|
@ -1,25 +1,47 @@
|
|||
import React, { useRef } from "react";
|
||||
import { IconButton } from "theme-ui";
|
||||
import React, { useRef, useState } from "react";
|
||||
import { IconButton, Box, Button, Image, Flex, Label, Input } from "theme-ui";
|
||||
|
||||
import Modal from "./Modal";
|
||||
|
||||
const defaultMapSize = 22;
|
||||
|
||||
function AddMapButton({ handleMapChange }) {
|
||||
const fileInputRef = useRef();
|
||||
|
||||
function handleIconClicked() {
|
||||
function openImageDialog(e) {
|
||||
if (fileInputRef.current) {
|
||||
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 (
|
||||
<>
|
||||
<input
|
||||
onChange={handleMapChange}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style={{ display: "none" }}
|
||||
ref={fileInputRef}
|
||||
/>
|
||||
<IconButton aria-label="Add Map" onClick={handleIconClicked}>
|
||||
<IconButton aria-label="Add Map" onClick={openModal}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
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" />
|
||||
</svg>
|
||||
</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 Modal from "react-modal";
|
||||
import {
|
||||
IconButton,
|
||||
Flex,
|
||||
Box,
|
||||
Label,
|
||||
Close,
|
||||
useThemeUI,
|
||||
Text
|
||||
} from "theme-ui";
|
||||
import { IconButton, Flex, Box, Label, Text } from "theme-ui";
|
||||
|
||||
import Modal from "./Modal";
|
||||
|
||||
function AddPartyMemberButton({ streamId }) {
|
||||
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
|
||||
const { theme } = useThemeUI();
|
||||
|
||||
function openModal() {
|
||||
setIsAddModalOpen(true);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
setIsAddModalOpen(false);
|
||||
}
|
||||
|
|
@ -38,32 +28,12 @@ function AddPartyMemberButton({ streamId }) {
|
|||
</svg>
|
||||
</IconButton>
|
||||
</Flex>
|
||||
<Modal
|
||||
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%)"
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Modal isOpen={isAddModalOpen} onRequestClose={closeModal}>
|
||||
<Box>
|
||||
<Label p={2}>Other people can join using your ID (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧</Label>
|
||||
<Box p={2} bg="hsla(230, 20%, 0%, 20%)">
|
||||
<Text>{streamId}</Text>
|
||||
</Box>
|
||||
<Close
|
||||
m={1}
|
||||
sx={{ position: "absolute", top: 0, right: 0 }}
|
||||
onClick={closeModal}
|
||||
/>
|
||||
</Box>
|
||||
</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]);
|
||||
|
||||
const [imageSource, setImageSource] = useState(null);
|
||||
const imageDataRef = useRef(null);
|
||||
const [mapSource, setMapSource] = useState(null);
|
||||
const mapDataRef = useRef(null);
|
||||
|
||||
function handleMapChange(event) {
|
||||
imageDataRef.current = event.target.files[0];
|
||||
setImageSource(URL.createObjectURL(imageDataRef.current));
|
||||
function handleMapChange(mapData, mapSource) {
|
||||
mapDataRef.current = mapData;
|
||||
setMapSource(mapSource);
|
||||
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) {
|
||||
connection.on("data", data => {
|
||||
if (data.id === "image") {
|
||||
const blob = new Blob([data.data]);
|
||||
imageDataRef.current = blob;
|
||||
setImageSource(URL.createObjectURL(imageDataRef.current));
|
||||
if (data.id === "map") {
|
||||
const blob = new Blob([data.data.file]);
|
||||
mapDataRef.current = { ...data.data, file: blob };
|
||||
setMapSource(URL.createObjectURL(mapDataRef.current.file));
|
||||
}
|
||||
if (data.id === "tokenEdit") {
|
||||
setMapTokens(prevMapTokens => ({
|
||||
|
|
@ -89,8 +89,8 @@ function Game() {
|
|||
}
|
||||
|
||||
function handleConnectionSync(connection) {
|
||||
if (imageSource) {
|
||||
connection.send({ id: "image", data: imageDataRef.current });
|
||||
if (mapSource) {
|
||||
connection.send({ id: "map", data: mapDataRef.current });
|
||||
}
|
||||
connection.send({ id: "tokenEdit", data: mapTokens });
|
||||
}
|
||||
|
|
@ -113,7 +113,7 @@ function Game() {
|
|||
>
|
||||
<Party streams={streams} localStreamId={peerId} />
|
||||
<Map
|
||||
imageSource={imageSource}
|
||||
imageSource={mapSource}
|
||||
tokens={mapTokens}
|
||||
onMapTokenMove={handleEditMapToken}
|
||||
onMapTokenRemove={handleRemoveMapToken}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user