Merge pull request #186 from phattbeats/pha1274-wrapped-polish

PHA-1274: bittersweet default music, fix coin sheen artifact, Major-complete homepage

Author: phattbeats

scripts/verify-stage-wrapped.ts

@@ -126,7 +126,8 @@ check("every track has a src + credit + mood", WRAPPED_TRACKS.every((t) => !!t.s
 check("every track is attributed (CC-BY / Kevin MacLeod)", WRAPPED_TRACKS.every((t) => /CC-BY/i.test(t.credit) && /MacLeod/i.test(t.credit)));
 check("track ids are unique", new Set(WRAPPED_TRACKS.map((t) => t.id)).size === WRAPPED_TRACKS.length);
 check("offers a bittersweet/somber ending mood", WRAPPED_TRACKS.some((t) => /bittersweet|somber/i.test(t.mood)));
-check("default track leads (index 0 = the epic theme)", WRAPPED_TRACKS[0].id === "descent");
+check("default track leads (index 0 = the bittersweet theme)", WRAPPED_TRACKS[0].id === "despair-triumph");
+check("the leading track's mood is bittersweet", /bittersweet/i.test(WRAPPED_TRACKS[0].mood));
 
 console.log(`\nstage-wrapped: ${pass} passed, ${fail} failed`);
 if (fail > 0) process.exit(1);

src/app/(app)/page.tsx

@@ -13,6 +13,7 @@ import { getWireItems } from "@/lib/news";
 import { refreshOutcomesOnRead } from "@/lib/outcomes";
 import { WatchNow } from "@/components/watch/WatchNow";
 import { currentEventId } from "@/lib/events-core";
+import { majorChampion, majorWrappedSectionId, type MajorChampion } from "@/lib/stage-wrapped-launch";
 
 export const dynamic = "force-dynamic";
 
@@ -30,7 +31,7 @@ export default async function DashboardPage() {
   // and no added render latency. Mirrors the news wire's refreshWireOnRead.
   await refreshOutcomesOnRead(EVENT_ID);
 
-  const [resolvedRows, outcomeRows, allPicks, allPlayers, wireItemsAll] = await Promise.all([
+  const [resolvedRows, outcomeRows, allPicks, allPlayers, wireItemsAll, champion] = await Promise.all([
     prisma.stageOutcome.findMany({
       where: { eventId: EVENT_ID },
       select: { sectionId: true, groupId: true, slotIndex: true },
@@ -44,6 +45,9 @@ export default async function DashboardPage() {
       select: { id: true, displayName: true, avatarUrl: true },
     }),
     getWireItems(3),
+    // The crowned champion, or null until the Grand Final resolves. Non-null
+    // flips the whole dashboard into its "Major complete" send-off (PHA-1274).
+    majorChampion(EVENT_ID),
   ]);
 
   const wireItems = wireItemsAll;
@@ -144,7 +148,12 @@ export default async function DashboardPage() {
   }
 
   const eventStarted = resolvedRows.length > 0;
-  const eventLabel = eventStarted ? "Live now" : "Pre-event";
+  // Once the Grand Final crowns a champion the Major is DONE — the eyebrow stops
+  // saying "Live now" (which it would otherwise say forever, since outcomes stay
+  // resolved) and the hero becomes a send-off (PHA-1274: "the homepage needs
+  // updated").
+  const eventLabel = champion ? "Major complete" : eventStarted ? "Live now" : "Pre-event";
+  const wrappedHref = `/reveal/${majorWrappedSectionId()}?wrapped=1`;
 
   return (
     <>
@@ -155,7 +164,10 @@ export default async function DashboardPage() {
         </span>
       </div>
 
-      {/* Stage briefing */}
+      {/* Stage briefing — or, once a champion is crowned, the Major send-off. */}
+      {champion ? (
+        <ConcludedHero champion={champion} wrappedHref={wrappedHref} />
+      ) : (
       <section className="brk" style={{
         position: "relative",
         background: "var(--surf-1)",
@@ -248,6 +260,7 @@ export default async function DashboardPage() {
           </div>
         </div>
       </section>
+      )}
 
       {/* Stats + Leaderboard cols */}
       <div className="dash-cols">
@@ -284,12 +297,16 @@ export default async function DashboardPage() {
               <div className="lbl">POINTS</div>
               <div className="val foil">{selfRow?.score ?? 0}</div>
               <div className="sub">
-                of {maxPoints} · {activeLabel}{" "}
-                {active.pick.pickable
-                  ? "open"
-                  : active.pick.reason === "locked-time-passed"
-                    ? "live"
-                    : "pending"}
+                of {maxPoints} ·{" "}
+                {champion
+                  ? "final"
+                  : `${activeLabel} ${
+                      active.pick.pickable
+                        ? "open"
+                        : active.pick.reason === "locked-time-passed"
+                          ? "live"
+                          : "pending"
+                    }`}
               </div>
             </div>
           </div>
@@ -375,6 +392,89 @@ export default async function DashboardPage() {
   );
 }
 
+/**
+ * The dashboard hero AFTER the Major is decided (PHA-1274) — replaces the stage
+ * briefing the moment the Grand Final crowns a champion. Same broadcast shell as
+ * the briefing (keyline corners + faint HeatMark), but it names the champion and
+ * points everyone at the Wrapped recap and the final board instead of a now-dead
+ * "picks are locked, watch the live bracket" call.
+ */
+function ConcludedHero({
+  champion,
+  wrappedHref,
+}: {
+  champion: MajorChampion;
+  wrappedHref: string;
+}) {
+  return (
+    <section className="brk" style={{
+      position: "relative",
+      background: "var(--surf-1)",
+      border: "1px solid var(--hair-2)",
+      padding: "26px 28px 28px",
+      overflow: "hidden",
+    }}>
+      <span className="br-tr" />
+      <span className="br-bl" />
+      <div style={{
+        position: "absolute",
+        right: -20,
+        top: "50%",
+        transform: "translateY(-50%)",
+        width: 240,
+        height: 240,
+        opacity: 0.05,
+        pointerEvents: "none",
+      }}>
+        <HeatMark size={240} />
+      </div>
+      <div style={{ position: "relative", zIndex: 1 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 8 }}>
+          <span className="eyebrow-mono">CHAMPIONS</span>
+          <span className="live-tag" style={{ color: "var(--ink-mid)", borderColor: "var(--hair-2)", background: "var(--surf-2)" }}>
+            That&apos;s a wrap
+          </span>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 14 }}>
+          {champion.logoSrc && (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={champion.logoSrc}
+              alt=""
+              width={64}
+              height={64}
+              style={{ objectFit: "contain", filter: "drop-shadow(0 4px 10px rgba(0,0,0,0.5))", flexShrink: 0 }}
+            />
+          )}
+          <h1 className="font-display" style={{
+            fontWeight: 800,
+            fontSize: "clamp(34px, 5vw, 48px)",
+            textTransform: "uppercase",
+            lineHeight: 0.92,
+            margin: 0,
+          }}>
+            {champion.name}
+          </h1>
+        </div>
+        <p style={{ fontSize: 14, color: "var(--ink-mid)", margin: 0, maxWidth: 460, textWrap: "pretty" }}>
+          {champion.name} are your IEM Cologne Major 2026 champions. Thirty-two
+          walked in; one walks out with the trophy. Thanks for calling it with us
+          all Major long — the recap below has the whole run.
+        </p>
+        <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center", marginTop: 18 }}>
+          <Link href={wrappedHref} className="btn-heat" prefetch={false}>
+            Watch the Wrapped recap
+            <svg viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="9 18 15 12 9 6" />
+            </svg>
+          </Link>
+          <Link href="/leaderboard" className="btn-ghost" prefetch={false}>Final Ranks</Link>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 function StageStatusTag({
   pickability,
 }: {

src/app/globals.css

@@ -958,7 +958,11 @@ main.shell.with-nav-action { padding-bottom: calc(152px + env(safe-area-inset-bo
    sparkle, clipped to the coin disc. Transform/opacity only (no blur/backdrop-
    filter — PHA-1269), staggered per coin via --shimmer-delay, off when the user
    prefers reduced motion. */
-.coin-shine { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; }
+/* overflow:hidden + the round radius CLIP the sweep to the coin. Without it the
+   sheen band parks at translateX(120%) for most of the cycle and sits as a stray
+   glossy bar just off the coin's right edge (PHA-1274: "what is this weird
+   artifact?"). The clip keeps the glide on the disc and nowhere else. */
+.coin-shine { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
 .coin-shine img { width: 100%; height: 100%; object-fit: contain; }
 .coin-shine::before {
   content: ""; position: absolute; inset: 0; pointer-events: none;

src/lib/stage-wrapped-core.ts

@@ -170,25 +170,27 @@ export interface WrappedTrack {
 /**
  * The deck soundtrack options (PHA-1274, Brandon: "a few more epic musics with
  * more bittersweet or somber endings"). Index 0 is the default that plays on the
- * first sound-on; the track control cycles through the rest. Order puts the
- * triumphant theme first, then the bittersweet/somber pieces that suit a Major
- * sending its champion home and everyone else into the off-season.
+ * first sound-on; the track control cycles through the rest. The bittersweet
+ * theme leads (Brandon: "make the default music the bittersweet epic one … the
+ * music needs to be bittersweet") — it's the right send-off for a Major crowning
+ * its champion and sending everyone else into the off-season; the purely
+ * triumphant and somber pieces follow on the cycle.
  */
 export const WRAPPED_TRACKS: readonly WrappedTrack[] = [
-  {
-    id: "descent",
-    title: "The Descent",
-    src: "/audio/wrapped-theme.mp3",
-    credit: "“The Descent” — Kevin MacLeod (incompetech.com) · CC-BY 3.0",
-    mood: "Epic",
-  },
   {
     id: "despair-triumph",
     title: "Despair & Triumph",
     src: "/audio/wrapped-despair-triumph.mp3",
     credit: "“Despair and Triumph” — Kevin MacLeod (incompetech.com) · CC-BY 3.0",
     mood: "Bittersweet",
   },
+  {
+    id: "descent",
+    title: "The Descent",
+    src: "/audio/wrapped-theme.mp3",
+    credit: "“The Descent” — Kevin MacLeod (incompetech.com) · CC-BY 3.0",
+    mood: "Epic",
+  },
   {
     id: "long-note-three",
     title: "Long Note Three",

src/lib/stage-wrapped-launch.ts

@@ -265,3 +265,59 @@ export async function prepareMajorWrappedAutoDeck(
     slides,
   };
 }
+
+/** The Grand Final section id for this format (the recap deep link target). */
+export function majorWrappedSectionId(): number {
+  return PLAYOFF_ROUNDS.find((r) => r.key === "GF")?.sectionId ?? 110;
+}
+
+export interface MajorChampion {
+  pickId: number;
+  name: string;
+  /** First logo tier for the crest (or null when none resolves). */
+  logoSrc: string | null;
+}
+
+/**
+ * WHO won the Major — the crowned champion, or null until the Grand Final
+ * resolves. Reuses the same bracket pipeline the Wrapped deck does
+ * (`buildPlayoffBracket` + `derivePlayoffStorylines`) so the home send-off names
+ * the exact team the recap crowns. Cheap: one query scoped to the playoff
+ * sections. Drives the dashboard's "Major complete" hero (PHA-1274).
+ */
+export async function majorChampion(eventId: number): Promise<MajorChampion | null> {
+  const layout = getCommittedLayout();
+  const playoffSectionIds = PLAYOFF_ROUNDS.map((r) => r.sectionId);
+  const playoffSections = layout.sections.filter((s) => playoffSectionIds.includes(s.sectionid));
+  if (playoffSections.length === 0) return null;
+
+  const outcomes = await prisma.stageOutcome.findMany({
+    where: { eventId, sectionId: { in: playoffSectionIds } },
+  });
+  if (outcomes.length === 0) return null;
+
+  const winnerByGroup = new Map<number, number>();
+  for (const o of outcomes) if (o.slotIndex === 0) winnerByGroup.set(o.groupId, o.winnerPickId);
+
+  const bracket = buildPlayoffBracket({ sections: playoffSections, winnerByGroup });
+  if (!isPlayoffWrapped(bracket)) return null; // no champion crowned yet
+
+  const teamMap = buildTeamMap(layout);
+  const facts = derivePlayoffStorylines(bracket, {
+    nameOf: (pid: number) => teamMap.get(pid)?.name ?? null,
+  });
+  if (facts.championPickId == null) return null;
+
+  const team = teamMap.get(facts.championPickId);
+  let logoSrc: string | null = null;
+  if (team) {
+    for (const tier of resolveLogoTiers(team)) {
+      if (tier.kind === "image") { logoSrc = tier.src; break; }
+    }
+  }
+  return {
+    pickId: facts.championPickId,
+    name: facts.championName ?? team?.name ?? "the champions",
+    logoSrc,
+  };
+}