diff --git a/src/styles.css b/src/styles.css index 1ecedff2..87bd6777 100644 --- a/src/styles.css +++ b/src/styles.css @@ -623,6 +623,22 @@ kbd { color: var(--moss-bright); font: inherit; font-size: 0.64rem; } .pause-menu h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.7rem, 5vw, 2.3rem); font-weight: 400; } .pause-menu > p:not(.eyebrow) { color: var(--muted); line-height: 1.5; } .pause-menu__actions { display: grid; gap: 8px; margin: 21px 0; } +.pause-menu--hub { width: min(860px, 100%); padding: clamp(16px, 2vw, 24px); } +.pause-menu__header { text-align: center; } +.pause-menu--hub h2 { font-family: inherit; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } +.pause-menu__character { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; } +.pause-menu__character img { width: 48px; height: 48px; flex: none; border: 2px solid var(--edge); border-radius: 10px; object-fit: cover; } +.pause-menu__character div { display: grid; gap: 3px; min-width: 0; text-align: left; } +.pause-menu__character strong { overflow: hidden; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; } +.pause-menu__character span, .pause-menu__context { color: var(--muted); font-size: 0.78rem; } +.pause-menu__context { margin: 7px 0 0; } +.pause-menu__resume { display: flex; justify-content: center; margin: 14px 0; } +.pause-menu__resume .button { width: min(320px, 100%); } +.pause-menu__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } +.pause-menu__group { min-width: 0; padding: 12px; border: 1px solid rgba(188, 207, 160, 0.15); border-radius: 10px; background: rgba(170, 194, 141, 0.035); } +.pause-menu__group h3 { margin: 0 0 9px; color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } +.pause-menu--hub .pause-menu__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; } +.pause-menu--hub .pause-menu__actions .button { width: 100%; min-width: 0; padding: 7px 9px; line-height: 1.15; } .button { min-height: 42px; padding: 0 16px; border: 1px solid var(--edge); border-radius: 9px; background: rgba(170, 194, 141, 0.07); color: var(--ink); cursor: pointer; } .button:hover { background: rgba(170, 194, 141, 0.16); } .button--primary { border-color: rgba(200, 222, 151, 0.32); background: #587348; color: #fbfee9; } @@ -645,6 +661,10 @@ kbd { color: var(--moss-bright); font: inherit; font-size: 0.64rem; } } @media (max-width: 620px) { + .pause-menu__groups { grid-template-columns: minmax(0, 1fr); gap: 8px; } + .pause-menu--hub .pause-menu__group { padding: 9px; } + .pause-menu--hub .pause-menu__character { margin-top: 8px; } + .pause-menu--hub .pause-menu__resume { margin: 10px 0; } .objective-chip { width: calc(100vw - 116px); } .objective-chip .eyebrow, .objective-chip > p:last-child { display: none; } .objective-chip h1 { overflow: hidden; font-size: 0.92rem; text-overflow: ellipsis; white-space: nowrap; } @@ -1717,9 +1737,14 @@ kbd { color: var(--moss-bright); font: inherit; font-size: 0.64rem; } .talent-details > p { margin: 7px 0; } .talent-details__requirements { margin: 6px 0; } .option-row { min-height: 34px; padding: 3px 2px; } - .pause-menu { width: min(560px, 100%); padding: 16px 20px; } - .pause-menu__actions { grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 9px 0; } - .pause-menu__actions .button { min-height: 34px; } + .pause-menu:not(.pause-menu--hub) { width: min(560px, 100%); padding: 16px 20px; } + .pause-menu:not(.pause-menu--hub) .pause-menu__actions { grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 9px 0; } + .pause-menu:not(.pause-menu--hub) .pause-menu__actions .button { min-height: 34px; } + .pause-menu--hub { padding: 14px 16px; } + .pause-menu--hub .pause-menu__actions { gap: 6px; } + .pause-menu--hub .pause-menu__group { padding: 9px; } + .pause-menu--hub .pause-menu__group h3 { margin-bottom: 6px; } + .pause-menu--hub .pause-menu__resume { margin: 9px 0; } .boss-guide-panel__layout { padding-top: 7px; } .boss-guide-panel__layout nav h3 { padding: 5px 8px; } .boss-guide-panel__layout nav button { min-height: 33px; padding: 4px 6px; } diff --git a/src/ui/PauseMenu.tsx b/src/ui/PauseMenu.tsx index 13dc64d0..91687344 100644 --- a/src/ui/PauseMenu.tsx +++ b/src/ui/PauseMenu.tsx @@ -4,13 +4,12 @@ import { useGameStore } from "../game/store"; import { useMenuController, type MenuAction } from "../input/useMenuController"; import { ControllerButton } from "./ControllerButton"; import { sessionCanUseShelvedGmTools } from "../app/releaseFeatures"; -import { useInputBindingLabels } from "../input/useInputBindingLabels"; -import { INPUT_ACTION_BY_ID } from "../input/keybinds"; import { DungeonIssueReportPanel } from "./DungeonIssueReportPanel"; import { BossTestingReviewPanel } from "./BossTestingReviewPanel"; +import { classById } from "../app/characterCatalog"; +import { specializationById, specializationIconUrl } from "../game/specializationCatalog"; function PauseDialog() { - const bindingLabel = useInputBindingLabels(); const closeOverlay = useGameStore((state) => state.closeOverlay); const openOverlay = useGameStore((state) => state.openOverlay); const reset = useGameStore((state) => state.resetAtEntrance); @@ -37,29 +36,34 @@ function PauseDialog() { }; const skillMenuLabel = activeCharacter?.categoryId === "rom" ? "Skills" : "Talents"; const isGm = sessionCanUseShelvedGmTools(session); + const characterClass = activeCharacter ? classById(activeCharacter.classId) : null; + const specialization = specializationById(activeCharacter?.specializationId); + const classDetail = activeCharacter?.secondaryClassId + ? classById(activeCharacter.secondaryClassId).name + : specialization && specialization.classId === activeCharacter?.classId ? specialization.displayName : null; const actions = useMemo(() => [ - { id: "pause-resume", run: resume }, - { id: "pause-party", run: () => openOverlay("party") }, - { id: "pause-inventory", run: () => openOverlay("inventory") }, - { id: "pause-boss-cards", run: () => openOverlay("boss-cards") }, + { id: "pause-resume", run: resume, neighbors: { down: "pause-party", right: "pause-party", up: "pause-main-menu", left: "pause-main-menu" } }, + { id: "pause-party", run: () => openOverlay("party"), neighbors: { up: "pause-resume" } }, { id: "pause-map", run: () => openOverlay("map") }, { id: "pause-boss-guide", run: () => openOverlay("boss-guide") }, + { id: "pause-boss-cards", run: () => openOverlay("boss-cards") }, + { id: "pause-inventory", run: () => openOverlay("inventory") }, { id: "pause-spellbook", run: () => openOverlay("spellbook") }, - { id: "pause-bindings", run: () => openOverlay("bindings") }, { id: "pause-talents", run: () => openOverlay("talents") }, - { id: "pause-keybinds", run: () => openOverlay("keybinds") }, + { id: "pause-bindings", run: () => openOverlay("bindings") }, { id: "pause-options", run: () => openOverlay("options") }, + { id: "pause-keybinds", run: () => openOverlay("keybinds") }, { id: "pause-ui-layout", run: () => openOverlay("ui-layout") }, + ...(isGm ? [{ id: "pause-gm", run: () => openOverlay("gm") }] : []), ...(gameMode === "dungeon" ? [{ id: "pause-report-issue", run: () => openOverlay("report-issue") }] : []), ...(bossTest ? [{ id: "pause-boss-testing-review", run: () => openOverlay("boss-test-review") }] : []), - ...(isGm ? [{ id: "pause-gm", run: () => openOverlay("gm") }] : []), ...(gameMode === "manastorm" ? [{ id: "pause-abandon-manastorm", run: abandonManastorm }] : [{ id: "pause-entrance", run: returnToEntrance }]), { id: "pause-main-menu", run: leaveDungeon }, ], [abandonManastormRun, bossTest, closeOverlay, gameMode, isGm, openOverlay, reset, returnToMainMenu]); - const controller = useMenuController(actions, { initialId: "pause-resume", onBack: resume }); + const controller = useMenuController(actions, { columns: 2, initialId: "pause-resume", onBack: resume }); const menuButton = (id: string, label: string, run: () => void, primary = false) => ( -
-

Healer Man paused

-

{bossTest ? `${bossTest.name} — Boss Testing` : "The cavern waits."}

-

Resume play or open any character and system menu from this hub.

-
- {menuButton("pause-resume", "Resume expedition", resume, true)} - {bossTest && menuButton("pause-boss-testing-review", "Boss readiness & report", () => openOverlay("boss-test-review"))} - {menuButton("pause-party", "Party management", () => openOverlay("party"))} - {menuButton("pause-inventory", "Inventory & equipment", () => openOverlay("inventory"))} - {menuButton("pause-boss-cards", "Boss card collection", () => openOverlay("boss-cards"))} - {menuButton("pause-map", "Dungeon map", () => openOverlay("map"))} - {menuButton("pause-boss-guide", "Boss guide", () => openOverlay("boss-guide"))} - {menuButton("pause-spellbook", "Spellbook", () => openOverlay("spellbook"))} - {menuButton("pause-bindings", "Ability controls", () => openOverlay("bindings"))} - {menuButton("pause-talents", skillMenuLabel, () => openOverlay("talents"))} - {menuButton("pause-keybinds", "Keybinds", () => openOverlay("keybinds"))} - {menuButton("pause-options", "Options", () => openOverlay("options"))} - {menuButton("pause-ui-layout", "Edit UI & templates", () => openOverlay("ui-layout"))} - {gameMode === "dungeon" ? menuButton("pause-report-issue", "Report an issue", () => openOverlay("report-issue")) : null} - {isGm ? menuButton("pause-gm", "GM placement editor", () => openOverlay("gm")) : null} - {gameMode === "manastorm" - ? menuButton("pause-abandon-manastorm", "Abandon Manastorm run", abandonManastorm) - : menuButton("pause-entrance", bossTest ? "Restart boss test" : "Return to entrance", returnToEntrance)} - {menuButton("pause-main-menu", "Return to main menu", leaveDungeon)} +
+
+

Paused

+
+ {activeCharacter && } +
+ {activeCharacter?.name ?? "Adventurer"} + Level {activeCharacter?.level ?? 1} · {characterClass?.name ?? "Explorer"}{classDetail ? ` / ${classDetail}` : ""} +
+
+ {bossTest &&

Boss Testing · {bossTest.name}

} +
+
{menuButton("pause-resume", "Resume game", resume, true)}
+
+
+

Adventure

+
+ {menuButton("pause-party", "Party management", () => openOverlay("party"))} + {menuButton("pause-map", "Dungeon map", () => openOverlay("map"))} + {menuButton("pause-boss-guide", "Boss guide", () => openOverlay("boss-guide"))} + {menuButton("pause-boss-cards", "Boss cards", () => openOverlay("boss-cards"))} +
+
+
+

Character

+
+ {menuButton("pause-inventory", "Inventory & equipment", () => openOverlay("inventory"))} + {menuButton("pause-spellbook", "Spellbook", () => openOverlay("spellbook"))} + {menuButton("pause-talents", skillMenuLabel, () => openOverlay("talents"))} + {menuButton("pause-bindings", "Ability controls", () => openOverlay("bindings"))} +
+
+
+

Settings

+
+ {menuButton("pause-options", "Options", () => openOverlay("options"))} + {menuButton("pause-keybinds", "Keybinds", () => openOverlay("keybinds"))} + {menuButton("pause-ui-layout", "Edit UI & templates", () => openOverlay("ui-layout"))} + {isGm && menuButton("pause-gm", "GM placement editor", () => openOverlay("gm"))} +
+
+
+

Session

+
+ {gameMode === "dungeon" && menuButton("pause-report-issue", "Report an issue", () => openOverlay("report-issue"))} + {bossTest && menuButton("pause-boss-testing-review", "Boss readiness & report", () => openOverlay("boss-test-review"))} + {gameMode === "manastorm" + ? menuButton("pause-abandon-manastorm", "Abandon Manastorm run", abandonManastorm) + : menuButton("pause-entrance", bossTest ? "Restart boss test" : "Return to entrance", returnToEntrance)} + {menuButton("pause-main-menu", "Main menu", leaveDungeon)} +
+
-
- {["move-forward", "jump", "target-next", "party-next", "loot", "inventory", "spellbook", "pause"].map((id) =>
-
{INPUT_ACTION_BY_ID[id].label}
{bindingLabel("pc", id)} / {bindingLabel("controller", id)}
-
)} -
Camera
Hold right mouse and drag
-
All controls
Options → Keybinds
-
);