Added styling

co-authored-by: nthouliss <nthouliss@gmail.com>

src/components/AddMapButton.js

@@ -0,0 +1,38 @@
+import React, { useRef } from "react";
+import { IconButton } from "theme-ui";
+
+function AddMapButton({ handleMapChange }) {
+  const fileInputRef = useRef();
+
+  function handleIconClicked() {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }
+
+  return (
+    <>
+      <input
+        onChange={handleMapChange}
+        type="file"
+        accept="image/*"
+        style={{ display: "none" }}
+        ref={fileInputRef}
+      />
+      <IconButton aria-label="Add Map" onClick={handleIconClicked}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+          fill="white"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <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>
+    </>
+  );
+}
+
+export default AddMapButton;

src/components/Map.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { Image, Flex } from "theme-ui";
+
+function Map({ imageSource }) {
+  return (
+    <Flex sx={{ justifyContent: "center", flexGrow: 1 }} bg="background">
+      <Image src={imageSource} sx={{ objectFit: "contain" }} />
+    </Flex>
+  );
+}
+
+export default Map;

src/components/Party.js

@@ -6,9 +6,13 @@ import PartyVideo from "./PartyVideo";
 
 function Party({ streams, localStreamId }) {
   return (
-    <Flex p={4} bg="highlight" sx={{ flexDirection: "column", width: "200px" }}>
+    <Flex
+      p={3}
+      bg="background"
+      sx={{ flexDirection: "column", width: "192px", minWidth: "192px" }}
+    >
       {Object.entries(streams).map(([id, stream]) => (
-        <PartyVideo key={id} stream={stream} muted={id === localStreamId}/>
+        <PartyVideo key={id} stream={stream} muted={id === localStreamId} />
       ))}
     </Flex>
   );

src/components/PartyVideo.js

@@ -9,7 +9,14 @@ function PartyVideo({ stream, muted }) {
     }
   }, [stream]);
 
-  return <video ref={videoRef} autoPlay muted={muted} />;
+  return (
+    <video
+      ref={videoRef}
+      autoPlay
+      muted={muted}
+      style={{ width: "100%", borderRadius: "4px" }}
+    />
+  );
 }
 
 export default PartyVideo;

src/components/Tokens.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { Box } from "theme-ui";
+
+function Tokens() {
+  return <Box bg="background" sx={{ width: "128px", minWidth: "128px" }} />;
+}
+
+export default Tokens;

src/routes/Game.js

@@ -5,13 +5,16 @@ import React, {
   useRef,
   useCallback
 } from "react";
-import { Container, Box, Image, Input, Flex, Heading } from "theme-ui";
+import { Container, Box, Image, Input, Flex, Heading, Grid } from "theme-ui";
 
 import GameContext from "../contexts/GameContext";
 import useSession from "../helpers/useSession";
 
 import Token from "../components/Token";
 import Party from "../components/Party";
+import Tokens from "../components/Tokens";
+import Map from "../components/Map";
+import AddMapButton from "../components/AddMapButton";
 
 function Game() {
   const { gameId } = useContext(GameContext);
@@ -31,7 +34,7 @@ function Game() {
   const [imageSource, setImageSource] = useState(null);
   const imageDataRef = useRef(null);
 
-  function handleImageChange(event) {
+  function handleMapChange(event) {
     imageDataRef.current = event.target.files[0];
     setImageSource(URL.createObjectURL(imageDataRef.current));
     for (let connection of Object.values(connections)) {
@@ -70,25 +73,25 @@ function Game() {
   }
 
   return (
-    <Container>
-      <Flex p={2} sx={{ justifyContent: "space-between" }}>
-        <Heading>{peerId ? peerId : "Loading"}</Heading>
-        <Box>
-          <Input
-            id="image"
-            name="image"
-            onChange={handleImageChange}
-            type="file"
-            accept="image/*"
-          />
-        </Box>
+    <Flex sx={{ flexDirection: "column", height: "100vh" }}>
+      <Box
+        p={2}
+        sx={{
+          position: "absolute",
+          top: "0",
+          left: "50%",
+          transform: "translateX(-50%)"
+        }}
+      >
+        <AddMapButton handleMapChange={handleMapChange} />
+      </Box>
+      <Flex sx={{ justifyContent: "space-between", flexGrow: 1 }}>
+        <Party streams={streams} localStreamId={peerId} />
+        <Map imageSource={imageSource} />
+        <Tokens />
+        {/* <Token onDrag={handleTokenDrag} position={tokenPosition} /> */}
       </Flex>
-      <Party streams={streams} localStreamId={peerId} />
-      <Flex sx={{ justifyContent: "center" }}>
-        <Image src={imageSource} />
-      </Flex>
-      <Token onDrag={handleTokenDrag} position={tokenPosition} />
-    </Container>
+    </Flex>
   );
 }
 

src/routes/Home.js

@@ -17,8 +17,14 @@ function Home() {
   }
 
   return (
-    <Container p={4} sx={{ maxWidth: "300px" }}>
-      <Flex sx={{ flexDirection: "column" }}>
+    <Container sx={{ maxWidth: "300px" }}>
+      <Flex
+        sx={{
+          flexDirection: "column",
+          height: "100vh",
+          justifyContent: "center"
+        }}
+      >
         <Button m={2} onClick={handleStartGame}>
           Start Game
         </Button>

src/routes/Join.js

@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 import { navigate } from "hookrouter";
-import { Container, Box, Label, Input, Button } from "theme-ui";
+import { Container, Box, Label, Input, Button, Flex } from "theme-ui";
 
 import GameContext from "../contexts/GameContext";
 
@@ -17,18 +17,26 @@ function Join() {
   }
 
   return (
-    <Container p={4} sx={{ maxWidth: "300px" }}>
-      <Box as="form" onSubmit={handleSubmit}>
-        <Label htmlFor="id">Shove an ID in me</Label>
-        <Input
-          my={4}
-          id="id"
-          name="id"
-          value={gameId || ""}
-          onChange={handleChange}
-        />
-        <Button>Go ʕ•ᴥ•ʔ</Button>
-      </Box>
+    <Container sx={{ maxWidth: "300px" }}>
+      <Flex
+        sx={{
+          flexDirection: "column",
+          height: "100vh",
+          justifyContent: "center"
+        }}
+      >
+        <Box as="form" onSubmit={handleSubmit}>
+          <Label htmlFor="id">Shove an ID in me</Label>
+          <Input
+            my={4}
+            id="id"
+            name="id"
+            value={gameId || ""}
+            onChange={handleChange}
+          />
+          <Button>Go ʕ•ᴥ•ʔ</Button>
+        </Box>
+      </Flex>
     </Container>
   );
 }