Anexim/Mana-Loop
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Spire Mode floor rendering and swarm floors (Tasks 5 & 6)

Browse Source 
- Added enemy naming system with getEnemyName() function
- Updated EnemyState type to include name field
- Updated generateSwarmEnemies() and generateFloorState() to assign enemy names
- Fixed SpireTab.tsx (both versions) to display:
  - Floor type (Combat/Swarm/Speed/Guardian/Puzzle) with icons
  - Named enemies based on element and floor tier
  - Special floor properties (armor %, dodge chance)
  - Multiple enemies for swarm floors with individual HP bars
- Added ROOM_TYPE_LABELS to constants for display
- Verified floor type generation logic works correctly
- Build succeeds with npm run build
This commit is contained in:
Refactoring Agent
2026-04-28 13:36:16 +02:00
parent 7056dc04d6
commit 8aacc2c88e
61 changed files with 239 additions and 4651 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/layout.tsx
+2 -2
View File
@@ -34,9 +34,9 @@ export default function RootLayout({
>
<DebugProvider>
{children}
<Toaster />
<GameToaster />
</DebugProvider>
<Toaster />
<GameToaster />
</body>
</html>
);
src/app/page.tsx
+9 -2
View File
@@ -257,14 +257,21 @@ export default function ManaLoopGame() {
<h2 className="text-2xl font-bold game-title text-amber-400">
🏔️ Spire Mode - Floor {store.currentFloor}
</h2>
<div className="flex gap-2">
<div className="flex gap-2 items-center">
{/* Show Climbing indicator when actively climbing */}
{store.currentAction === 'climb' && !store.isDescending && (
<Badge className="bg-green-900/50 text-green-300 border-green-600">
Climbing
</Badge>
)}
<Button
variant="outline"
className="border-blue-600/50 text-blue-400 hover:bg-blue-900/20"
onClick={() => store.climbDownFloor()}
disabled={store.isDescending}
>
<ChevronDown className="w-4 h-4 mr-2" />
Climb Down
{store.isDescending ? 'Descending...' : 'Begin Descent'}
</Button>
{store.currentFloor === 1 ? (
<Button
src/components/game/SpireTab.tsx
+43 -38
View File
@@ -1,6 +1,7 @@
'use client';
import { useGameStore, canAffordSpellCost, fmt, fmtDec, calcDamage, getEnemyName } from '@/lib/game/store';
import type { ActivityLogEntry } from '@/lib/game/types';
import { ELEMENTS, GUARDIANS, SPELLS_DEF, ROOM_TYPE_LABELS } from '@/lib/game/constants';
import { useManaStats, useCombatStats, useStudyStats } from '@/lib/game/hooks/useGameDerived';
import { formatSpellCost, getSpellCostColor, formatStudyTime } from '@/lib/game/formatting';
@@ -384,35 +385,7 @@ export function SpireTab() {
)}
{/* Pact Signing Progress */}
{store.pactSigningProgress && (
<Card className="bg-gray-900/80 border-amber-600/50 lg:col-span-2">
<CardContent className="pt-4 space-y-3">
<div className="p-3 rounded border border-amber-500/30 bg-amber-900/20">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2">
<span className="text-2xl">📜</span>
<div>
<div className="text-sm font-semibold text-amber-300">
Signing Pact: {GUARDIANS[store.pactSigningProgress.floor]?.name}
</div>
<div className="text-xs text-amber-400">
Floor {store.pactSigningProgress.floor}
</div>
</div>
</div>
</div>
<Progress
value={Math.min(100, (store.pactSigningProgress.progress / store.pactSigningProgress.required) * 100)}
className="h-2 bg-gray-800"
/>
<div className="flex justify-between text-xs text-amber-400 mt-1">
<span>{formatStudyTime(store.pactSigningProgress.progress)} / {formatStudyTime(store.pactSigningProgress.required)}</span>
<span>Cost: {fmt(store.pactSigningProgress.manaCost)} mana</span>
</div>
</div>
</CardContent>
</Card>
)}
{/* Spells Available */}
<Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
@@ -459,16 +432,48 @@ export function SpireTab() {
<CardTitle className="text-amber-400 game-panel-title text-xs">Activity Log</CardTitle>
</CardHeader>
<CardContent>
<ScrollArea className="h-32">
<ScrollArea className="h-48">
<div className="space-y-1">
{store.log.slice(0, 20).map((entry, i) => (
<div
key={i}
className={`text-sm ${i === 0 ? 'text-gray-200' : 'text-gray-500'} italic`}
>
{entry}
</div>
))}
{(store.activityLog || []).slice(0, 50).map((entry: ActivityLogEntry, i) => {
// Style based on event type
const getEventStyle = (eventType: string) => {
switch (eventType) {
case 'enemy_defeated':
case 'floor_cleared':
return 'text-green-400';
case 'damage_dealt':
return 'text-red-400';
case 'dodge':
return 'text-yellow-400';
case 'armor_proc':
return 'text-blue-400';
case 'special_effect':
return 'text-purple-400';
case 'floor_transition':
return 'text-cyan-400';
case 'spell_cast':
return 'text-amber-400';
case 'golem_attack':
return 'text-orange-400';
case 'puzzle_solved':
return 'text-pink-400';
default:
return 'text-gray-300';
}
};
return (
<div
key={entry.id}
className={`text-xs ${i === 0 ? 'text-gray-200 font-semibold' : getEventStyle(entry.eventType)}`}
>
{entry.message}
</div>
);
})}
{(store.activityLog || []).length === 0 && (
<div className="text-xs text-gray-500 italic">No activity yet...</div>
)}
</div>
</ScrollArea>
</CardContent>
src/components/game/tabs/LabTab.tsx
+4 -4
View File
@@ -17,7 +17,7 @@ export function LabTab({ store }: LabTabProps) {
// Render elemental mana grid - only show elements with current > 0
const renderElementsGrid = () => (
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2">
{Object.entries(store.elements)
{Object.entries(store.elements || {})
.filter(([, state]) => state.unlocked && state.current > 0)
.map(([id, state]) => {
const def = ELEMENTS[id];
@@ -41,7 +41,7 @@ export function LabTab({ store }: LabTabProps) {
const renderCompositeCrafting = () => {
const compositeElements = Object.entries(ELEMENTS)
.filter(([, def]) => def.recipe)
.filter(([id]) => store.elements[id]?.unlocked);
.filter(([id]) => (store.elements || {})[id]?.unlocked);
if (compositeElements.length === 0) return null;
@@ -53,7 +53,7 @@ export function LabTab({ store }: LabTabProps) {
<div className="space-y-2">
{compositeElements.map(([id, def]) => {
const recipe = def.recipe || [];
const canCraft = recipe.every(r => (store.elements[r]?.current || 0) >= 1);
const canCraft = recipe.every(r => ((store.elements || {})[r]?.current || 0) >= 1);
const craftBonus = 1 + (store.skills.elemCrafting || 0) * 0.25;
const output = Math.floor(craftBonus);
@@ -87,7 +87,7 @@ export function LabTab({ store }: LabTabProps) {
};
// Check if there are any unlocked elements with current > 0
const hasUnlockedElements = Object.values(store.elements).some(e => e.unlocked && e.current > 0);
const hasUnlockedElements = Object.values(store.elements || {}).some(e => e.unlocked && e.current > 0);
if (!hasUnlockedElements) {
return (
src/components/game/tabs/SpellsTab.tsx
+2 -2
View File
@@ -32,7 +32,7 @@ export function SpellsTab({ store }: SpellsTabProps) {
if (!instance) continue;
for (const ench of instance.enchantments) {
const effectDef = ENCHANTMENT_EFFECTS[ench.effectId];
const effectDef = ENCHANTMENT_EFFECTS?.[ench.effectId];
if (effectDef?.effect.type === 'spell' && effectDef.effect.spellId) {
const spellId = effectDef.effect.spellId;
if (!equipmentSpellIds.includes(spellId)) {
@@ -48,7 +48,7 @@ export function SpellsTab({ store }: SpellsTabProps) {
const canCastSpell = (spellId: string): boolean => {
const spell = SPELLS_DEF[spellId];
if (!spell) return false;
if (!spell || !spell.cost) return false;
return canAffordSpellCost(spell.cost, store.rawMana, store.elements);
};
src/lib/game/constants/index.ts
+9
View File
@@ -26,3 +26,12 @@ export { PRESTIGE_DEF } from './prestige';
export type { RoomType } from './rooms';
export { PUZZLE_ROOM_INTERVAL, SWARM_ROOM_CHANCE, SPEED_ROOM_CHANCE, PUZZLE_ROOM_CHANCE } from './rooms';
export { PUZZLE_ROOMS, SWARM_CONFIG, SPEED_ROOM_CONFIG, FLOOR_ARMOR_CONFIG } from './rooms';
// Room type display labels
export const ROOM_TYPE_LABELS: Record<string, { label: string; icon: string; color: string }> = {
combat: { label: 'Combat', icon: '⚔️', color: '#EF4444' },
swarm: { label: 'Swarm', icon: '🐝', color: '#F59E0B' },
speed: { label: 'Speed', icon: '💨', color: '#3B82F6' },
guardian: { label: 'Guardian', icon: '🛡️', color: '#EF4444' },
puzzle: { label: 'Puzzle', icon: '🧩', color: '#8B5CF6' },
};
src/lib/game/store.ts
+61 -1
View File
@@ -1269,6 +1269,19 @@ export const useGameStore = create<GameStore>()(
const puzzle = PUZZLE_ROOMS[currentRoom.puzzleId || ''];
log = [`🧩 ${puzzle?.name || 'Puzzle'} solved! Proceeding to floor ${currentFloor + 1}.`, ...log.slice(0, 49)];
// Log puzzle solved to activity log
activityLog = addActivityLogEntry(state, 'puzzle_solved',
`🧩 ${puzzle?.name || 'Puzzle'} solved!`,
{ floor: currentFloor }
);
// Log floor transition to activity log
const newFloorElem = getFloorElement(currentFloor + 1);
activityLog = addActivityLogEntry(state, 'floor_transition',
`⬆️ Advanced to floor ${currentFloor + 1} (${newFloorElem})`,
{ floor: currentFloor + 1 }
);
currentFloor = currentFloor + 1;
if (currentFloor > 100) currentFloor = 100;
currentRoom = generateFloorState(currentFloor);
@@ -1392,24 +1405,40 @@ export const useGameStore = create<GameStore>()(
if (hasSpecial(effects, SPECIAL_EFFECTS.FIRST_STRIKE) && floorHitCount === 1) {
dmg *= 1.15;
log = [`⚡ First Strike! +15% damage!`, ...log.slice(0, 49)];
activityLog = addActivityLogEntry(state, 'special_effect',
`⚡ First Strike! +15% damage!`,
{ effectName: 'First Strike', floor: currentFloor }
);
}
// Combo Master: Every 5th attack deals 3x damage
if (hasSpecial(effects, SPECIAL_EFFECTS.COMBO_MASTER) && comboHitCount % 5 === 0) {
dmg *= 3;
log = [`🌀 Combo Master! Triple damage!`, ...log.slice(0, 49)];
activityLog = addActivityLogEntry(state, 'special_effect',
`🌀 Combo Master! Triple damage!`,
{ effectName: 'Combo Master', floor: currentFloor }
);
}
// Executioner: +100% damage to enemies below 25% HP
if (hasSpecial(effects, SPECIAL_EFFECTS.EXECUTIONER) && enemy.hp / enemy.maxHP < 0.25) {
dmg *= 2;
log = [`💀 Executioner! Double damage!`, ...log.slice(0, 49)];
activityLog = addActivityLogEntry(state, 'special_effect',
`💀 Executioner! Double damage!`,
{ effectName: 'Executioner', floor: currentFloor }
);
}
// Berserker: +50% damage when below 50% mana
if (hasSpecial(effects, SPECIAL_EFFECTS.BERSERKER) && rawMana < maxMana * 0.5) {
dmg *= 1.5;
log = [`🔥 Berserker! +50% damage!`, ...log.slice(0, 49)];
activityLog = addActivityLogEntry(state, 'special_effect',
`🔥 Berserker! +50% damage!`,
{ effectName: 'Berserker', floor: currentFloor }
);
}
// EXOTIC_MASTERY: +20% damage with exotic elements
@@ -1418,6 +1447,10 @@ export const useGameStore = create<GameStore>()(
if (elemDef?.cat === 'exotic') {
dmg *= 1.2;
log = [`🌟 Exotic Mastery! +20% damage!`, ...log.slice(0, 49)];
activityLog = addActivityLogEntry(state, 'special_effect',
`🌟 Exotic Mastery! +20% damage!`,
{ effectName: 'Exotic Mastery', spellName: spellDef.name, floor: currentFloor }
);
}
}
@@ -1426,6 +1459,10 @@ export const useGameStore = create<GameStore>()(
if (Math.random() < echoChance) {
dmg *= 2;
log = [`✨ Spell Echo! Double damage!`, ...log.slice(0, 49)];
activityLog = addActivityLogEntry(state, 'special_effect',
`✨ Spell Echo! Double damage!`,
{ effectName: 'Spell Echo', spellName: spellDef.name, floor: currentFloor }
);
}
// Apply damage to enemy
@@ -1734,7 +1771,14 @@ export const useGameStore = create<GameStore>()(
damage *= (1 - effectiveArmor);
// Apply damage
enemy.hp = Math.max(0, enemy.hp - Math.floor(damage));
const golemDmgDealt = Math.floor(damage);
enemy.hp = Math.max(0, enemy.hp - golemDmgDealt);
// Log golem damage to activity log
activityLog = addActivityLogEntry(state, 'golem_attack',
`🗿 ${golemDef.name || summonedGolem.golemId} dealt ${golemDmgDealt} damage`,
{ damage: golemDmgDealt, enemyName: 'enemy', floor: currentFloor, spellName: golemDef.name }
);
}
// Update currentRoom with damaged enemies
@@ -1754,6 +1798,11 @@ export const useGameStore = create<GameStore>()(
if (wasGuardian && !signedPacts.includes(currentFloor)) {
signedPacts = [...signedPacts, currentFloor];
log = [`⚔️ ${wasGuardian.name} defeated by golems! Pact signed! (${wasGuardian.pact}x)`, ...log.slice(0, 49)];
// Log guardian defeated to activity log
activityLog = addActivityLogEntry(state, 'enemy_defeated',
`⚔️ ${wasGuardian.name} defeated by golems! Pact signed! (${wasGuardian.pact}x)`,
{ enemyName: wasGuardian.name, floor: currentFloor }
);
} else if (!wasGuardian) {
const roomTypeName = currentRoom.roomType === 'swarm' ? 'Swarm'
: currentRoom.roomType === 'speed' ? 'Speed floor'
@@ -1761,6 +1810,11 @@ export const useGameStore = create<GameStore>()(
: 'Floor';
if (currentFloor % 5 === 0 || currentRoom.roomType !== 'combat') {
log = [`🗿 ${roomTypeName} ${currentFloor} cleared by golems!`, ...log.slice(0, 49)];
// Log floor cleared to activity log
activityLog = addActivityLogEntry(state, 'floor_cleared',
`🗿 ${roomTypeName} ${currentFloor} cleared by golems!`,
{ floor: currentFloor }
);
}
}
@@ -3045,6 +3099,12 @@ export const useGameStore = create<GameStore>()(
golemancy: state.golemancy,
// Conversion drains tracking
conversionDrains: state.conversionDrains,
// Spire Mode state
clearedFloors: state.clearedFloors,
climbDirection: state.climbDirection,
isDescending: state.isDescending,
// Activity Log (for Spire Mode UI)
activityLog: state.activityLog,
}),
}
)
src/lib/game/types/game.ts
+36
View File
@@ -5,12 +5,40 @@ import type { ElementState } from './elements';
import type { SpellState } from './spells';
import type { EquipmentInstance, EnchantmentDesign, DesignProgress, PreparationProgress, ApplicationProgress, EquipmentCraftingProgress, EquipmentDef, BlueprintDef, LootInventory, EquipmentSpellState } from './equipment';
// ─── Activity Log Types ─────────────────────────────────────────────────
export type ActivityEventType =
| 'damage_dealt'
| 'enemy_defeated'
| 'floor_cleared'
| 'floor_transition'
| 'special_effect'
| 'dodge'
| 'armor_proc'
| 'spell_cast'
| 'golem_attack'
| 'puzzle_solved';
export interface ActivityLogEntry {
id: string; // Unique ID for React key
timestamp: number; // Game time (day + hour) when event occurred
eventType: ActivityEventType; // Type of combat event
message: string; // Human-readable message
details?: {
damage?: number;
enemyName?: string;
floor?: number;
spellName?: string;
effectName?: string;
};
}
// ─── Room and Enemy Types ─────────────────────────────────────────────────────
export type RoomType = 'combat' | 'puzzle' | 'swarm' | 'speed' | 'guardian';
export interface EnemyState {
id: string;
name: string; // Display name for the enemy
hp: number;
maxHP: number;
armor: number; // Damage reduction (0-1)
@@ -213,11 +241,19 @@ export interface GameState {
// Log
log: string[];
// Activity Log (for Spire Mode UI)
activityLog: ActivityLogEntry[];
// Loop insight (earned at end of current loop)
loopInsight: number;
// Spire Mode - simplified UI for climbing
spireMode: boolean;
// Spire climbing state
clearedFloors: Record<number, boolean>; // Track cleared floors for respawning
climbDirection: 'up' | 'down' | null; // Current climb direction
isDescending: boolean; // True when actively descending (prevents spam)
}
// ─── Action Types for Store ─────────────────────────────────────────────
src/lib/game/types/index.ts
+3 -1
View File
@@ -52,5 +52,7 @@ export type {
SummonedGolem,
GolemancyState,
GameState,
GameActionType
GameActionType,
ActivityEventType,
ActivityLogEntry,
} from './game';