diff --git a/pkgs/clan-app/ui/src/routes/Clan/Clan.css b/pkgs/clan-app/ui/src/routes/Clan/Clan.css new file mode 100644 index 000000000..977797521 --- /dev/null +++ b/pkgs/clan-app/ui/src/routes/Clan/Clan.css @@ -0,0 +1,4 @@ +.fade-out { + opacity: 0; + transition: opacity 0.5s ease; +} diff --git a/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx b/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx index 416b46d6c..d9383dcff 100644 --- a/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx +++ b/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx @@ -1,5 +1,5 @@ import { RouteSectionProps } from "@solidjs/router"; -import { Component, createEffect, JSX } from "solid-js"; +import { Component, JSX } from "solid-js"; import { useClanURI } from "@/src/hooks/clan"; import { CubeScene } from "@/src/scene/cubes"; import { MachinesQueryResult, useMachinesQuery } from "@/src/queries/queries"; @@ -7,6 +7,9 @@ import { callApi } from "@/src/hooks/api"; import { store, setStore } from "@/src/stores/clan"; import { produce } from "solid-js/store"; import { Button } from "@/src/components/Button/Button"; +import { Splash } from "@/src/scene/splash"; +import cx from "classnames"; +import "./Clan.css"; export const Clan: Component = (props) => { return ( @@ -49,10 +52,6 @@ const ClanSceneController = () => { return; }; - createEffect(() => { - console.log("sceneData changed:", store.sceneData); - }); - return ( {({ query }) => { @@ -87,7 +86,12 @@ const ClanSceneController = () => { Refetch API + {/* TODO: Add minimal display time */} +
+ +
{ diff --git a/pkgs/clan-app/ui/src/scene/cubes.tsx b/pkgs/clan-app/ui/src/scene/cubes.tsx index f2c02774c..8ed86757c 100644 --- a/pkgs/clan-app/ui/src/scene/cubes.tsx +++ b/pkgs/clan-app/ui/src/scene/cubes.tsx @@ -69,6 +69,7 @@ export function CubeScene(props: { onCreate?: (id: string) => Promise; sceneStore: Accessor; setMachinePos: (machineId: string, pos: [number, number]) => void; + isLoading: boolean; }) { // sceneData.cubesQuer let container: HTMLDivElement; @@ -78,7 +79,7 @@ export function CubeScene(props: { let floor: THREE.Mesh; let controls: MapControls; // Raycaster for clicking - let raycaster = new THREE.Raycaster(); + const raycaster = new THREE.Raycaster(); let needsRender = false; // Flag to control rendering @@ -181,6 +182,7 @@ export function CubeScene(props: { requestAnimationFrame(renderScene); } } + function renderScene() { if (!isAnimating) return; needsRender = false; @@ -587,9 +589,6 @@ export function CubeScene(props: { BASE_SIZE, ); - // Basic OrbitControls implementation (simplified) - let isDragging = false; - let previousMousePosition = { x: 0, y: 0 }; // const spherical = new THREE.Spherical(); // spherical.setFromVector3(camera.position);