+
+ )
+}
diff --git a/mirror-2/app/auth/callback/route.ts b/mirror-2/app/auth/callback/route.ts
new file mode 100644
index 00000000..db2dcd7d
--- /dev/null
+++ b/mirror-2/app/auth/callback/route.ts
@@ -0,0 +1,24 @@
+import { createServerClient } from '@/utils/supabase/server'
+import { NextResponse } from 'next/server'
+
+export async function GET(request: Request) {
+ // The `/auth/callback` route is required for the server-side auth flow implemented
+ // by the SSR package. It exchanges an auth code for the user's session.
+ // https://supabase.com/docs/guides/auth/server-side/nextjs
+ const requestUrl = new URL(request.url)
+ const code = requestUrl.searchParams.get('code')
+ const origin = requestUrl.origin
+ const redirectTo = requestUrl.searchParams.get('redirect_to')?.toString()
+
+ if (code) {
+ const supabase = createServerClient()
+ await supabase.auth.exchangeCodeForSession(code)
+ }
+
+ if (redirectTo) {
+ return NextResponse.redirect(`${origin}${redirectTo}`)
+ }
+
+ // URL to redirect to after sign up process completes
+ return NextResponse.redirect(`${origin}/protected`)
+}
diff --git a/mirror-2/app/globals.css b/mirror-2/app/globals.css
new file mode 100644
index 00000000..94158222
--- /dev/null
+++ b/mirror-2/app/globals.css
@@ -0,0 +1,94 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 222.2 84% 4.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 222.2 84% 4.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 222.2 84% 4.9%;
+ --primary: 221.2 83.2% 53.3%;
+ --primary-foreground: 210 40% 98%;
+ --secondary: 210 40% 96.1%;
+ --secondary-foreground: 222.2 47.4% 11.2%;
+ --muted: 210 40% 96.1%;
+ --muted-foreground: 215.4 16.3% 46.9%;
+ --accent: 165 100% 67%;
+ --accent-foreground: 222.2 47.4% 11.2%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 210 40% 98%;
+ --border: 214.3 31.8% 91.4%;
+ --input: 214.3 31.8% 91.4%;
+ --ring: 221.2 83.2% 53.3%;
+ --radius: 0.75rem;
+ --chart-1: 12 76% 61%;
+ --chart-2: 173 58% 39%;
+ --chart-3: 197 37% 24%;
+ --chart-4: 43 74% 66%;
+ --chart-5: 27 87% 67%;
+ }
+
+ .dark {
+ --background: 222.2 84% 4.9%;
+ --foreground: 210 40% 98%;
+ --card: 222.2 84% 4.9%;
+ --card-foreground: 210 40% 98%;
+ --popover: 222.2 84% 4.9%;
+ --popover-foreground: 210 40% 98%;
+ --primary: 217.2 91.2% 59.8%;
+ --primary-foreground: 222.2 47.4% 100%;
+ --secondary: 217.2 32.6% 17.5%;
+ --secondary-foreground: 210 40% 98%;
+ --muted: 217.2 32.6% 17.5%;
+ --muted-foreground: 215 20.2% 65.1%;
+ --accent: 165 100% 67%;
+ --accent-foreground: 210 40% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 210 40% 98%;
+ --border: 217.2 32.6% 17.5%;
+ --input: 217.2 32.6% 17.5%;
+ --ring: 224.3 76.3% 48%;
+ --chart-1: 220 70% 50%;
+ --chart-2: 160 60% 45%;
+ --chart-3: 30 80% 55%;
+ --chart-4: 280 65% 60%;
+ --chart-5: 340 75% 55%;
+ }
+}
+
+#application-canvas {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+#application-canvas.fill-mode-NONE {
+ margin: auto;
+}
+#application-canvas.fill-mode-KEEP_ASPECT {
+ width: 100%;
+ height: auto;
+ margin: 0;
+}
+#application-canvas.fill-mode-FILL_WINDOW {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+}
+
+canvas:focus {
+ outline: none;
+}
+
+/* leaving here bc will probably need to tweak */
+.ant-tree-switcher_close {
+ /* margin-top: 0.5rem !important; */
+}
+.ant-tree-switcher_open {
+ /* margin-top: 0.5rem !important; */
+}
diff --git a/mirror-2/app/home/components/album-artwork.tsx b/mirror-2/app/home/components/album-artwork.tsx
new file mode 100644
index 00000000..efccc20b
--- /dev/null
+++ b/mirror-2/app/home/components/album-artwork.tsx
@@ -0,0 +1,95 @@
+import Image from 'next/image'
+
+import { cn } from '@/lib/utils'
+
+import { Album } from '../data/albums'
+import { playlists } from '../data/playlists'
+import {
+ ContextMenu,
+ ContextMenuTrigger,
+ ContextMenuContent,
+ ContextMenuItem,
+ ContextMenuSub,
+ ContextMenuSubTrigger,
+ ContextMenuSubContent,
+ ContextMenuSeparator
+} from '@/components/ui/context-menu'
+import { PlusCircleIcon } from 'lucide-react'
+
+interface AlbumArtworkProps extends React.HTMLAttributes
+
+ Note: Emails are rate limited. Enable Custom SMTP to
+ increase the rate limit.
+
+
+
+
+ Learn more
+
+
+
+
+
+ Add to Library
+
+ Add to Playlist
+
+
+
+
+
+ {playlist}
+
+ ))}
+
+
+ Play Next
+ Play Later
+ Create Station
+ Like
+ Share
+
+
+
+ )
+}
diff --git a/mirror-2/app/home/components/menu.tsx b/mirror-2/app/home/components/menu.tsx
new file mode 100644
index 00000000..06f79afb
--- /dev/null
+++ b/mirror-2/app/home/components/menu.tsx
@@ -0,0 +1,200 @@
+import {
+ Menubar,
+ MenubarMenu,
+ MenubarTrigger,
+ MenubarContent,
+ MenubarItem,
+ MenubarSeparator,
+ MenubarShortcut,
+ MenubarSub,
+ MenubarSubTrigger,
+ MenubarSubContent,
+ MenubarCheckboxItem,
+ MenubarLabel,
+ MenubarRadioGroup,
+ MenubarRadioItem
+} from '@/components/ui/menubar'
+
+export function Menu() {
+ return (
+
+
+
+
+ {album.name}
+{album.artist}
+
+
+ )
+}
diff --git a/mirror-2/app/home/components/sidebar.tsx b/mirror-2/app/home/components/sidebar.tsx
new file mode 100644
index 00000000..9c99a7e2
--- /dev/null
+++ b/mirror-2/app/home/components/sidebar.tsx
@@ -0,0 +1,48 @@
+import { cn } from '@/lib/utils'
+
+import { Playlist } from '../data/playlists'
+import { Button } from '@/components/ui/button'
+import Link from 'next/link'
+import { Axis3D, Gamepad2, PlusCircleIcon } from 'lucide-react'
+
+interface SidebarProps extends React.HTMLAttributes
+
+
+
+ No episodes added
++ You have not added any podcasts. Add one below. +
+ +
+
+ )
+}
diff --git a/mirror-2/app/home/data/albums.ts b/mirror-2/app/home/data/albums.ts
new file mode 100644
index 00000000..73b11b5f
--- /dev/null
+++ b/mirror-2/app/home/data/albums.ts
@@ -0,0 +1,71 @@
+export interface Album {
+ name: string
+ artist: string
+ cover: string
+}
+
+export const listenNowAlbums: Album[] = [
+ {
+ name: 'React Rendezvous',
+ artist: 'Ethan Byte',
+ cover:
+ 'https://images.unsplash.com/photo-1611348586804-61bf6c080437?w=300&dpr=2&q=80'
+ },
+ {
+ name: 'Async Awakenings',
+ artist: 'Nina Netcode',
+ cover:
+ 'https://images.unsplash.com/photo-1468817814611-b7edf94b5d60?w=300&dpr=2&q=80'
+ },
+ {
+ name: 'The Art of Reusability',
+ artist: 'Lena Logic',
+ cover:
+ 'https://images.unsplash.com/photo-1528143358888-6d3c7f67bd5d?w=300&dpr=2&q=80'
+ },
+ {
+ name: 'Stateful Symphony',
+ artist: 'Beth Binary',
+ cover:
+ 'https://images.unsplash.com/photo-1490300472339-79e4adc6be4a?w=300&dpr=2&q=80'
+ }
+]
+
+export const madeForYouAlbums: Album[] = [
+ {
+ name: 'Thinking Components',
+ artist: 'Lena Logic',
+ cover:
+ 'https://images.unsplash.com/photo-1615247001958-f4bc92fa6a4a?w=300&dpr=2&q=80'
+ },
+ {
+ name: 'Functional Fury',
+ artist: 'Beth Binary',
+ cover:
+ 'https://images.unsplash.com/photo-1513745405825-efaf9a49315f?w=300&dpr=2&q=80'
+ },
+ {
+ name: 'React Rendezvous',
+ artist: 'Ethan Byte',
+ cover:
+ 'https://images.unsplash.com/photo-1614113489855-66422ad300a4?w=300&dpr=2&q=80'
+ },
+ {
+ name: 'Stateful Symphony',
+ artist: 'Beth Binary',
+ cover:
+ 'https://images.unsplash.com/photo-1446185250204-f94591f7d702?w=300&dpr=2&q=80'
+ },
+ {
+ name: 'Async Awakenings',
+ artist: 'Nina Netcode',
+ cover:
+ 'https://images.unsplash.com/photo-1468817814611-b7edf94b5d60?w=300&dpr=2&q=80'
+ },
+ {
+ name: 'The Art of Reusability',
+ artist: 'Lena Logic',
+ cover:
+ 'https://images.unsplash.com/photo-1490300472339-79e4adc6be4a?w=300&dpr=2&q=80'
+ }
+]
diff --git a/mirror-2/app/home/data/playlists.ts b/mirror-2/app/home/data/playlists.ts
new file mode 100644
index 00000000..afa7678e
--- /dev/null
+++ b/mirror-2/app/home/data/playlists.ts
@@ -0,0 +1,16 @@
+export type Playlist = (typeof playlists)[number]
+
+export const playlists = [
+ 'Recently Added',
+ 'Recently Played',
+ 'Top Songs',
+ 'Top Albums',
+ 'Top Artists',
+ 'Logic Discography',
+ 'Bedtime Beats',
+ 'Feeling Happy',
+ 'I miss Y2K Pop',
+ 'Runtober',
+ 'Mellow Days',
+ 'Eminem Essentials'
+]
diff --git a/mirror-2/app/home/page.tsx b/mirror-2/app/home/page.tsx
new file mode 100644
index 00000000..1e05673e
--- /dev/null
+++ b/mirror-2/app/home/page.tsx
@@ -0,0 +1,142 @@
+import Image from 'next/image'
+
+import { AlbumArtwork } from './components/album-artwork'
+import { Menu } from './components/menu'
+import { PodcastEmptyPlaceholder } from './components/podcast-empty-placeholder'
+import { Sidebar } from './components/sidebar'
+import { listenNowAlbums, madeForYouAlbums } from './data/albums'
+import { playlists } from './data/playlists'
+import { PlusCircleIcon } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Separator } from '@/components/ui/separator'
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
+import Link from 'next/link'
+import { appDescription, appName } from '@/lib/theme-service'
+import { Metadata } from 'next'
+import AccountDropdownMenu from '@/components/ui/account-dropdown-menu'
+
+export default function MusicPage() {
+ return (
+ <>
+
+
+
+
+ + Discover +
+
+
+ {process.env.NEXT_PUBLIC_DISCORD_INVITE_URL && (
+
+ )}
+
+
+
+
+
+ {/* */}
+
+
+ )
+}
diff --git a/mirror-2/app/layout.client.tsx b/mirror-2/app/layout.client.tsx
new file mode 100644
index 00000000..46ec8b74
--- /dev/null
+++ b/mirror-2/app/layout.client.tsx
@@ -0,0 +1,26 @@
+'use client'
+import { store } from '@/state/store'
+import { Provider } from 'react-redux'
+import { ThemeProvider } from 'next-themes'
+import { useSetupAuthEvents } from '@/hooks/auth'
+
+export default function ClientLayout({ children }) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + The Next Era of The Mirror +
++ Welcome, let's build. +
+
+
+
+
+
+
+
+
+ {listenNowAlbums.map((album) => (
+
+
+
+ + Play +
++ Published Spaces from other builders. +
+
+
+
+
+
+ {madeForYouAlbums.map((album) => (
+
+
+
+
+
+ + New Episodes +
++ Your favorite podcasts. Updated daily. +
+
+
+
+
+
+ );
+}
diff --git a/mirror-2/app/space/[spaceId]/build/controlBar/code.tsx b/mirror-2/app/space/[spaceId]/build/controlBar/code.tsx
new file mode 100644
index 00000000..ad432f13
--- /dev/null
+++ b/mirror-2/app/space/[spaceId]/build/controlBar/code.tsx
@@ -0,0 +1,11 @@
+'use client';
+import ControlBar from "@/app/space/[spaceId]/build/controlBar/control-bar";
+import { Suspense } from "react";
+
+export default function Code() {
+
+ return (
+
+ {form.formState.isSubmitted ? assets?.map((asset) => (
+
+ setSelectedAssetId(asset.id)}>
+
+
+ selectedAssetId && handleDownload(selectedAssetId)}>
+
+
+
+ )) : recentAssets?.map((asset) => (
+
+ setSelectedAssetId(asset.id)}>
+
+
+ selectedAssetId && handleDownload(selectedAssetId)}>
+
+
+
+ ))}
+
+
+
+
+
+ Code
+ );
+}
+
diff --git a/mirror-2/app/space/[spaceId]/build/controlBar/control-bar.tsx b/mirror-2/app/space/[spaceId]/build/controlBar/control-bar.tsx
new file mode 100644
index 00000000..bff5540b
--- /dev/null
+++ b/mirror-2/app/space/[spaceId]/build/controlBar/control-bar.tsx
@@ -0,0 +1,184 @@
+'use client';
+
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { useUiHoverSoundEffect } from "@/components/ui/ui-sounds";
+import { useAppDispatch, useAppSelector } from "@/hooks/hooks";
+import { ControlBarView, selectControlBarCurrentView, selectUiSoundsCanPlay, setControlBarCurrentView, turnOffUiSounds, turnOnUiSounds } from "@/state/local.slice";
+import { Box, Clapperboard, Code2, Database, GitBranch, ListTree, Settings, Volume2, VolumeOff } from "lucide-react";
+
+export default function ControlBar() {
+ const currentView = useAppSelector(selectControlBarCurrentView);
+ const dispatch = useAppDispatch();
+ const uiSoundsCanPlay = useAppSelector(selectUiSoundsCanPlay);
+ const [play] = useUiHoverSoundEffect();
+
+ const handleViewChange = (view: ControlBarView) => {
+ // play the sound ONLY if the view has changed
+ if (currentView !== view) {
+ play()
+ }
+ dispatch(setControlBarCurrentView(view));
+ };
+
+ const getVariant = (view: string) => {
+ return currentView === view ? "default" : "ghost";
+ };
+
+
+ return (
+ Database
+ );
+}
+
diff --git a/mirror-2/app/space/[spaceId]/build/controlBar/hierarchy.tsx b/mirror-2/app/space/[spaceId]/build/controlBar/hierarchy.tsx
new file mode 100644
index 00000000..8de76fe2
--- /dev/null
+++ b/mirror-2/app/space/[spaceId]/build/controlBar/hierarchy.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { Button } from '@/components/ui/button';
+import { PlusCircleIcon } from 'lucide-react';
+import EntityTree from '@/components/entity-tree/entity-tree';
+import { useAppSelector } from '@/hooks/hooks';
+import { useCreateEntityMutation } from '@/state/api/entities';
+import { selectCurrentScene } from '@/state/local.slice';
+import { useParams } from 'next/navigation';
+import { Separator } from '@/components/ui/separator';
+import { H2 } from '@/components/ui/text/h2';
+import { useEffect, useState } from 'react';
+
+export default function Hierarchy() {
+ const currentScene = useAppSelector(selectCurrentScene);
+ const [createEntity] = useCreateEntityMutation();
+ const [isClient, setIsClient] = useState(false);
+
+ useEffect(() => {
+ // Ensure this runs only on the client-side
+ setIsClient(true);
+ }, []);
+
+ return (
+ <>
+ {/* Render nothing dependent on currentScene until client-side rendering */}
+ {isClient && (
+ <>
+ {currentScene ? <>Scene: {currentScene.name} : "Loading..."}
+
+ {/* Input element for handling file uploads */}
+
+
+ {/* Overlay that is shown when a file is dragged over the area */}
+
+ );
+}
diff --git a/mirror-2/app/space/[spaceId]/build/controlBar/layout.tsx b/mirror-2/app/space/[spaceId]/build/controlBar/layout.tsx
new file mode 100644
index 00000000..f86f72da
--- /dev/null
+++ b/mirror-2/app/space/[spaceId]/build/controlBar/layout.tsx
@@ -0,0 +1,15 @@
+import ControlBar from '@/app/space/[spaceId]/build/controlBar/control-bar'
+import InnerControlBar from '@/app/space/[spaceId]/build/controlBar/inner-control-bar'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+ {/* Content of the control bar */}
+ Drop Your Asset Here
+
+ {currentView === "scenes" &&
+
+
+
+ )
+}
diff --git a/mirror-2/app/space/[spaceId]/build/controlBar/loading.tsx b/mirror-2/app/space/[spaceId]/build/controlBar/loading.tsx
new file mode 100644
index 00000000..7c30e9c6
--- /dev/null
+++ b/mirror-2/app/space/[spaceId]/build/controlBar/loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading() {
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/mirror-2/app/space/[spaceId]/build/controlBar/page.tsx b/mirror-2/app/space/[spaceId]/build/controlBar/page.tsx
new file mode 100644
index 00000000..ef1b7cb3
--- /dev/null
+++ b/mirror-2/app/space/[spaceId]/build/controlBar/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+ return Build Page
+}
diff --git a/mirror-2/app/space/[spaceId]/build/controlBar/scenes.tsx b/mirror-2/app/space/[spaceId]/build/controlBar/scenes.tsx
new file mode 100644
index 00000000..3bdf39c6
--- /dev/null
+++ b/mirror-2/app/space/[spaceId]/build/controlBar/scenes.tsx
@@ -0,0 +1,112 @@
+'use client';
+import { Button } from '@/components/ui/button';
+
+import { ScrollArea } from '@radix-ui/react-scroll-area';
+import { PlusCircleIcon, MoreHorizontal } from 'lucide-react'; // Import MoreHorizontal for ellipsis icon
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu'; // shadcn dropdown menu
+import { useParams } from 'next/navigation';
+
+import { z } from 'zod'; // Import zod for validation
+import { SyncedInput } from '@/components/ui/synced-inputs/synced-input';
+import { useAppDispatch, useAppSelector } from '@/hooks/hooks';
+import { selectCurrentScene, setControlBarCurrentView, setCurrentScene } from '@/state/local.slice';
+import { DatabaseScene, useCreateSceneMutation, useDeleteSceneMutation, useGetAllScenesQuery, useGetSingleSceneQuery, useUpdateSceneMutation } from '@/state/api/scenes';
+import { cn } from '@/utils/cn';
+import { generateSceneName } from '@/actions/name-generator';
+import { Input } from '@/components/ui/input';
+
+export default function Scenes() {
+ const params = useParams<{ spaceId: string }>()
+ const spaceId: number = parseInt(params.spaceId, 10) // Use parseInt for safer conversion
+
+ const { data: scenes } = useGetAllScenesQuery(spaceId);
+ const [createScene, { data: createdScene }] = useCreateSceneMutation();
+ const [deleteScene] = useDeleteSceneMutation();
+ const [updateScene] = useUpdateSceneMutation();
+ const dispatch = useAppDispatch();
+ const currentScene = useAppSelector(selectCurrentScene);
+
+ // Validation schema for scene name
+ const formSchema = z.object({
+ name: z.string().min(3, { message: "Scene name must be at least 3 characters long" }),
+ });
+
+ return (
+ <>
+ {/* Create Scene Button */}
+
+
+ {/* Scrollable area that takes up remaining space */}
+
+
+
+
+
+ );
+}
diff --git a/mirror-2/app/space/[spaceId]/build/controlBar/settings.tsx b/mirror-2/app/space/[spaceId]/build/controlBar/settings.tsx
new file mode 100644
index 00000000..4b91b1bf
--- /dev/null
+++ b/mirror-2/app/space/[spaceId]/build/controlBar/settings.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import { useRef } from 'react';
+import { Button } from '@/components/ui/button';
+import { FolderInput } from 'lucide-react';
+import { useSpacePackZipFileUpload } from '@/utils/space-pack';
+import { useParams } from 'next/navigation';
+
+
+export default function Settings() {
+ const fileInputRef = useRef
+ {scenes?.map((scene: DatabaseScene) => (
+
+ {
+ // Handle scene click
+ dispatch(setCurrentScene(scene));
+ dispatch(setControlBarCurrentView('hierarchy'));
+ }}
+ >
+ 
+
+ ))}
+
+
+
+ (
+
+ )}
+ />
+
+
+
+
+
+
+
+ deleteScene(scene.id)}>
+ Delete
+
+
+
+
+
+
+
+ );
+}
diff --git a/mirror-2/app/space/[spaceId]/build/controlBar/skeleton-card.tsx b/mirror-2/app/space/[spaceId]/build/controlBar/skeleton-card.tsx
new file mode 100644
index 00000000..7be3859a
--- /dev/null
+++ b/mirror-2/app/space/[spaceId]/build/controlBar/skeleton-card.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+export function SkeletonCard() {
+ return (
+ To import an existing app from PlayCanvas, export it as a .zip.
+The export must have:
+-
+
- Engine Version: {'>=1.74.0'} +
- Concatenate Scripts: Unchecked +
- Optimize Scene Format: Unchecked +
- Format: .zip +
+
+ )
+}
diff --git a/mirror-2/app/space/[spaceId]/build/controlBar/versions.tsx b/mirror-2/app/space/[spaceId]/build/controlBar/versions.tsx
new file mode 100644
index 00000000..3a89c58b
--- /dev/null
+++ b/mirror-2/app/space/[spaceId]/build/controlBar/versions.tsx
@@ -0,0 +1,9 @@
+'use client';
+
+export default function Versions() {
+
+ return (
+
+
+ Versions
+ );
+}
+
diff --git a/mirror-2/app/space/[spaceId]/build/inspector/entity.formgroup.tsx b/mirror-2/app/space/[spaceId]/build/inspector/entity.formgroup.tsx
new file mode 100644
index 00000000..45b0f77d
--- /dev/null
+++ b/mirror-2/app/space/[spaceId]/build/inspector/entity.formgroup.tsx
@@ -0,0 +1,116 @@
+"use client";
+import { DatabaseEntity, useGetSingleEntityQuery, useUpdateEntityMutation } from "@/state/api/entities";
+import { Separator } from "@/components/ui/separator";
+import SyncedVector3Input from "@/components/ui/synced-inputs/synced-vector3-input";
+import { SyncedInput } from "@/components/ui/synced-inputs/synced-input";
+import { cn } from "@/lib/utils";
+import { z } from "zod";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { FormItem, FormLabel } from "@/components/ui/form";
+
+
+export function EntityFormGroup({ entity }: { entity: DatabaseEntity }) {
+ return (
+ <>
+
+
+ Enabled
+
+
+
+ {entity &&
+ <>
+
+
+}
diff --git a/mirror-2/app/space/[spaceId]/build/layout.tsx b/mirror-2/app/space/[spaceId]/build/layout.tsx
new file mode 100644
index 00000000..21727082
--- /dev/null
+++ b/mirror-2/app/space/[spaceId]/build/layout.tsx
@@ -0,0 +1,44 @@
+"use client"
+import InnerControlBar from "@/app/space/[spaceId]/build/controlBar/inner-control-bar"
+import Inspector from "@/app/space/[spaceId]/build/inspector/inspector"
+import { Sidebar } from "@/app/space/[spaceId]/build/sidebar"
+import { TopNavbar } from "@/app/space/[spaceId]/build/top-navbar"
+import SpaceViewport from "@/components/engine/space-viewport"
+import { useParams } from "next/navigation"
+
+export default function Layout({ children, params }: {
+ children: React.ReactNode,
+ spaceViewport: React.ReactNode,
+ params: { spaceId: string }
+}) {
+ const spaceId: number = parseInt(params.spaceId, 10) // Use parseInt for safer conversion
+ return (
+
+
+
+
+ );
+}
diff --git a/mirror-2/app/space/[spaceId]/play/layout.tsx b/mirror-2/app/space/[spaceId]/play/layout.tsx
new file mode 100644
index 00000000..7428b669
--- /dev/null
+++ b/mirror-2/app/space/[spaceId]/play/layout.tsx
@@ -0,0 +1,4 @@
+// separating this out for server-side vs client
+export default function PlayLayout({ children }) {
+ return children
+}
diff --git a/mirror-2/app/space/[spaceId]/play/page.tsx b/mirror-2/app/space/[spaceId]/play/page.tsx
new file mode 100644
index 00000000..a36bffd9
--- /dev/null
+++ b/mirror-2/app/space/[spaceId]/play/page.tsx
@@ -0,0 +1,14 @@
+import SpaceViewport from '@/components/engine/space-viewport'
+
+export default function PlayPage() {
+ console.log('play')
+ debugger
+ return (
+ <>
+ >({
+ resolver: zodResolver(formSchema),
+ mode: 'onBlur',
+ defaultValues: {
+ name: space?.name || ''
+ }
+ // errors: error TODO add error handling here
+ })
+ // 2. Define a submit handler.
+ async function onSubmit(values: z.infer) {
+ // update the space name
+ await updateSpace({ id: space.id, updateData: { name: values.name } })
+ }
+
+ // Reset the form values when the space data is fetched
+ useEffect(() => {
+ if (space && isSuccess) {
+ form.reset({
+ name: space.name || '' // Set the form value once space.name is available
+ })
+ }
+ }, [space, isSuccess, form]) // Only run this effect when space or isLoading changes
+
+ return isLoading ? (
+
+
`;
+ document.body.appendChild(div);
+}
+
+function createGraphicsDevice(callback) {
+ var deviceOptions = window.CONTEXT_OPTIONS ? window.CONTEXT_OPTIONS : {};
+
+ if (typeof window.Promise === 'function') {
+ var LEGACY_WEBGL = 'webgl';
+ var deviceTypes =
+ deviceOptions.preferWebGl2 === false
+ ? [pc.DEVICETYPE_WEBGL2] // DEVICETYPE_WEBGL1 was removed in engine 2.0
+ : deviceOptions.deviceTypes;
+ if (!deviceTypes) {
+ deviceTypes = []
+ }
+ deviceTypes.push(LEGACY_WEBGL);
+
+ var gpuLibPath = window.ASSET_PREFIX
+ ? window.ASSET_PREFIX.replace(/\/$/g, '') + '/'
+ : '';
+
+ // new graphics device creation function with promises
+ var gfxOptions = {
+ deviceTypes: deviceTypes,
+ glslangUrl: gpuLibPath + 'glslang.js',
+ twgslUrl: gpuLibPath + 'twgsl.js',
+ powerPreference: deviceOptions.powerPreference,
+ antialias: deviceOptions.antialias !== false,
+ alpha: deviceOptions.alpha === true,
+ preserveDrawingBuffer: !!deviceOptions.preserveDrawingBuffer,
+ };
+
+ pc.createGraphicsDevice(canvas, gfxOptions)
+ .then((device) => {
+ callback(device);
+ })
+ .catch((e) => {
+ console.error('Device creation error:', e);
+ callback(null);
+ });
+ } else {
+ var igl1 = deviceOptions.deviceTypes.indexOf('webgl1');
+ var igl2 = deviceOptions.deviceTypes.indexOf('webgl2');
+
+ // old webgl graphics device creation
+ var options = {
+ powerPreference: deviceOptions.powerPreference,
+ antialias: deviceOptions.antialias !== false,
+ alpha: deviceOptions.transparentCanvas !== false,
+ preserveDrawingBuffer: !!deviceOptions.preserveDrawingBuffer,
+ preferWebGl2: igl2 > igl1,
+ };
+
+ if (pc.platform.browser && !!navigator.xr) {
+ options.xrCompatible = true;
+ }
+
+ callback(new pc.WebglGraphicsDevice(canvas, options));
+ }
+}
+
+function initApp(device, inputSettings = {
+ useKeyboard: true,
+ useMouse: true,
+ useGamepads: false,
+ useTouch: true
+}) {
+ try {
+ var createOptions = new pc.AppOptions();
+ createOptions.graphicsDevice = device;
+
+ createOptions.componentSystems = [
+ pc.RigidBodyComponentSystem,
+ pc.CollisionComponentSystem,
+ pc.JointComponentSystem,
+ pc.AnimationComponentSystem,
+ pc.AnimComponentSystem,
+ pc.ModelComponentSystem,
+ pc.RenderComponentSystem,
+ pc.CameraComponentSystem,
+ pc.LightComponentSystem,
+ pc.ScriptComponentSystem, // ScriptLegacyComponentSystem removed in engine 2.0
+ // pc.AudioSourceComponentSystem, // removed in engine 2.0
+ pc.SoundComponentSystem,
+ pc.AudioListenerComponentSystem,
+ pc.ParticleSystemComponentSystem,
+ pc.ScreenComponentSystem,
+ pc.ElementComponentSystem,
+ pc.ButtonComponentSystem,
+ pc.ScrollViewComponentSystem,
+ pc.ScrollbarComponentSystem,
+ pc.SpriteComponentSystem,
+ pc.LayoutGroupComponentSystem,
+ pc.LayoutChildComponentSystem,
+ pc.ZoneComponentSystem,
+ pc.GSplatComponentSystem,
+ ].filter(Boolean);
+
+ createOptions.resourceHandlers = [
+ pc.RenderHandler,
+ pc.AnimationHandler,
+ pc.AnimClipHandler,
+ pc.AnimStateGraphHandler,
+ pc.ModelHandler,
+ pc.MaterialHandler,
+ pc.TextureHandler,
+ pc.TextHandler,
+ pc.JsonHandler,
+ pc.AudioHandler,
+ pc.ScriptHandler,
+ pc.SceneHandler,
+ pc.CubemapHandler,
+ pc.HtmlHandler,
+ pc.CssHandler,
+ pc.ShaderHandler,
+ pc.HierarchyHandler,
+ pc.FolderHandler,
+ pc.FontHandler,
+ pc.BinaryHandler,
+ pc.TextureAtlasHandler,
+ pc.SpriteHandler,
+ pc.TemplateHandler,
+ pc.ContainerHandler,
+ pc.GSplatHandler,
+ ].filter(Boolean);
+
+ createOptions.elementInput = new pc.ElementInput(canvas, {
+ useMouse: inputSettings.useMouse,
+ useTouch: inputSettings.useTouch,
+ });
+ createOptions.keyboard = inputSettings.useKeyboard
+ ? new pc.Keyboard(window)
+ : null;
+ createOptions.mouse = inputSettings.useMouse ? new pc.Mouse(canvas) : null;
+ createOptions.gamepads = inputSettings.useGamepads
+ ? new pc.GamePads()
+ : null;
+ createOptions.touch =
+ inputSettings.useTouch && pc.platform.touch
+ ? new pc.TouchDevice(canvas)
+ : null;
+ createOptions.assetPrefix = window.ASSET_PREFIX || '';
+ createOptions.scriptPrefix = window.SCRIPT_PREFIX || '';
+ createOptions.scriptsOrder = window.SCRIPTS || [];
+ createOptions.soundManager = new pc.SoundManager();
+ createOptions.lightmapper = pc.Lightmapper;
+ createOptions.batchManager = pc.BatchManager;
+ createOptions.xr = pc.XrManager;
+
+ app.init(createOptions);
+
+ return true;
+ } catch (e) {
+ displayError('Could not initialize application. Error: ' + e);
+ console.error(e);
+ return false;
+ }
+}
+
+/**
+ * This retrieves the 3 properties in config.json: { application_properties, scenes, assets } THEN calls app.scenes.loadScene and app.start()
+ */
+function configureAndStart() {
+
+ // app.configure(window.CONFIG_FILENAME, (err) => {
+
+ // const props = response.application_properties;
+ const props = {
+ "i18nAssets": [],
+ "useTouch": true,
+ "layerOrder": [
+ {
+ "layer": 0,
+ "enabled": true,
+ "transparent": false
+ },
+ {
+ "layer": 1,
+ "enabled": true,
+ "transparent": false
+ },
+ {
+ "layer": 2,
+ "enabled": true,
+ "transparent": false
+ },
+ {
+ "layer": 0,
+ "enabled": true,
+ "transparent": true
+ },
+ {
+ "layer": 3,
+ "enabled": true,
+ "transparent": false
+ },
+ {
+ "layer": 3,
+ "enabled": true,
+ "transparent": true
+ },
+ {
+ "layer": 4,
+ "enabled": true,
+ "transparent": true
+ }
+ ],
+ "externalScripts": [],
+ "height": 720,
+ "vr": false,
+ "useModelV2": false,
+ "antiAlias": true,
+ "layers": {
+ "0": {
+ "transparentSortMode": 3,
+ "opaqueSortMode": 2,
+ "name": "World"
+ },
+ "1": {
+ "transparentSortMode": 3,
+ "opaqueSortMode": 2,
+ "name": "Depth"
+ },
+ "2": {
+ "transparentSortMode": 3,
+ "opaqueSortMode": 0,
+ "name": "Skybox"
+ },
+ "3": {
+ "transparentSortMode": 3,
+ "opaqueSortMode": 0,
+ "name": "Immediate"
+ },
+ "4": {
+ "transparentSortMode": 1,
+ "opaqueSortMode": 1,
+ "name": "UI"
+ }
+ },
+ "width": 1280,
+ "useDevicePixelRatio": true,
+ "useKeyboard": true,
+ "maxAssetRetries": 5,
+ "powerPreference": "high-performance",
+ "batchGroups": [],
+ "preserveDrawingBuffer": false,
+ "useLegacyScripts": false,
+ "enableSharedArrayBuffer": false,
+ "fillMode": "FILL_WINDOW",
+ "scripts": [],
+ "useMouse": true,
+ "use3dPhysics": false,
+ "transparentCanvas": false,
+ "resolutionMode": "AUTO",
+ "loadingScreenScript": null,
+ "preferWebGl2": true,
+ "useGamepads": false,
+ "deviceTypes": [
+ "webgl2",
+ "webgl1"
+ ],
+ "libraries": []
+ }
+ // const scenes = response.scenes;
+ const scenes = [
+ {
+ "name": "Untitled",
+ "url": "2090341.json"
+ }
+ ]
+ // const assets = response.assets;
+ const assets = {
+ "199423271": {
+ "name": "sky",
+ "type": "cubemap",
+ "file": {
+ "filename": "sky.png",
+ "size": 147883,
+ "hash": "9a07d61f34e67a5e96fb6e579ce5c813",
+ "url": "files/assets/199423271/1/sky.png"
+ },
+ "data": {
+ "name": "New Cubemap",
+ "textures": [
+ 199423276,
+ 199423275,
+ 199423274,
+ 199423272,
+ 199423273,
+ 199423277
+ ],
+ "minFilter": 5,
+ "magFilter": 1,
+ "anisotropy": 1,
+ "rgbm": true
+ },
+ "preload": true,
+ "tags": [],
+ "i18n": {},
+ "id": "199423271"
+ },
+ "199423272": {
+ "name": "sky_negy.png",
+ "type": "texture",
+ "file": {
+ "filename": "sky_negy.png",
+ "hash": "ff5cfefbc0d5d485bf9a0b9a31b25810",
+ "size": 152642,
+ "variants": {},
+ "url": "files/assets/199423272/1/sky_negy.png"
+ },
+ "data": {
+ "addressu": "repeat",
+ "addressv": "repeat",
+ "minfilter": "linear_mip_linear",
+ "magfilter": "linear",
+ "anisotropy": 1,
+ "rgbm": true,
+ "mipmaps": true
+ },
+ "preload": true,
+ "tags": [],
+ "i18n": {},
+ "id": "199423272"
+ },
+ "199423273": {
+ "name": "sky_posz.png",
+ "type": "texture",
+ "file": {
+ "filename": "sky_posz.png",
+ "hash": "53a9aab04b23a2e8f7be2d99115ca09d",
+ "size": 198593,
+ "variants": {},
+ "url": "files/assets/199423273/1/sky_posz.png"
+ },
+ "data": {
+ "addressu": "repeat",
+ "addressv": "repeat",
+ "minfilter": "linear_mip_linear",
+ "magfilter": "linear",
+ "anisotropy": 1,
+ "rgbm": true,
+ "mipmaps": true
+ },
+ "preload": true,
+ "tags": [],
+ "i18n": {},
+ "id": "199423273"
+ },
+ "199423274": {
+ "name": "sky_posy.png",
+ "type": "texture",
+ "file": {
+ "filename": "sky_posy.png",
+ "hash": "f11af8966b2e0fe99e343108d777403d",
+ "size": 170046,
+ "variants": {},
+ "url": "files/assets/199423274/1/sky_posy.png"
+ },
+ "data": {
+ "addressu": "repeat",
+ "addressv": "repeat",
+ "minfilter": "linear_mip_linear",
+ "magfilter": "linear",
+ "anisotropy": 1,
+ "rgbm": true,
+ "mipmaps": true
+ },
+ "preload": true,
+ "tags": [],
+ "i18n": {},
+ "id": "199423274"
+ },
+ "199423275": {
+ "name": "sky_negx.png",
+ "type": "texture",
+ "file": {
+ "filename": "sky_negx.png",
+ "hash": "34f64e48aa3125598094e24eeb02d574",
+ "size": 155167,
+ "variants": {},
+ "url": "files/assets/199423275/1/sky_negx.png"
+ },
+ "data": {
+ "addressu": "repeat",
+ "addressv": "repeat",
+ "minfilter": "linear_mip_linear",
+ "magfilter": "linear",
+ "anisotropy": 1,
+ "rgbm": true,
+ "mipmaps": true
+ },
+ "preload": true,
+ "tags": [],
+ "i18n": {},
+ "id": "199423275"
+ },
+ "199423276": {
+ "name": "sky_posx.png",
+ "type": "texture",
+ "file": {
+ "filename": "sky_posx.png",
+ "hash": "bb45a6c2eed8c3763777eaed6f44527f",
+ "size": 172680,
+ "variants": {},
+ "url": "files/assets/199423276/1/sky_posx.png"
+ },
+ "data": {
+ "addressu": "repeat",
+ "addressv": "repeat",
+ "minfilter": "linear_mip_linear",
+ "magfilter": "linear",
+ "anisotropy": 1,
+ "rgbm": true,
+ "mipmaps": true
+ },
+ "preload": true,
+ "tags": [],
+ "i18n": {},
+ "id": "199423276"
+ },
+ "199423277": {
+ "name": "sky_negz.png",
+ "type": "texture",
+ "file": {
+ "filename": "sky_negz.png",
+ "hash": "2be10e522c5e12bc0b791b48181895b9",
+ "size": 147065,
+ "variants": {},
+ "url": "files/assets/199423277/1/sky_negz.png"
+ },
+ "data": {
+ "addressu": "repeat",
+ "addressv": "repeat",
+ "minfilter": "linear_mip_linear",
+ "magfilter": "linear",
+ "anisotropy": 1,
+ "rgbm": true,
+ "mipmaps": true
+ },
+ "preload": true,
+ "tags": [],
+ "i18n": {},
+ "id": "199423277"
+ }
+ }
+
+ // this inits a ton of (good?) settings from application_properties; keep this for now
+ app._parseApplicationProperties(props, (err) => {
+ // app._parseScenes(scenes);
+ // app._parseAssets(assets);
+ if (err) {
+ throw new Error(err)
+ }
+
+ if (err) {
+ console.error(err);
+ return;
+ }
+
+ initCSS(canvas, app._fillMode, app._width, app._height);
+
+ if (
+ LTC_MAT_1.length &&
+ LTC_MAT_2.length &&
+ app.setAreaLightLuts.length === 2
+ ) {
+ app.setAreaLightLuts(LTC_MAT_1, LTC_MAT_2);
+ }
+
+ // do the first reflow after a timeout because of
+ // iOS showing a squished iframe sometimes
+ setTimeout(() => {
+ pcBootstrap.reflow(app, canvas);
+ pcBootstrap.reflowHandler = function () {
+ pcBootstrap.reflow(app, canvas);
+ };
+
+ window.addEventListener('resize', pcBootstrap.reflowHandler, false);
+ window.addEventListener(
+ 'orientationchange',
+ pcBootstrap.reflowHandler,
+ false
+ );
+
+ // TODO add preloading after setting up assets
+ // app.preload(() => {
+ // TODO add in first scene loading
+ // app.scenes.loadScene(window.SCENE_PATH, (err) => {
+ // if (err) {
+ // console.error(err);
+ // return;
+ // }
+
+ app.start();
+
+ if (window.location.href.includes("build")) {
+ setFillMode(pc.FILLMODE_NONE)
+ } else if (window.location.href.includes("play")) {
+ setFillMode(pc.FILLMODE_FILL_WINDOW)
+ }
+
+ // });
+ // });
+ });
+ });
+}
+
+function initEngine() {
+ if (typeof window === 'undefined') {
+ console.warn('initEngine called on the server side; returning');
+ return; // Prevent the engine from initializing on the server side
+ }
+ const pcBootstrap = getPcBootstrap()
+ window.pcBootstrap = pcBootstrap;
+ lastWindowHeight = window.innerHeight;
+ lastWindowWidth = window.innerWidth;
+ windowSizeChangeIntervalHandler = null;
+ // NOTE: I moved this out of the initial execution of the file to avoid a race condition. There may be a way to speed up loading though to bootstrap most things on page load. The issue was that the document.getElementById to append the canvas was failing because the viewport wasn't loaded yet.
+ canvas = pcBootstrap.createCanvas();
+ app = new pc.AppBase(canvas);
+
+ createGraphicsDevice((device) => {
+ if (!device) {
+ return;
+ }
+
+ if (!initApp(device)) {
+ return;
+ }
+
+ if (window && window.PRELOAD_MODULES && window.PRELOAD_MODULES.length) {
+ loadModules(window.PRELOAD_MODULES, window.ASSET_PREFIX, () => {
+ configureAndStart(() => {
+ console.timeEnd('start');
+ });
+ });
+ } else {
+ configureAndStart();
+ }
+ });
+ console.log('Completed initEngine()')
+ return app
+}
+
+
+
+// update code called every frame
+function setFillMode(mode) {
+ const canvas = app.graphicsDevice.canvas;
+ // if (this.app.keyboard.wasPressed(pc.KEY_1)) {
+ if (mode === pc.FILLMODE_FILL_WINDOW) {
+ updateCanvas(pc.FILLMODE_FILL_WINDOW);
+ }
+
+ // if (this.app.keyboard.wasPressed(pc.KEY_2)) {
+ // Set the aspect ratio
+ if (mode === pc.FILLMODE_KEEP_ASPECT) {
+ canvas.width = 1280;
+ canvas.height = 720;
+ updateCanvas(pc.FILLMODE_KEEP_ASPECT);
+ }
+
+ if (mode === pc.FILLMODE_NONE) {
+ canvas.width = 1000;
+ canvas.height = 500;
+ updateCanvas(pc.FILLMODE_NONE);
+ }
+};
+
+
+function updateCanvas(fillMode) {
+ const previousFillMode = app.fillMode;
+
+ app.setCanvasFillMode(fillMode);
+ const canvas = app.graphicsDevice.canvas;
+
+ // Update the CSS style on the canvas
+ if (canvas.classList) {
+ canvas.classList.remove('fill-mode-' + previousFillMode);
+ canvas.classList.add('fill-mode-' + fillMode);
+ }
+
+ // Invoke a resize from the boilerplate to move the canvas
+ // into the right place
+ pcBootstrap.resizeCanvas(app, canvas);
+
+ // Have to correct the CSS due to bug in the pcBootstrap
+ if (fillMode === pc.FILLMODE_FILL_WINDOW) {
+ canvas.style.marginTop = '';
+ }
+};
+
+export default initEngine
diff --git a/mirror-2/components/engine/space-engine.utils.tsx b/mirror-2/components/engine/space-engine.utils.tsx
new file mode 100644
index 00000000..31db2f66
--- /dev/null
+++ b/mirror-2/components/engine/space-engine.utils.tsx
@@ -0,0 +1,77 @@
+import { useAppSelector } from '@/hooks/hooks'
+import { DatabaseEntity, useGetAllEntitiesQuery } from '@/state/api/entities'
+import { useGetSingleSpaceQuery } from '@/state/api/spaces'
+import { selectCurrentScene } from '@/state/local.slice'
+import { skipToken } from '@reduxjs/toolkit/query'
+import { useEffect, useState } from 'react'
+import * as pc from 'playcanvas'
+import { SceneId } from '@/state/api/scenes'
+import { getApp } from '@/components/engine/__start-custom__'
+
+export const setUpSpace = (
+ currentScene: SceneId,
+ entities: DatabaseEntity[]
+) => {
+ // const [hasSetUpEntities, setHasSetUpEntities] = useState(false)
+ // const {
+ // data: space,
+ // error: spaceError,
+ // isSuccess: isSuccessGetSingleSpace,
+ // isLoading,
+ // isUninitialized,
+ // isError
+ // } = useGetSingleSpaceQuery(spaceId || skipToken)
+ // const currentScene = useAppSelector(selectCurrentScene)
+ // if (!currentScene) {
+ // return
+ // }
+ // const { data: entities, error } = useGetAllEntitiesQuery(currentScene.id)
+
+ // useEffect(() => {
+ // only run setup once
+ // if (hasSetUpEntities) {
+ // return
+ // }
+
+ // add the entities to the scene/engine
+ // if (entities && entities.length > 0) {
+ // Initialize PlayCanvas app
+ // const app = new pc.Application(document.getElementById('canvas'), {});
+ const app = getApp()
+ // Create a camera
+ const camera = new pc.Entity('camera')
+ camera.addComponent('camera', {
+ clearColor: new pc.Color(0.1, 0.1, 0.1)
+ })
+ camera.setPosition(0, 0, 3)
+ app.root.addChild(camera)
+
+ // Create a directional light
+ const light = new pc.Entity('light')
+ light.addComponent('light', {
+ type: 'directional',
+ color: new pc.Color(1, 1, 1),
+ intensity: 1
+ })
+ light.setEulerAngles(45, 0, 0)
+ app.root.addChild(light)
+
+ // Create a sphere
+ // const sphere = new pc.Entity('sphere')
+ // sphere.addComponent('model', {
+ // type: 'sphere'
+ // })
+ // app.root.addChild(sphere)
+
+ // Start the application
+ // app.start();
+
+ // Set up entities in the scene
+ // entities.forEach(entity => {
+ // // Add custom logic to set up each entity
+ // });
+
+ // setHasSetUpEntities(true)
+ // }
+ // }, [entities, hasSetUpEntities])
+}
diff --git a/mirror-2/components/engine/space-viewport-from-pc-import.tsx b/mirror-2/components/engine/space-viewport-from-pc-import.tsx
new file mode 100644
index 00000000..ca0f3274
--- /dev/null
+++ b/mirror-2/components/engine/space-viewport-from-pc-import.tsx
@@ -0,0 +1,140 @@
+'use client'
+
+import { cn } from '@/utils/cn'
+import Script from 'next/script'
+import * as pc from 'playcanvas'
+import { useEffect, useRef, useState } from 'react'
+import { createSupabaseBrowserClient } from '@/utils/supabase/client'
+import { useAppSelector } from '@/hooks/hooks'
+import { selectLocalUser } from '@/state/local.slice'
+
+import {
+ getASSET_PREFIXForLoadingEngineApp,
+ getBrowserScriptTagUrlForLoadingScriptsFromStorage,
+ getSCRIPT_PREFIXForLoadingEngineApp,
+ modifySettingsFileFromSupabase
+} from '@/utils/space-pack'
+import {
+ SPACE_PACKS_BUCKET_NAME,
+ useGetSingleSpacePackQuery
+} from '@/state/api/space-packs'
+
+interface SpaceViewportProps {
+ spacePackId: number
+ mode?: 'build' | 'play' // Optional mode prop with default value 'play'
+}
+
+export default function SpaceViewport({
+ spacePackId,
+ mode = 'play'
+}: SpaceViewportProps) {
+ const [isScriptReady, setIsScriptReady] = useState(false)
+ const [engineLoaded, setEngineLoaded] = useState(false)
+ const [settingsScriptUrl, setSettingsScriptUrl] = useState('')
+ const [modifiedSettingsFileText, setModifiedSettingsFileText] = useState('')
+ const [modulesScriptUrl, setModulesScriptUrl] = useState('')
+ const [importedConfigJsonUrl, setImportedConfigJsonUrl] = useState('')
+ const [hasLoadedExternalFiles, setHasLoadedExternalFiles] = useState(false)
+ const canvasRef = useRef(null)
+ const user = useAppSelector(selectLocalUser)
+
+ const startScriptPath = `/scripts/__start-custom__.js`
+ const supabase = createSupabaseBrowserClient()
+
+ useEffect(() => {
+ // // Ensure this runs only on the client-side
+ if (typeof window !== 'undefined' && !window['pc']) {
+ window['pc'] = pc // Declare global PlayCanvas variable
+ }
+ }, [])
+
+ // Use RTK Query to fetch the list of filenames related to the spacePackId
+ const { data: spacePack, error: spacePackImportError } =
+ useGetSingleSpacePackQuery(spacePackId)
+
+ useEffect(() => {
+ const loadScripts = async () => {
+ if (spacePack && !spacePackImportError && user) {
+ try {
+ const spacePackImportPath = `${user?.id}/${spacePack.id}`
+
+ // get __settings__.js
+ const { data: settingsFile } = supabase.storage
+ .from(SPACE_PACKS_BUCKET_NAME)
+ .getPublicUrl(spacePackImportPath + '/__settings__.js')
+ setSettingsScriptUrl(settingsFile.publicUrl)
+
+ const { data: configFile } = supabase.storage
+ .from(SPACE_PACKS_BUCKET_NAME)
+ .getPublicUrl(spacePackImportPath + '/config.json')
+ setImportedConfigJsonUrl(configFile.publicUrl)
+
+ const spacePackBaseUrl = settingsFile.publicUrl.replace(
+ '/__settings__.js',
+ '/'
+ )
+
+ const modifiedSettingsContent = await modifySettingsFileFromSupabase(
+ settingsFile.publicUrl, // This is the URL you obtained from Supabase
+ spacePackBaseUrl, // Your asset prefix
+ spacePackBaseUrl,
+ configFile.publicUrl
+ )
+ setModifiedSettingsFileText(modifiedSettingsContent)
+
+ const { data: modulesFile } = supabase.storage
+ .from(SPACE_PACKS_BUCKET_NAME)
+ .getPublicUrl(spacePackImportPath + '/__modules__.js')
+ setModulesScriptUrl(modulesFile.publicUrl)
+
+ setIsScriptReady(true)
+ setHasLoadedExternalFiles(true)
+
+ // // // Ensure this runs only on the client-side
+ // if (typeof window !== 'undefined') {
+ // window['pc'] = pc // Declare global PlayCanvas variable
+ // }
+ } catch (error) {
+ console.error('Error loading external files:', error)
+ }
+ } else {
+ console.log('Did not retrieve spacePack yet')
+ }
+ }
+
+ if (user?.id && spacePackId && !hasLoadedExternalFiles && spacePack) {
+ loadScripts()
+ }
+ }, [user, spacePackId, spacePack, spacePackImportError])
+
+ return (
+ <>
+ {isScriptReady && settingsScriptUrl && modulesScriptUrl && (
+ <>
+ {/* Load all the dynamic scripts from the project folder */}
+
+
+ {/* This is OUR start file, not the imported one (for engine compatibility reasons) */}
+
+
+
+
+
+
+
+
*/}
+
+ );
+}
diff --git a/mirror-2/app/space/[spaceId]/build/page.tsx b/mirror-2/app/space/[spaceId]/build/page.tsx
new file mode 100644
index 00000000..79a8aeb4
--- /dev/null
+++ b/mirror-2/app/space/[spaceId]/build/page.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import { useAppDispatch, useAppSelector } from "@/hooks/hooks"
+import { selectCurrentScene, setCurrentScene } from "@/state/local.slice"
+import { useGetAllScenesQuery } from "@/state/api/scenes"
+import { useGetSingleSpaceQuery } from "@/state/api/spaces"
+
+import { useParams } from "next/navigation"
+import { useEffect } from "react"
+import dynamic from "next/dynamic"
+import { store } from "@/state/store"
+
+
+// blank page since we're using the parallel routes for spaceViewport, controlBar, etc.
+export default function Page() {
+ const currentScene = useAppSelector(selectCurrentScene);
+ const params = useParams<{ spaceId: string }>()
+ const spaceId: number = parseInt(params.spaceId, 10) // Use parseInt for safer conversion
+
+ const { data: space, error } = useGetSingleSpaceQuery(spaceId)
+ const { data: scenes, isLoading: isScenesLoading } = useGetAllScenesQuery(spaceId)
+
+ // after successful query, update the current scene to the first in the space.scenes array
+ const dispatch = useAppDispatch();
+ useEffect(() => {
+ // if no current Scene, set it to the first scene
+ if (scenes && scenes?.length > 0 && scenes[0]) {
+ if (!currentScene?.id) {
+ console.log("setting current scene to first scene", scenes[0])
+ dispatch(setCurrentScene(scenes[0]))
+ }
+ } else {
+ console.log('No scenes to set', scenes, currentScene)
+ }
+ }, [space, scenes])
+
+ return null
+}
diff --git a/mirror-2/app/space/[spaceId]/build/sidebar.tsx b/mirror-2/app/space/[spaceId]/build/sidebar.tsx
new file mode 100644
index 00000000..337b0ae8
--- /dev/null
+++ b/mirror-2/app/space/[spaceId]/build/sidebar.tsx
@@ -0,0 +1,10 @@
+"use client"
+import ControlBar from "@/app/space/[spaceId]/build/controlBar/control-bar";
+
+export function Sidebar() {
+ return (
+
+ {/* Sidebar with fixed width */}
+
+
+
+
+ {/* Inner control bar takes flexible space */}
+
+
+
+ {/* Space viewport (main content) */}
+
+
+
+ {/* Instead of a div wrapping here, passing in className so that this component can be server compoonent; the Inspector has to use a hook for checking if entity selected */}
+
+
+ )
+}
diff --git a/mirror-2/app/space/[spaceId]/build/top-navbar.tsx b/mirror-2/app/space/[spaceId]/build/top-navbar.tsx
new file mode 100644
index 00000000..38e3d3b7
--- /dev/null
+++ b/mirror-2/app/space/[spaceId]/build/top-navbar.tsx
@@ -0,0 +1,61 @@
+"use client"
+import { EditableSpaceName } from "@/components/editable-space-name";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+import AccountDropdownMenu from "@/components/ui/account-dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { useAppSelector } from "@/hooks/hooks";
+import { AppLogoImageSmall } from "@/lib/theme-service";
+import { selectLocalUser } from "@/state/local.slice";
+import { Play } from "lucide-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { useEffect, useState } from "react";
+
+export function TopNavbar() {
+ const localUserState = useAppSelector(selectLocalUser)
+ const [hasMounted, setHasMounted] = useState(false);
+ const params = useParams<{ spaceId: string }>()
+ const spaceId: number = parseInt(params.spaceId, 10) // Use parseInt for safer conversion
+
+ // Check if the component is fully mounted (client-side)
+ useEffect(() => {
+ setHasMounted(true);
+ }, []);
+
+ return (
+
+
+
+
+
+
+ {/* Top Menu Bar */}
+
+ )
+}
diff --git a/mirror-2/components.json b/mirror-2/components.json
new file mode 100644
index 00000000..d77a3f82
--- /dev/null
+++ b/mirror-2/components.json
@@ -0,0 +1,20 @@
+{
+ "$schema": "https://ui.shadcn.com/schema.json",
+ "style": "default",
+ "rsc": true,
+ "tsx": true,
+ "tailwind": {
+ "config": "tailwind.config.ts",
+ "css": "app/globals.css",
+ "baseColor": "slate",
+ "cssVariables": false,
+ "prefix": ""
+ },
+ "aliases": {
+ "components": "@/components",
+ "utils": "@/lib/utils",
+ "ui": "@/components/ui",
+ "lib": "@/lib",
+ "hooks": "@/hooks"
+ }
+}
\ No newline at end of file
diff --git a/mirror-2/components/editable-space-name.tsx b/mirror-2/components/editable-space-name.tsx
new file mode 100644
index 00000000..879f8f7f
--- /dev/null
+++ b/mirror-2/components/editable-space-name.tsx
@@ -0,0 +1,90 @@
+'use client'
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormMessage
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { Skeleton } from '@/components/ui/skeleton'
+import {
+ useGetSingleSpaceQuery,
+ useUpdateSpaceMutation
+} from '@/state/api/spaces'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useParams } from 'next/navigation'
+import { useEffect } from 'react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+const formSchema = z.object({
+ name: z.string().min(3)
+})
+
+export function EditableSpaceName() {
+ const params = useParams<{ spaceId: string }>()
+ const spaceId: number = parseInt(params.spaceId, 10) // Use parseInt for safer conversion
+
+ const {
+ data: space,
+ isLoading,
+ isSuccess,
+ error
+ } = useGetSingleSpaceQuery(spaceId)
+ const [updateSpace] = useUpdateSpaceMutation()
+
+ // define the form
+ const form = useForm
+
+
+
+ {/* Sidebar (20% of the width) */}
+
+
+
+
+ {/* Main content area (80% of the width) */}
+
+
+
+
+ |
+
+
+ ${html}
+ |
+