fix: Object.values null safety + Docker dev build

- Change Dockerfile to use development build (better error messages)
- Add || {} fallbacks to all Object.values() calls accessing state
- Fixes "Cannot convert undefined or null to object" browser error during SSR/hydration
- Verified TypeScript compilation and Next.js build successful

Files modified:
- Dockerfile
- src/app/page.tsx
- src/components/game/tabs/StatsTab.tsx
- src/components/game/StatsTab/LoopStatsSection.tsx
- src/components/game/StatsTab/ElementStatsSection.tsx
- src/components/game/tabs/AttunementsTab.tsx
- src/components/game/tabs/GolemancyTab.tsx
- src/lib/game/effects.ts
- src/lib/game/utils/combat-utils.ts
- src/lib/game/crafting-loot.ts
- src/components/game/LootInventory/LootInventoryDisplay.tsx
- src/components/game/LootInventory/index.tsx
- src/components/game/crafting/EnchantmentDesigner/utils.ts

Dockerfile

@@ -1,6 +1,6 @@
-# Mana Loop - Next.js Game Docker Image
+# Mana Loop - Next.js Game Docker Image (Development Build)
 
-FROM node:20-alpine AS builder
+FROM node:20-alpine AS base
 WORKDIR /app
 
 # Install dependencies
@@ -19,48 +19,21 @@ RUN bun install --frozen-lockfile
 # Copy the rest of the application
 COPY . .
 
-# Set environment variables for build
+# Development environment variables (no production optimizations)
+ENV NODE_ENV=development
 ENV NEXT_TELEMETRY_DISABLED=1
-ENV NODE_ENV=production
 ENV DATABASE_URL="file:./dev.db"
+ENV NEXT_DEV_MODE=true
 
 # Generate Prisma client
 RUN bunx prisma generate --schema=./prisma/schema.prisma
 
-# Build the application
-RUN bun run build
-
-# Production image
-FROM node:20-alpine AS runner
-WORKDIR /app
-
-# Install openssl for Prisma
-RUN apk add --no-cache openssl
-
-ENV NODE_ENV=production
-ENV NEXT_TELEMETRY_DISABLED=1
-ENV DATABASE_URL="file:./data/dev.db"
-
-# Create data directory for SQLite
-RUN mkdir -p /app/data
-
-# Copy necessary files from builder
-COPY --from=builder /app/public ./public
-COPY --from=builder /app/.next/standalone ./
-COPY --from=builder /app/.next/static ./.next/static
-COPY --from=builder /app/prisma ./prisma
-COPY --from=builder /app/node_modules/.prisma ./node_modules/.prisma
-COPY --from=builder /app/node_modules/@prisma ./node_modules/@prisma
-
 # Expose port
 EXPOSE 3000
 
-ENV PORT=3000
-ENV HOSTNAME="0.0.0.0"
-
-# Health check
+# Health check for development
 HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
   CMD wget --no-verbose --tries=1 --spider http://localhost:3000 || exit 1
 
-# Start the server (running as root)
-CMD ["node", "server.js"]
+# Use development server (next dev) for better error messages and HMR
+CMD ["bun", "run", "dev", "--", "-p", "3000", "--", "--hostname", "0.0.0.0"]

docs/project-structure.txt

@@ -458,6 +458,7 @@ Mana-Loop/
 │       │   ├── debug-context.tsx
 │       │   ├── dynamic-compute.ts
 │       │   ├── effects.ts
+│       │   ├── effects.ts.fix
 │       │   ├── formatting.ts
 │       │   ├── navigation-slice.ts
 │       │   ├── skill-evolution.ts

src/app/page.tsx

