Task 10(2f): Add Activity Log to SpireModeUI
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 20m15s
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 20m15s
- Added ActivityLogEntry type to game types - Added activityLog state to GameState interface - Added addActivityLogEntry helper function in store.ts - Added addActivityLog action to GameStore - Hooked into combat events: damage_dealt, enemy_defeated, floor_cleared, floor_transition - Hooked into special effects: dodge, armor_proc, special_effect (First Strike, Combo Master, etc.) - Hooked into golem attacks and puzzle solving - Updated SpireTab (tabs/SpireTab.tsx) to display activity log with colored entries - Latest entries first, scrollable list with event type-based styling
This commit is contained in:
@@ -8,7 +8,8 @@ import { ScrollArea } from '@/components/ui/scroll-area';
|
|||||||
import { Separator } from '@/components/ui/separator';
|
import { Separator } from '@/components/ui/separator';
|
||||||
import { TooltipProvider, Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
import { TooltipProvider, Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
||||||
import { BookOpen, ChevronUp, ChevronDown, RotateCcw, X, Mountain, Skull, Zap, Wind, Shield } from 'lucide-react';
|
import { BookOpen, ChevronUp, ChevronDown, RotateCcw, X, Mountain, Skull, Zap, Wind, Shield } from 'lucide-react';
|
||||||
import type { GameStore } from '@/lib/game/types';
|
import type { ActivityLogEntry } from '@/lib/game/types';
|
||||||
|
import type { GameStore } from '@/lib/game/store';
|
||||||
import { ELEMENTS, GUARDIANS, SPELLS_DEF, SKILLS_DEF, ROOM_TYPE_LABELS } from '@/lib/game/constants';
|
import { ELEMENTS, GUARDIANS, SPELLS_DEF, SKILLS_DEF, ROOM_TYPE_LABELS } from '@/lib/game/constants';
|
||||||
import { GOLEMS_DEF, getGolemDamage, getGolemAttackSpeed } from '@/lib/game/data/golems';
|
import { GOLEMS_DEF, getGolemDamage, getGolemAttackSpeed } from '@/lib/game/data/golems';
|
||||||
import { fmt, fmtDec, getFloorElement, canAffordSpellCost, getEnemyName } from '@/lib/game/store';
|
import { fmt, fmtDec, getFloorElement, canAffordSpellCost, getEnemyName } from '@/lib/game/store';
|
||||||
@@ -490,6 +491,61 @@ export function SpireTab({ store, simpleMode = false }: SpireTabProps) {
|
|||||||
</Card>
|
</Card>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Activity Log - Show in Spire Mode (simpleMode) */}
|
||||||
|
{simpleMode && (
|
||||||
|
<Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-amber-400 game-panel-title text-xs">Activity Log</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<ScrollArea className="h-48">
|
||||||
|
<div className="space-y-1">
|
||||||
|
{(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>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Crafting Progress (if any) - Only show in normal mode */}
|
{/* Crafting Progress (if any) - Only show in normal mode */}
|
||||||
{!simpleMode && (store.designProgress || store.preparationProgress || store.applicationProgress) && (
|
{!simpleMode && (store.designProgress || store.preparationProgress || store.applicationProgress) && (
|
||||||
<Card className="bg-gray-900/80 border-cyan-600/50 lg:col-span-2">
|
<Card className="bg-gray-900/80 border-cyan-600/50 lg:col-span-2">
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
|
|
||||||
import { create } from 'zustand';
|
import { create } from 'zustand';
|
||||||
import { persist } from 'zustand/middleware';
|
import { persist } from 'zustand/middleware';
|
||||||
import type { GameState, GameAction, StudyTarget, SpellCost, SkillUpgradeChoice, EquipmentSlot, EquipmentInstance, EnchantmentDesign, DesignEffect, AttunementState, FloorState, EnemyState, RoomType, EquipmentSpellState, ActivityLogEntry } from './types';
|
import type { GameState, GameAction, StudyTarget, SpellCost, SkillUpgradeChoice, EquipmentInstance, EnchantmentDesign, DesignEffect, AttunementState, FloorState, EnemyState, RoomType, EquipmentSpellState, ActivityLogEntry } from './types';
|
||||||
|
import type { EquipmentSlot } from './data/equipment';
|
||||||
import {
|
import {
|
||||||
ELEMENTS,
|
ELEMENTS,
|
||||||
GUARDIANS,
|
GUARDIANS,
|
||||||
|
|||||||
Reference in New Issue
Block a user