first person camera bug and new project loading screen stuck bug fixed
This commit is contained in:
@@ -15,6 +15,8 @@ import { SettingsIcon, TrashIcon } from "../icons/ExportCommonIcons";
|
|||||||
import { getUserData } from "../../functions/getUserData";
|
import { getUserData } from "../../functions/getUserData";
|
||||||
import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
|
import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
|
||||||
|
|
||||||
|
// import { createProject } from "../../services/dashboard/createProject";
|
||||||
|
|
||||||
interface SidePannelProps {
|
interface SidePannelProps {
|
||||||
setActiveTab: React.Dispatch<React.SetStateAction<string>>;
|
setActiveTab: React.Dispatch<React.SetStateAction<string>>;
|
||||||
activeTab: string;
|
activeTab: string;
|
||||||
@@ -24,7 +26,7 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
|
|||||||
const { email, userName, userId, organization } = getUserData();
|
const { email, userName, userId, organization } = getUserData();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { setLoadingProgress } = useLoadingProgress();
|
const { setLoadingProgress } = useLoadingProgress();
|
||||||
const { projectSocket } = useSocketStore();
|
const { projectSocket, initializeSocket } = useSocketStore();
|
||||||
const savedTheme = localStorage.getItem("theme") ?? "light";
|
const savedTheme = localStorage.getItem("theme") ?? "light";
|
||||||
|
|
||||||
function generateProjectId() {
|
function generateProjectId() {
|
||||||
@@ -42,41 +44,36 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
|
|||||||
console.error('token expired');
|
console.error('token expired');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
try {
|
|
||||||
const projectId = generateProjectId();
|
const projectId = generateProjectId();
|
||||||
useSocketStore.getState().initializeSocket(email, organization, token, refreshToken);
|
initializeSocket(email, organization, token, refreshToken);
|
||||||
|
|
||||||
//API for creating new Project
|
|
||||||
// const project = await createProject(
|
|
||||||
// projectId,
|
|
||||||
// userId,
|
|
||||||
// savedTheme === "dark" ? darkThemeImage : lightThemeImage,
|
|
||||||
// organization
|
|
||||||
// );
|
|
||||||
|
|
||||||
|
if (projectSocket?.connected) {
|
||||||
|
// SOCKET
|
||||||
const addProject = {
|
const addProject = {
|
||||||
userId,
|
userId,
|
||||||
thumbnail: savedTheme === "dark" ? darkThemeImage : lightThemeImage,
|
thumbnail: savedTheme === "dark" ? darkThemeImage : lightThemeImage,
|
||||||
organization: organization,
|
organization: organization,
|
||||||
projectUuid: projectId,
|
projectUuid: projectId,
|
||||||
};
|
};
|
||||||
|
|
||||||
if (projectSocket) {
|
|
||||||
const handleResponse = (data: any) => {
|
const handleResponse = (data: any) => {
|
||||||
if (data.message === "Project created successfully") {
|
if (data.message === "Project created successfully") {
|
||||||
setLoadingProgress(1);
|
setLoadingProgress(1);
|
||||||
navigate(`/projects/${data.data.projectId}`);
|
navigate(`/projects/${data.data.projectId}`);
|
||||||
}
|
}
|
||||||
projectSocket.off("v1-project:response:add", handleResponse); // Clean up
|
projectSocket.off("v1-project:response:add", handleResponse);
|
||||||
};
|
};
|
||||||
projectSocket.on("v1-project:response:add", handleResponse);
|
projectSocket.on("v1-project:response:add", handleResponse);
|
||||||
|
|
||||||
projectSocket.emit("v1:project:add", addProject);
|
projectSocket.emit("v1:project:add", addProject);
|
||||||
} else {
|
} else {
|
||||||
console.error("Socket is not connected.");
|
// API
|
||||||
}
|
// const project = await createProject(
|
||||||
} catch (error) {
|
// projectId,
|
||||||
console.error("Error creating project:", error);
|
// userId,
|
||||||
|
// savedTheme === "dark" ? darkThemeImage : lightThemeImage,
|
||||||
|
// organization
|
||||||
|
// );
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -88,10 +85,7 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
|
|||||||
{userName?.charAt(0).toUpperCase()}
|
{userName?.charAt(0).toUpperCase()}
|
||||||
</div>
|
</div>
|
||||||
<div className="user-name">
|
<div className="user-name">
|
||||||
{userName
|
{userName ? userName.charAt(0).toUpperCase() + userName.slice(1).toLowerCase() : "Anonymous"}
|
||||||
? userName.charAt(0).toUpperCase() +
|
|
||||||
userName.slice(1).toLowerCase()
|
|
||||||
: "Anonymous"}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="notifications-container">
|
<div className="notifications-container">
|
||||||
|
|||||||
@@ -72,11 +72,13 @@ function MainScene() {
|
|||||||
if (versionHistory.length > 0 && organization && userId) {
|
if (versionHistory.length > 0 && organization && userId) {
|
||||||
recentlyViewed(organization, userId).then((projects) => {
|
recentlyViewed(organization, userId).then((projects) => {
|
||||||
const recent_opened_verisionID = (Object.values(projects?.RecentlyViewed || {})[0] as any)?.Present_version._id;
|
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);
|
const version = versionHistory.find((ver) => ver.versionId === recent_opened_verisionID);
|
||||||
if (version) {
|
if (version) {
|
||||||
setSelectedVersion(version);
|
setSelectedVersion(version);
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
setSelectedVersion(versionHistory[0]);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,7 +7,6 @@ import { useCamMode, useToggleView } from "../../../store/builder/store";
|
|||||||
import switchToThirdPerson from "./functions/switchToThirdPerson";
|
import switchToThirdPerson from "./functions/switchToThirdPerson";
|
||||||
import switchToFirstPerson from "./functions/switchToFirstPerson";
|
import switchToFirstPerson from "./functions/switchToFirstPerson";
|
||||||
import { detectModifierKeys } from "../../../utils/shortcutkeys/detectModifierKeys";
|
import { detectModifierKeys } from "../../../utils/shortcutkeys/detectModifierKeys";
|
||||||
import { firstPersonCamera } from "./functions/firstPersonCamera";
|
|
||||||
|
|
||||||
const CamMode: React.FC = () => {
|
const CamMode: React.FC = () => {
|
||||||
const { camMode, setCamMode } = useCamMode();
|
const { camMode, setCamMode } = useCamMode();
|
||||||
@@ -41,14 +40,22 @@ const CamMode: React.FC = () => {
|
|||||||
const keyCombination = detectModifierKeys(event);
|
const keyCombination = detectModifierKeys(event);
|
||||||
|
|
||||||
if (keyCombination === "/" && !isTransitioning && !toggleView) {
|
if (keyCombination === "/" && !isTransitioning && !toggleView) {
|
||||||
firstPersonCamera({
|
setIsTransitioning && setIsTransitioning(true);
|
||||||
setIsTransitioning,
|
|
||||||
state,
|
state.controls.mouseButtons.left = CONSTANTS.controlsTransition.leftMouse;
|
||||||
camMode,
|
state.controls.mouseButtons.right = CONSTANTS.controlsTransition.rightMouse;
|
||||||
setCamMode,
|
state.controls.mouseButtons.wheel = CONSTANTS.controlsTransition.wheelMouse;
|
||||||
switchToFirstPerson,
|
state.controls.mouseButtons.middle = CONSTANTS.controlsTransition.middleMouse;
|
||||||
switchToThirdPerson,
|
|
||||||
});
|
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') {
|
if (keyCombination === 'Shift') {
|
||||||
@@ -77,7 +84,7 @@ const CamMode: React.FC = () => {
|
|||||||
if (!state.controls) return;
|
if (!state.controls) return;
|
||||||
if (camMode === "ThirdPerson" || !document.pointerLockElement) return;
|
if (camMode === "ThirdPerson" || !document.pointerLockElement) return;
|
||||||
|
|
||||||
const speedMultiplier = isShiftActive ? 4 : 1;
|
const speedMultiplier = isShiftActive ? CONSTANTS.firstPersonControls.sprintSpeed : CONSTANTS.firstPersonControls.walkSpeed;
|
||||||
|
|
||||||
if (forward) {
|
if (forward) {
|
||||||
state.controls.forward(CONSTANTS.firstPersonControls.forwardSpeed * speedMultiplier, true);
|
state.controls.forward(CONSTANTS.firstPersonControls.forwardSpeed * speedMultiplier, true);
|
||||||
|
|||||||
@@ -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);
|
|
||||||
}
|
|
||||||
@@ -12,6 +12,8 @@ export type Controls = {
|
|||||||
backwardSpeed: number;
|
backwardSpeed: number;
|
||||||
leftSpeed: number;
|
leftSpeed: number;
|
||||||
rightSpeed: number;
|
rightSpeed: number;
|
||||||
|
walkSpeed: number;
|
||||||
|
sprintSpeed: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type ThirdPersonControls = {
|
export type ThirdPersonControls = {
|
||||||
@@ -199,6 +201,8 @@ export const firstPersonControls: Controls = {
|
|||||||
backwardSpeed: -0.1, // Speed of backward movement
|
backwardSpeed: -0.1, // Speed of backward movement
|
||||||
leftSpeed: -0.1, // Speed of left movement
|
leftSpeed: -0.1, // Speed of left movement
|
||||||
rightSpeed: 0.1, // Speed of right movement
|
rightSpeed: 0.1, // Speed of right movement
|
||||||
|
walkSpeed: 1, // Walk speed
|
||||||
|
sprintSpeed: 4 // Sprint Speed
|
||||||
};
|
};
|
||||||
|
|
||||||
export const thirdPersonControls: ThirdPersonControls = {
|
export const thirdPersonControls: ThirdPersonControls = {
|
||||||
|
|||||||
Reference in New Issue
Block a user