430 lines
14 KiB
TypeScript
430 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useCallback, useRef, useEffect } from "react";
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import SwipeableCard from "./SwipeableCard";
|
|
import ActionButtons from "./ActionButtons";
|
|
import MatchResult from "./MatchResult";
|
|
import SwipeGuide from "./SwipeGuide";
|
|
import { Restaurant, SwipeDirection, MatchType, RunnerUp } from "@/types";
|
|
import { Heart, Undo2, Check } from "lucide-react";
|
|
|
|
const AVATARS = [
|
|
{ emoji: "🐱", bg: "bg-amber-100" },
|
|
{ emoji: "🐶", bg: "bg-orange-100" },
|
|
{ emoji: "🦊", bg: "bg-red-100" },
|
|
{ emoji: "🐰", bg: "bg-pink-100" },
|
|
{ emoji: "🐼", bg: "bg-zinc-100" },
|
|
{ emoji: "🐨", bg: "bg-sky-100" },
|
|
{ emoji: "🦁", bg: "bg-yellow-100" },
|
|
{ emoji: "🐸", bg: "bg-lime-100" },
|
|
{ emoji: "🐵", bg: "bg-stone-100" },
|
|
{ emoji: "🐷", bg: "bg-rose-100" },
|
|
{ emoji: "🐙", bg: "bg-purple-100" },
|
|
{ emoji: "🦄", bg: "bg-violet-100" },
|
|
] as const;
|
|
|
|
function getAvatar(uid: string) {
|
|
let hash = 0;
|
|
for (let i = 0; i < uid.length; i++) {
|
|
hash = (hash * 31 + uid.charCodeAt(i)) | 0;
|
|
}
|
|
return AVATARS[((hash % AVATARS.length) + AVATARS.length) % AVATARS.length];
|
|
}
|
|
|
|
function UserProgressBar({
|
|
userId,
|
|
swipeCounts,
|
|
localIndex,
|
|
total,
|
|
}: {
|
|
userId: string;
|
|
swipeCounts: Record<string, number>;
|
|
localIndex: number;
|
|
total: number;
|
|
}) {
|
|
const others = Object.entries(swipeCounts).filter(([id]) => id !== userId);
|
|
if (others.length === 0) return null;
|
|
|
|
return (
|
|
<div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1">
|
|
<span className="flex items-center gap-1 text-[11px] tabular-nums text-emerald-500">
|
|
<span className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-emerald-100 text-[10px] leading-none">
|
|
{getAvatar(userId).emoji}
|
|
</span>
|
|
你 {localIndex}/{total}
|
|
</span>
|
|
{others.map(([id, count]) => {
|
|
const finished = count >= total;
|
|
const avatar = getAvatar(id);
|
|
return (
|
|
<span
|
|
key={id}
|
|
className={`flex items-center gap-1 text-[11px] tabular-nums ${finished ? "text-emerald-400" : "text-zinc-400"}`}
|
|
>
|
|
<span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${avatar.bg} text-[10px] leading-none`}>
|
|
{avatar.emoji}
|
|
</span>
|
|
{count}/{total}
|
|
{finished && <Check size={10} className="text-emerald-400" />}
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function WaitingProgress({
|
|
userId,
|
|
swipeCounts,
|
|
total,
|
|
}: {
|
|
userId: string;
|
|
swipeCounts: Record<string, number>;
|
|
total: number;
|
|
}) {
|
|
const entries = Object.entries(swipeCounts);
|
|
if (entries.length <= 1) return null;
|
|
|
|
const others = entries.filter(([id]) => id !== userId);
|
|
const finishedCount = others.filter(([, c]) => c >= total).length;
|
|
|
|
return (
|
|
<div className="flex w-60 flex-col gap-2.5 rounded-2xl bg-zinc-50 px-4 py-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="flex items-center gap-1.5 text-xs font-medium text-emerald-600">
|
|
<span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100 text-sm leading-none">
|
|
{getAvatar(userId).emoji}
|
|
</span>
|
|
你 {total}/{total}
|
|
</span>
|
|
<Check size={14} className="text-emerald-400" />
|
|
</div>
|
|
|
|
{others.map(([id, count]) => {
|
|
const finished = count >= total;
|
|
const pct = Math.min((count / total) * 100, 100);
|
|
const avatar = getAvatar(id);
|
|
return (
|
|
<div key={id} className="flex flex-col gap-1">
|
|
<div className="flex items-center justify-between">
|
|
<span className={`flex items-center gap-1.5 text-xs font-medium ${finished ? "text-emerald-600" : "text-zinc-500"}`}>
|
|
<span className={`inline-flex h-5 w-5 items-center justify-center rounded-full text-sm leading-none ${finished ? "bg-emerald-100" : avatar.bg}`}>
|
|
{avatar.emoji}
|
|
</span>
|
|
{count}/{total}
|
|
</span>
|
|
{finished && <Check size={14} className="text-emerald-400" />}
|
|
</div>
|
|
{!finished && (
|
|
<div className="ml-7 h-1 overflow-hidden rounded-full bg-zinc-200">
|
|
<motion.div
|
|
className="h-full rounded-full bg-amber-400"
|
|
animate={{ width: `${pct}%` }}
|
|
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
<p className="text-center text-[10px] text-zinc-400">
|
|
{finishedCount}/{others.length} 人已完成
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface SwipeDeckProps {
|
|
restaurants: Restaurant[];
|
|
roomId: string;
|
|
userId: string;
|
|
initialIndex: number;
|
|
matchedRestaurantId: string | null;
|
|
matchType: MatchType;
|
|
matchLikes: number;
|
|
runnerUps: RunnerUp[];
|
|
likeCounts: Record<string, number>;
|
|
swipeCounts: Record<string, number>;
|
|
userCount: number;
|
|
onReset: () => Promise<void>;
|
|
onNarrow: (restaurantIds: string[]) => Promise<void>;
|
|
}
|
|
|
|
export default function SwipeDeck({
|
|
restaurants,
|
|
roomId,
|
|
userId,
|
|
initialIndex,
|
|
matchedRestaurantId,
|
|
matchType,
|
|
matchLikes,
|
|
runnerUps,
|
|
likeCounts,
|
|
swipeCounts,
|
|
userCount,
|
|
onReset,
|
|
onNarrow,
|
|
}: SwipeDeckProps) {
|
|
const [currentIndex, setCurrentIndex] = useState(initialIndex);
|
|
const [showMatch, setShowMatch] = useState(false);
|
|
const [localMatchId, setLocalMatchId] = useState<string | null>(null);
|
|
const [resetting, setResetting] = useState(false);
|
|
const [bubble, setBubble] = useState("");
|
|
const [guideVisible, setGuideVisible] = useState(initialIndex === 0);
|
|
const [swipeHistory, setSwipeHistory] = useState<string[]>(
|
|
() => restaurants.slice(0, initialIndex).map((r) => r.id),
|
|
);
|
|
const swipeFnRef = useRef<((direction: SwipeDirection) => void) | null>(null);
|
|
const swipingRef = useRef(false);
|
|
const prevLikeCounts = useRef<Record<string, number>>({});
|
|
|
|
const resolvedMatchId = matchedRestaurantId ?? localMatchId;
|
|
|
|
useEffect(() => {
|
|
if (resolvedMatchId != null && !showMatch) {
|
|
setShowMatch(true);
|
|
}
|
|
}, [resolvedMatchId, showMatch]);
|
|
|
|
useEffect(() => {
|
|
const currentCard = restaurants[currentIndex];
|
|
if (!currentCard || resolvedMatchId) return;
|
|
|
|
const prev = prevLikeCounts.current;
|
|
const rid = currentCard.id;
|
|
const oldCount = prev[rid] ?? 0;
|
|
const newCount = likeCounts[rid] ?? 0;
|
|
|
|
if (newCount > oldCount && oldCount > 0) {
|
|
setBubble("有人也想去这家！");
|
|
const timer = setTimeout(() => setBubble(""), 2000);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [likeCounts, currentIndex, restaurants, resolvedMatchId]);
|
|
|
|
useEffect(() => {
|
|
prevLikeCounts.current = { ...likeCounts };
|
|
}, [likeCounts]);
|
|
|
|
const registerSwipe = useCallback(
|
|
(fn: (direction: SwipeDirection) => void) => {
|
|
swipeFnRef.current = fn;
|
|
},
|
|
[],
|
|
);
|
|
|
|
const sendSwipe = async (restaurantId: string, action: "like" | "nope") => {
|
|
try {
|
|
const res = await fetch(`/api/room/${roomId}/swipe`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ userId, restaurantId, action }),
|
|
});
|
|
const data = await res.json();
|
|
if (data.match != null) {
|
|
setLocalMatchId(data.match);
|
|
}
|
|
} catch {
|
|
// Polling will catch match state
|
|
}
|
|
};
|
|
|
|
const handleSwipe = useCallback(
|
|
(direction: SwipeDirection) => {
|
|
const current = restaurants[currentIndex];
|
|
if (!current) return;
|
|
|
|
swipingRef.current = false;
|
|
if (guideVisible) setGuideVisible(false);
|
|
|
|
const action = direction === "right" ? "like" : "nope";
|
|
sendSwipe(current.id, action);
|
|
|
|
setSwipeHistory((h) => [...h, current.id]);
|
|
const nextIndex = currentIndex + 1;
|
|
setCurrentIndex(nextIndex);
|
|
swipeFnRef.current = null;
|
|
},
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
[currentIndex, restaurants, roomId, userId],
|
|
);
|
|
|
|
const handleButtonAction = useCallback(
|
|
(direction: SwipeDirection) => {
|
|
if (swipeFnRef.current && !swipingRef.current) {
|
|
swipingRef.current = true;
|
|
swipeFnRef.current(direction);
|
|
}
|
|
},
|
|
[],
|
|
);
|
|
|
|
const handleUndo = useCallback(async () => {
|
|
if (swipeHistory.length === 0 || currentIndex === 0) return;
|
|
|
|
const lastRid = swipeHistory[swipeHistory.length - 1];
|
|
|
|
try {
|
|
await fetch(`/api/room/${roomId}/undo`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ userId, restaurantId: lastRid }),
|
|
});
|
|
} catch {
|
|
// Best-effort
|
|
}
|
|
|
|
setSwipeHistory((h) => h.slice(0, -1));
|
|
setCurrentIndex((i) => i - 1);
|
|
setLocalMatchId(null);
|
|
swipeFnRef.current = null;
|
|
}, [swipeHistory, currentIndex, roomId, userId]);
|
|
|
|
const clearLocalState = useCallback(() => {
|
|
setCurrentIndex(0);
|
|
setShowMatch(false);
|
|
setLocalMatchId(null);
|
|
setSwipeHistory([]);
|
|
prevLikeCounts.current = {};
|
|
}, []);
|
|
|
|
const handleReset = useCallback(async () => {
|
|
setResetting(true);
|
|
try {
|
|
await onReset();
|
|
clearLocalState();
|
|
} finally {
|
|
setResetting(false);
|
|
}
|
|
}, [onReset, clearLocalState]);
|
|
|
|
const handleNarrow = useCallback(async (restaurantIds: string[]) => {
|
|
setResetting(true);
|
|
try {
|
|
await onNarrow(restaurantIds);
|
|
clearLocalState();
|
|
} finally {
|
|
setResetting(false);
|
|
}
|
|
}, [onNarrow, clearLocalState]);
|
|
|
|
const allSwiped = currentIndex >= restaurants.length;
|
|
const isDone = allSwiped || resolvedMatchId != null;
|
|
|
|
const matchRestaurant = resolvedMatchId
|
|
? restaurants.find((r) => r.id === resolvedMatchId) ?? null
|
|
: null;
|
|
|
|
const showWaiting = allSwiped && !resolvedMatchId;
|
|
|
|
return (
|
|
<>
|
|
{!allSwiped && !resolvedMatchId && (
|
|
<div className="mx-auto w-full max-w-sm px-4 pb-1">
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-1 flex-1 overflow-hidden rounded-full bg-zinc-100">
|
|
<motion.div
|
|
className="h-full rounded-full bg-emerald-400"
|
|
initial={{ width: 0 }}
|
|
animate={{
|
|
width: `${((currentIndex) / restaurants.length) * 100}%`,
|
|
}}
|
|
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
|
/>
|
|
</div>
|
|
<span className="shrink-0 text-[11px] tabular-nums text-zinc-400">
|
|
{currentIndex}/{restaurants.length}
|
|
</span>
|
|
<button
|
|
onClick={handleUndo}
|
|
disabled={currentIndex === 0}
|
|
className="flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[11px] font-medium text-amber-500 transition-colors active:bg-amber-50 disabled:opacity-0"
|
|
>
|
|
<Undo2 size={12} />
|
|
撤回
|
|
</button>
|
|
</div>
|
|
<UserProgressBar
|
|
userId={userId}
|
|
swipeCounts={swipeCounts}
|
|
localIndex={currentIndex}
|
|
total={restaurants.length}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="relative flex flex-1 items-center justify-center px-4">
|
|
<div className="relative h-[70vh] w-full max-w-sm">
|
|
{currentIndex === 0 && !resolvedMatchId && guideVisible && (
|
|
<SwipeGuide onDismiss={() => setGuideVisible(false)} />
|
|
)}
|
|
{!resolvedMatchId && (
|
|
<AnimatePresence>
|
|
{restaurants.map((restaurant, index) => {
|
|
if (index < currentIndex || index > currentIndex + 1)
|
|
return null;
|
|
const isTop = index === currentIndex;
|
|
return (
|
|
<SwipeableCard
|
|
key={restaurant.id}
|
|
restaurant={restaurant}
|
|
isTop={isTop}
|
|
onSwipe={handleSwipe}
|
|
registerSwipe={isTop ? registerSwipe : undefined}
|
|
likeCount={likeCounts[restaurant.id] ?? 0}
|
|
/>
|
|
);
|
|
})}
|
|
</AnimatePresence>
|
|
)}
|
|
|
|
{showWaiting && (
|
|
<div className="flex h-full flex-col items-center justify-center gap-4">
|
|
<div className="h-5 w-5 animate-spin rounded-full border-2 border-zinc-300 border-t-emerald-500" />
|
|
<p className="text-sm font-medium text-zinc-500">等待其他人完成选择</p>
|
|
<WaitingProgress
|
|
userId={userId}
|
|
swipeCounts={swipeCounts}
|
|
total={restaurants.length}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<AnimatePresence>
|
|
{bubble && (
|
|
<motion.div
|
|
className="absolute left-1/2 top-4 z-30 flex -translate-x-1/2 items-center gap-1.5 rounded-full bg-rose-500 px-3.5 py-1.5 text-xs font-semibold text-white shadow-lg"
|
|
initial={{ opacity: 0, y: -16, x: "-50%" }}
|
|
animate={{ opacity: 1, y: 0, x: "-50%" }}
|
|
exit={{ opacity: 0, y: -16, x: "-50%" }}
|
|
transition={{ type: "spring", stiffness: 400, damping: 25 }}
|
|
>
|
|
<Heart size={12} className="fill-white" />
|
|
{bubble}
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
|
|
<ActionButtons onAction={handleButtonAction} disabled={isDone} />
|
|
|
|
{showMatch && matchRestaurant && (
|
|
<MatchResult
|
|
restaurant={matchRestaurant}
|
|
matchType={matchType ?? "unanimous"}
|
|
matchLikes={matchLikes}
|
|
runnerUps={runnerUps}
|
|
allRestaurants={restaurants}
|
|
userCount={userCount}
|
|
onReset={handleReset}
|
|
onNarrow={handleNarrow}
|
|
resetting={resetting}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|