Merge pull request #21 from joe-brothers/fix-streak-display

Author: sh-cho

packages/client/src/managers/AuthStateManager.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "pixi.js";
-import type { PublicUser } from "@differ/shared";
+import type { DailyState, PublicUser } from "@differ/shared";
 import { authApi } from "../network/rest";
 import { getTurnstileToken } from "../network/turnstile";
 
@@ -8,6 +8,7 @@ import { getTurnstileToken } from "../network/turnstile";
 export class AuthStateManager extends EventEmitter {
   private user: PublicUser | null = null;
   private wins = 0;
+  private daily: DailyState | null = null;
 
   getUser(): PublicUser | null {
     return this.user;
@@ -17,16 +18,23 @@ export class AuthStateManager extends EventEmitter {
     return this.wins;
   }
 
+  // Today's daily-challenge state, bundled into /auth/me so the menu can
+  // render played-state + streak without a second round trip.
+  getDaily(): DailyState | null {
+    return this.daily;
+  }
+
   isAuthenticated(): boolean {
     return this.user !== null;
   }
 
   // Called on app start. Asks the server who we are based on the cookie.
   async tryRestore(): Promise<boolean> {
     try {
-      const { user, wins } = await authApi.me();
+      const { user, wins, daily } = await authApi.me();
       this.user = user;
       this.wins = wins;
+      this.daily = daily;
       this.emit("authStateChanged");
       return true;
     } catch {
@@ -39,9 +47,10 @@ export class AuthStateManager extends EventEmitter {
   async refresh(): Promise<void> {
     if (!this.user) return;
     try {
-      const { user, wins } = await authApi.me();
+      const { user, wins, daily } = await authApi.me();
       this.user = user;
       this.wins = wins;
+      this.daily = daily;
       this.emit("authStateChanged");
     } catch {
       // Network blip — keep cached values rather than logging out.
@@ -93,6 +102,7 @@ export class AuthStateManager extends EventEmitter {
     }
     this.user = null;
     this.wins = 0;
+    this.daily = null;
     this.emit("authStateChanged");
   }
 }

packages/client/src/network/rest.ts

@@ -158,32 +158,13 @@ export const leaderboardApi = {
   },
 };
 
-export interface DailyTodayRes {
-  date: string;
-  played: boolean;
-  result: {
-    elapsedMs: number | null;
-    foundCount: number;
-    outcome: string;
-    hintsUsed: number;
-  } | null;
-  streak: {
-    current: number;
-    longest: number;
-    lastDailyDate: string | null;
-  };
-}
-
 export interface DailyStartRes {
   roomCode: string;
   wsUrl: string;
   date: string;
 }
 
 export const dailyApi = {
-  today(): Promise<DailyTodayRes> {
-    return request<DailyTodayRes>("/daily/today");
-  },
   start(): Promise<DailyStartRes> {
     return request<DailyStartRes>("/daily/start", { method: "POST" });
   },

packages/client/src/scenes/MainMenuScene.ts

@@ -5,7 +5,7 @@ import { COLORS } from "../constants";
 import { game } from "../core/Game";
 import { authState } from "../managers/AuthStateManager";
 import { HtmlOverlay } from "../ui/HtmlOverlay";
-import { ApiError, authApi, dailyApi, type DailyTodayRes } from "../network/rest";
+import { ApiError, authApi } from "../network/rest";
 import { evaluatePassword, PASSWORD_HINT } from "../managers/passwordStrength";
 import { createBetaBadge } from "../ui/pixiBetaBadge";
 
@@ -30,7 +30,6 @@ export class MainMenuScene extends Container implements IScene {
   private footerText: Text | null = null;
   private upgradeOverlay: HtmlOverlay | null = null;
   private settingsOverlay: HtmlOverlay | null = null;
-  private dailyToday: DailyTodayRes | null = null;
 
   constructor(app: Application) {
     super();
@@ -51,21 +50,19 @@ export class MainMenuScene extends Container implements IScene {
     }
     this.createUserInfo();
     this.createFooter();
-    // Pull fresh stats (wins) so the counter reflects games played in the
-    // last session — fire-and-forget so the menu still draws instantly.
-    void authState.refresh().then(() => this.refreshUserInfo());
-    // Daily status — also fire-and-forget. Renders the button label as
-    // "Played today" / "Play" and updates the streak line in the corner.
-    void dailyApi
-      .today()
-      .then((res) => {
-        this.dailyToday = res;
-        this.refreshDailyButton();
-        this.refreshStreak();
-      })
-      .catch(() => {
-        /* leave the button in default "Daily Challenge" state */
-      });
+    // Pull fresh /auth/me (wins + daily state) so the counter, daily button,
+    // and streak line reflect the latest session — fire-and-forget so the menu
+    // still draws instantly. Daily is bundled into /auth/me (single round
+    // trip) and the lazy streak reset runs server-side on that call.
+    void authState.refresh().then(() => {
+      this.refreshUserInfo();
+      this.refreshDailyButton();
+      this.refreshStreak();
+    });
+    // Render whatever cached state we already have so the corner labels
+    // aren't blank during the in-flight refresh.
+    this.refreshDailyButton();
+    this.refreshStreak();
   }
 
   private createTitle(): void {
@@ -171,7 +168,7 @@ export class MainMenuScene extends Container implements IScene {
   }
 
   private isDailyDisabled(): boolean {
-    return !!this.dailyToday?.played;
+    return !!authState.getDaily()?.played;
   }
 
   // (i) icon next to the Daily button. Hover surfaces a small tooltip card
@@ -335,9 +332,10 @@ export class MainMenuScene extends Container implements IScene {
 
   private refreshDailyButton(): void {
     if (!this.dailyButton) return;
-    const played = this.dailyToday?.played ?? false;
+    const daily = authState.getDaily();
+    const played = daily?.played ?? false;
     const el = this.dailyButton as Container & { __text: Text; __bg: Graphics };
-    const ms = this.dailyToday?.result?.elapsedMs;
+    const ms = daily?.result?.elapsedMs;
     if (played) {
       this.drawFilledButton(el.__bg, 250, 48, COLORS.surfaceMuted);
       el.__bg.stroke({ color: COLORS.border, width: 1 });
@@ -354,7 +352,7 @@ export class MainMenuScene extends Container implements IScene {
 
   private refreshStreak(): void {
     if (!this.streakText) return;
-    const cur = this.dailyToday?.streak.current ?? 0;
+    const cur = authState.getDaily()?.streak.current ?? 0;
     this.streakText.text = cur > 0 ? `🔥 ${cur}-day streak` : "";
   }
 
@@ -566,7 +564,7 @@ export class MainMenuScene extends Container implements IScene {
       this.addChild(this.winsText);
       nextY += 22;
 
-      // Streak — populated lazily by refreshStreak() once dailyApi.today()
+      // Streak — populated lazily by refreshStreak() once authState.refresh()
       // resolves. Empty until then so the corner doesn't flash text.
       this.streakText = new Text({
         text: "",

packages/client/src/ui/react/GameCompleteModal.tsx

@@ -1,4 +1,5 @@
 import { useState, type CSSProperties, type ReactNode } from "react";
+import { dailyNumber } from "@differ/shared";
 import { useUIStore, type OverlayModal } from "../store";
 import { cardStyle, CSS, FONT_MONO, modalBackdropStyle } from "../styles";
 import { Button } from "./Button";
@@ -44,7 +45,7 @@ function buildShareText(args: {
   // Timeouts and hint-assisted finishes don't get the badge — the LinkedIn
   // game-share style cue is meant to convey "no help, no shortcuts."
   const flawless = args.hintsUsed === 0 && args.elapsedSec != null ? " (Flawless ✨)" : "";
-  return `Differ Daily ${args.date} — ${result}${flawless}\n${window.location.origin}`;
+  return `Differ Daily ${args.date} (#${dailyNumber(args.date)}) — ${result}${flawless}\n${window.location.origin}`;
 }
 
 function DailyCompleteCard({

packages/server/src/auth/routes.ts

@@ -17,6 +17,7 @@ import {
 import type { Env } from "../env.js";
 import { getDb } from "../db/client.js";
 import { gameParticipants, games, users } from "../db/schema.js";
+import { getDailyState } from "../daily/service.js";
 import { signToken, signTotpTicket, verifyTotpTicket } from "./jwt.js";
 import { hashPassword, verifyPassword, needsRehash } from "./password.js";
 import { requireAuth, type AuthEnv } from "./middleware.js";
@@ -238,9 +239,14 @@ protectedRoutes.get("/me", async (c) => {
       .get();
     wins = winsRow?.c ?? 0;
   }
+  // Bundled with daily state so the menu can render on a single round trip.
+  // The lazy streak reset (when lastDailyDate < yesterday) lives inside
+  // getDailyState; calling it here means it kicks in on session start.
+  const daily = await getDailyState(c.env.DB, claims.sub);
   return c.json({
     user: { userId: row.id, name: row.name, isGuest: row.isGuest === 1 },
     wins,
+    daily,
   });
 });
 

packages/server/src/daily/routes.ts

@@ -3,7 +3,7 @@ import { and, eq } from "drizzle-orm";
 import type { Env } from "../env.js";
 import { requireAuth, type AuthEnv } from "../auth/middleware.js";
 import { getDb } from "../db/client.js";
-import { dailyAttempts, gameParticipants, games, userStats } from "../db/schema.js";
+import { dailyAttempts } from "../db/schema.js";
 import { createGameRoom } from "../rooms/create.js";
 import { utcDateKey } from "./service.js";
 
@@ -26,82 +26,6 @@ async function dailyRoomCode(date: string, userId: string): Promise<string> {
   return out;
 }
 
-// GET /daily/today — status for the daily card on the main menu.
-//   - playable: no attempt yet today
-//   - already-played: returns the prior result (elapsedMs, foundCount)
-// Streak is included so the menu can render "Day N streak" without a
-// second round trip.
-dailyRoutes.get("/today", requireAuth, async (c) => {
-  const userId = c.get("user").sub;
-  const date = utcDateKey();
-  const db = getDb(c.env.DB);
-
-  const [attemptRow] = await db
-    .select({ gameId: dailyAttempts.gameId })
-    .from(dailyAttempts)
-    .where(and(eq(dailyAttempts.userId, userId), eq(dailyAttempts.date, date)))
-    .limit(1);
-
-  const [statsRow] = await db
-    .select({
-      current: userStats.currentStreak,
-      longest: userStats.longestStreak,
-      last: userStats.lastDailyDate,
-    })
-    .from(userStats)
-    .where(eq(userStats.userId, userId))
-    .limit(1);
-
-  let result: {
-    elapsedMs: number | null;
-    foundCount: number;
-    outcome: string;
-    hintsUsed: number;
-  } | null = null;
-  if (attemptRow) {
-    const [participant] = await db
-      .select({
-        elapsedMs: gameParticipants.elapsedMs,
-        foundCount: gameParticipants.foundCount,
-        outcome: gameParticipants.outcome,
-        hintsUsed: gameParticipants.hintsUsed,
-      })
-      .from(gameParticipants)
-      .where(
-        and(eq(gameParticipants.gameId, attemptRow.gameId), eq(gameParticipants.userId, userId)),
-      )
-      .limit(1);
-    if (participant) {
-      result = participant;
-    } else {
-      // Guest path — daily_attempts exists, gameParticipants doesn't (D4).
-      // Fall back to the games row so the share card still renders something.
-      const [game] = await db
-        .select({ endReason: games.endReason })
-        .from(games)
-        .where(eq(games.id, attemptRow.gameId))
-        .limit(1);
-      result = {
-        elapsedMs: null,
-        foundCount: 0,
-        outcome: game?.endReason === "winner" ? "win" : "timeout",
-        hintsUsed: 0,
-      };
-    }
-  }
-
-  return c.json({
-    date,
-    played: !!attemptRow,
-    result,
-    streak: {
-      current: statsRow?.current ?? 0,
-      longest: statsRow?.longest ?? 0,
-      lastDailyDate: statsRow?.last ?? null,
-    },
-  });
-});
-
 // POST /daily/start — start (or resume) today's daily attempt.
 //   - if already played today: 409 daily_already_played
 //   - else: ensures a deterministic-coded GameRoom DO exists and returns the