Added full screen button

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>
     </>
   );
 }

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",

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

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" }}>

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;

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;

src/settings.js

@@ -27,6 +27,7 @@ function loadVersions(settings) {
       style: "galaxy",
     },
   }));
+  settings.version(2, (prev) => ({ ...prev, map: { fullScreen: false } }));
 }
 
 export function getSettings() {