[#2] Sidemenu for touchscreen devices

src/components/scene/Buttons.tsx

@@ -106,9 +106,6 @@ export const Buttons = ({
         : 0,
   });
 
-  const printerMenuSpring = useThreeSpring<MeshStandardMaterial>({
-    opacity: currentView === View.PrinterView ? 1 : 0,
-  });
   const desktopViewSpring = useThreeSpring<BufferGeometry>({
     scale: hovered === View.DesktopView ? 1.25 : 1,
   });
@@ -398,45 +395,6 @@ export const Buttons = ({
           />
         </animated.mesh>
       </group>
-      {/* Printer Menu */}
-      <group>
-        <Billboard position={[-3.25, 6.65, -2.75]}>
-          <AnimatedText
-            maxWidth={4.5}
-            font="/assets/inter.ttf"
-            fontSize={0.25}
-            outlineWidth={1 / 60}
-            fillOpacity={printerMenuSpring.opacity}
-            outlineOpacity={printerMenuSpring.opacity}
-          >
-            CAD and 3D printing
-          </AnimatedText>
-        </Billboard>
-        <Billboard position={[-2.75, 5.25, -2.25]}>
-          <AnimatedText
-            maxWidth={3}
-            textAlign="center"
-            font="/assets/inter.ttf"
-            fontSize={0.25}
-            outlineWidth={1 / 60}
-            fillOpacity={printerMenuSpring.opacity}
-            outlineOpacity={printerMenuSpring.opacity}
-          >
-            Building with electronics
-          </AnimatedText>
-        </Billboard>
-        <Billboard position={[-5.5, 3.175, -3]}>
-          <AnimatedText
-            font="/assets/inter.ttf"
-            fontSize={0.25}
-            outlineWidth={1 / 60}
-            fillOpacity={printerMenuSpring.opacity}
-            outlineOpacity={printerMenuSpring.opacity}
-          >
-            Gaming
-          </AnimatedText>
-        </Billboard>
-      </group>
     </>
   );
 };

src/components/scene/Scene.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { SpotLight } from "three";
+import { MeshStandardMaterial, SpotLight } from "three";
 import {
   useGLTF,
   PerspectiveCamera,
@@ -9,6 +9,7 @@ import {
   Html,
   type PerspectiveCameraProps,
   PerformanceMonitor,
+  Billboard,
 } from "@react-three/drei";
 import {
   animated as threeAnimated,
@@ -29,6 +30,7 @@ import {
 } from "react";
 import round from "lodash/round";
 import Stack from "@/util/stack";
+import isMobile from "@/util/isMobile";
 import { Canvas } from "@react-three/fiber";
 import { mdiArrowLeftBold } from "@mdi/js";
 import { Icon } from "@mdi/react";
@@ -45,7 +47,9 @@ import { isWebGL2Available } from "@react-three/drei";
 import { useWindowSize } from "../hooks/useWindowSize";
 import { Info } from "../util/Info";
 import { Loader } from "../ui/Loader";
+import { MobileMenu } from "../ui/MobileMenu";
 
+const AnimatedText = threeAnimated(Text);
 const AnimatedCam = threeAnimated(PerspectiveCamera);
 const AnimatedButton = webAnimated.button as React.ComponentType<
   React.ButtonHTMLAttributes<HTMLButtonElement> & { children?: React.ReactNode }
@@ -55,6 +59,7 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
   const { nodes, materials } = useGLTF("/scene.glb") as unknown as GLTFResult;
   const { width, height } = useWindowSize();
   const config = useConfig();
+  const mobile = isMobile();
 
   // States
   const [fps, setFps] = useState(0);
@@ -116,6 +121,10 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
     },
   });
 
