feat: 拆分"再来一轮"为 Top N 决赛和换一批餐厅两个选项
This commit is contained in:
@@ -2,13 +2,27 @@ import { NextResponse } from "next/server";
|
|||||||
import { atomicUpdateRoom } from "@/lib/store";
|
import { atomicUpdateRoom } from "@/lib/store";
|
||||||
|
|
||||||
export async function POST(
|
export async function POST(
|
||||||
_req: Request,
|
req: Request,
|
||||||
{ params }: { params: Promise<{ id: string }> },
|
{ params }: { params: Promise<{ id: string }> },
|
||||||
) {
|
) {
|
||||||
const { id } = await params;
|
const { id } = await params;
|
||||||
|
|
||||||
|
let restaurantIds: string[] | undefined;
|
||||||
|
try {
|
||||||
|
const body = await req.json().catch(() => null);
|
||||||
|
if (body?.restaurantIds && Array.isArray(body.restaurantIds)) {
|
||||||
|
restaurantIds = body.restaurantIds;
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// No body or invalid JSON — plain reset
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const updated = await atomicUpdateRoom(id, (data) => {
|
const updated = await atomicUpdateRoom(id, (data) => {
|
||||||
|
if (restaurantIds && restaurantIds.length > 0) {
|
||||||
|
const idSet = new Set(restaurantIds);
|
||||||
|
data.restaurants = data.restaurants.filter((r) => idSet.has(r.id));
|
||||||
|
}
|
||||||
data.likes = {};
|
data.likes = {};
|
||||||
data.swipeCounts = {};
|
data.swipeCounts = {};
|
||||||
data.match = null;
|
data.match = null;
|
||||||
|
|||||||
@@ -34,6 +34,15 @@ export default function RoomPage() {
|
|||||||
await mutate();
|
await mutate();
|
||||||
}, [roomId, mutate]);
|
}, [roomId, mutate]);
|
||||||
|
|
||||||
|
const handleNarrow = useCallback(async (restaurantIds: string[]) => {
|
||||||
|
await fetch(`/api/room/${roomId}/reset`, {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ restaurantIds }),
|
||||||
|
});
|
||||||
|
await mutate();
|
||||||
|
}, [roomId, mutate]);
|
||||||
|
|
||||||
const initialIndex = swipeCounts[userId] ?? 0;
|
const initialIndex = swipeCounts[userId] ?? 0;
|
||||||
const ready = joined && userId && restaurants.length > 0;
|
const ready = joined && userId && restaurants.length > 0;
|
||||||
|
|
||||||
@@ -62,6 +71,7 @@ export default function RoomPage() {
|
|||||||
swipeCounts={swipeCounts}
|
swipeCounts={swipeCounts}
|
||||||
userCount={userCount}
|
userCount={userCount}
|
||||||
onReset={handleReset}
|
onReset={handleReset}
|
||||||
|
onNarrow={handleNarrow}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -15,6 +15,8 @@ import {
|
|||||||
SearchX,
|
SearchX,
|
||||||
Home,
|
Home,
|
||||||
ChevronDown,
|
ChevronDown,
|
||||||
|
Swords,
|
||||||
|
RefreshCw,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { Restaurant, MatchType, RunnerUp } from "@/types";
|
import { Restaurant, MatchType, RunnerUp } from "@/types";
|
||||||
|
|
||||||
@@ -26,6 +28,7 @@ interface MatchResultProps {
|
|||||||
allRestaurants: Restaurant[];
|
allRestaurants: Restaurant[];
|
||||||
userCount: number;
|
userCount: number;
|
||||||
onReset: () => Promise<void>;
|
onReset: () => Promise<void>;
|
||||||
|
onNarrow: (restaurantIds: string[]) => Promise<void>;
|
||||||
resetting: boolean;
|
resetting: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -163,8 +166,10 @@ export default function MatchResult({
|
|||||||
allRestaurants,
|
allRestaurants,
|
||||||
userCount,
|
userCount,
|
||||||
onReset,
|
onReset,
|
||||||
|
onNarrow,
|
||||||
resetting,
|
resetting,
|
||||||
}: MatchResultProps) {
|
}: MatchResultProps) {
|
||||||
|
const router = useRouter();
|
||||||
const [showRunnerUps, setShowRunnerUps] = useState(false);
|
const [showRunnerUps, setShowRunnerUps] = useState(false);
|
||||||
|
|
||||||
if (matchType === "no_match") {
|
if (matchType === "no_match") {
|
||||||
@@ -180,6 +185,11 @@ export default function MatchResult({
|
|||||||
})
|
})
|
||||||
.filter((x): x is { restaurant: Restaurant; likes: number } => x !== null);
|
.filter((x): x is { restaurant: Restaurant; likes: number } => x !== null);
|
||||||
|
|
||||||
|
const canNarrow = !isUnanimous && runnerUpRestaurants.length > 0;
|
||||||
|
const narrowIds = canNarrow
|
||||||
|
? [restaurant.id, ...runnerUps.map((ru) => ru.id)]
|
||||||
|
: [];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<motion.div
|
||||||
className={`fixed inset-0 z-50 flex flex-col items-center overflow-y-auto px-6 py-10 ${
|
className={`fixed inset-0 z-50 flex flex-col items-center overflow-y-auto px-6 py-10 ${
|
||||||
@@ -369,19 +379,54 @@ export default function MatchResult({
|
|||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<motion.button
|
<motion.div
|
||||||
className={`mt-4 flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${
|
className="mt-5 flex w-full flex-col items-center gap-2.5"
|
||||||
isUnanimous ? "text-emerald-200" : "text-amber-200"
|
|
||||||
}`}
|
|
||||||
onClick={onReset}
|
|
||||||
disabled={resetting}
|
|
||||||
initial={{ opacity: 0 }}
|
initial={{ opacity: 0 }}
|
||||||
animate={{ opacity: 1 }}
|
animate={{ opacity: 1 }}
|
||||||
transition={{ delay: 0.8 }}
|
transition={{ delay: 0.8 }}
|
||||||
>
|
>
|
||||||
<RotateCcw size={13} className={resetting ? "animate-spin" : ""} />
|
{canNarrow ? (
|
||||||
|
<>
|
||||||
|
<motion.button
|
||||||
|
onClick={() => onNarrow(narrowIds)}
|
||||||
|
disabled={resetting}
|
||||||
|
className="flex w-full items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30 disabled:opacity-50"
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<Swords size={15} />
|
||||||
|
{resetting ? "加载中..." : `Top ${narrowIds.length} 决赛`}
|
||||||
|
</motion.button>
|
||||||
|
<motion.button
|
||||||
|
onClick={() => router.push("/")}
|
||||||
|
className="flex items-center gap-1.5 text-sm font-medium text-amber-200 underline underline-offset-2 hover:text-white"
|
||||||
|
>
|
||||||
|
<RefreshCw size={13} />
|
||||||
|
换一批餐厅
|
||||||
|
</motion.button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<motion.button
|
||||||
|
onClick={onReset}
|
||||||
|
disabled={resetting}
|
||||||
|
className="flex items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30 disabled:opacity-50"
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<RotateCcw size={14} className={resetting ? "animate-spin" : ""} />
|
||||||
{resetting ? "重置中..." : "再来一轮"}
|
{resetting ? "重置中..." : "再来一轮"}
|
||||||
</motion.button>
|
</motion.button>
|
||||||
|
<motion.button
|
||||||
|
onClick={() => router.push("/")}
|
||||||
|
className={`flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${
|
||||||
|
isUnanimous ? "text-emerald-200" : "text-amber-200"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<RefreshCw size={13} />
|
||||||
|
换一批餐厅
|
||||||
|
</motion.button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -149,6 +149,7 @@ interface SwipeDeckProps {
|
|||||||
swipeCounts: Record<string, number>;
|
swipeCounts: Record<string, number>;
|
||||||
userCount: number;
|
userCount: number;
|
||||||
onReset: () => Promise<void>;
|
onReset: () => Promise<void>;
|
||||||
|
onNarrow: (restaurantIds: string[]) => Promise<void>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function SwipeDeck({
|
export default function SwipeDeck({
|
||||||
@@ -164,6 +165,7 @@ export default function SwipeDeck({
|
|||||||
swipeCounts,
|
swipeCounts,
|
||||||
userCount,
|
userCount,
|
||||||
onReset,
|
onReset,
|
||||||
|
onNarrow,
|
||||||
}: SwipeDeckProps) {
|
}: SwipeDeckProps) {
|
||||||
const [currentIndex, setCurrentIndex] = useState(initialIndex);
|
const [currentIndex, setCurrentIndex] = useState(initialIndex);
|
||||||
const [showMatch, setShowMatch] = useState(false);
|
const [showMatch, setShowMatch] = useState(false);
|
||||||
@@ -280,19 +282,33 @@ export default function SwipeDeck({
|
|||||||
swipeFnRef.current = null;
|
swipeFnRef.current = null;
|
||||||
}, [swipeHistory, currentIndex, roomId, userId]);
|
}, [swipeHistory, currentIndex, roomId, userId]);
|
||||||
|
|
||||||
const handleReset = useCallback(async () => {
|
const clearLocalState = useCallback(() => {
|
||||||
setResetting(true);
|
|
||||||
try {
|
|
||||||
await onReset();
|
|
||||||
setCurrentIndex(0);
|
setCurrentIndex(0);
|
||||||
setShowMatch(false);
|
setShowMatch(false);
|
||||||
setLocalMatchId(null);
|
setLocalMatchId(null);
|
||||||
setSwipeHistory([]);
|
setSwipeHistory([]);
|
||||||
prevLikeCounts.current = {};
|
prevLikeCounts.current = {};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleReset = useCallback(async () => {
|
||||||
|
setResetting(true);
|
||||||
|
try {
|
||||||
|
await onReset();
|
||||||
|
clearLocalState();
|
||||||
} finally {
|
} finally {
|
||||||
setResetting(false);
|
setResetting(false);
|
||||||
}
|
}
|
||||||
}, [onReset]);
|
}, [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 allSwiped = currentIndex >= restaurants.length;
|
||||||
const isDone = allSwiped || resolvedMatchId != null;
|
const isDone = allSwiped || resolvedMatchId != null;
|
||||||
@@ -404,6 +420,7 @@ export default function SwipeDeck({
|
|||||||
allRestaurants={restaurants}
|
allRestaurants={restaurants}
|
||||||
userCount={userCount}
|
userCount={userCount}
|
||||||
onReset={handleReset}
|
onReset={handleReset}
|
||||||
|
onNarrow={handleNarrow}
|
||||||
resetting={resetting}
|
resetting={resetting}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user