feat(#6): 正解時の祝祭演出 (confetti + emoji + 合計スコア強調)

[susumutomita]

audit table #6 を片付ける。 旧 UI の 「正解 (+100 pt) 合計スコア: 100 pt」 という事務的 Alert (= image #32 で 「正解時の喜びがない」 指摘) を、 競技者が「やった！」 と感じる UX に差し替える。

実装

1. CelebrationOverlay component (= 自前 CSS keyframes confetti、 外部 lib なし) を 新規追加
   • 60 particles × 1.8-2.8 秒 + 0-500ms stagger で全画面 fall animation
   • 3 秒で fade-out、 `pointer-events: none` で操作の邪魔をしない
   • decorative なので `aria-hidden`
2. 正解時 (outcome.kind === "ok") に CelebrationOverlay を mount + Alert を 「🎉 正解！ +N pt」 「おめでとうございます。 合計スコアは N pt です。」 に差し替え
3. 既出提出 (= reload 後 flagSubmitted=true) の 「提出済み」 を 「🏆 クリア済み +N pt」 + 励まし文言に

なぜ外部 lib じゃないか

• 競技 portal は supply chain attack の標的になりやすい (= 多 tenant SaaS)。 `react-confetti` 等の追加は audit-baseline.json 変更を伴う
• CSS keyframes で十分なクオリティが出る (= 自前 60 行)
• bundle size 増えない

物理影響

• `apps/participant-portal/src/components/CelebrationOverlay.tsx` — CREATE (= 自前 confetti、 90 行)
• `apps/participant-portal/src/components/ProblemPanel.tsx` — UPDATE: outcome.kind==="ok" 時に Overlay を mount、 Alert 文言を祝祭化、 既出提出文言も差し替え

Regression 分析

• Overlay は `position: fixed` + `pointer-events: none` (= 既存の操作経路に干渉しない)
• visible=false / outcome.kind !== "ok" は早期 return、 DOM に何も生まない
• 既出提出 (flagSubmitted=true) の表示は文言変更のみで挙動は同じ
• CSS keyframes は inline `<style>` で 1 component 内に閉じる (= 他画面に影響しない)

Test plan

• `bun run typecheck` — clean
• `make harness` / `make before-commit`
• deploy 後: flag を提出 → 3 秒 confetti animation が画面に流れる + 「🎉 正解！」 Alert + 合計スコア強調

🤖 Generated with Claude Code

[coderabbitai]

Warning

Rate limit exceeded

@susumutomita has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 44 minutes and 3 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7db376f7-0915-48f4-9908-7cafeffe99b0

📥 Commits

Reviewing files that changed from the base of the PR and between 3c0588f and 062ad4c.

📒 Files selected for processing (2)

• apps/participant-portal/src/components/CelebrationOverlay.tsx
• apps/participant-portal/src/components/ProblemPanel.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/6-celebration-on-correct-flag

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (main@0f4d37a). Learn more about missing BASE report.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #939   +/-   ##
=======================================
  Coverage        ?   92.95%           
=======================================
  Files           ?        8           
  Lines           ?      227           
  Branches        ?       66           
=======================================
  Hits            ?      211           
  Misses          ?       16           
  Partials        ?        0           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.