Add manual option for full screen

Peterclark1996 · Feb 17, 2024 · 9009828 · 9009828
1 parent 9d24eb5
commit 9009828
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 29 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -122,36 +122,38 @@ const App = () => {
 
     return (
         <div className="app bg-secondary">
-            <aside className={`d-flex flex-column gap-2 ${classes.sidePanel}`}>
-                {getWorldListDropdown()}
-                {hasWorldDates && (
-                    <>
-                        {getDatePicker()}
-                        <CityScaleSlider />
-                        <TabbedOptions
-                            title="Islands"
-                            options={ISLAND_RENDER_OPTIONS}
-                            selectedOption={options.islands}
-                            setSelectedOption={option => options.setOption({ key: "islands", value: option })}
+            {!options.fullscreen && (
+                <aside className={`d-flex flex-column gap-2 ${classes.sidePanel}`}>
+                    {getWorldListDropdown()}
+                    {hasWorldDates && (
+                        <>
+                            {getDatePicker()}
+                            <CityScaleSlider />
+                            <TabbedOptions
+                                title="Islands"
+                                options={ISLAND_RENDER_OPTIONS}
+                                selectedOption={options.islands}
+                                setSelectedOption={option => options.setOption({ key: "islands", value: option })}
+                            />
+                            <TabbedOptions
+                                title="Grey Players"
+                                options={["on", "off"]}
+                                selectedOption={options.greyPlayers ? "on" : "off"}
+                                setSelectedOption={option => options.setOption({ key: "greyPlayers", value: option === "on" })}
+                            />
+                        </>
+                    )}
+                    {hasWorldData && (
+                        <AllianceList
+                            alliances={topAlliances}
+                            allianceColours={allianceColours}
+                            allianceLayers={allianceLayers}
+                            showLayer={showLayer}
+                            hideLayer={hideLayer}
                         />
-                        <TabbedOptions
-                            title="Grey Players"
-                            options={["on", "off"]}
-                            selectedOption={options.greyPlayers ? "on" : "off"}
-                            setSelectedOption={option => options.setOption({ key: "greyPlayers", value: option === "on" })}
-                        />
-                    </>
-                )}
-                {hasWorldData && (
-                    <AllianceList
-                        alliances={topAlliances}
-                        allianceColours={allianceColours}
-                        allianceLayers={allianceLayers}
-                        showLayer={showLayer}
-                        hideLayer={hideLayer}
-                    />
-                )}
-            </aside>
+                    )}
+                </aside>
+            )}
             {getMapContent()}
         </div>
     )

diff --git a/client/src/hooks/useOptions.ts b/client/src/hooks/useOptions.ts
@@ -6,6 +6,7 @@ type Options = {
     greyPlayers: boolean
     cityScale: number
     hiddenAllianceIds: number[]
+    fullscreen: boolean
     setOption: (action: OptionSetActions) => void
 }
 
@@ -37,6 +38,8 @@ const useOptions = () => {
 
     const cityScale = parseFloat(searchParams.get("cityScale") ?? "100")
 
+    const fullscreen = searchParams.get("fullscreen") === "true"
+
     const hiddenAllianceIds =
         searchParams
             .get("hiddenAllianceIds")
@@ -66,6 +69,7 @@ const useOptions = () => {
         greyPlayers,
         cityScale,
         hiddenAllianceIds,
+        fullscreen,
         setOption
     }