Added full screen button

2020-09-06 15:18:05 +10:00 · 2020-09-06 15:18:05 +10:00 · 58cb92d432
commit 58cb92d432
parent 24a3387b51
7 changed files with 138 additions and 56 deletions
--- a/src/components/map/MapControls.js
+++ b/src/components/map/MapControls.js
@ -16,6 +16,10 @@ import BrushToolIcon from "../../icons/BrushToolIcon";
 import MeasureToolIcon from "../../icons/MeasureToolIcon";
 import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
 import PointerToolIcon from "../../icons/PointerToolIcon";
+import FullScreenIcon from "../../icons/FullScreenIcon";
+import FullScreenExitIcon from "../../icons/FullScreenExitIcon";
+
+import useSetting from "../../helpers/useSetting";

 function MapContols({
  onMapChange,
@ -31,6 +35,7 @@ function MapContols({
  disabledSettings,
 }) {
  const [isExpanded, setIsExpanded] = useState(true);
+  const [fullScreen, setFullScreen] = useSetting("map.fullScreen");

  const toolsById = {
    pan: {
@ -190,6 +195,24 @@ function MapContols({
        {controls}
      </Flex>
      {getToolSettings()}
+      <Box
+        sx={{
+          position: "absolute",
+          right: 0,
+          bottom: 0,
+          backgroundColor: "overlay",
+          borderRadius: "50%",
+        }}
+        m={2}
+      >
+        <IconButton
+          onClick={() => setFullScreen(!fullScreen)}
+          aria-label={fullScreen ? "Exit Full Screen" : "Enter Full Screen"}
+          title={fullScreen ? "Exit Full Screen" : "Enter Full Screen"}
+        >
+          {fullScreen ? <FullScreenExitIcon /> : <FullScreenIcon />}
+        </IconButton>
+      </Box>
    </>
  );
 }
--- a/src/components/party/DiceTrayButton.js
+++ b/src/components/party/DiceTrayButton.js
@ -6,6 +6,8 @@ import DiceTrayOverlay from "../dice/DiceTrayOverlay";

 import { DiceLoadingProvider } from "../../contexts/DiceLoadingContext";

+import useSetting from "../../helpers/useSetting";
+
 function DiceTrayButton({
  shareDice,
  onShareDiceChage,
@ -13,13 +15,14 @@ function DiceTrayButton({
  onDiceRollsChange,
 }) {
  const [isExpanded, setIsExpanded] = useState(false);
+  const [fullScreen] = useSetting("map.fullScreen");

  return (
    <Flex
      sx={{
        position: "absolute",
        top: 0,
-        left: "100%",
+        left: fullScreen ? "0" : "100%",
        bottom: 0,
        flexDirection: "column",
        alignItems: "flex-start",
--- a/src/components/party/Party.js
+++ b/src/components/party/Party.js
@ -11,6 +11,8 @@ import StartTimerButton from "./StartTimerButton";
 import Timer from "./Timer";
 import DiceTrayButton from "./DiceTrayButton";

+import useSetting from "../../helpers/useSetting";
+
 function Party({
  nickname,
  partyNicknames,
@ -30,81 +32,95 @@ function Party({
  onDiceRollsChange,
  partyDiceRolls,
 }) {
+  const [fullScreen] = useSetting("map.fullScreen");
+
  return (
-    <Flex
-      p={3}
+    <Box
      bg="background"
      sx={{
-        flexDirection: "column",
-        overflow: "visible",
-        alignItems: "center",
        position: "relative",
-        width: "112px",
-        minWidth: "112px",
+        // width: fullScreen ? "0" : "112px",
+        // minWidth: fullScreen ? "0" : "112px",
      }}
    >
      <Box
        sx={{
-          width: "100%",
-        }}
-      >
-        <Text mb={1} variant="heading" as="h1">
-          Party
-        </Text>
-      </Box>
-      <SimpleBar
-        style={{
-          flexGrow: 1,
-          width: "100%",
+          flexDirection: "column",
+          overflow: "visible",
+          alignItems: "center",
+          height: "100%",
+          display: fullScreen ? "none" : "flex",
+          width: "112px",
          minWidth: "112px",
-          padding: "0 16px",
-          height: "calc(100% - 232px)",
        }}
+        p={3}
      >
-        <Nickname
-          nickname={`${nickname} (you)`}
-          diceRolls={shareDice && diceRolls}
-        />
-        {Object.entries(partyNicknames).map(([id, partyNickname]) => (
+        <Box
+          sx={{
+            width: "100%",
+          }}
+        >
+          <Text mb={1} variant="heading" as="h1">
+            Party
+          </Text>
+        </Box>
+        <SimpleBar
+          style={{
+            flexGrow: 1,
+            width: "100%",
+            minWidth: "112px",
+            padding: "0 16px",
+            height: "calc(100% - 232px)",
+          }}
+        >
          <Nickname
-            nickname={partyNickname}
-            key={id}
-            stream={partyStreams[id]}
-            diceRolls={partyDiceRolls[id]}
+            nickname={`${nickname} (you)`}
+            diceRolls={shareDice && diceRolls}
          />
-        ))}
-        {timer && <Timer timer={timer} index={0} />}
-        {Object.entries(partyTimers).map(([id, partyTimer], index) => (
-          <Timer
-            timer={partyTimer}
-            key={id}
-            // Put party timers above your timer if there is one
-            index={timer ? index + 1 : index}
+          {Object.entries(partyNicknames).map(([id, partyNickname]) => (
+            <Nickname
+              nickname={partyNickname}
+              key={id}
+              stream={partyStreams[id]}
+              diceRolls={partyDiceRolls[id]}
+            />
+          ))}
+          {timer && <Timer timer={timer} index={0} />}
+          {Object.entries(partyTimers).map(([id, partyTimer], index) => (
+            <Timer
+              timer={partyTimer}
+              key={id}
+              // Put party timers above your timer if there is one
+              index={timer ? index + 1 : index}
+            />
+          ))}
+        </SimpleBar>
+        <Flex sx={{ flexDirection: "column" }}>
+          <ChangeNicknameButton
+            nickname={nickname}
+            onChange={onNicknameChange}
          />
-        ))}
-      </SimpleBar>
-      <Flex sx={{ flexDirection: "column" }}>
-        <ChangeNicknameButton nickname={nickname} onChange={onNicknameChange} />
-        <AddPartyMemberButton gameId={gameId} />
-        <StartStreamButton
-          onStreamStart={onStreamStart}
-          onStreamEnd={onStreamEnd}
-          stream={stream}
-        />
-        <StartTimerButton
-          onTimerStart={onTimerStart}
-          onTimerStop={onTimerStop}
-          timer={timer}
-        />
-        <SettingsButton />
-      </Flex>
+          <AddPartyMemberButton gameId={gameId} />
+          <StartStreamButton
+            onStreamStart={onStreamStart}
+            onStreamEnd={onStreamEnd}
+            stream={stream}
+          />
+          <StartTimerButton
+            onTimerStart={onTimerStart}
+            onTimerStop={onTimerStop}
+            timer={timer}
+          />
+          <SettingsButton />
+        </Flex>
+      </Box>
      <DiceTrayButton
        shareDice={shareDice}
        onShareDiceChage={onShareDiceChage}
        diceRolls={diceRolls}
        onDiceRollsChange={onDiceRollsChange}
      />
-    </Flex>
+    </Box>
  );
 }

--- a/src/components/token/Tokens.js
+++ b/src/components/token/Tokens.js
@ -9,6 +9,7 @@ import ProxyToken from "./ProxyToken";
 import SelectTokensButton from "./SelectTokensButton";

 import { fromEntries } from "../../helpers/shared";
+import useSetting from "../../helpers/useSetting";

 import AuthContext from "../../contexts/AuthContext";
 import TokenDataContext from "../../contexts/TokenDataContext";
@ -18,6 +19,7 @@ const listTokenClassName = "list-token";
 function Tokens({ onMapTokenStateCreate }) {
  const { userId } = useContext(AuthContext);
  const { ownedTokens, tokens } = useContext(TokenDataContext);
+  const [fullScreen] = useSetting("map.fullScreen");

  function handleProxyDragEnd(isOnMap, token) {
    if (isOnMap && onMapTokenStateCreate) {
@ -48,6 +50,7 @@ function Tokens({ onMapTokenStateCreate }) {
          width: "80px",
          minWidth: "80px",
          overflow: "hidden",
+          display: fullScreen ? "none" : "block",
        }}
      >
        <SimpleBar style={{ height: "calc(100% - 48px)", overflowX: "hidden" }}>
--- a/src/icons/FullScreenExitIcon.js
+++ b/src/icons/FullScreenExitIcon.js
@ -0,0 +1,18 @@
+import React from "react";
+
+function FullScreenIcon() {
+  return (
+    <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="M6 16h2v2c0 .55.45 1 1 1s1-.45 1-1v-3c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1s.45 1 1 1zm2-8H6c-.55 0-1 .45-1 1s.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1s-1 .45-1 1v2zm7 11c.55 0 1-.45 1-1v-2h2c.55 0 1-.45 1-1s-.45-1-1-1h-3c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1zm1-11V6c0-.55-.45-1-1-1s-1 .45-1 1v3c0 .55.45 1 1 1h3c.55 0 1-.45 1-1s-.45-1-1-1h-2z" />
+    </svg>
+  );
+}
+
+export default FullScreenIcon;
--- a/src/icons/FullScreenIcon.js
+++ b/src/icons/FullScreenIcon.js
@ -0,0 +1,18 @@
+import React from "react";
+
+function FullScreenIcon() {
+  return (
+    <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="M6 14c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1h3c.55 0 1-.45 1-1s-.45-1-1-1H7v-2c0-.55-.45-1-1-1zm0-4c.55 0 1-.45 1-1V7h2c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1zm11 7h-2c-.55 0-1 .45-1 1s.45 1 1 1h3c.55 0 1-.45 1-1v-3c0-.55-.45-1-1-1s-1 .45-1 1v2zM14 6c0 .55.45 1 1 1h2v2c0 .55.45 1 1 1s1-.45 1-1V6c0-.55-.45-1-1-1h-3c-.55 0-1 .45-1 1z" />
+    </svg>
+  );
+}
+
+export default FullScreenIcon;
--- a/src/settings.js
+++ b/src/settings.js
@ -27,6 +27,7 @@ function loadVersions(settings) {
      style: "galaxy",
    },
  }));
+  settings.version(2, (prev) => ({ ...prev, map: { fullScreen: false } }));
 }

 export function getSettings() {