feat: add friend invite modal to all game modes

- New InviteFriendsModal component: fetches friends list, sends game
  invite via notification socket with per-friend sent confirmation
- Multiplayer (GamePage): invite button below copy link, hidden after game ends
- Correspondence: invite button in waiting-for-opponent card
- Tournament: invite button for joined players while status is waiting
- Invite links use mode-prefixed codes (correspondence/XYZ, tournament/XYZ)
  so notification "Beitreten" button navigates to the correct page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Michess
2026-04-14 13:16:00 +02:00
parent 50ef567a1a
commit b29c467766
4 changed files with 103 additions and 1 deletions

View File

@@ -0,0 +1,90 @@
"use client";
import { API_URL } from "@/config";
import { useNotifications } from "@/context/NotificationContext";
import { useSession } from "@/context/session";
import { useState } from "react";
interface Friend {
id: number;
friend_id: number;
friend_name: string;
}
export default function InviteFriendsModal({
gameCode,
label = "Freunde einladen"
}: {
gameCode: string;
label?: string;
}) {
const { user } = useSession();
const { sendGameInvite } = useNotifications();
const [open, setOpen] = useState(false);
const [friends, setFriends] = useState<Friend[]>([]);
const [loading, setLoading] = useState(false);
const [sent, setSent] = useState<Record<number, boolean>>({});
async function openModal() {
if (!user?.id || typeof user.id === "string") return;
setOpen(true);
setLoading(true);
const res = await fetch(`${API_URL}/v1/friends`, { credentials: "include" });
if (res.ok) setFriends(await res.json());
setLoading(false);
}
function invite(friendId: number) {
sendGameInvite(friendId, gameCode);
setSent((prev) => ({ ...prev, [friendId]: true }));
setTimeout(() => setSent((prev) => ({ ...prev, [friendId]: false })), 3000);
}
if (!user?.id || typeof user.id === "string") return null;
return (
<>
<button className="btn btn-sm btn-outline" onClick={openModal}>
{label}
</button>
{open && (
<dialog className="modal modal-open">
<div className="modal-box max-w-sm">
<button
className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
onClick={() => setOpen(false)}
>
</button>
<h3 className="font-bold text-lg mb-4">{label}</h3>
{loading ? (
<div className="flex justify-center py-4">
<span className="loading loading-spinner" />
</div>
) : friends.length === 0 ? (
<p className="text-sm opacity-60">
Keine Freunde gefunden. Füge zuerst Freunde hinzu.
</p>
) : (
<div className="flex flex-col gap-3">
{friends.map((f) => (
<div key={f.id} className="flex items-center justify-between gap-2">
<span className="font-medium">{f.friend_name}</span>
<button
className={"btn btn-sm btn-secondary" + (sent[f.friend_id] ? " btn-success" : "")}
onClick={() => invite(f.friend_id)}
>
{sent[f.friend_id] ? "✓ Gesendet" : "Einladen"}
</button>
</div>
))}
</div>
)}
</div>
<div className="modal-backdrop bg-black/40" onClick={() => setOpen(false)} />
</dialog>
)}
</>
);
}

View File

@@ -23,6 +23,7 @@ import type { ClearPremoves } from "react-chessboard";
import { Chessboard } from "react-chessboard";
import { API_URL, APP_URL } from "@/config";
import InviteFriendsModal from "@/components/InviteFriendsModal";
import { io } from "socket.io-client";
import { lobbyReducer, squareReducer } from "./reducers";
@@ -654,6 +655,11 @@ export default function GamePage({ initialLobby }: { initialLobby: Game }) {
</div>
</div>
</div>
{!lobby.endReason && (
<div className="mt-1 flex justify-end">
<InviteFriendsModal gameCode={initialLobby.code!} label="Freunde einladen" />
</div>
)}
<div className="h-32 w-full overflow-y-scroll" ref={moveListRef}>
<table className="table-compact table w-full">
<tbody>{getMoveListHtml()}</tbody>