first person camera bug and new project loading screen stuck bug fixed

app/src/components/Dashboard/SidePannel.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import {
-  DocumentationIcon,
-  HelpIcon,
-  HomeIcon,
-  LogoutIcon,
-  NotificationIcon,
-  ProjectsIcon,
-  TutorialsIcon,
+    DocumentationIcon,
+    HelpIcon,
+    HomeIcon,
+    LogoutIcon,
+    NotificationIcon,
+    ProjectsIcon,
+    TutorialsIcon,
 } from "../icons/DashboardIcon";
 import { useNavigate } from "react-router-dom";
 import darkThemeImage from "../../assets/image/darkThemeProject.png";
@@ -15,180 +15,174 @@ import { SettingsIcon, TrashIcon } from "../icons/ExportCommonIcons";
 import { getUserData } from "../../functions/getUserData";
 import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
 
+// import { createProject } from "../../services/dashboard/createProject";
+
 interface SidePannelProps {
-  setActiveTab: React.Dispatch<React.SetStateAction<string>>;
-  activeTab: string;
+    setActiveTab: React.Dispatch<React.SetStateAction<string>>;
+    activeTab: string;
 }
 
 const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
-  const { email, userName, userId, organization } = getUserData();
-  const navigate = useNavigate();
-  const { setLoadingProgress } = useLoadingProgress();
-  const { projectSocket } = useSocketStore();
-  const savedTheme = localStorage.getItem("theme") ?? "light";
+    const { email, userName, userId, organization } = getUserData();
+    const navigate = useNavigate();
+    const { setLoadingProgress } = useLoadingProgress();
+    const { projectSocket, initializeSocket } = useSocketStore();
+    const savedTheme = localStorage.getItem("theme") ?? "light";
 