+  const printerMenuSpring = useThreeSpring<MeshStandardMaterial>({
+    opacity: currentView === View.PrinterView ? 1 : 0,
+  });
+
   const { backScale, backOpacity } = useWebSpring({
     backScale: backHovered ? 1.25 : 1,
     backOpacity: menuTraversal.size() > 1 ? 1 : 0,
@@ -130,30 +139,41 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
           <>
             <Loader />
             <div className="pointer-events-none fixed z-[999999999] size-full">
-              <AnimatedButton
-                style={{
-                  transform: backScale.to(
-                    (s) => `scale(${s})`
-                  ) as unknown as string,
-                  opacity: backOpacity as unknown as number,
-                  pointerEvents: menuTraversal.size() > 1 ? "auto" : "none",
-                  cursor: backHovered ? "pointer" : "auto",
-                }}
-                className="m-4"
-                onMouseEnter={() => setBackHovered(true)}
-                onMouseLeave={() => setBackHovered(false)}
-                onClick={() => {
-                  setBackClicked(true);
-                  goPreviousView();
-                }}
-              >
-                <Icon
-                  path={mdiArrowLeftBold}
-                  size={2}
-                  color="white"
-                  className="stroke-[0.75] stroke-black"
+              {mobile ? (
+                <MobileMenu
+                  menuTraversal={menuTraversal}
+                  setMenuTraversal={setMenuTraversal}
+                  pendingView={pendingView}
+                  setPendingView={setPendingView}
+                  goPreviousView={goPreviousView}
+                  currentView={currentView}
                 />
-              </AnimatedButton>
+              ) : (
+                <AnimatedButton
+                  style={{
+                    transform: backScale.to(
+                      (s) => `scale(${s})`
+                    ) as unknown as string,
+                    opacity: backOpacity as unknown as number,
+                    pointerEvents: menuTraversal.size() > 1 ? "auto" : "none",
+                    cursor: backHovered ? "pointer" : "auto",
+                  }}
+                  className="m-2"
+                  onMouseEnter={() => setBackHovered(true)}
+                  onMouseLeave={() => setBackHovered(false)}
+                  onClick={() => {
+                    setBackClicked(true);
+                    goPreviousView();
+                  }}
+                >
+                  <Icon
+                    path={mdiArrowLeftBold}
+                    size={2}
+                    color="white"
+                    className="stroke-[0.75] stroke-black"
+                  />
+                </AnimatedButton>
+              )}
               <div className="min-w-12 text-white bottom-0 right-0 absolute m-3 p-1 text-xs text-right text-stroke-2 text-stroke-black paint-sfm">
                 <Info />
                 {fps > 0 && (
@@ -179,14 +199,16 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
                   >
                     <Environment preset="apartment" />
                     <AnimatedCam makeDefault {...cameraSpring} />
-                    <Buttons
-                      menuTraversal={menuTraversal}
-                      setMenuTraversal={setMenuTraversal}
-                      pendingView={pendingView}
-                      setPendingView={setPendingView}
-                      goPreviousView={goPreviousView}
-                      currentView={currentView}
-                    />
+                    {!mobile && (
+                      <Buttons
+                        menuTraversal={menuTraversal}
+                        setMenuTraversal={setMenuTraversal}
+                        pendingView={pendingView}
+                        setPendingView={setPendingView}
+                        goPreviousView={goPreviousView}
+                        currentView={currentView}
+                      />
+                    )}
                     <group>
                       <primitive
                         object={spotlight}
@@ -359,6 +381,44 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
                       </Text>
                     )}
                     <StaticMeshes nodes={nodes} materials={materials} />
+                    <group>
+                      <Billboard position={[-3.25, 6.65, -2.75]}>
+                        <AnimatedText
+                          maxWidth={4.5}
+                          font="/assets/inter.ttf"
+                          fontSize={0.25}
+                          outlineWidth={1 / 60}
+                          fillOpacity={printerMenuSpring.opacity}
+                          outlineOpacity={printerMenuSpring.opacity}
+                        >
+                          CAD and 3D printing
+                        </AnimatedText>
+                      </Billboard>
+                      <Billboard position={[-2.75, 5.25, -2.25]}>
+                        <AnimatedText
+                          maxWidth={3}
+                          textAlign="center"
+                          font="/assets/inter.ttf"
+                          fontSize={0.25}
+                          outlineWidth={1 / 60}
+                          fillOpacity={printerMenuSpring.opacity}
+                          outlineOpacity={printerMenuSpring.opacity}
+                        >
+                          Building with electronics
+                        </AnimatedText>
+                      </Billboard>
+                      <Billboard position={[-5.5, 3.175, -3]}>
+                        <AnimatedText
+                          font="/assets/inter.ttf"
+                          fontSize={0.25}
+                          outlineWidth={1 / 60}
+                          fillOpacity={printerMenuSpring.opacity}
+                          outlineOpacity={printerMenuSpring.opacity}
+                        >
+                          Gaming
+                        </AnimatedText>
+                      </Billboard>
+                    </group>
                   </PerformanceMonitor>
                 </group>
               </Suspense>

src/components/ui/Loader.tsx

@@ -2,88 +2,89 @@
 
 import { useProgress } from "@react-three/drei";
 import { animated, useSpring, useTransition } from "@react-spring/web";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 
 export const Loader = ({ minDuration = 750, fadeMs = 600 }) => {
-  const { progress } = useProgress();
-  const [loadedAt, setLoadedAt] = useState<number | null>(null);
-
-  const maxSeen = useRef(0);
-  if (progress > maxSeen.current) maxSeen.current = progress;
-
-  useEffect(() => {
-    if (maxSeen.current === 100 && loadedAt === null) setLoadedAt(Date.now());
-  }, [loadedAt]);
-
-  const visible =
-    loadedAt === null || Date.now() - loadedAt < minDuration + fadeMs;
-
-  const barSpring = useSpring({
+  const [barDone, setBarDone] = useState(false);
+  const barStyles = useSpring({
     from: { width: "0%" },
     to: { width: "100%" },
     config: { duration: minDuration },
+    onRest: () => setBarDone(true),
   });
 
+  const { progress } = useProgress();
+  const [assetsDone, setAssetsDone] = useState(false);
+  useEffect(() => {
+    if (progress === 100) setAssetsDone(true);
+  }, [progress]);
+
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    if (barDone && assetsDone) {
+      const id = setTimeout(() => setVisible(false), fadeMs);
+      return () => clearTimeout(id);
+    }
+  }, [barDone, assetsDone, fadeMs]);
+
   const overlay = useTransition(visible, {
     from: { opacity: 1 },
-    enter: { opacity: 1 },
     leave: { opacity: 0 },
-    config: { duration: fadeMs, easing: (t) => Math.pow(t, 2) },
+    config: { duration: fadeMs, easing: (t) => t * t },
   });
 
   return createPortal(
     overlay(
       (styles, show) =>
         show && (
-          // @ts-expect-error children not typed bug
-          <animated.div
-            style={{
-              ...styles,
-              position: "fixed",
-              inset: 0,
-              background: "#1b1b1b",
-              zIndex: 999999999,
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: "1.5rem",
-              fontSize: "2.25rem",
-              color: "white",
-              pointerEvents: "none",
-              paddingTop: "2.5rem",
-            }}
-          >
-            <p>Loading…</p>
-
-            <div
+          <div>
+            {/* @ts-expect-error children not typed bug */}
+            <animated.div
               style={{
-                width: 192,
-                height: 16,
-                background: "#4b4b4b",
-                borderRadius: 8,
-                overflow: "hidden",
+                ...styles,
+                position: "fixed",
+                inset: 0,
+                background: "#1b1b1b",
+                zIndex: 1e9,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "1.5rem",
+                fontSize: "2.25rem",
+                color: "#fff",
+                pointerEvents: "none",
+                paddingTop: "2.5rem",
               }}
             >
-              {/* @ts-expect-error children not typed bug */}
-              <animated.div
+              <p>Loading…</p>
+
+              <div
                 style={{
-                  ...barSpring,
-                  height: "100%",
-                  background: "#ffffff",
+                  width: 192,
+                  height: 16,
+                  background: "#4b4b4b",
+                  borderRadius: 8,
+                  overflow: "hidden",
                 }}
               >
                 {/* @ts-expect-error children not typed bug */}
-                <animated.div className="text-[#1b1b1b] text-xs justify-center flex items-center h-full">
-                  {barSpring.width.to((w) => {
-                    const p = parseInt(w) || 0;
-                    return `${p > 5 ? p : ""}`;
-                  })}
+                <animated.div
+                  style={{ ...barStyles, height: "100%", background: "#fff" }}
+                >
+                  {/* @ts-expect-error children not typed bug */}
+                  <animated.div className="text-[#1b1b1b] text-xs flex h-full items-center justify-center">
+                    {barStyles.width.to((w) => {
+                      const p = parseInt(w) || 0;
+                      return p > 5 ? p : "";
+                    })}
+                  </animated.div>
                 </animated.div>
-              </animated.div>
-            </div>
-          </animated.div>
+              </div>
+            </animated.div>
+          </div>
         )
     ),
     document.body

src/components/ui/MobileMenu.tsx

@@ -0,0 +1,113 @@
+import type Stack from "@/util/stack";
+import {
+  useCallback,
+  useEffect,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from "react";
+import { View, viewToHash } from "../scene/consts";
+import { animated, useSpring } from "@react-spring/web";
+import Icon from "@mdi/react";
+import { mdiMenu } from "@mdi/js";
+
+interface MobileMenuProps {
+  menuTraversal: Stack<View>;
+  setMenuTraversal: Dispatch<SetStateAction<Stack<View>>>;
+  pendingView: View | null;
+  setPendingView: Dispatch<SetStateAction<View | null>>;
+  goPreviousView(): void;
+  currentView: View;
+}
+
+const AnimatedButton = animated.button as React.ComponentType<
+  React.ButtonHTMLAttributes<HTMLButtonElement> & { children?: React.ReactNode }
+>;
+
+export const MobileMenu = ({
+  menuTraversal,
+  setMenuTraversal,
+  pendingView,
+  setPendingView,
+  goPreviousView,
+  currentView,
+}: MobileMenuProps) => {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const goToView = useCallback(
+    (view: View) => {
+      setMenuTraversal((prev) => {
+        const next = prev.clone();
+        next.push(view);
+        return next;
+      });
+      setPendingView(view);
+    },
+    [setMenuTraversal, setPendingView]
+  );
+
+  useEffect(() => {
+    const onPop = () => {
+      goPreviousView();
+    };
+    window.addEventListener("popstate", onPop);
+    return () => window.removeEventListener("popstate", onPop);
+  }, [goPreviousView]);
+
+  useEffect(() => {
+    if (pendingView === null) return;
+    window.history.pushState(
+      { depth: menuTraversal.size() },
+      "",
+      viewToHash[pendingView] ? `#${viewToHash[pendingView]}` : "/"
+    );
+    setPendingView(null);
+  }, [menuTraversal, pendingView, setPendingView]);
+
+  const slideProps = useSpring({
+    x: menuOpen ? 0 : -128,
+    config: { tension: 200, friction: 20 },
+  });
+
+  return (
+    <div className="pointer-events-auto">
+      <AnimatedButton
+        className="m-2"
+        onClick={() => setMenuOpen((prev) => !prev)}
+      >
+        <Icon
+          path={mdiMenu}
+          size={1.5}
+          color="white"
+          className="stroke-[0.75] stroke-black"
+        />
+      </AnimatedButton>
+      {/* @ts-expect-error children not typed bug */}
+      <animated.div
+        style={{
+          transform: slideProps.x.to((x) => `translateX(${x}%)`),
+        }}
+        className="text-white flex flex-col w-min gap-2 text-stroke-2 text-stroke-black paint-sfm ml-2"
+      >
+        {[
+          { label: "Home", view: View.MainView },
+          { label: "Projects", view: View.PCView },
+          { label: "Socials", view: View.CellphoneView },
+          { label: "Resume", view: View.ResumeView },
+          { label: "Hobbies", view: View.PrinterView },
+          { label: "Credits", view: View.CreditsView },
+        ].map(({ label, view }) => (
+          <button
+            key={view}
+            className={`${
+              currentView === view ? "bg-neutral-700/50" : "bg-neutral-500/50"
+            } px-2 py-1 transition-all duration-300 hover:bg-neutral-700/50 hover:scale-110 rounded`}
+            onClick={() => goToView(view)}
+          >
+            {label}
+          </button>
+        ))}
+      </animated.div>
+    </div>
+  );
+};

src/types/scene.d.ts

@@ -26,10 +26,6 @@ export type GLTFResult = GLTF & {
     PenBody: Mesh;
     PenTip: Mesh;
     CellphoneMesh: Mesh;
-    Top: Mesh;
-    OfficePhoneBody: Mesh;
-    Screen: Mesh;
-    Buttons: Mesh;
     Handle: Mesh;
     HeadphonesBody: Mesh;
     HeadphonesAccent: Mesh;
@@ -74,10 +70,6 @@ export type GLTFResult = GLTF & {
     PenBodyMaterial: MeshStandardMaterial;
     TipMaterial: MeshStandardMaterial;
     CellphoneMaterial: MeshStandardMaterial;
-    TopMaterial: MeshStandardMaterial;
-    OfficePhoneBodyMaterial: MeshStandardMaterial;
-    ScreenMaterial: MeshStandardMaterial;
-    HandleAndButtonsMaterial: MeshStandardMaterial;
     HeadphonesBodyMaterial: MeshStandardMaterial;
     HeadphonesAccentMaterial: MeshStandardMaterial;
     CoverMaterial: MeshStandardMaterial;

src/util/isMobile.ts

@@ -0,0 +1,5 @@
+export default function isMobile(): boolean {
+  return typeof window === "undefined"
+    ? false
+    : window.matchMedia?.("(pointer: coarse)").matches;
+}