From c5b0154af7d164898be1f90945c9acb1606951a1 Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Fri, 18 Jul 2025 19:35:05 +0200 Subject: [PATCH 1/3] ui/logos: add darknet-builder logo --- pkgs/clan-app/ui/logos/darknet-builder-logo.svg | 1 + 1 file changed, 1 insertion(+) create mode 100644 pkgs/clan-app/ui/logos/darknet-builder-logo.svg diff --git a/pkgs/clan-app/ui/logos/darknet-builder-logo.svg b/pkgs/clan-app/ui/logos/darknet-builder-logo.svg new file mode 100644 index 000000000..943a9a1bb --- /dev/null +++ b/pkgs/clan-app/ui/logos/darknet-builder-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file From f9f8a947e2799a501b019f8859cf4e33b8485da0 Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Fri, 18 Jul 2025 19:35:42 +0200 Subject: [PATCH 2/3] ui/splash: add scene splash screen --- pkgs/clan-app/ui/src/scene/splash.css | 45 +++++++++++++++++++ pkgs/clan-app/ui/src/scene/splash.stories.tsx | 15 +++++++ pkgs/clan-app/ui/src/scene/splash.tsx | 18 ++++++++ 3 files changed, 78 insertions(+) create mode 100644 pkgs/clan-app/ui/src/scene/splash.css create mode 100644 pkgs/clan-app/ui/src/scene/splash.stories.tsx create mode 100644 pkgs/clan-app/ui/src/scene/splash.tsx diff --git a/pkgs/clan-app/ui/src/scene/splash.css b/pkgs/clan-app/ui/src/scene/splash.css new file mode 100644 index 000000000..a4536ee94 --- /dev/null +++ b/pkgs/clan-app/ui/src/scene/splash.css @@ -0,0 +1,45 @@ +#splash { + position: fixed; + inset: 0; + background: linear-gradient(to top, #e3e7e7, #edf1f1); + display: flex; + justify-content: center; + align-items: center; + z-index: 9999; + pointer-events: none; +} + +#splash .content { + display: flex; + flex-direction: column; + align-items: center; +} + +.title { + @apply h-8 mb-8; +} + +.loader { + @apply h-3 w-60 mb-3; + width: 18rem; + background: repeating-linear-gradient( + -45deg, + #bfd0d2 0px, + #bfd0d2 10px, + #f7f9fa 10px, + #f7f9fa 20px + ); + animation: stripe-move 1s linear infinite; + background-size: 28px 28px; /* Sqrt(20^2 + 20^2) ~= 28 */ + + @apply border-2 border-solid rounded-[3px] border-bg-def-1; +} + +@keyframes stripe-move { + 0% { + background-position: 0 0; + } + 100% { + background-position: 28px 0; + } +} diff --git a/pkgs/clan-app/ui/src/scene/splash.stories.tsx b/pkgs/clan-app/ui/src/scene/splash.stories.tsx new file mode 100644 index 000000000..0d39b1cc9 --- /dev/null +++ b/pkgs/clan-app/ui/src/scene/splash.stories.tsx @@ -0,0 +1,15 @@ +import { Meta, StoryObj } from "@kachurun/storybook-solid"; +import { Splash } from "./splash"; + +const meta: Meta = { + title: "scene/splash", + component: Splash, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/pkgs/clan-app/ui/src/scene/splash.tsx b/pkgs/clan-app/ui/src/scene/splash.tsx new file mode 100644 index 000000000..c1dc5d957 --- /dev/null +++ b/pkgs/clan-app/ui/src/scene/splash.tsx @@ -0,0 +1,18 @@ +import Logo from "@/logos/darknet-builder-logo.svg"; +import "./splash.css"; +import { Typography } from "../components/Typography/Typography"; + +export const Splash = () => ( +
+
+ + + +
+ + + Loading new Clan + +
+
+); From c18140026797741b3be4344a106b356ddcf2a965 Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Fri, 18 Jul 2025 19:37:06 +0200 Subject: [PATCH 3/3] ui/scene: add loading splash screen --- pkgs/clan-app/ui/src/routes/Clan/Clan.css | 4 ++++ pkgs/clan-app/ui/src/routes/Clan/Clan.tsx | 14 +++++++++----- pkgs/clan-app/ui/src/scene/cubes.tsx | 7 +++---- 3 files changed, 16 insertions(+), 9 deletions(-) create mode 100644 pkgs/clan-app/ui/src/routes/Clan/Clan.css 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);