-  function generateProjectId() {
-    const randomBytes = new Uint8Array(12);
-    crypto.getRandomValues(randomBytes);
-    return Array.from(randomBytes, (byte) =>
-      byte.toString(16).padStart(2, "0")
-    ).join("");
-  }
-
-  const handleCreateNewProject = async () => {
-    const token = localStorage.getItem("token");
-    const refreshToken = localStorage.getItem("refreshToken");
-    if (!token || !refreshToken) {
-      console.error('token expired');
-      return;
+    function generateProjectId() {
+        const randomBytes = new Uint8Array(12);
+        crypto.getRandomValues(randomBytes);
+        return Array.from(randomBytes, (byte) =>
+            byte.toString(16).padStart(2, "0")
+        ).join("");
     }
-    try {
-      const projectId = generateProjectId();
-      useSocketStore.getState().initializeSocket(email, organization, token, refreshToken);
 
-      //API for creating new Project
-      // const project = await createProject(
-      //   projectId,
-      //   userId,
-      //   savedTheme === "dark" ? darkThemeImage : lightThemeImage,
-      //   organization
-      // );
+    const handleCreateNewProject = async () => {
+        const token = localStorage.getItem("token");
+        const refreshToken = localStorage.getItem("refreshToken");
+        if (!token || !refreshToken) {
+            console.error('token expired');
+            return;
+        }
 
-      const addProject = {
-        userId,
-        thumbnail: savedTheme === "dark" ? darkThemeImage : lightThemeImage,
-        organization: organization,
-        projectUuid: projectId,
-      };
+        const projectId = generateProjectId();
+        initializeSocket(email, organization, token, refreshToken);
 
-      if (projectSocket) {
-        const handleResponse = (data: any) => {
-          if (data.message === "Project created successfully") {
-            setLoadingProgress(1);
-            navigate(`/projects/${data.data.projectId}`);
-          }
-          projectSocket.off("v1-project:response:add", handleResponse); // Clean up
-        };
-        projectSocket.on("v1-project:response:add", handleResponse);
+        if (projectSocket?.connected) {
+            // SOCKET
+            const addProject = {
+                userId,
+                thumbnail: savedTheme === "dark" ? darkThemeImage : lightThemeImage,
+                organization: organization,
+                projectUuid: projectId,
+            };
+            const handleResponse = (data: any) => {
+                if (data.message === "Project created successfully") {
+                    setLoadingProgress(1);
+                    navigate(`/projects/${data.data.projectId}`);
+                }
+                projectSocket.off("v1-project:response:add", handleResponse);
+            };
+            projectSocket.on("v1-project:response:add", handleResponse);
 
-        projectSocket.emit("v1:project:add", addProject);
-      } else {
-        console.error("Socket is not connected.");
-      }
-    } catch (error) {
-      console.error("Error creating project:", error);
-    }
-  };
+            projectSocket.emit("v1:project:add", addProject);
+        } else {
+            // API
+            // const project = await createProject(
+            //   projectId,
+            //   userId,
+            //   savedTheme === "dark" ? darkThemeImage : lightThemeImage,
+            //   organization
+            // );
+        }
+    };
 
-  return (
-    <div className="side-pannel-container">
-      <div className="side-pannel-header">
-        <div className="user-container">
-          <div className="user-profile">
-            {userName?.charAt(0).toUpperCase()}
-          </div>
-          <div className="user-name">
-            {userName
-              ? userName.charAt(0).toUpperCase() +
-              userName.slice(1).toLowerCase()
-              : "Anonymous"}
-          </div>
+    return (
+        <div className="side-pannel-container">
+            <div className="side-pannel-header">
+                <div className="user-container">
+                    <div className="user-profile">
+                        {userName?.charAt(0).toUpperCase()}
+                    </div>
+                    <div className="user-name">
+                        {userName ? userName.charAt(0).toUpperCase() + userName.slice(1).toLowerCase() : "Anonymous"}
+                    </div>
+                </div>
+                <div className="notifications-container">
+                    <NotificationIcon />
+                </div>
+            </div>
+            <div
+                className="new-project-button"
+                style={{ cursor: "pointer" }}
+                onClick={handleCreateNewProject}
+            >
+                + New project
+            </div>
+            <div className="side-bar-content-container">
+                <div className="side-bar-options-container">
+                    <div
+                        className={
+                            activeTab === "Home" ? "option-list active" : "option-list"
+                        }
+                        onClick={() => setActiveTab("Home")}
+                    >
+                        <HomeIcon />
+                        Home
+                    </div>
+                    <div
+                        className={
+                            activeTab === "Projects" ? "option-list active" : "option-list"
+                        }
+                        title="Projects"
+                        onClick={() => setActiveTab("Projects")}
+                    >
+                        <ProjectsIcon />
+                        Projects
+                    </div>
+                    <div
+                        className={
+                            activeTab === "Trash" ? "option-list active" : "option-list"
+                        }
+                        title="Trash"
+                        onClick={() => setActiveTab("Trash")}
+                    >
+                        <TrashIcon />
+                        Trash
+                    </div>
+                    <div
+                        className={
+                            activeTab === "Tutorials" ? "option-list active" : "option-list"
+                        }
+                        title="coming soon"
+                        onClick={() => {
+                            // setActiveTab("Tutorials");
+                            console.warn("Tutorials comming soon");
+                        }}
+                    >
+                        <TutorialsIcon />
+                        Tutorials
+                    </div>
+                    <div
+                        className={
+                            activeTab === "Documentation"
+                                ? "option-list active"
+                                : "option-list"
+                        }
+                        title="coming soon"
+                        onClick={() => {
+                            // setActiveTab("Documentation");
+                            console.warn("Documentation comming soon");
+                        }}
+                    >
+                        <DocumentationIcon />
+                        Documentation
+                    </div>
+                </div>
+                <div className="side-bar-options-container">
+                    <div className="option-list" title="coming soon">
+                        <SettingsIcon />
+                        Settings
+                    </div>
+                    <div
+                        className="option-list"
+                        style={{ cursor: "pointer" }}
+                        onClick={() => {
+                            localStorage.clear();
+                            navigate("/");
+                        }}
+                    >
+                        <LogoutIcon />
+                        Log out
+                    </div>
+                    <div className="option-list" title="coming soon">
+                        <HelpIcon />
+                        Help & Feedback
+                    </div>
+                </div>
+            </div>
         </div>
-        <div className="notifications-container">
-          <NotificationIcon />
-        </div>
-      </div>
-      <div
-        className="new-project-button"
-        style={{ cursor: "pointer" }}
-        onClick={handleCreateNewProject}
-      >
-        + New project
-      </div>
-      <div className="side-bar-content-container">
-        <div className="side-bar-options-container">
-          <div
-            className={
-              activeTab === "Home" ? "option-list active" : "option-list"
-            }
-            onClick={() => setActiveTab("Home")}
-          >
-            <HomeIcon />
-            Home
-          </div>
-          <div
-            className={
-              activeTab === "Projects" ? "option-list active" : "option-list"
-            }
-            title="Projects"
-            onClick={() => setActiveTab("Projects")}
-          >
-            <ProjectsIcon />
-            Projects
-          </div>
-          <div
-            className={
-              activeTab === "Trash" ? "option-list active" : "option-list"
-            }
-            title="Trash"
-            onClick={() => setActiveTab("Trash")}
-          >
-            <TrashIcon />
-            Trash
-          </div>
-          <div
-            className={
-              activeTab === "Tutorials" ? "option-list active" : "option-list"
-            }
-            title="coming soon"
-            onClick={() => {
-              // setActiveTab("Tutorials");
-              console.warn("Tutorials comming soon");
-            }}
-          >
-            <TutorialsIcon />
-            Tutorials
-          </div>
-          <div
-            className={
-              activeTab === "Documentation"
-                ? "option-list active"
-                : "option-list"
-            }
-            title="coming soon"
-            onClick={() => {
-              // setActiveTab("Documentation");
-              console.warn("Documentation comming soon");
-            }}
-          >
-            <DocumentationIcon />
-            Documentation
-          </div>
-        </div>
-        <div className="side-bar-options-container">
-          <div className="option-list" title="coming soon">
-            <SettingsIcon />
-            Settings
-          </div>
-          <div
-            className="option-list"
-            style={{ cursor: "pointer" }}
-            onClick={() => {
-              localStorage.clear();
-              navigate("/");
-            }}
-          >
-            <LogoutIcon />
-            Log out
-          </div>
-          <div className="option-list" title="coming soon">
-            <HelpIcon />
-            Help & Feedback
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+    );
 };
 
 export default SidePannel;

app/src/components/layout/scenes/MainScene.tsx

@@ -72,11 +72,13 @@ function MainScene() {
         if (versionHistory.length > 0 && organization && userId) {
             recentlyViewed(organization, userId).then((projects) => {
                 const recent_opened_verisionID = (Object.values(projects?.RecentlyViewed || {})[0] as any)?.Present_version._id;
-                if (recent_opened_verisionID) {
+                if (recent_opened_verisionID && projects.RecentlyViewed[0]._id === projectId) {
                     const version = versionHistory.find((ver) => ver.versionId === recent_opened_verisionID);
                     if (version) {
                         setSelectedVersion(version);
                     }
+                } else {
+                    setSelectedVersion(versionHistory[0]);
                 }
             })
         }

app/src/modules/scene/camera/camMode.tsx

@@ -7,7 +7,6 @@ import { useCamMode, useToggleView } from "../../../store/builder/store";
 import switchToThirdPerson from "./functions/switchToThirdPerson";
 import switchToFirstPerson from "./functions/switchToFirstPerson";
 import { detectModifierKeys } from "../../../utils/shortcutkeys/detectModifierKeys";
-import { firstPersonCamera } from "./functions/firstPersonCamera";
 
 const CamMode: React.FC = () => {
     const { camMode, setCamMode } = useCamMode();
@@ -41,14 +40,22 @@ const CamMode: React.FC = () => {
             const keyCombination = detectModifierKeys(event);
 
             if (keyCombination === "/" && !isTransitioning && !toggleView) {
-                firstPersonCamera({
-                    setIsTransitioning,
-                    state,
-                    camMode,
-                    setCamMode,
-                    switchToFirstPerson,
-                    switchToThirdPerson,
-                });
+                setIsTransitioning && setIsTransitioning(true);
+
+                state.controls.mouseButtons.left = CONSTANTS.controlsTransition.leftMouse;
+                state.controls.mouseButtons.right = CONSTANTS.controlsTransition.rightMouse;
+                state.controls.mouseButtons.wheel = CONSTANTS.controlsTransition.wheelMouse;
+                state.controls.mouseButtons.middle = CONSTANTS.controlsTransition.middleMouse;
+
+                if (camMode === "ThirdPerson") {
+                    setCamMode("FirstPerson");
+                    await switchToFirstPerson(state.controls, state.camera);
+                } else if (camMode === "FirstPerson") {
+                    setCamMode("ThirdPerson");
+                    await switchToThirdPerson(state.controls, state.camera);
+                }
+
+                setIsTransitioning && setIsTransitioning(false);
             }
 
             if (keyCombination === 'Shift') {
@@ -77,7 +84,7 @@ const CamMode: React.FC = () => {
         if (!state.controls) return;
         if (camMode === "ThirdPerson" || !document.pointerLockElement) return;
 
-        const speedMultiplier = isShiftActive ? 4 : 1;
+        const speedMultiplier = isShiftActive ? CONSTANTS.firstPersonControls.sprintSpeed : CONSTANTS.firstPersonControls.walkSpeed;
 
         if (forward) {
             state.controls.forward(CONSTANTS.firstPersonControls.forwardSpeed * speedMultiplier, true);

app/src/modules/scene/camera/functions/firstPersonCamera.ts

@@ -1,39 +0,0 @@
-import * as CONSTANTS from "../../../../types/world/worldConstants";
-
-interface FirstPersonCameraProps {
-    setIsTransitioning?: (value: boolean) => void;
-    state: any;
-}
-
-interface FirstPersonCameraParams extends FirstPersonCameraProps {
-    camMode: string;
-    setCamMode: (mode: string) => void;
-    switchToFirstPerson: (controls: any, camera: any) => Promise<void>;
-    switchToThirdPerson: (controls: any, camera: any) => Promise<void>;
-}
-
-export async function firstPersonCamera({
-    setIsTransitioning,
-    state,
-    camMode,
-    setCamMode,
-    switchToFirstPerson,
-    switchToThirdPerson
-}: FirstPersonCameraParams): Promise<void> {
-    setIsTransitioning && setIsTransitioning(true);
-
-    state.controls.mouseButtons.left = CONSTANTS.controlsTransition.leftMouse;
-    state.controls.mouseButtons.right = CONSTANTS.controlsTransition.rightMouse;
-    state.controls.mouseButtons.wheel = CONSTANTS.controlsTransition.wheelMouse;
-    state.controls.mouseButtons.middle = CONSTANTS.controlsTransition.middleMouse;
-
-    if (camMode === "ThirdPerson") {
-        setCamMode("FirstPerson");
-        await switchToFirstPerson(state.controls, state.camera);
-    } else if (camMode === "FirstPerson") {
-        setCamMode("ThirdPerson");
-        await switchToThirdPerson(state.controls, state.camera);
-    }
-
-    setIsTransitioning && setIsTransitioning(false);
-}

app/src/types/world/worldConstants.ts

@@ -12,6 +12,8 @@ export type Controls = {
     backwardSpeed: number;
     leftSpeed: number;
     rightSpeed: number;
+    walkSpeed: number;
+    sprintSpeed: number;
 };
 
 export type ThirdPersonControls = {
@@ -199,6 +201,8 @@ export const firstPersonControls: Controls = {
     backwardSpeed: -0.1, // Speed of backward movement
     leftSpeed: -0.1, // Speed of left movement
     rightSpeed: 0.1, // Speed of right movement
+    walkSpeed: 1, // Walk speed
+    sprintSpeed: 4 // Sprint Speed
 };
 
 export const thirdPersonControls: ThirdPersonControls = {