diff --git a/src/components/frontend/storage/EventLedger.tsx b/src/components/frontend/storage/EventLedger.tsx index 88c4f1b..245fee3 100644 --- a/src/components/frontend/storage/EventLedger.tsx +++ b/src/components/frontend/storage/EventLedger.tsx @@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { Item, ItemContent, ItemHeader, ItemTitle, ItemDescription } from "@/components/ui/item"; import { BookOpenTextIcon, ScrollTextIcon } from "lucide-react"; import { useGameTick } from "@/hooks/useGameTick"; +import { formatType } from "@/utils/event-log/formatType"; import { DropdownMenu, DropdownMenuCheckboxItem, @@ -22,14 +23,6 @@ interface LogEntry { data?: Record; } -function formatType(type: string) { - return type - .replace(":", " ") - .split(" ") - .map((w) => w.charAt(0).toUpperCase() + w.slice(1)) - .join(" "); -} - export function EventLedger({ structureId, targetCollection, @@ -189,9 +182,6 @@ export function EventLedger({ typeof entry.actor === "object" && entry.actor ? entry.actor.username : null; const isYou = actorId != null && actorId === currentUserId; const actorLabel = isYou ? "You" : actorName; - const displayMessage = actorLabel - ? entry.message.charAt(0).toLowerCase() + entry.message.slice(1) - : entry.message; const isNarrative = entry.system === false; return (
@@ -201,22 +191,22 @@ export function EventLedger({ {isNarrative && ( )} - - {time.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })} - - - {actorLabel && ( - - {actorLabel} +
+
+ + {time.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })} - )}{" "} - {displayMessage} - - - {formatType(entry.type)} - + {actorLabel && ( + + {actorLabel} + + )} + {formatType(entry.type)} +
+ + {entry.message} + +
{index < filtered.length - 1 &&
}
diff --git a/src/utils/event-log/formatType.ts b/src/utils/event-log/formatType.ts new file mode 100644 index 0000000..cd3159a --- /dev/null +++ b/src/utils/event-log/formatType.ts @@ -0,0 +1,11 @@ +/** + * Formats an event type slug (e.g. "structure:resize") into a human-readable + * label ("Structure Resize") for display in event log UIs. + */ +export function formatType(type: string) { + return type + .replace(":", " ") + .split(" ") + .map((w) => w.charAt(0).toUpperCase() + w.slice(1)) + .join(" "); +}