Package Cleanup, Z-Index fixes, Tool Switch Overlay (#170)

* remove node-fetch, pin @react-three/xr

* settle down, z-index

* settle down, z-index

* remove body type css

* add overlay for tool switching, add camera icon, add z index 0 to main container

* small css fixes

* don't allow tab for tool switch when paused

Author: alex-shortt

package.json

@@ -61,10 +61,9 @@
     "@react-three/cannon": "6.4.0",
     "@react-three/drei": "9.65.3",
     "@react-three/fiber": "8.12.0",
-    "@react-three/xr": "^5.4.1",
+    "@react-three/xr": "5.4.1",
     "culori": "^0.18.2",
     "nipplejs": "0.8.1",
-    "node-fetch": "^2.6.1",
     "peerjs": "^1.4.6",
     "react-device-detect": "^1.13.1",
     "react-error-boundary": "^3.1.4",

src/ideas/modifiers/Tool/index.tsx

@@ -11,6 +11,7 @@ import ToolPreload from "./components/ToolPreload";
 type ToolProps = {
   children: ReactNode;
   name: string;
+  icon?: string;
   pos?: [number, number];
   face?: boolean;
   pinY?: boolean;
@@ -34,6 +35,7 @@ export function Tool(props: ToolProps) {
   const {
     children,
     name,
+    icon,
     pos = [0, 0],
     face = true,
     pinY = false,
@@ -44,8 +46,8 @@ export function Tool(props: ToolProps) {
     onSwitch,
   } = props;
 
-  const toolbelt = useToolbelt();
-  const ENABLED = toolbelt.activeTool?.name === name;
+  const { grant, revoke, activeTool, hudScene } = useToolbelt();
+  const ENABLED = activeTool?.name === name;
   const DISTANCE = 1;
 
   const [preloadDone, setPreloadDone] = useState(false);
@@ -58,13 +60,13 @@ export function Tool(props: ToolProps) {
   const visible = useVisible(prog);
 
   useEffect(() => {
-    toolbelt.grant(name, orderIndex);
-    return () => toolbelt.revoke(name);
-  }, [name, toolbelt.grant, toolbelt.revoke, orderIndex]);
+    grant(name, icon, orderIndex);
+    return () => revoke(name);
+  }, [name, icon, grant, revoke, orderIndex]);
 
   useEffect(() => {
-    if (onSwitch) onSwitch(toolbelt.activeTool?.name === name);
-  }, [toolbelt.activeTool, onSwitch, name]);
+    if (onSwitch) onSwitch(activeTool?.name === name);
+  }, [activeTool, onSwitch, name]);
 
   if (!preloadDone) {
     return (
@@ -97,7 +99,7 @@ export function Tool(props: ToolProps) {
             </OnScreen>
           </HUD>
         </group>,
-        toolbelt.hudScene
+        hudScene
       )}
     </>
   );

src/layers/Environment/index.tsx

@@ -42,7 +42,7 @@ export function Environment(props: EnvironmentLayerProps) {
     <>
       <GlobalStyles />
       <MuteOnHide />
-      <Container ref={state.containerRef}>
+      <Container id="__spacesvr" ref={state.containerRef}>
         <EnvironmentContext.Provider value={state}>
           {loadingScreen || <LoadingScreen />}
           {pauseMenu || <PauseMenu dev={dev} title={name} />}

src/layers/Environment/ui/Container.tsx

@@ -5,6 +5,7 @@ export const Container = styled.div`
   width: 100%;
   height: 100%;
   overflow: hidden;
+  z-index: 0;
 
   canvas {
     position: absolute;

src/layers/Environment/ui/GlobalStyles.tsx

@@ -21,11 +21,6 @@ const globalStyles = css`
     overflow: hidden;
     touch-action: none;
     -webkit-overflow-scrolling: touch;
-    font-family: "Quicksand", sans-serif;
-    font-size: 27px;
-    @media screen and (max-width: 500px) {
-      font-size: 24px;
-    }
   }
 `;
 
@@ -40,9 +35,5 @@ export default function GlobalStyles() {
     };
   }, []);
 
-  return (
-    <>
-      <Global styles={globalStyles} />
-    </>
-  );
+  return <Global styles={globalStyles} />;
 }

src/layers/Environment/ui/LoadingScreen/index.tsx

@@ -35,7 +35,7 @@ const Container = styled.div<{ finished: boolean }>`
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 200;
+  z-index: 11;
   background: white;
   transition: opacity 0.75s ease-in;
   transition-delay: 0.5s;
@@ -45,6 +45,11 @@ const Container = styled.div<{ finished: boolean }>`
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  font-family: "Quicksand", sans-serif;
+  font-size: 27px;
+  @media screen and (max-width: 500px) {
+    font-size: 24px;
+  }
 `;
 
 const Text = styled.div`

src/layers/Environment/ui/PauseMenu/components/components.tsx

@@ -6,7 +6,7 @@ export const Container = styled.div<{ paused: boolean; dev?: boolean }>`
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 100;
+  z-index: 10;
   transition: opacity 0.25s ease;
   background: rgba(0, 0, 0, ${(props) => (props.dev ? 0 : 0.25)});
   display: flex;
@@ -16,6 +16,10 @@ export const Container = styled.div<{ paused: boolean; dev?: boolean }>`
   opacity: ${(props) => (props.paused ? 1 : 0)};
   pointer-events: ${(props) => (props.paused ? "all" : "none")};
   font-family: "Quicksand", sans-serif;
+  font-size: 27px;
+  @media screen and (max-width: 500px) {
+    font-size: 24px;
+  }
 `;
 
 export const ClickContainer = styled.div`

src/layers/Network/logic/signallers/MuseSignaller.ts

@@ -1,4 +1,3 @@
-import nodeFetch, { Response } from "node-fetch";
 import { Peer } from "peerjs";
 import { Signaller, SignallerConfig } from "./";
 
@@ -36,7 +35,7 @@ export class MuseSignaller implements Signaller {
   }
 
   async callBackend<T = any>(path: string, body: any): Promise<Response> {
-    return await nodeFetch(`${this.host}/sessions/${path}`, {
+    return await fetch(`${this.host}/sessions/${path}`, {
       method: "POST",
       body: JSON.stringify(body),
       headers: { "Content-Type": "application/json" },