@@ -72,7 +72,7 @@ function GrimoireTab() {
   useEffect(() => {
     // Only access SPELLS_DEF on client-side
     if (typeof window !== 'undefined' && SPELLS_DEF) {
-      const filtered = Object.values(SPELLS_DEF).filter((s: any) => s.grimoire);
+      const filtered = Object.values(SPELLS_DEF || {}).filter((s: any) => s.grimoire);
       // Use setTimeout to avoid setState in effect issue
       setTimeout(() => setGrimoireSpells(filtered), 0);
     }

src/components/game/LootInventory/LootInventoryDisplay.tsx

@@ -55,7 +55,7 @@ export function LootInventoryDisplay({
   const [deleteConfirm, setDeleteConfirm] = useState<{ type: 'material' | 'equipment'; id: string; name: string } | null>(null);
 
   // Count items
-  const materialCount = Object.values(inventory.materials).reduce((a, b) => a + b, 0);
+  const materialCount = Object.values(inventory.materials || {}).reduce((a, b) => a + b, 0);
   const essenceCount = elements ? Object.entries(elements).reduce((a, [id, e]) => id === 'transference' ? a : a + e.current, 0) : 0;
   const blueprintCount = inventory.blueprints.length;
   const equipmentCount = Object.keys(equipmentInstances).length;

src/components/game/LootInventory/index.tsx

@@ -55,7 +55,7 @@ export function LootInventoryDisplay({
   const [deleteConfirm, setDeleteConfirm] = useState<{ type: 'material' | 'equipment'; id: string; name: string } | null>(null);
 
   // Count items
-  const materialCount = Object.values(inventory.materials).reduce((a: number, b: number) => a + b, 0);
+  const materialCount = Object.values(inventory.materials || {}).reduce((a: number, b: number) => a + b, 0);
   
   // Calculate essence count
   let essenceCount = 0;

src/components/game/StatsTab/ElementStatsSection.tsx

@@ -48,7 +48,7 @@ export function ElementStatsSection({ store, elemMax }: ElementStatsSectionProps
           <div className="space-y-2">
             <div className="flex justify-between text-sm">
               <span className="text-gray-400">Unlocked Elements:</span>
-              <span className="text-green-300">{Object.values(store.elements).filter((e: any) => e.unlocked).length} / {Object.keys(ELEMENTS).length}</span>
+              <span className="text-green-300">{Object.values(store.elements || {}).filter((e: any) => e.unlocked).length} / {Object.keys(ELEMENTS).length}</span>
             </div>
             <div className="flex justify-between text-sm">
               <span className="text-gray-400">Elem. Crafting Bonus:</span>

src/components/game/StatsTab/LoopStatsSection.tsx

@@ -10,8 +10,8 @@ interface LoopStatsSectionProps {
 }
 
 export function LoopStatsSection({ store }: LoopStatsSectionProps) {
-  const spellsLearned = Object.values(store.spells as Record<string, { learned: boolean }>).filter((s) => s.learned).length;
-  const totalSkillLevels = Object.values(store.skills as Record<string, number>).reduce((a: number, b: number) => a + b, 0);
+  const spellsLearned = Object.values(store.spells || {}).filter((s) => s.learned).length;
+  const totalSkillLevels = Object.values(store.skills || {}).reduce((a: number, b: number) => a + b, 0);
 
   return (
     <Card className="bg-gray-900/80 border-gray-700">

src/components/game/crafting/EnchantmentDesigner/utils.ts

@@ -49,7 +49,7 @@ export function getOwnedEquipmentTypes(store: GameStore) {
   const ownedEquipmentTypeIds = new Set<string>();
 
   // Check all equipment instances the player owns
-  for (const instance of Object.values(store.equipmentInstances)) {
+  for (const instance of Object.values(store.equipmentInstances || {})) {
     ownedEquipmentTypeIds.add(instance.typeId);
   }
 

src/components/game/tabs/AttunementsTab.tsx

@@ -232,7 +232,7 @@ export function AttunementsTab({ store }: AttunementsTabProps) {
           </p>
           <div className="flex flex-wrap gap-2">
             {availableCategories.map(cat => {
-              const attunement = Object.values(ATTUNEMENTS_DEF).find(a => 
+              const attunement = Object.values(ATTUNEMENTS_DEF || {}).find(a => 
                 a.skillCategories.includes(cat) && attunements[a.id]?.active
               );
               return (

src/components/game/tabs/EquipmentTab.tsx

@@ -202,7 +202,7 @@ export function EquipmentTab() {
 
   // Check if an instance is currently equipped
   const isEquipped = (instanceId: string): boolean =>
-    Object.values(equippedInstances).includes(instanceId);
+    Object.values(equippedInstances || {}).includes(instanceId);
 
   // Get all slots an item type can be equipped to
   const getEquippableSlots = (typeId: string): EquipmentSlot[] => {
@@ -243,7 +243,7 @@ export function EquipmentTab() {
           title="Equipped Gear"
           action={
             <span className="text-xs text-[var(--text-muted)]">
-              {Object.values(equippedInstances).filter(Boolean).length} / {EQUIPMENT_SLOTS.length} slots filled
+              {Object.values(equippedInstances || {}).filter(Boolean).length} / {EQUIPMENT_SLOTS.length} slots filled
             </span>
           }
         />
@@ -288,7 +288,7 @@ export function EquipmentTab() {
         <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
           <div className="p-3 bg-[var(--bg-sunken)]/50 rounded text-center">
             <div className="text-2xl font-bold text-[var(--mana-light)] font-[var(--font-mono)]">
-              {Object.values(equipmentInstances).length}
+              {Object.values(equipmentInstances || {}).length}
             </div>
             <div className="text-xs text-[var(--text-muted)]">Total Items</div>
           </div>
@@ -306,7 +306,7 @@ export function EquipmentTab() {
           </div>
           <div className="p-3 bg-[var(--bg-sunken)]/50 rounded text-center">
             <div className="text-2xl font-bold text-[var(--mana-stellar)] font-[var(--font-mono)]">
-              {Object.values(equipmentInstances).reduce(
+              {Object.values(equipmentInstances || {}).reduce(
                 (sum, inst) => sum + inst.enchantments.length,
                 0
               )}

src/components/game/tabs/GolemancyTab.tsx

@@ -35,7 +35,7 @@ export function GolemancyTab({ store }: GolemancyTabProps) {
     .map(([id]) => id);
   
   // Get all unlocked golems
-  const unlockedGolems = Object.values(GOLEMS_DEF).filter(golem => 
+  const unlockedGolems = Object.values(GOLEMS_DEF || {}).filter(golem => 
     isGolemUnlocked(golem.id, attunements, unlockedElements)
   );
   
@@ -293,7 +293,7 @@ export function GolemancyTab({ store }: GolemancyTabProps) {
               {unlockedGolems.map(golem => renderGolemCard(golem.id, true))}
               
               {/* Locked Golems */}
-              {Object.values(GOLEMS_DEF)
+              {Object.values(GOLEMS_DEF || {})
                 .filter(g => !isGolemUnlocked(g.id, attunements, unlockedElements))
                 .map(golem => renderGolemCard(golem.id, false))}
             </div>

src/components/game/tabs/SpellsTab.tsx

@@ -36,7 +36,7 @@ export function SpellsTab() {
     );
   }
   
-  for (const instanceId of Object.values(equippedInstances)) {
+  for (const instanceId of Object.values(equippedInstances || {})) {
     if (!instanceId) continue;
     const instance = equipmentInstances[instanceId];
     if (!instance) continue;

src/components/game/tabs/StatsTab.tsx

@@ -176,7 +176,7 @@ export function StatsTab() {
             <div className="space-y-2">
               <div className="flex justify-between text-sm">
                 <span className="text-gray-400">Unlocked Elements:</span>
-                <span className="text-green-300">{Object.values(elements).filter(e => e.unlocked).length} / {Object.keys(ELEMENTS).length}</span>
+                <span className="text-green-300">{Object.values(elements || {}).filter((e: any) => e.unlocked).length} / {Object.keys(ELEMENTS).length}</span>
               </div>
               <div className="flex justify-between text-sm">
                 <span className="text-gray-400">Elem. Crafting Bonus:</span>
@@ -298,7 +298,7 @@ export function StatsTab() {
           <Separator className="bg-gray-700 my-3" />
           <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
             <div className="p-3 bg-gray-800/50 rounded text-center">
-              <div className="text-xl font-bold text-gray-300 game-mono">{Object.values(spells).filter(s => s.learned).length}</div>
+              <div className="text-xl font-bold text-gray-300 game-mono">{Object.values(spells || {}).filter((s: any) => s.learned).length}</div>
               <div className="text-xs text-gray-400">Spells Learned</div>
             </div>
             <div className="p-3 bg-gray-800/50 rounded text-center">

src/lib/game/crafting-actions/computed-getters.ts

@@ -7,7 +7,7 @@ export function getEquipmentSpells(get: () => GameState): string[] {
   const state = get();
   const spells: string[] = [];
 
-  for (const instanceId of Object.values(state.equippedInstances)) {
+  for (const instanceId of Object.values(state.equippedInstances || {})) {
     if (!instanceId) continue;
     const instance = state.equipmentInstances[instanceId];
     if (!instance) continue;
@@ -27,7 +27,7 @@ export function getEquipmentEffects(get: () => GameState): Record<string, number
   const state = get();
   const effects: Record<string, number> = {};
 
-  for (const instanceId of Object.values(state.equippedInstances)) {
+  for (const instanceId of Object.values(state.equippedInstances || {})) {
     if (!instanceId) continue;
     const instance = state.equipmentInstances[instanceId];
     if (!instance) continue;

src/lib/game/crafting-loot.ts

@@ -28,7 +28,7 @@ export function getUniqueMaterialCount(inventory: LootInventory): number {
 
 // Get total material stacks (sum of all quantities)
 export function getTotalMaterialStacks(inventory: LootInventory): number {
-  return Object.values(inventory.materials).reduce((sum, qty) => sum + qty, 0);
+  return Object.values(inventory.materials || {}).reduce((sum, qty) => sum + qty, 0);
 }
 
 // ─── Inventory Modifications ────────────────────────────────────────────────
@@ -265,7 +265,7 @@ export interface InventoryStats {
 
 export function getInventoryStats(inventory: LootInventory): InventoryStats {
   const totalUniqueMaterials = Object.keys(inventory.materials).length;
-  const totalMaterialStacks = Object.values(inventory.materials).reduce((sum, qty) => sum + qty, 0);
+  const totalMaterialStacks = Object.values(inventory.materials || {}).reduce((sum, qty) => sum + qty, 0);
   const totalBlueprints = inventory.blueprints.length;
 
   return {

src/lib/game/effects.ts

@@ -35,7 +35,7 @@ export function computeEquipmentEffects(
   const specials = new Set<string>();
 
   // Iterate through all equipped items
-  for (const instanceId of Object.values(equippedInstances)) {
+  for (const instanceId of Object.values(equippedInstances || {})) {
     if (!instanceId) continue;
     const instance = equipmentInstances[instanceId];
     if (!instance) continue;
@@ -172,8 +172,8 @@ export function getUnifiedEffects(state: Pick<GameState, 'skillUpgrades' | 'skil
   return computeAllEffects(
     state.skillUpgrades || {},
     state.skillTiers || {},
-    state.equipmentInstances,
-    state.equippedInstances
+    state.equipmentInstances || {},
+    state.equippedInstances || {}
   );
 }
 

src/lib/game/effects.ts.fix

@@ -0,0 +1,12 @@
+
+/**
+ * Helper to get unified effects from game state
+ */
+export function getUnifiedEffects(state: Pick<GameState, 'skillUpgrades' | 'skillTiers' | 'equipmentInstances' | 'equippedInstances'>): UnifiedEffects {
+  return computeAllEffects(
+    state.skillUpgrades || {},
+    state.skillTiers || {},
+    state.equipmentInstances || {},
+    state.equippedInstances || {}
+  );
+}

src/lib/game/utils/combat-utils.ts

@@ -237,7 +237,7 @@ export function getActiveEquipmentSpells(
   equippedInstances: Record<string, string | null>,
   equipmentInstances: Record<string, EquipmentInstance>
 ): ActiveEquipmentSpell[] {
-  const equippedIds = Object.values(equippedInstances).filter((id): id is string => id !== null);
+  const equippedIds = Object.values(equippedInstances || {}).filter((id): id is string => id !== null);
   const spells: ActiveEquipmentSpell[] = [];
   
   for (const id of equippedIds) {