Beta test: Release 1.0

src/App.jsx

@@ -2,7 +2,9 @@
 // <div /> tests whether centered layout works.
 // <section className="panel stack-md" /> tests whether reusable panel and vertical spacing classes work.
 // <h1 /> tests title style
-import Header from "./components/header.jsx";
+import { BrowserRouter, Navigate, Route, Routes, Outlet } from "react-router-dom";
+import { isAuthenticated } from "./api/userApi";
+
 import OpeningPage from "./pages/OpeningPage.jsx";
 import RegisterPage from "./pages/RegisterPage.jsx";
 import LoginPage from "./pages/LoginPage.jsx";
@@ -13,41 +15,92 @@ import EggDashboardPage from "./pages/EggDashboardPage.jsx";
 import InventoryPage from "./pages/InventoryPage.jsx";
 import ShopPage from "./pages/ShopPage.jsx";
 import MemoryArchivePage from "./pages/MemoryArchivePage.jsx";
-import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
 
-// 1. Create a wrapper component inside the Router context
-function AppContent() {
-  const location = useLocation();
+import Header from "./components/header.jsx";
+import MusicPlayer from "./components/MusicPlayer.jsx";
+
+function ProtectedRoute({ children }) {
+  if (!isAuthenticated()) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return children;
+}
+
+function ProtectedPage({ children }) {
+  return (
+    <ProtectedRoute>
+      <Header />
+      {children}
+    </ProtectedRoute>
+  );
+}
+
+function PublicOnlyRoute({ children }) {
+  if (isAuthenticated()) {
+    return <Navigate to="/nest" replace />;
+  }
+
+  return children;
+}
 
-  // Define paths where you don't want the header
-  const hideHeaderPaths = ["/shop"]; 
+function ProtectedLayout() {
+  if (!isAuthenticated()) {
+    return <Navigate to="/login" replace />;
+  }
 
   return (
     <>
-      {/* Only render Header if the current path isn't in the hide list */}
-      {!hideHeaderPaths.includes(location.pathname) && <Header />}
-
-      <main style={{ padding: "1rem" }}>
-        <Routes>
-          <Route path="/" element={<EggDashboardPage />} />
-          <Route path="/write" element={<WritePostPage />} />
-          <Route path="/nest" element={<EggDashboardPage />} />
-          <Route path="/archive" element={<MemoryArchivePage />} />
-          <Route path="/posts/:id" element={<ViewPostPage />} />
-          <Route path="/shop" element={<ShopPage />} />
-          <Route path="/inventory" element={<InventoryPage />} />
-          <Route path="/profile" element={<ProfilePage />} />
-        </Routes>
-      </main>
+      <Header />
+      <Outlet />
+      <MusicPlayer />
     </>
   );
 }
 
-// 2. Keep your main App component clean
 function App() {
   return (
     <BrowserRouter>
-      <AppContent />
+      <Routes>
+        <Route
+          path="/"
+          element={
+            <PublicOnlyRoute>
+              <OpeningPage />
+            </PublicOnlyRoute>
+          }
+        />
+
+        <Route
+          path="/login"
+          element={
+            <PublicOnlyRoute>
+              <LoginPage />
+            </PublicOnlyRoute>
+          }
+        />
+
+        <Route
+          path="/register"
+          element={
+            <PublicOnlyRoute>
+              <RegisterPage />
+            </PublicOnlyRoute>
+          }
+        />
+
+        <Route element={<ProtectedLayout />}>
+          <Route path="/nest" element={<EggDashboardPage />} />
+          <Route path="/write" element={<WritePostPage />} />
+          <Route path="/archive" element={<MemoryArchivePage />} />
+          <Route path="/posts/:id" element={<ViewPostPage />} />
+          <Route path="/shop" element={<ShopPage />} />
+          <Route path="/inventory" element={<InventoryPage />} />
+          <Route path="/profile" element={<ProfilePage />} />
+        </Route>
+
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
     </BrowserRouter>
   );
 }

src/api/eggApi.js

@@ -1,3 +1,6 @@
+import { getRawShopItems } from "./shopApi";
+import { getInventoryItems } from "./inventoryApi";
+
 const EGG_STORAGE_KEY = "memory_egg_egg";
 
 const defaultEgg = {
@@ -7,9 +10,15 @@ const defaultEgg = {
   glow: 0,
   warmth: 0,
   weight: 0,
+
   active_background_id: null,
   active_music_id: null,
   active_decoration_id: null,
+
+  equipped_background: "default",
+  selected_music: null,
+  equipped_cosmetic: null,
+
   updated_at: new Date().toISOString(),
 };
 
@@ -39,47 +48,26 @@ function saveEggToStorage(egg) {
   localStorage.setItem(EGG_STORAGE_KEY, JSON.stringify(egg));
 }
 
-function getEmptyStats() {
-  return {
-    glow: 0,
-    warmth: 0,
-    weight: 0,
-  };
-}
-
-function getDecorationStats(decorationItem) {
-  const stats = getEmptyStats();
-
-  if (!decorationItem || decorationItem.item_type !== "decoration") {
-    return stats;
-  }
-
-  if (!decorationItem.effect_type || !decorationItem.effect_value) {
-    return stats;
-  }
-
-  if (!Object.hasOwn(stats, decorationItem.effect_type)) {
-    return stats;
-  }
-
-  return {
-    ...stats,
-    [decorationItem.effect_type]: Number(decorationItem.effect_value),
-  };
-}
-
 function findEquippedItemByType(inventoryItems, itemType) {
   return inventoryItems.find(
     (item) => item.item_type === itemType && item.is_equipped
   );
 }
 
 export async function getEgg() {
-  return loadEggFromStorage();
+  try {
+    const rawShopItems = await getRawShopItems();
+    const inventoryItems = await getInventoryItems(rawShopItems);
+
+    return recalculateEggFromInventory(inventoryItems);
+  } catch (error) {
+    console.warn("Failed to sync egg from inventory:", error);
+    return loadEggFromStorage();
+  }
 }
 
 export async function recalculateEggFromInventory(inventoryItems) {
-  const egg = loadEggFromStorage();
+  const currentEgg = loadEggFromStorage();
 
   const equippedBackground = findEquippedItemByType(
     inventoryItems,
@@ -91,18 +79,53 @@ export async function recalculateEggFromInventory(inventoryItems) {
     "decoration"
   );
 
-  const decorationStats = getDecorationStats(equippedDecoration);
+  const bonusStats = inventoryItems.reduce(
+    (totals, item) => {
+      if (!item.is_equipped || !item.effect_type || item.effect_value == null) {
+        return totals;
+      }
+
+      const effectValue = Number(item.effect_value);
+
+      if (Number.isNaN(effectValue)) {
+        return totals;
+      }
+
+      if (!["glow", "warmth", "weight"].includes(item.effect_type)) {
+        return totals;
+      }
+
+      return {
+        ...totals,
+        [item.effect_type]: totals[item.effect_type] + effectValue,
+      };
+    },
+    {
+      glow: 0,
+      warmth: 0,
+      weight: 0,
+    }
+  );
+
+  const baseGlow = currentEgg.base_glow ?? currentEgg.glow ?? 0;
+  const baseWarmth = currentEgg.base_warmth ?? currentEgg.warmth ?? 0;
+  const baseWeight = currentEgg.base_weight ?? currentEgg.weight ?? 0;
+
 
   const updatedEgg = {
-    ...egg,
-    stage: 1,
-    glow: decorationStats.glow,
-    warmth: decorationStats.warmth,
-    weight: decorationStats.weight,
-    active_background_id: equippedBackground?.item_id ?? null,
-    active_music_id: equippedMusic?.item_id ?? null,
-    active_decoration_id: equippedDecoration?.item_id ?? null,
-    updated_at: new Date().toISOString(),
+    ...currentEgg,
+
+    base_glow: baseGlow,
+    base_warmth: baseWarmth,
+    base_weight: baseWeight,
+
+    glow: Math.min(100, baseGlow + bonusStats.glow),
+    warmth: Math.min(100, baseWarmth + bonusStats.warmth),
+    weight: Math.min(100, baseWeight + bonusStats.weight),
+
+    equipped_background: equippedBackground?.asset_key || "default",
+    selected_music: equippedMusic?.asset_key || null,
+    equipped_cosmetic: equippedDecoration?.asset_key || null,
   };
 
   saveEggToStorage(updatedEgg);