Added full screen button

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