Add left/right/up drag swipes on dating match cards.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
eric
parent
bdf0516197
commit
681879b28e
@ -10457,6 +10457,93 @@ img { max-width: 100%; display: block; }
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dating-deck {
|
||||
position: relative;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
min-height: 360px;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.dating-card-next {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: scale(0.96);
|
||||
opacity: 0.55;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.dating-card-top {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
cursor: grab;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.dating-card-top.dragging {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.dating-card-top.fly-left {
|
||||
animation: dating-fly-left 0.22s ease-in forwards;
|
||||
}
|
||||
.dating-card-top.fly-right {
|
||||
animation: dating-fly-right 0.22s ease-in forwards;
|
||||
}
|
||||
.dating-card-top.fly-up {
|
||||
animation: dating-fly-up 0.22s ease-in forwards;
|
||||
}
|
||||
|
||||
@keyframes dating-fly-left {
|
||||
to { transform: translate(-140%, 20px) rotate(-18deg); opacity: 0; }
|
||||
}
|
||||
@keyframes dating-fly-right {
|
||||
to { transform: translate(140%, 20px) rotate(18deg); opacity: 0; }
|
||||
}
|
||||
@keyframes dating-fly-up {
|
||||
to { transform: translate(0, -140%) rotate(-4deg); opacity: 0; }
|
||||
}
|
||||
|
||||
.dating-stamp {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
padding: 6px 12px;
|
||||
border: 3px solid;
|
||||
border-radius: 8px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
.dating-stamp.like {
|
||||
left: 18px;
|
||||
color: #3dd68c;
|
||||
border-color: #3dd68c;
|
||||
transform: rotate(-12deg);
|
||||
}
|
||||
.dating-stamp.nope {
|
||||
right: 18px;
|
||||
color: #ff6b6b;
|
||||
border-color: #ff6b6b;
|
||||
transform: rotate(12deg);
|
||||
}
|
||||
.dating-stamp.super {
|
||||
left: 50%;
|
||||
top: 18px;
|
||||
transform: translateX(-50%) rotate(-6deg);
|
||||
color: #ffe66d;
|
||||
border-color: #ffe66d;
|
||||
}
|
||||
|
||||
.dating-swipe-hint {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
margin: 0.25rem 0 0.75rem;
|
||||
}
|
||||
|
||||
.dating-card-photo {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 12px;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { api } from "@/lib/api";
|
||||
@ -11,6 +11,9 @@ import type { MatchIntent, MatchProfile, MatchQuota } from "@/lib/types";
|
||||
import RingNext from "@/components/RingNext";
|
||||
import { useRingSteps } from "@/lib/rings";
|
||||
|
||||
const SWIPE_THRESHOLD = 110;
|
||||
const SUPER_THRESHOLD = -120;
|
||||
|
||||
export default function DatingClient() {
|
||||
const { user, token } = useAuth();
|
||||
const router = useRouter();
|
||||
@ -25,6 +28,11 @@ export default function DatingClient() {
|
||||
const [joined, setJoined] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [matchModal, setMatchModal] = useState<{ conversationId?: string; name: string } | null>(null);
|
||||
const [drag, setDrag] = useState({ x: 0, y: 0, active: false, flying: "" });
|
||||
const startRef = useRef<{ x: number; y: number } | null>(null);
|
||||
const dragRef = useRef({ x: 0, y: 0 });
|
||||
const swipingRef = useRef(false);
|
||||
const cardRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const intents = useMemo(
|
||||
() =>
|
||||
@ -39,6 +47,7 @@ export default function DatingClient() {
|
||||
[t]
|
||||
);
|
||||
const primary = intents.slice(0, 3);
|
||||
const quotaBlocked = Boolean(quota && !quota.vip && quota.remaining <= 0);
|
||||
|
||||
const ensureJoined = useCallback(async () => {
|
||||
if (!token) return;
|
||||
@ -49,7 +58,7 @@ export default function DatingClient() {
|
||||
bio: t.dating.defaultBio,
|
||||
});
|
||||
} catch {
|
||||
// Profile may already exist — continue to candidates.
|
||||
// Profile may already exist.
|
||||
}
|
||||
}, [token, intent, t]);
|
||||
|
||||
@ -69,6 +78,7 @@ export default function DatingClient() {
|
||||
setDeck(Array.isArray(candidates) ? candidates : []);
|
||||
setQuota(q);
|
||||
setJoined(true);
|
||||
setDrag({ x: 0, y: 0, active: false, flying: "" });
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : String(err);
|
||||
setError(msg);
|
||||
@ -109,23 +119,84 @@ export default function DatingClient() {
|
||||
}
|
||||
};
|
||||
|
||||
const swipe = async (action: "like" | "dislike" | "superlike") => {
|
||||
if (!token || !deck[0]) return;
|
||||
const current = deck[0];
|
||||
try {
|
||||
const res = await api.swipe(token, current.id, action, intent);
|
||||
if (res.matched && res.match?.conversationId) {
|
||||
setMatchModal({ conversationId: res.match.conversationId, name: current.name });
|
||||
const swipe = useCallback(
|
||||
async (action: "like" | "dislike" | "superlike") => {
|
||||
if (!token || !deck[0] || swipingRef.current || quotaBlocked) return;
|
||||
swipingRef.current = true;
|
||||
const current = deck[0];
|
||||
const fly = action === "like" ? "right" : action === "dislike" ? "left" : "up";
|
||||
setDrag({ x: 0, y: 0, active: false, flying: fly });
|
||||
try {
|
||||
const res = await api.swipe(token, current.id, action, intent);
|
||||
if (res.matched && res.match?.conversationId) {
|
||||
setMatchModal({ conversationId: res.match.conversationId, name: current.name });
|
||||
}
|
||||
window.setTimeout(() => {
|
||||
setDeck((d) => d.slice(1));
|
||||
setDrag({ x: 0, y: 0, active: false, flying: "" });
|
||||
swipingRef.current = false;
|
||||
}, 220);
|
||||
const q = await api.getMatchQuota(token);
|
||||
setQuota(q);
|
||||
} catch {
|
||||
setDrag({ x: 0, y: 0, active: false, flying: "" });
|
||||
swipingRef.current = false;
|
||||
toast(t.dating.swipeFail, "error");
|
||||
}
|
||||
setDeck((d) => d.slice(1));
|
||||
const q = await api.getMatchQuota(token);
|
||||
setQuota(q);
|
||||
} catch {
|
||||
toast(t.dating.swipeFail, "error");
|
||||
}
|
||||
},
|
||||
[token, deck, intent, quotaBlocked, toast, t]
|
||||
);
|
||||
|
||||
const onPointerDown = (e: React.PointerEvent) => {
|
||||
if (quotaBlocked || swipingRef.current) return;
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.closest("button,a,input")) return;
|
||||
startRef.current = { x: e.clientX, y: e.clientY };
|
||||
dragRef.current = { x: 0, y: 0 };
|
||||
setDrag({ x: 0, y: 0, active: true, flying: "" });
|
||||
cardRef.current?.setPointerCapture(e.pointerId);
|
||||
};
|
||||
|
||||
const onPointerMove = (e: React.PointerEvent) => {
|
||||
if (!startRef.current || !drag.active) return;
|
||||
const x = e.clientX - startRef.current.x;
|
||||
const y = e.clientY - startRef.current.y;
|
||||
dragRef.current = { x, y };
|
||||
setDrag({ x, y, active: true, flying: "" });
|
||||
};
|
||||
|
||||
const endDrag = () => {
|
||||
if (!startRef.current) return;
|
||||
const { x, y } = dragRef.current;
|
||||
startRef.current = null;
|
||||
if (Math.abs(x) > SWIPE_THRESHOLD) {
|
||||
void swipe(x > 0 ? "like" : "dislike");
|
||||
return;
|
||||
}
|
||||
if (y < SUPER_THRESHOLD) {
|
||||
void swipe("superlike");
|
||||
return;
|
||||
}
|
||||
setDrag({ x: 0, y: 0, active: false, flying: "" });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (!deck[0] || matchModal || quotaBlocked) return;
|
||||
if (e.key === "ArrowLeft") void swipe("dislike");
|
||||
if (e.key === "ArrowRight") void swipe("like");
|
||||
if (e.key === "ArrowUp") void swipe("superlike");
|
||||
};
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => window.removeEventListener("keydown", onKey);
|
||||
}, [deck, matchModal, quotaBlocked, swipe]);
|
||||
|
||||
const top = deck[0];
|
||||
const next = deck[1];
|
||||
const rotate = drag.x * 0.06;
|
||||
const likeOpacity = Math.min(1, Math.max(0, drag.x / SWIPE_THRESHOLD));
|
||||
const nopeOpacity = Math.min(1, Math.max(0, -drag.x / SWIPE_THRESHOLD));
|
||||
const superOpacity = Math.min(1, Math.max(0, -drag.y / Math.abs(SUPER_THRESHOLD)));
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
@ -219,26 +290,62 @@ export default function DatingClient() {
|
||||
)}
|
||||
|
||||
{top && (
|
||||
<div className="dating-card reveal">
|
||||
<div className="dating-card-photo">{top.photo || "🧑💻"}</div>
|
||||
<h2>{top.name}</h2>
|
||||
<p className="dating-meta">
|
||||
{top.location} · {top.gender} {top.single ? `· ${top.single}` : ""}
|
||||
</p>
|
||||
<p>{top.bio}</p>
|
||||
<div className="dating-tags">
|
||||
{(top.tags || []).map((tag) => (
|
||||
<span key={tag} className="meetup-tag">
|
||||
{tag}
|
||||
<>
|
||||
<p className="dating-swipe-hint reveal">{t.dating.swipeHint}</p>
|
||||
<div className="dating-deck reveal">
|
||||
{next && (
|
||||
<div className="dating-card dating-card-next" aria-hidden>
|
||||
<div className="dating-card-photo">{next.photo || "🧑💻"}</div>
|
||||
<h2>{next.name}</h2>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
ref={cardRef}
|
||||
className={`dating-card dating-card-top${drag.active ? " dragging" : ""}${drag.flying ? ` fly-${drag.flying}` : ""}`}
|
||||
style={
|
||||
drag.flying
|
||||
? undefined
|
||||
: {
|
||||
transform: `translate(${drag.x}px, ${drag.y}px) rotate(${rotate}deg)`,
|
||||
transition: drag.active ? "none" : "transform 0.25s ease",
|
||||
}
|
||||
}
|
||||
onPointerDown={onPointerDown}
|
||||
onPointerMove={onPointerMove}
|
||||
onPointerUp={endDrag}
|
||||
onPointerCancel={endDrag}
|
||||
>
|
||||
<span className="dating-stamp like" style={{ opacity: likeOpacity }}>
|
||||
LIKE
|
||||
</span>
|
||||
))}
|
||||
<span className="dating-stamp nope" style={{ opacity: nopeOpacity }}>
|
||||
NOPE
|
||||
</span>
|
||||
<span className="dating-stamp super" style={{ opacity: superOpacity }}>
|
||||
SUPER
|
||||
</span>
|
||||
<div className="dating-card-photo">{top.photo || "🧑💻"}</div>
|
||||
<h2>{top.name}</h2>
|
||||
<p className="dating-meta">
|
||||
{top.location} · {top.gender} {top.single ? `· ${top.single}` : ""}
|
||||
</p>
|
||||
<p>{top.bio}</p>
|
||||
<div className="dating-tags">
|
||||
{(top.tags || []).map((tag) => (
|
||||
<span key={tag} className="meetup-tag">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="dating-actions">
|
||||
<div className="dating-actions reveal">
|
||||
<button
|
||||
type="button"
|
||||
className="dating-btn pass"
|
||||
onClick={() => void swipe("dislike")}
|
||||
disabled={Boolean(quota && !quota.vip && quota.remaining <= 0)}
|
||||
disabled={quotaBlocked}
|
||||
aria-label={t.dating.swipeLeft}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
@ -246,7 +353,8 @@ export default function DatingClient() {
|
||||
type="button"
|
||||
className="dating-btn super"
|
||||
onClick={() => void swipe("superlike")}
|
||||
disabled={Boolean(quota && !quota.vip && quota.remaining <= 0)}
|
||||
disabled={quotaBlocked}
|
||||
aria-label={t.dating.swipeUp}
|
||||
>
|
||||
⭐
|
||||
</button>
|
||||
@ -254,7 +362,8 @@ export default function DatingClient() {
|
||||
type="button"
|
||||
className="dating-btn like"
|
||||
onClick={() => void swipe("like")}
|
||||
disabled={Boolean(quota && !quota.vip && quota.remaining <= 0)}
|
||||
disabled={quotaBlocked}
|
||||
aria-label={t.dating.swipeRight}
|
||||
>
|
||||
♥
|
||||
</button>
|
||||
@ -269,7 +378,7 @@ export default function DatingClient() {
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!loading && joined && !top && (
|
||||
|
||||
@ -448,6 +448,10 @@ export const zh = {
|
||||
openVip: "开通 VIP",
|
||||
defaultCity: "全球",
|
||||
defaultBio: "nomadro 游民",
|
||||
swipeHint: "← 左滑跳过 · 右滑喜欢 → · 上滑超级喜欢（也可点按钮 / 方向键）",
|
||||
swipeLeft: "跳过",
|
||||
swipeRight: "喜欢",
|
||||
swipeUp: "超级喜欢",
|
||||
},
|
||||
chat: {
|
||||
tag: "✉️ MESSAGES",
|
||||
@ -1704,6 +1708,10 @@ export const en: { [K in keyof typeof zh]: typeof zh[K] extends string ? string
|
||||
openVip: "Get VIP",
|
||||
defaultCity: "Global",
|
||||
defaultBio: "nomadro nomad",
|
||||
swipeHint: "← Swipe left to pass · right to like → · up for superlike (or use buttons / arrows)",
|
||||
swipeLeft: "Pass",
|
||||
swipeRight: "Like",
|
||||
swipeUp: "Super like",
|
||||
},
|
||||
chat: {
|
||||
tag: "✉️ MESSAGES",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user