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:
90
client/src/components/InviteFriendsModal.tsx
Normal file
90
client/src/components/InviteFriendsModal.tsx
Normal 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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user