diff --git a/app.js b/app.js
index fdd9e373..47e14f70 100644
--- a/app.js
+++ b/app.js
@@ -30,7 +30,6 @@ const BIOS = [
"Will beat you at Mario Kart.",
"Currently planning the next trip."
];
-
const UNSPLASH_SEEDS = [
"1515462277126-2b47b9fa09e6",
"1520975916090-3105956dac38",
@@ -53,6 +52,14 @@ function imgFor(seed) {
function generateProfiles(count = 12) {
const profiles = [];
for (let i = 0; i < count; i++) {
+ // Pick 3 unique seeds per profile so double-tap has photos to cycle through.
+ // Fisher-Yates produces an unbiased shuffle (sort-based shuffle is biased).
+ const shuffled = [...UNSPLASH_SEEDS];
+ for (let j = shuffled.length - 1; j > 0; j--) {
+ const k = Math.floor(Math.random() * (j + 1));
+ [shuffled[j], shuffled[k]] = [shuffled[k], shuffled[j]];
+ }
+ const imgs = shuffled.slice(0, 3).map(imgFor);
profiles.push({
id: `p_${i}_${Date.now().toString(36)}`,
name: sample(FIRST_NAMES),
@@ -61,70 +68,131 @@ function generateProfiles(count = 12) {
title: sample(JOBS),
bio: sample(BIOS),
tags: pickTags(),
- img: imgFor(sample(UNSPLASH_SEEDS)),
+ imgs,
});
}
return profiles;
}
// -------------------
-// UI rendering
+// DOM refs
// -------------------
-const deckEl = document.getElementById("deck");
-const shuffleBtn = document.getElementById("shuffleBtn");
-const likeBtn = document.getElementById("likeBtn");
-const nopeBtn = document.getElementById("nopeBtn");
+const deckEl = document.getElementById("deck");
+const shuffleBtn = document.getElementById("shuffleBtn");
+const likeBtn = document.getElementById("likeBtn");
+const nopeBtn = document.getElementById("nopeBtn");
const superLikeBtn = document.getElementById("superLikeBtn");
let profiles = [];
+let dismissTimerId = null; // track in-flight dismissal timer so Shuffle can cancel it
+
+// -------------------
+// Card builder
+// -------------------
+function buildCard(p, idx, total) {
+ const card = document.createElement("article");
+ card.className = "card";
+ // Higher z-index for lower idx so profiles[0] sits on top.
+ card.style.zIndex = total - idx;
+ card.dataset.profileIdx = idx;
+ card.dataset.photoIdx = "0";
+
+ // Swipe overlay labels
+ const likeLabel = document.createElement("div");
+ likeLabel.className = "swipe-label swipe-label--like";
+ likeLabel.textContent = "LIKE";
+
+ const nopeLabel = document.createElement("div");
+ nopeLabel.className = "swipe-label swipe-label--nope";
+ nopeLabel.textContent = "NOPE";
+
+ const superLabel = document.createElement("div");
+ superLabel.className = "swipe-label swipe-label--super";
+ superLabel.textContent = "SUPER";
+
+ // Photo
+ const img = document.createElement("img");
+ img.className = "card__media";
+ img.src = p.imgs[0];
+ img.alt = `${p.name} — profile photo`;
+ img.draggable = false;
+ // Some Unsplash seeds are stale (photo removed/private). Fall back to picsum.
+ img.onerror = () => {
+ img.onerror = null; // prevent infinite error loop
+ img.src = `https://picsum.photos/seed/${p.id}-0/1200/800`;
+ };
+
+ // Photo dots
+ const dots = document.createElement("div");
+ dots.className = "card__dots";
+ p.imgs.forEach((_, di) => {
+ const dot = document.createElement("span");
+ dot.className = "dot" + (di === 0 ? " dot--active" : "");
+ dots.appendChild(dot);
+ });
+
+ // Card body
+ const body = document.createElement("div");
+ body.className = "card__body";
+
+ const titleRow = document.createElement("div");
+ titleRow.className = "title-row";
+ // Use textContent instead of innerHTML to avoid injection if data ever comes
+ // from an external source.
+ const nameEl = document.createElement("h2");
+ nameEl.className = "card__title";
+ nameEl.textContent = p.name;
+ const ageEl = document.createElement("span");
+ ageEl.className = "card__age";
+ ageEl.textContent = p.age;
+ titleRow.appendChild(nameEl);
+ titleRow.appendChild(ageEl);
+
+ const meta = document.createElement("div");
+ meta.className = "card__meta";
+ meta.textContent = `${p.title} • ${p.city}`;
+ const chips = document.createElement("div");
+ chips.className = "card__chips";
+ p.tags.forEach(t => {
+ const c = document.createElement("span");
+ c.className = "chip";
+ c.textContent = t;
+ chips.appendChild(c);
+ });
+
+ body.appendChild(titleRow);
+ body.appendChild(meta);
+ body.appendChild(chips);
+
+ card.appendChild(likeLabel);
+ card.appendChild(nopeLabel);
+ card.appendChild(superLabel);
+ card.appendChild(img);
+ card.appendChild(dots);
+ card.appendChild(body);
+
+ return card;
+}
+
+// -------------------
+// Deck rendering
+// -------------------
function renderDeck() {
+ // Cancel any in-flight dismissal timer so its callback can't attach duplicate
+ // listeners to the freshly-rendered deck.
+ clearTimeout(dismissTimerId);
+ dismissTimerId = null;
+
deckEl.setAttribute("aria-busy", "true");
deckEl.innerHTML = "";
profiles.forEach((p, idx) => {
- const card = document.createElement("article");
- card.className = "card";
-
- const img = document.createElement("img");
- img.className = "card__media";
- img.src = p.img;
- img.alt = `${p.name} — profile photo`;
-
- const body = document.createElement("div");
- body.className = "card__body";
-
- const titleRow = document.createElement("div");
- titleRow.className = "title-row";
- titleRow.innerHTML = `
- ${p.name}
- ${p.age}
- `;
-
- const meta = document.createElement("div");
- meta.className = "card__meta";
- meta.textContent = `${p.title} • ${p.city}`;
-
- const chips = document.createElement("div");
- chips.className = "card__chips";
- p.tags.forEach((t) => {
- const c = document.createElement("span");
- c.className = "chip";
- c.textContent = t;
- chips.appendChild(c);
- });
-
- body.appendChild(titleRow);
- body.appendChild(meta);
- body.appendChild(chips);
-
- card.appendChild(img);
- card.appendChild(body);
-
- deckEl.appendChild(card);
+ deckEl.appendChild(buildCard(p, idx, profiles.length));
});
deckEl.removeAttribute("aria-busy");
+ attachTopCardHandlers();
}
function resetDeck() {
@@ -132,17 +200,278 @@ function resetDeck() {
renderDeck();
}
-// Controls (intentionally not implemented)
-likeBtn.addEventListener("click", () => {
- console.log("Like clicked.");
-});
-nopeBtn.addEventListener("click", () => {
- console.log("Nope clicked.");
-});
-superLikeBtn.addEventListener("click", () => {
- console.log("Super Like clicked.");
-});
-shuffleBtn.addEventListener("click", resetDeck);
+// -------------------
+// Photo cycling (double-tap)
+// -------------------
+function cyclePhoto(card) {
+ const p = profiles[parseInt(card.dataset.profileIdx)];
+ const current = parseInt(card.dataset.photoIdx);
+ const next = (current + 1) % p.imgs.length;
+
+ card.dataset.photoIdx = next;
+ const img = card.querySelector(".card__media");
+ img.onerror = () => {
+ img.onerror = null;
+ img.src = `https://picsum.photos/seed/${p.id}-${next}/1200/800`;
+ };
+ img.src = p.imgs[next];
+ card.querySelectorAll(".dot").forEach((dot, i) => {
+ dot.classList.toggle("dot--active", i === next);
+ });
+}
+
+// -------------------
+// Backend API
+// -------------------
+const API_BASE = "http://localhost:3000";
+
+// -------------------
+// User identity (persisted in localStorage so push subscriptions are tied to this browser)
+// -------------------
+const USER_ID_KEY = "tinder_user_id";
+
+function getOrCreateUserId() {
+ let userId = localStorage.getItem(USER_ID_KEY);
+ if (!userId) {
+ userId = "u_" + Date.now().toString(36) + "_" + Math.random().toString(36).slice(2);
+ localStorage.setItem(USER_ID_KEY, userId);
+ }
+ return userId;
+}
+
+function recordSwipe(profile, action) {
+ fetch(`${API_BASE}/api/swipes`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ profileId: profile.id,
+ profileName: profile.name,
+ action,
+ userId: getOrCreateUserId(),
+ }),
+ }).catch(err => console.warn("Swipe not recorded:", err.message));
+}
+
+// -------------------
+// Push notifications
+// -------------------
+function urlBase64ToUint8Array(base64String) {
+ const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
+ const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
+ const rawData = atob(base64);
+ const outputArray = new Uint8Array(rawData.length);
+ for (let i = 0; i < rawData.length; i++) {
+ outputArray[i] = rawData.charCodeAt(i);
+ }
+ return outputArray;
+}
+
+async function setupPushNotifications() {
+ if (!("serviceWorker" in navigator)) {
+ console.log("Push: service workers not supported in this browser.");
+ return;
+ }
+ if (!("PushManager" in window)) {
+ console.log("Push: Push API not supported in this browser.");
+ return;
+ }
+
+ try {
+ const registration = await navigator.serviceWorker.register("/sw.js");
+ console.log("Push: service worker registered.");
+
+ const permission = await Notification.requestPermission();
+ if (permission !== "granted") {
+ console.log("Push: notification permission denied.");
+ return;
+ }
+
+ // Fetch the server's VAPID public key
+ const resp = await fetch(`${API_BASE}/api/push/vapid-public-key`);
+ if (!resp.ok) throw new Error("Failed to fetch VAPID public key.");
+ const { publicKey } = await resp.json();
+
+ // Subscribe through the browser's Push Manager
+ const subscription = await registration.pushManager.subscribe({
+ userVisibleOnly: true,
+ applicationServerKey: urlBase64ToUint8Array(publicKey),
+ });
+
+ // Send subscription to backend
+ const userId = getOrCreateUserId();
+ await fetch(`${API_BASE}/api/push/subscribe`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ userId, subscription }),
+ });
+
+ console.log("Push: subscribed successfully. Matches will trigger notifications!");
+ } catch (err) {
+ console.warn("Push: setup failed:", err.message);
+ }
+}
+
+// -------------------
+// Card dismissal
+// -------------------
+function dismissTop(direction) {
+ const card = deckEl.firstElementChild;
+ if (!card || card.classList.contains("card--leaving")) return;
+ card.classList.add("card--leaving");
+
+ const profile = profiles[parseInt(card.dataset.profileIdx)];
+ const action = direction === "super" ? "superlike" : direction;
+ recordSwipe(profile, action);
+
+ const likeLabel = card.querySelector(".swipe-label--like");
+ const nopeLabel = card.querySelector(".swipe-label--nope");
+ const superLabel = card.querySelector(".swipe-label--super");
+
+ let tx, ty, rot;
+ if (direction === "like") {
+ tx = "160%"; ty = "-10%"; rot = "30deg";
+ likeLabel.style.opacity = "1";
+ } else if (direction === "nope") {
+ tx = "-160%"; ty = "-10%"; rot = "-30deg";
+ nopeLabel.style.opacity = "1";
+ } else {
+ tx = "0"; ty = "-160%"; rot = "0deg";
+ superLabel.style.opacity = "1";
+ }
+
+ card.style.transition = "transform 380ms ease, opacity 380ms ease";
+ card.style.transform = `translate(${tx}, ${ty}) rotate(${rot})`;
+ card.style.opacity = "0";
+
+ dismissTimerId = setTimeout(() => {
+ dismissTimerId = null;
+ card.remove();
+ if (deckEl.children.length === 0) {
+ showEmptyState();
+ } else {
+ attachTopCardHandlers();
+ }
+ }, 380);
+}
+
+function showEmptyState() {
+ deckEl.innerHTML = `
+
+
👀
+
You've seen everyone!
+
Hit Shuffle to meet more people.
+
🔥
Tinder Clone
- frontend only
+ match notifications