deps: update versions and fix build issues

backend/package.json

@@ -14,19 +14,20 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@types/cors": "^2.8.17",
-    "@types/express": "^4.17.21",
-    "@types/node": "^20.12.7",
+    "@types/cors": "^2.8.18",
+    "@types/express": "^4.17.22",
+    "@types/node": "^20.17.50",
     "@types/uuid": "^10.0.0",
-    "typescript": "^5.4.5"
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.3"
   },
   "dependencies": {
     "@supabase/supabase-js": "^2.43.4",
     "cors": "^2.8.5",
-    "dotenv": "^16.4.5",
-    "express": "^4.19.2",
-    "socket.io": "^4.7.5",
-    "uuid": "^10.0.0",
-    "zod": "^3.23.8"
+    "dotenv": "^16.5.0",
+    "express": "^5.1.0",
+    "socket.io": "^4.8.1",
+    "uuid": "^11.1.0",
+    "zod": "^3.25.28"
   }
 }

frontend/app/app/page.tsx

@@ -6,7 +6,7 @@ import { getVisitedRealms } from '@/utils/supabase/getVisitedRealms'
 
 export default async function App() {
 
-    const supabase = createClient()
+    const supabase = await createClient()
 
     const { data: { user } } = await supabase.auth.getUser()
     const { data: { session } } = await supabase.auth.getSession()

frontend/app/auth/callback/route.ts

@@ -10,7 +10,7 @@ export async function GET(request: Request) {
   const origin = requestUrl.origin;
 
   if (code) {
-    const supabase = createClient();
+    const supabase = await createClient();
     await supabase.auth.exchangeCodeForSession(code);
   }
 

frontend/app/editor/[id]/page.tsx

@@ -3,26 +3,28 @@ import { createClient } from '@/utils/supabase/server'
 import { redirect } from 'next/navigation'
 import Editor from '../Editor'
 
-export default async function RealmEditor({ params }: { params: { id: string } }) {
-
-    const supabase = createClient()
-    const { data: { user } } = await supabase.auth.getUser()
-
-    if (!user) {
-        return redirect('/signin')
-    }
-
-    const { data, error } = await supabase.from('realms').select('id, name, owner_id, map_data').eq('id', params.id).single()
-    // Show not found page if we are not the owner or no data is returned
-    if (!data) {
-        return <NotFound />
-    }
-    const realm = data
-    const map_data = realm.map_data 
-
-    return (
-        <div>
-            <Editor realmData={map_data}/>
-        </div>
-    )
+export default async function RealmEditor({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+
+  if (!user) {
+    return redirect('/signin')
+  }
+
+  const { data, error } = await supabase.from('realms').select('id, name, owner_id, map_data').eq('id', id).single()
+
+  // Show not found page if we are not the owner or no data is returned
+  if (!data) {
+    return <NotFound />
+  }
+
+  const realm = data
+  const map_data = realm.map_data
+
+  return (
+    <div>
+      <Editor realmData={map_data}/>
+    </div>
+  )
 }

frontend/app/globals.css

@@ -1,95 +1,138 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* globals.css (v4) */
+@import "tailwindcss";
+
+@theme {
+  /* Colors */
+  --color-primary: #282d4e;
+  --color-secondary: #323a64;
+  --color-light-secondary: #545c8e;
+  --color-darkblue: #2a3154;
+  --color-quaternary: #06d6a0;
+  --color-quaternaryhover: #5fe5c2;
+  --color-button: #202540;
+  --color-light-gray: #464b67;
+
+  /* Background Images - CORRECT SYNTAX */
+  --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
+  --background-image-gradient-conic: conic-gradient(
+    from 180deg at 50% 50%,
+    var(--tw-gradient-stops)
+  );
+  --background-image-rainbow: linear-gradient(
+    to right,
+    red,
+    orange,
+    yellow,
+    green,
+    blue,
+    indigo,
+    violet
+  );
+  --background-image-rainbow-less: linear-gradient(45deg, red, blue, indigo);
+  --background-image-rainbow-less-hover: linear-gradient(
+    45deg,
+    #ff4d4d,
+    #4d4dff,
+    #4d4dff
+  );
+  --background-image-rainbow-less-disabled: linear-gradient(
+    45deg,
+    darkred,
+    darkblue,
+    darkindigo
+  );
+}
 
+/* Custom CSS (same as before) */
 html {
-    background: #282D4E;
-    color: white;
+  background: #282d4e;
+  color: white;
 }
 
 .transparent-scrollbar::-webkit-scrollbar {
-    width: 8px;
+  width: 8px;
 }
 
 .transparent-scrollbar::-webkit-scrollbar-thumb {
-    background-color: rgba(0, 0, 0, 0.5);
-    border-radius: 10px;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
 }
 
 .transparent-scrollbar::-webkit-scrollbar-track {
-    background: transparent;
+  background: transparent;
 }
 
 .no-scrollbar {
-    -ms-overflow-style: none;  /* Internet Explorer 10+ */
-    scrollbar-width: none;     /* Firefox */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
 .no-scrollbar::-webkit-scrollbar {
-    display: none; /* Safari and Chrome */
+  display: none;
 }
 
-input[type=number]::-webkit-inner-spin-button, 
-input[type=number]::-webkit-outer-spin-button { 
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    margin: 0; 
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin: 0;
 }
 
 .character-container {
-    width: calc(100% * 4);
-    height: calc(100% * 4);
-    animation: animateY 2s steps(4) infinite;
+  width: calc(100% * 4);
+  height: calc(100% * 4);
+  animation: animateY 2s steps(4) infinite;
 }
 
 .character {
-    height: 100%;
-    width: 100%;
-    animation: animated 0.5s steps(4) infinite;
+  height: 100%;
+  width: 100%;
+  animation: animated 0.5s steps(4) infinite;
 }
 
 .static-character-container {
-    width: calc(100% * 4);
-    height: calc(100% * 4);
+  width: calc(100% * 4);
+  height: calc(100% * 4);
 }
 
 .static-character {
-    height: 100%;
-    width: 100%;
-    transform: translateX(-25%);
+  height: 100%;
+  width: 100%;
+  transform: translateX(-25%);
 }
 
 .gradient {
-    background-image: linear-gradient(#202540, #252c5d 42%, #3a3dab);
+  background-image: linear-gradient(#202540, #252c5d 42%, #3a3dab);
 }
 
 .dark-gradient {
-    background-image: linear-gradient(#111111, #202437 42%, #323862);
+  background-image: linear-gradient(#111111, #202437 42%, #323862);
 }
 
 .animate-colors {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-    transition-duration: 300ms;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: color, background-color, border-color,
+    text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @keyframes animated {
-    from {
-        transform: translateX(0);
-    }
-    to {
-        transform: translateX(-100%);
-    }
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
 }
 
 @keyframes animateY {
-    from {
-        transform: translateY(0);
-    }
-    to {
-        transform: translateY(-100%);
-    }
-}
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}

frontend/app/manage/[id]/page.tsx

@@ -1,35 +1,48 @@
-import { createClient } from '@/utils/supabase/server'
-import { redirect } from 'next/navigation'
-import ManageChild from '../ManageChild'
-import NotFound from '../../not-found'
-import { request } from '@/utils/backend/requests'
+import { createClient } from "@/utils/supabase/server";
+import { redirect } from "next/navigation";
+import ManageChild from "../ManageChild";
+import NotFound from "../../not-found";
+import { request } from "@/utils/backend/requests";
 
-export default async function Manage({ params }: { params: { id: string } }) {
+export default async function Manage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
 
-    const supabase = createClient()
+  const supabase = await createClient();
 
-    const { data: { user } } = await supabase.auth.getUser()
-    const { data: { session } } = await supabase.auth.getSession()
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
 
-    if (!user || !session) {
-        return redirect('/signin')
-    }
+  if (!user || !session) {
+    return redirect("/signin");
+  }
 
-    const { data, error } = await supabase.from('realms').select('id, name, owner_id, map_data, share_id, only_owner').eq('id', params.id).single()
-    // Show not found page if no data is returned
-    if (!data) {
-        return <NotFound />
-    }
-    const realm = data
+  const { data, error } = await supabase
+    .from("realms")
+    .select("id, name, owner_id, map_data, share_id, only_owner")
+    .eq("id", id)
+    .single();
+  // Show not found page if no data is returned
+  if (!data) {
+    return <NotFound />;
+  }
+  const realm = data;
 
-    return (
-        <div>
-            <ManageChild 
-                realmId={realm.id} 
-                startingShareId={realm.share_id} 
-                startingOnlyOwner={realm.only_owner} 
-                startingName={realm.name}
-            />
-        </div>
-    )
-}
+  return (
+    <div>
+      <ManageChild
+        realmId={realm.id}
+        startingShareId={realm.share_id}
+        startingOnlyOwner={realm.only_owner}
+        startingName={realm.name}
+      />
+    </div>
+  );
+}

frontend/app/play/[id]/PlayClientWrapper.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import React from "react";
+
+// Dynamically import PlayClient with SSR disabled
+const PlayClient = dynamic(() => import("../PlayClient"), {
+  ssr: false,
+  loading: () => (
+    <div className="w-full h-screen grid place-items-center bg-[#282D4E]">
+      <div className="text-white text-xl">Loading game...</div>
+    </div>
+  ),
+});
+
+// Props type to match what page.tsx passes
+type PlayClientWrapperProps = {
+  mapData: any; // Replace with your actual map_data type
+  username: string;
+  access_token: string;
+  realmId: string;
+  uid: string;
+  shareId: string;
+  initialSkin: string;
+  name: string;
+};
+
+export default function PlayClientWrapper(props: PlayClientWrapperProps) {
+  return <PlayClient {...props} />;
+}