diff --git a/src/components/AddMapButton.js b/src/components/AddMapButton.js
index e25875f..bac0be2 100644
--- a/src/components/AddMapButton.js
+++ b/src/components/AddMapButton.js
@@ -1,27 +1,11 @@
import React, { useRef, useState, useEffect } from "react";
-import {
- IconButton,
- Box,
- Button,
- Image as UIImage,
- Flex,
- Label,
- Input,
-} from "theme-ui";
+import { IconButton } from "theme-ui";
-import Modal from "./Modal";
+import AddMapModal from "../modals/AddMapModal";
const defaultMapSize = 22;
function AddMapButton({ onMapChanged }) {
- const fileInputRef = useRef();
-
- function openImageDialog() {
- if (fileInputRef.current) {
- fileInputRef.current.click();
- }
- }
-
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
function openModal() {
setIsAddModalOpen(true);
@@ -82,77 +66,18 @@ function AddMapButton({ onMapChanged }) {
-
- {
- e.preventDefault();
- handleDone();
- }}
- >
-
-
-
-
-
-
-
-
- setRows(e.target.value)}
- />
-
-
-
- setColumns(e.target.value)}
- />
-
-
- {mapSource ? (
-
- ) : (
-
- )}
-
-
-
+
>
);
}
diff --git a/src/components/AddPartyMemberButton.js b/src/components/AddPartyMemberButton.js
index af8a28b..c9a1fa1 100644
--- a/src/components/AddPartyMemberButton.js
+++ b/src/components/AddPartyMemberButton.js
@@ -1,7 +1,7 @@
import React, { useState } from "react";
-import { IconButton, Box, Label, Text } from "theme-ui";
+import { IconButton } from "theme-ui";
-import Modal from "./Modal";
+import AddPartyMemberModal from "../modals/AddPartyMemberModal";
function AddPartyMemberButton({ gameId }) {
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
@@ -31,25 +31,11 @@ function AddPartyMemberButton({ gameId }) {
-
-
-
-
- Other people can join using the game ID
-
-
- {gameId}
-
-
- Or by using this link
-
-
- {window.location.href}
-
-
-
+
>
);
}
diff --git a/src/components/ChangeNicknameButton.js b/src/components/ChangeNicknameButton.js
index 29b13c5..ee56da0 100644
--- a/src/components/ChangeNicknameButton.js
+++ b/src/components/ChangeNicknameButton.js
@@ -1,7 +1,7 @@
import React, { useState } from "react";
-import { Box, Input, Button, Label, IconButton, Flex } from "theme-ui";
+import { IconButton } from "theme-ui";
-import Modal from "./Modal";
+import ChangeNicknameModal from "../modals/ChangeNicknameModal";
function ChangeNicknameButton({ nickname, onChange }) {
const [isChangeModalOpen, setIsChangeModalOpen] = useState(false);
@@ -41,23 +41,13 @@ function ChangeNicknameButton({ nickname, onChange }) {
-
-
-
-
-
-
-
-
-
+
>
);
}
diff --git a/src/components/StartStreamButton.js b/src/components/StartStreamButton.js
index 2597f1a..b2f8703 100644
--- a/src/components/StartStreamButton.js
+++ b/src/components/StartStreamButton.js
@@ -1,8 +1,8 @@
import React, { useState } from "react";
-import { IconButton, Box, Text, Button, Label, Flex, Link } from "theme-ui";
+import { IconButton, Box, Text, Link } from "theme-ui";
import adapter from "webrtc-adapter";
-import Modal from "./Modal";
+import StartStreamModal from "../modals/StartStreamModal";
function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
const [isStreamModalOpoen, setIsStreamModalOpen] = useState(false);
@@ -89,30 +89,17 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
-
-
-
-
- Share your computers audio with the party
-
- {!isSupported && unavailableMessage}
- {isSupported && !stream && noAudioTrack && noAudioMessage}
-
- {isSupported && !stream && (
-
- )}
- {isSupported && stream && (
-
- )}
-
-
-
+
>
);
}
diff --git a/src/modals/AddMapModal.js b/src/modals/AddMapModal.js
new file mode 100644
index 0000000..fd1a735
--- /dev/null
+++ b/src/modals/AddMapModal.js
@@ -0,0 +1,100 @@
+import React, { useRef } from "react";
+import { Box, Button, Image as UIImage, Flex, Label, Input } from "theme-ui";
+
+import Modal from "../components/Modal";
+
+function AddMapModal({
+ isOpen,
+ onRequestClose,
+ onDone,
+ onImageUpload,
+ rows,
+ onRowsChange,
+ columns,
+ onColumnsChange,
+ imageLoaded,
+ mapSource,
+}) {
+ const fileInputRef = useRef();
+
+ function openImageDialog() {
+ if (fileInputRef.current) {
+ fileInputRef.current.click();
+ }
+ }
+ return (
+
+ {
+ e.preventDefault();
+ onDone();
+ }}
+ >
+
+
+
+
+
+
+
+
+ onRowsChange(e.target.value)}
+ />
+
+
+
+ onColumnsChange(e.target.value)}
+ />
+
+
+ {mapSource ? (
+
+ ) : (
+
+ )}
+
+
+
+ );
+}
+
+export default AddMapModal;
diff --git a/src/modals/AddPartyMemberModal.js b/src/modals/AddPartyMemberModal.js
new file mode 100644
index 0000000..7a29568
--- /dev/null
+++ b/src/modals/AddPartyMemberModal.js
@@ -0,0 +1,30 @@
+import React from "react";
+import { Box, Label, Text } from "theme-ui";
+
+import Modal from "../components/Modal";
+
+function AddPartyMemberModal({ isOpen, onRequestClose, gameId }) {
+ return (
+
+
+
+
+ Other people can join using the game ID
+
+
+ {gameId}
+
+
+ Or by using this link
+
+
+ {window.location.href}
+
+
+
+ );
+}
+
+export default AddPartyMemberModal;
diff --git a/src/modals/ChangeNicknameModal.js b/src/modals/ChangeNicknameModal.js
new file mode 100644
index 0000000..49b9b5b
--- /dev/null
+++ b/src/modals/ChangeNicknameModal.js
@@ -0,0 +1,30 @@
+import React from "react";
+import { Box, Input, Button, Label, Flex } from "theme-ui";
+
+import Modal from "../components/Modal";
+
+function ChangeNicknameModal({
+ isOpen,
+ onRequestClose,
+ onChangeSubmit,
+ nickname,
+ onChange,
+}) {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default ChangeNicknameModal;
diff --git a/src/modals/StartStreamModal.js b/src/modals/StartStreamModal.js
new file mode 100644
index 0000000..9d2f289
--- /dev/null
+++ b/src/modals/StartStreamModal.js
@@ -0,0 +1,45 @@
+import React from "react";
+import { Box, Text, Button, Label, Flex } from "theme-ui";
+
+import Modal from "../components/Modal";
+
+function StartStreamModal({
+ isOpen,
+ onRequestClose,
+ isSupported,
+ unavailableMessage,
+ stream,
+ noAudioTrack,
+ noAudioMessage,
+ onStreamStart,
+ onStreamEnd,
+}) {
+ return (
+
+
+
+
+ Share your computers audio with the party
+
+ {!isSupported && unavailableMessage}
+ {isSupported && !stream && noAudioTrack && noAudioMessage}
+
+ {isSupported && !stream && (
+
+ )}
+ {isSupported && stream && (
+
+ )}
+
+
+
+ );
+}
+
+export default StartStreamModal;