feat: add third-person choice descriptions to public character sheet

Each story choice now has a concise third-person description used on
the public character page, keeping narrative spoilers out of the
profile view whilst still conveying the character's path.

apps/web/src/components/game/characterPage.tsx

@@ -5,13 +5,15 @@
  * @author Naomi Carrigan
  */
 /* eslint-disable max-lines-per-function -- Complex component with many render paths */
+/* eslint-disable max-lines -- Story section adds lines beyond the file limit */
 /* eslint-disable complexity -- Many conditional render paths for optional fields */
-import { type JSX, useEffect, useState } from "react";
-import type {
-  EquipmentBonus,
-  EquipmentType,
-  PublicProfileResponse,
+import {
+  STORY_CHAPTERS,
+  type EquipmentBonus,
+  type EquipmentType,
+  type PublicProfileResponse,
 } from "@elysium/types";
+import { type JSX, useEffect, useState } from "react";
 
 interface CharacterPageProperties {
   readonly discordId: string;
@@ -269,6 +271,43 @@ const CharacterPage = ({ discordId }: CharacterPageProperties): JSX.Element => {
           </div>
         }
 
+        {profile.completedChapters.length === 0
+          ? null
+          : <div className="character-page-section">
+            <h2 className="character-page-section-title">{"📖 Story"}</h2>
+            {profile.completedChapters.map((completion) => {
+              const chapter = STORY_CHAPTERS.find((candidate) => {
+                return candidate.id === completion.chapterId;
+              });
+              if (chapter === undefined) {
+                return null;
+              }
+              const choice = chapter.choices.find((candidate) => {
+                return candidate.id === completion.choiceId;
+              });
+              if (choice === undefined) {
+                return null;
+              }
+              return (
+                <div
+                  className="character-sheet-story-entry"
+                  key={completion.chapterId}
+                >
+                  <span className="character-sheet-story-chapter">
+                    {chapter.title}
+                  </span>
+                  <span className="character-sheet-story-choice">
+                    {choice.label}
+                  </span>
+                  <p className="character-sheet-story-outcome">
+                    {choice.description}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        }
+
         <div className="character-page-divider" />
 
         <p className="character-page-player-line">