From d1b17807636784d3fdb64d34bc45b28ada95b6ad Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Fri, 20 Mar 2020 19:19:46 +1100
Subject: [PATCH] Added a social view and a switch between the new view and the
 old

---
 src/components/AddPartyMemberButton.js |  2 +-
 src/components/GameViewSwitch.js       | 98 ++++++++++++++++++++++++++
 src/components/Party.js                | 88 ++++++++++++++++++-----
 src/components/PartyVideo.js           | 15 ++--
 src/routes/Game.js                     | 38 +++++++---
 5 files changed, 203 insertions(+), 38 deletions(-)
 create mode 100644 src/components/GameViewSwitch.js

diff --git a/src/components/AddPartyMemberButton.js b/src/components/AddPartyMemberButton.js
index e425dc9..b4920b4 100644
--- a/src/components/AddPartyMemberButton.js
+++ b/src/components/AddPartyMemberButton.js
@@ -14,7 +14,7 @@ function AddPartyMemberButton({ streamId }) {
 
   return (
     <>
-      <Flex sx={{ justifyContent: "center" }} p={2}>
+      <Flex sx={{ justifyContent: "center" }}>
         <IconButton aria-label="Add Party Member" onClick={openModal}>
           <svg
             xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/GameViewSwitch.js b/src/components/GameViewSwitch.js
new file mode 100644
index 0000000..becbf7a
--- /dev/null
+++ b/src/components/GameViewSwitch.js
@@ -0,0 +1,98 @@
+import React from "react";
+import { Flex, IconButton, Box } from "theme-ui";
+
+import AddPartyMemberButton from "./AddPartyMemberButton";
+
+function SocialIcon() {
+  return (
+    <IconButton aria-label="Social View">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        enableBackground="new 0 0 24 24"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        fill="currentcolor"
+      >
+        <g>
+          <rect fill="none" height="24" width="24" />
+          <rect fill="none" height="24" width="24" />
+        </g>
+        <g>
+          <g />
+          <g>
+            <g>
+              <path
+                d="M16.67,13.13C18.04,14.06,19,15.32,19,17v3h3c0.55,0,1-0.45,1-1v-2 C23,14.82,19.43,13.53,16.67,13.13z"
+                fillRule="evenodd"
+              />
+            </g>
+            <g>
+              <circle cx="9" cy="8" fillRule="evenodd" r="4" />
+            </g>
+            <g>
+              <path
+                d="M15,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4c-0.47,0-0.91,0.1-1.33,0.24 C14.5,5.27,15,6.58,15,8s-0.5,2.73-1.33,3.76C14.09,11.9,14.53,12,15,12z"
+                fillRule="evenodd"
+              />
+            </g>
+            <g>
+              <path
+                d="M9,13c-2.67,0-8,1.34-8,4v2c0,0.55,0.45,1,1,1h14c0.55,0,1-0.45,1-1v-2 C17,14.34,11.67,13,9,13z"
+                fillRule="evenodd"
+              />
+            </g>
+          </g>
+        </g>
+      </svg>
+    </IconButton>
+  );
+}
+
+function EncounterIcon() {
+  return (
+    <IconButton aria-label="Encounter View">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        fill="currentcolor"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.9 13.98l2.1 2.53 3.1-3.99c.2-.26.6-.26.8.01l3.51 4.68c.25.33.01.8-.4.8H6.02c-.42 0-.65-.48-.39-.81L8.12 14c.19-.26.57-.27.78-.02z" />
+      </svg>
+    </IconButton>
+  );
+}
+
+function GameViewSwitch({ view, onViewChange }) {
+  return (
+    <Flex sx={{ width: "128px", height: "32px" }} m={2}>
+      <Flex
+        bg={view === "social" ? "primary" : "highlight"}
+        sx={{
+          flexGrow: 1,
+          borderRadius: "32px 0 0 32px",
+          justifyContent: "center"
+        }}
+        onClick={() => onViewChange("social")}
+      >
+        <SocialIcon />
+      </Flex>
+      <Flex
+        bg={view === "encounter" ? "primary" : "highlight"}
+        sx={{
+          flexGrow: 1,
+          borderRadius: "0 32px 32px 0",
+          justifyContent: "center"
+        }}
+        onClick={() => onViewChange("encounter")}
+      >
+        <EncounterIcon />
+      </Flex>
+    </Flex>
+  );
+}
+
+export default GameViewSwitch;
diff --git a/src/components/Party.js b/src/components/Party.js
index 51dcea5..2a27901 100644
--- a/src/components/Party.js
+++ b/src/components/Party.js
@@ -1,28 +1,78 @@
 import React from "react";
 
-import { Flex } from "theme-ui";
+import { Flex, Box } from "theme-ui";
 
 import PartyVideo from "./PartyVideo";
 import AddPartyMemberButton from "./AddPartyMemberButton";
+import GameViewSwitch from "./GameViewSwitch";
 
-function Party({ streams, localStreamId }) {
-  return (
-    <Flex
-      p={3}
-      bg="background"
-      sx={{
-        flexDirection: "column",
-        width: "192px",
-        minWidth: "192px",
-        overflowY: "auto"
-      }}
-    >
-      {Object.entries(streams).map(([id, stream]) => (
-        <PartyVideo key={id} stream={stream} muted={id === localStreamId} />
-      ))}
-      <AddPartyMemberButton streamId={localStreamId} />
-    </Flex>
-  );
+function Party({ streams, localStreamId, view, onViewChange }) {
+  if (view === "social") {
+    return (
+      <Flex
+        sx={{
+          flexDirection: "column",
+          width: "100%",
+          alignItems: "center",
+          overflowY: "auto"
+        }}
+      >
+        <Flex
+          p={3}
+          bg="background"
+          sx={{
+            flexDirection: "row",
+            width: "100%",
+            flexWrap: "wrap",
+            justifyContent: "center",
+            alignItems: "center"
+          }}
+        >
+          {Object.entries(streams).map(([id, stream]) => (
+            <Box key={id} m={2}>
+              <PartyVideo stream={stream} muted={id === localStreamId} />
+            </Box>
+          ))}
+        </Flex>
+        <Box sx={{ flexGrow: 1 }}>
+          <AddPartyMemberButton streamId={localStreamId} />
+        </Box>
+        <Flex my={2}>
+          <GameViewSwitch view={view} onViewChange={onViewChange} />
+        </Flex>
+      </Flex>
+    );
+  } else if (view === "encounter") {
+    return (
+      <Flex
+        p={3}
+        bg="background"
+        sx={{
+          flexDirection: "column",
+          width: "192px",
+          minWidth: "192px",
+          overflowY: "auto",
+          alignItems: "center"
+        }}
+      >
+        {Object.entries(streams).map(([id, stream]) => (
+          <Box key={id} my={1}>
+            <PartyVideo stream={stream} muted={id === localStreamId} />
+          </Box>
+        ))}
+        <Box sx={{ flexGrow: 1 }}>
+          <AddPartyMemberButton streamId={localStreamId} />
+        </Box>
+        <Flex my={1}>
+          <GameViewSwitch view={view} onViewChange={onViewChange} />
+        </Flex>
+      </Flex>
+    );
+  }
+
+  return null;
 }
 
+Party.defaultProps = { view: "social" };
+
 export default Party;
diff --git a/src/components/PartyVideo.js b/src/components/PartyVideo.js
index 1a80c72..0ab1f76 100644
--- a/src/components/PartyVideo.js
+++ b/src/components/PartyVideo.js
@@ -1,5 +1,4 @@
 import React, { useRef, useEffect } from "react";
-import { Box } from "theme-ui";
 
 function PartyVideo({ stream, muted }) {
   const videoRef = useRef();
@@ -11,14 +10,12 @@ function PartyVideo({ stream, muted }) {
   }, [stream]);
 
   return (
-    <Box my={1}>
-      <video
-        ref={videoRef}
-        autoPlay
-        muted={muted}
-        style={{ width: "100%", borderRadius: "4px" }}
-      />
-    </Box>
+    <video
+      ref={videoRef}
+      autoPlay
+      muted={muted}
+      style={{ width: "100%", borderRadius: "4px", maxWidth: "500px" }}
+    />
   );
 }
 
diff --git a/src/routes/Game.js b/src/routes/Game.js
index ecb0fe8..6719f1c 100644
--- a/src/routes/Game.js
+++ b/src/routes/Game.js
@@ -15,6 +15,7 @@ import useSession from "../helpers/useSession";
 import Party from "../components/Party";
 import Tokens from "../components/Tokens";
 import Map from "../components/Map";
+import GameViewSwitch from "../components/GameViewSwitch";
 
 function Game() {
   const { gameId } = useContext(GameContext);
@@ -94,22 +95,41 @@ function Game() {
     connection.send({ id: "tokenEdit", data: mapTokens });
   }
 
+  const [gameView, setGameView] = useState("social");
+
   return (
     <Flex sx={{ flexDirection: "column", height: "100vh" }}>
       <Flex
         sx={{ justifyContent: "space-between", flexGrow: 1, height: "100%" }}
       >
-        <Party streams={streams} localStreamId={peerId} />
-        <Map
-          mapSource={mapSource}
-          mapData={mapDataRef.current}
-          tokens={mapTokens}
-          onMapTokenMove={handleEditMapToken}
-          onMapTokenRemove={handleRemoveMapToken}
-          onMapChanged={handleMapChanged}
+        <Party
+          streams={streams}
+          localStreamId={peerId}
+          view={gameView}
+          onViewChange={setGameView}
         />
-        <Tokens onCreateMapToken={handleEditMapToken} />
+        {gameView === "encounter" && (
+          <Map
+            mapSource={mapSource}
+            mapData={mapDataRef.current}
+            tokens={mapTokens}
+            onMapTokenMove={handleEditMapToken}
+            onMapTokenRemove={handleRemoveMapToken}
+            onMapChanged={handleMapChanged}
+          />
+        )}
+        {gameView === "encounter" && (
+          <Tokens onCreateMapToken={handleEditMapToken} />
+        )}
       </Flex>
+      <Flex
+        sx={{
+          position: "absolute",
+          left: "50%",
+          bottom: 0,
+          transform: "translate(-50%, -50%)"
+        }}
+      ></Flex>
     </Flex>
   );
 }