Add multiplayer rooms and Vercel analytics

app/layout.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { Analytics } from "@vercel/analytics/next";
 import "./globals.css";
 import "./block-theme.css";
 import "./account.css";
@@ -13,6 +14,7 @@ import { I18nProvider } from "@/components/I18nProvider";
 import { getI18n } from "@/lib/i18n";
 import "./polish.css";
 import "./mobile-game.css";
+import "./multiplayer.css";
 import { SiteSettingsProvider } from "@/components/SiteSettingsProvider";
 import { initialSiteSettings } from "@/lib/site-settings";
 import { user } from "@/lib/supabase";
@@ -50,6 +52,7 @@ export default async function RootLayout({
             <LegacyPasswordNotice enabled={!!account?.email} />
           </SiteSettingsProvider>
         </I18nProvider>
+        <Analytics />
       </body>
     </html>
   );

app/multiplayer.css

@@ -0,0 +1,217 @@
+.multiplayer-settings,
+.multiplayer-join {
+  display: grid;
+  gap: 12px;
+  margin: 18px 0;
+}
+.multiplayer-settings label,
+.multiplayer-join label,
+.multiplayer-lobby > label {
+  font-weight: 650;
+}
+.multiplayer-settings input,
+.multiplayer-settings select,
+.multiplayer-join input,
+.multiplayer-invite input {
+  width: 100%;
+  min-height: 44px;
+  border: 1px solid var(--line, #35404c);
+  border-radius: 10px;
+  padding: 10px 12px;
+  color: inherit;
+  background: var(--panel, #1a222c);
+  font: inherit;
+}
+.multiplayer-settings select {
+  max-width: 160px;
+}
+.multiplayer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px 5%;
+  gap: 20px;
+  border-bottom: 1px solid var(--line, #35404c);
+}
+.multiplayer-lobby {
+  max-width: 1000px;
+  min-height: 70vh;
+}
+.multiplayer-lobby .eyebrow,
+.multiplayer-lobby .lead {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.multiplayer-join {
+  max-width: 480px;
+}
+.multiplayer-invite {
+  display: flex;
+  gap: 10px;
+  margin: 12px 0 28px;
+}
+.multiplayer-invite input {
+  min-width: 0;
+}
+.multiplayer-invite .button {
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.multiplayer-roster {
+  list-style: none;
+  padding: 0;
+  margin: 16px 0 24px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+.multiplayer-roster li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border: 1px solid var(--line, #35404c);
+  border-radius: 12px;
+  gap: 12px;
+  overflow-wrap: anywhere;
+}
+.multiplayer-roster li > span {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.multiplayer-table-wrap {
+  overflow-x: auto;
+  margin: 28px 0;
+}
+.multiplayer-final {
+  min-width: 650px;
+  width: 100%;
+}
+.multiplayer-final caption {
+  text-align: left;
+  font-weight: 650;
+  margin-bottom: 16px;
+}
+.multiplayer-final .multiplayer-you {
+  background: #8dce6614;
+}
+.multiplayer-scoreboard {
+  position: absolute;
+  z-index: 20;
+  left: 80px;
+  top: 100px;
+  width: 245px;
+  padding: 12px 16px;
+  border-radius: 12px;
+  background: rgba(26, 34, 44, 0.96);
+  color: var(--text);
+  box-shadow: 0 6px 24px #0002;
+  max-height: calc(100dvh - 190px);
+  overflow: auto;
+}
+.multiplayer-scoreboard summary {
+  cursor: pointer;
+  font-weight: 650;
+}
+.multiplayer-scoreboard summary svg {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 4px;
+}
+.multiplayer-scoreboard ul {
+  list-style: none;
+  margin: 12px 0;
+  padding: 0;
+}
+.multiplayer-scoreboard li {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--line);
+  overflow-wrap: anywhere;
+}
+.multiplayer-scoreboard li > span {
+  flex: 1;
+  min-width: 0;
+}
+.multiplayer-scoreboard li small {
+  display: block;
+  font-size: 11px;
+  opacity: 0.7;
+}
+.multiplayer-network,
+.multiplayer-waiting {
+  position: fixed;
+  z-index: 50;
+  bottom: 18px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: max-content;
+  max-width: calc(100% - 32px);
+  border-radius: 10px;
+  background: var(--panel);
+  color: var(--text);
+  box-shadow: 0 6px 24px #0003;
+  padding: 12px 18px;
+  text-align: center;
+}
+.multiplayer-network {
+  z-index: 100;
+  top: 80px;
+  bottom: auto;
+  border: 1px solid #aa5040;
+}
+.multiplayer-round-result {
+  max-height: calc(100dvh - 100px);
+  overflow-y: auto;
+}
+.multiplayer-round-scores {
+  padding: 0;
+  margin: 12px 0 20px;
+  list-style: none;
+  text-align: left;
+}
+.multiplayer-round-scores li {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 7px 0;
+  border-bottom: 1px solid var(--line);
+  overflow-wrap: anywhere;
+}
+@media (max-width: 640px) {
+  .multiplayer-header {
+    padding: 18px 5%;
+  }
+  .multiplayer-roster {
+    grid-template-columns: 1fr;
+  }
+  .multiplayer-invite {
+    flex-wrap: wrap;
+  }
+  .multiplayer-scoreboard {
+    top: 130px;
+    left: 64px;
+    width: min(220px, calc(100% - 80px));
+  }
+  .multiplayer-waiting {
+    bottom: 96px;
+  }
+  .multiplayer-game .game-header > .report-content {
+    display: none;
+  }
+  .multiplayer-round-result {
+    max-height: calc(100dvh - 48px);
+  }
+}
+
+.start-panel .tabs button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}

app/multiplayer/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { MultiplayerRoom } from "@/components/MultiplayerRoom";
+import { notFound } from "next/navigation";
+import { z } from "zod";
+
+export default async function MultiplayerPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  if (!z.string().uuid().safeParse(id).success) notFound();
+  return <MultiplayerRoom id={id} />;
+}