From 247505bb935a782bab6aa314983a4204a9682d5c Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Fri, 20 Mar 2020 14:48:46 +1100
Subject: [PATCH] Refactored modal, added popup for image selection and changed
 map data layout

---
 src/components/AddMapButton.js         | 110 ++++++++++++++++++++++---
 src/components/AddPartyMemberButton.js |  38 +--------
 src/components/Modal.js                |  35 ++++++++
 src/routes/Game.js                     |  26 +++---
 4 files changed, 151 insertions(+), 58 deletions(-)
 create mode 100644 src/components/Modal.js

diff --git a/src/components/AddMapButton.js b/src/components/AddMapButton.js
index 8b43316..0623b6b 100644
--- a/src/components/AddMapButton.js
+++ b/src/components/AddMapButton.js
@@ -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>
     </>
   );
 }
diff --git a/src/components/AddPartyMemberButton.js b/src/components/AddPartyMemberButton.js
index d9b0f3f..e425dc9 100644
--- a/src/components/AddPartyMemberButton.js
+++ b/src/components/AddPartyMemberButton.js
@@ -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>
     </>
diff --git a/src/components/Modal.js b/src/components/Modal.js
new file mode 100644
index 0000000..a86bd2e
--- /dev/null
+++ b/src/components/Modal.js
@@ -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;
diff --git a/src/routes/Game.js b/src/routes/Game.js
index 3afd2a2..effaf21 100644
--- a/src/routes/Game.js
+++ b/src/routes/Game.js
@@ -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}