V1.3.1: initiative in quests, tooltips no longer clipped, deploy script

- Quests take initiative rolls like battles do; each quest group lists
  highest first. The total is roll plus bonus and can exceed 20 (test added).
- Info tooltips are drawn against the viewport, so the party overview
  table (or any scrolling container) can't cut them off.
- backend: `npm run deploy` applies migrations and regenerates the Prisma
  client in one step; README explains why both are needed on a server.
- All packages at version 1.3.1.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

README.md

@@ -80,8 +80,12 @@ cd backend
 npm run seed:hollowcrown
 ```
 
-On a server, apply new migrations with `npx prisma migrate deploy`. Change
-your password from the account page (click your name in the top bar).
+On a server, after pulling a new version, run `npm run deploy` in `backend`
+and then restart the backend. It applies new migrations **and** regenerates
+the Prisma client; without the second half the server keeps running with the
+old data model and pages that use anything new fail to load (for example
+"Could not load this encounter"). Change your password from the account page
+(click your name in the top bar).
 
 ## Tests
 

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backend",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "private": true,
   "type": "commonjs",
   "main": "src/index.js",
@@ -15,6 +15,7 @@
     "prisma:migrate": "prisma migrate dev",
     "prisma:generate": "prisma generate",
     "prisma:seed": "prisma db seed",
+    "deploy": "prisma migrate deploy && prisma generate",
     "seed:hollowcrown": "node prisma/seed-hollowcrown.js",
     "prisma:studio": "prisma studio"
   },

backend/src/routes/api.integration.test.js

@@ -1896,6 +1896,15 @@ describe('initiative', () => {
     expect(playerView.Goblin.initiative).toBe(12);
     expect(playerView.Quick.character.userId).toBeTruthy();
 
+    // Only the die stops at 20: a natural 20 plus a bonus goes past it.
+    expect((await patch(goblinRow, dmAuth, { initiativeRoll: 20 })).body.participant).toMatchObject({ initiativeRoll: 20, initiative: 22 });
+
+    // Quests take initiative exactly as battles do.
+    await request(app).patch(e).set(dmAuth).send({ mode: 'QUEST' });
+    expect((await patch(heroRow, playerAuth, { initiativeRoll: 19 })).body.participant.initiative).toBe(19 + heroBonus);
+    await request(app).patch(e).set(dmAuth).send({ mode: 'BATTLE' });
+    await patch(heroRow, playerAuth, { initiativeRoll: 20 });
+
     // The DM can re-roll anyone, or clear a roll.
     expect((await patch(goblinRow, dmAuth, { initiativeRoll: 1 })).body.participant.initiative).toBe(3);
     expect((await patch(heroRow, dmAuth, { initiativeRoll: null })).body.participant).toMatchObject({ initiativeRoll: null, initiative: 0 });

docs/ENCOUNTERS.md

@@ -48,7 +48,7 @@ time from the top of the page.
 | For | A fight | A scene built around people and an objective |
 | Layout | Everyone in one list, in initiative order | Three groups: "People you meet", "The party", "Creatures" |
 | Rounds and turns | Yes | No |
-| Initiative | The d20 roll, typed in per combatant; the bonus is added | Not shown |
+| Initiative | The d20 roll, typed in per combatant; the bonus is added | The same; each group lists highest first |
 | Start button | Begin Battle | Begin Quest |
 | End button | End Battle | Complete Quest |
 
@@ -156,11 +156,13 @@ The DM types an amount and clicks Damage or Heal on a card.
 
 ## 7. Initiative, turns and rounds
 
-Battles only.
+Initiative is entered in battles and quests alike. Turns and rounds are for
+battles only.
 
 - Each combatant has an **initiative roll** field. Type what the d20 showed,
   1 to 20; the field accepts nothing else. The app does not roll the die, but
-  it adds the bonus for you and shows the total: a character's initiative
+  it adds the bonus for you and shows the total, which can go past 20 (a 20 on
+  the die with a +3 bonus is 23): a character's initiative
   bonus from their sheet, a monster's Dexterity modifier, nothing for an NPC.
 - The DM can enter the roll for anyone, when adding them or on the card. A
   player can enter the roll for **their own character** on its card.

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "1.3.0",
+  "version": "1.3.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/components/InfoTip.tsx

@@ -1,4 +1,5 @@
-import { useId, useState } from 'react';
+import { useEffect, useId, useRef, useState, type CSSProperties } from 'react';
+import { createPortal } from 'react-dom';
 
 // Short explanations for the stat labels sprinkled across the sheet, quick
 // stats, party table, and builder — "what is this, and how is it worked
@@ -38,8 +39,36 @@ export const STAT_HELP: Record<string, string> = {
 // (a species, a skill, an ability) without adding it to the shared list.
 export function InfoTip({ term, text: custom, label = 'What is this?' }: { term?: keyof typeof STAT_HELP; text?: string; label?: string }) {
   const [open, setOpen] = useState(false);
+  const [place, setPlace] = useState<CSSProperties | null>(null);
+  const trigger = useRef<HTMLButtonElement>(null);
   const id = useId();
   const text = custom ?? (term ? STAT_HELP[term] : undefined);
+
+  // The bubble is drawn on the page itself, fixed to where the ⓘ is on
+  // screen, rather than inside whatever holds the ⓘ: a scrolling table or a
+  // drawer would otherwise cut it off. It sits above the ⓘ when there is room
+  // and below when there isn't, and never runs off the sides.
+  useEffect(() => {
+    if (!open || !trigger.current) return;
+    const rect = trigger.current.getBoundingClientRect();
+    const halfWidth = Math.min(130, window.innerWidth / 2 - 8);
+    const centre = Math.min(Math.max(rect.left + rect.width / 2, halfWidth + 8), window.innerWidth - halfWidth - 8);
+    const above = rect.top > 160;
+    setPlace({
+      left: centre,
+      ...(above ? { bottom: window.innerHeight - rect.top + 8 } : { top: rect.bottom + 8 }),
+    });
+    // Its position is only right until the page moves.
+    const close = () => setOpen(false);
+    window.addEventListener('scroll', close, true);
+    window.addEventListener('resize', close);
+    return () => {
+      window.removeEventListener('scroll', close, true);
+      window.removeEventListener('resize', close);
+      setPlace(null); // so the next opening is measured afresh, not shown where the last one was
+    };
+  }, [open]);
+
   if (!text) return null;
 
   return (
@@ -49,6 +78,7 @@ export function InfoTip({ term, text: custom, label = 'What is this?' }: { term?
         className="info-tip-trigger"
         aria-describedby={id}
         aria-label={label}
+        ref={trigger}
         onMouseEnter={() => setOpen(true)}
         onFocus={() => setOpen(true)}
         onBlur={() => setOpen(false)}
@@ -56,11 +86,14 @@ export function InfoTip({ term, text: custom, label = 'What is this?' }: { term?
       >
         ⓘ
       </button>
-      {open && (
-        <span role="tooltip" id={id} className="info-tip-bubble">
-          {text}
-        </span>
-      )}
+      {open &&
+        place &&
+        createPortal(
+          <span role="tooltip" id={id} className="info-tip-bubble" style={place}>
+            {text}
+          </span>,
+          document.body,
+        )}
     </span>
   );
 }

frontend/src/index.css

@@ -631,10 +631,9 @@ input[type='radio'] {
   color: var(--accent-strong);
   outline: none;
 }
+/* Placed by InfoTip.tsx against the viewport, so no scrolling container can clip it. */
 .info-tip-bubble {
-  position: absolute;
-  bottom: calc(100% + 8px);
-  left: 50%;
+  position: fixed;
   transform: translateX(-50%);
   width: max-content;
   max-width: 260px;
@@ -648,7 +647,7 @@ input[type='radio'] {
   letter-spacing: normal;
   color: var(--text);
   box-shadow: var(--shadow-deep);
-  z-index: 100;
+  z-index: 200;
   pointer-events: none;
 }
 

frontend/src/pages/EncounterPage.tsx

@@ -94,7 +94,6 @@ function subline(p: EncounterParticipant): string {
 function CombatantCard({
   participant: p,
   isDM,
-  mode,
   isActive,
   onPatch,
   canRollInitiative,
@@ -102,7 +101,6 @@ function CombatantCard({
 }: {
   participant: EncounterParticipant;
   isDM: boolean;
-  mode: EncounterMode;
   isActive: boolean;
   onPatch: (data: Partial<EncounterParticipant>) => void;
   // The DM for anyone; a player for their own character.
@@ -162,8 +160,8 @@ function CombatantCard({
           </div>
           <div className="combatant-sub">{subline(p)}</div>
         </div>
-        {mode === 'BATTLE' &&
-          (canRollInitiative ? (
+        {/* Battles and quests both take initiative: who speaks or acts first matters in either. */}
+        {canRollInitiative ? (
             <label className="flex-row gap-sm" title="Type what the d20 showed (1 to 20). The initiative bonus is added for you.">
               Initiative roll
               <NumberInput
@@ -186,7 +184,7 @@ function CombatantCard({
             </label>
           ) : (
             <StatChip label="Initiative">{p.initiativeRoll == null ? '—' : p.initiative}</StatChip>
-          ))}
+          )}
       </div>
 
       <div className="stat-chips mt-sm">
@@ -655,7 +653,6 @@ export function EncounterPage() {
       key={p.id}
       participant={p}
       isDM={isDM}
-      mode={encounter.mode}
       isActive={p.id === active?.id}
       onPatch={(data) => patchParticipant.mutate({ participantId: p.id, ...data }, fail)}
       canRollInitiative={isDM || (p.character != null && p.character.userId === user?.id)}
@@ -663,7 +660,8 @@ export function EncounterPage() {
     />
   );
 
-  // A quest scene is grouped by who is there rather than by initiative.
+  // A quest scene is grouped by who is there; within each group the order is
+  // still initiative, highest first.
   const groups: [string, EncounterParticipant[]][] = isBattle
     ? [['Initiative order', participants]]
     : [
@@ -839,18 +837,16 @@ export function EncounterPage() {
                 </select>
               </div>
               <div className="flex-row gap-sm mt-sm">
-                {isBattle && (
-                  <NumberInput
-                    min={1}
-                    max={20}
-                    placeholder="Initiative roll (d20)"
-                    title="What the d20 showed, 1 to 20. Leave empty to roll later; the bonus is added for you."
-                    aria-label="Initiative roll"
-                    value={initiative}
-                    onChange={(e) => setInitiative(e.target.value)}
-                    style={{ flex: 1, minWidth: 0 }}
-                  />
-                )}
+                <NumberInput
+                  min={1}
+                  max={20}
+                  placeholder="Initiative roll (d20)"
+                  title="What the d20 showed, 1 to 20. Leave empty to roll later; the bonus is added for you."
+                  aria-label="Initiative roll"
+                  value={initiative}
+                  onChange={(e) => setInitiative(e.target.value)}
+                  style={{ flex: 1, minWidth: 0 }}
+                />
                 <button className="btn btn-primary" onClick={handleAdd} disabled={!pickId || addParticipant.isPending}>
                   Add
                 </button>

package-lock.json

@@ -1,19 +1,19 @@
 {
   "name": "dnd-campaign-manager",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "dnd-campaign-manager",
-      "version": "1.3.0",
+      "version": "1.3.1",
       "workspaces": [
         "backend",
         "frontend"
       ]
     },
     "backend": {
-      "version": "1.3.0",
+      "version": "1.3.1",
       "dependencies": {
         "@prisma/client": "^5.20.0",
         "bcrypt": "^5.1.1",
@@ -31,7 +31,7 @@
       }
     },
     "frontend": {
-      "version": "1.3.0",
+      "version": "1.3.1",
       "dependencies": {
         "@tanstack/react-query": "^5.103.2",
         "axios": "^1.20.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dnd-campaign-manager",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "private": true,
   "description": "D&D 5e campaign manager — monorepo root",
   "workspaces": [