);
}
// ──────────────────────────────────────────────────────────────
// INSCRIPTION
// ──────────────────────────────────────────────────────────────
function SignupScreen({ onBack, onDone, flash }) {
const [data, setData] = React.useState({ nom: '', email: '', pwd: '', pwd2: '' });
const [c1, setC1] = React.useState(false);
const [c2, setC2] = React.useState(true);
const [submitting, setSubmitting] = React.useState(false);
const set = (k) => (e) => setData({ ...data, [k]: e.target.value });
async function submit() {
if (submitting) return;
if (!data.nom || !data.email || !data.pwd) return (flash||alert)('Remplissez tous les champs');
if (data.pwd.length < 6) return (flash||alert)('Mot de passe trop court (6 caractères minimum)');
if (data.pwd !== data.pwd2) return (flash||alert)('Les mots de passe ne correspondent pas');
if (!c2) return (flash||alert)('Acceptez les conditions pour continuer');
setSubmitting(true);
try {
const u = await LLAPI.signup(data.nom, data.email, data.pwd);
flash && flash(`Bienvenue ${u.name} !`);
onDone && onDone(u);
} catch (err) {
(flash||alert)('Inscription échouée: ' + err.message);
setSubmitting(false);
}
}
return (
Inscription
Je souhaite recevoir par e-mail des offres personnalisées et les toutes dernières nouveautés de Ludilove.
En m'inscrivant, je confirme accepter les Conditions Générales de Ludilove, avoir lu la Politique de confidentialité.
{submitting ? 'Inscription…' : "S'inscrire"}
);
}
// ──────────────────────────────────────────────────────────────
// LOGIN — connexion à un compte existant
// ──────────────────────────────────────────────────────────────
function LoginScreen({ onBack, onDone, onSignup, flash }) {
const [data, setData] = React.useState({ email: '', pwd: '' });
const [submitting, setSubmitting] = React.useState(false);
const set = (k) => (e) => setData({ ...data, [k]: e.target.value });
async function submit() {
if (submitting) return;
if (!data.email || !data.pwd) return (flash || alert)('Email et mot de passe requis');
setSubmitting(true);
try {
const u = await LLAPI.login(data.email, data.pwd);
flash && flash(`Bienvenue ${u.name} !`);
onDone && onDone(u);
} catch (err) {
(flash || alert)('Connexion échouée : ' + err.message);
setSubmitting(false);
}
}
return (
Connexion
Reconnecte-toi pour retrouver ta ludothèque et tes amis.
{submitting ? 'Connexion…' : 'Se connecter'}
Pas encore de compte ?{' '}
S'inscrire
);
}
function Checkbox({ checked, onChange, children }) {
return (
);
}
function BackHeader({ onBack, title, right }) {
return (
Demandez à vos amis d'ouvrir leur appareil photo et de viser ce QR code.
{code}
);
}
// ──────────────────────────────────────────────────────────────
// SWIPE
// ──────────────────────────────────────────────────────────────
function SwipeScreen({ onNav, onMatch, session }) {
const [deck, setDeck] = React.useState([]); // array of game objects
const [pos, setPos] = React.useState(0); // top-of-deck index
const [drag, setDrag] = React.useState({ x: 0, y: 0, dragging: false });
const [flying, setFlying] = React.useState(null);
const [infoOpen, setInfoOpen] = React.useState(false);
const [loading, setLoading] = React.useState(true);
const matchedRef = React.useRef(false);
// Load deck — uniquement depuis une vraie session
React.useEffect(() => {
(async () => {
try {
if (session?.id) {
const { deck } = await LLAPI.sessionDeck(session.id);
// Shuffle the deck client-side so each player sees a different
// random order — matches still work because matching only
// requires everyone to like the same game, order-independent.
const shuffled = [...(deck || [])];
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
setDeck(shuffled);
} else {
setDeck([]);
}
} catch (err) {
console.warn('deck:', err);
setDeck([]);
} finally {
setLoading(false);
}
})();
}, [session?.id]);
// Subscribe to SSE for match notifications from other participants.
// Also poll as a fallback — SSE can die through proxies (Cloudflare tunnel,
// mobile networks). Without polling, a match by a peer would never reach
// this client and the swipe would hang.
React.useEffect(() => {
if (!session?.id) return;
const unsub = LLAPI.subscribe(session.id, (evt) => {
if (evt.type === 'match' && evt.game && !matchedRef.current) {
matchedRef.current = true;
onMatch(evt.game);
}
});
const poll = setInterval(async () => {
if (matchedRef.current) return;
try {
const { session: s } = await LLAPI.session(session.id);
if (s?.matched_game_id && !matchedRef.current) {
const { game } = await LLAPI.game(s.matched_game_id);
if (game && !matchedRef.current) {
matchedRef.current = true;
onMatch(game);
}
}
} catch (_) {}
}, 2500);
return () => { unsub(); clearInterval(poll); };
}, [session?.id]);
const topGame = deck[pos];
async function doSwipe(dir) {
if (!topGame || matchedRef.current) return;
setFlying(dir);
const g = topGame;
setTimeout(() => {
setPos(p => p + 1);
setDrag({ x: 0, y: 0, dragging: false });
setFlying(null);
}, 280);
// Record swipe
try {
if (session?.id) {
const r = await LLAPI.swipe(session.id, g.id, dir === 'right' ? 'like' : 'pass');
if (r.matched && r.game && !matchedRef.current) {
matchedRef.current = true;
onMatch(r.game);
}
}
} catch (err) {
console.warn('swipe:', err);
}
}
function onPointerDown(e) {
setDrag({ x: 0, y: 0, dragging: true, startX: e.clientX, startY: e.clientY });
}
function onPointerMove(e) {
if (!drag.dragging) return;
setDrag({ ...drag, x: e.clientX - drag.startX, y: e.clientY - drag.startY });
}
function onPointerUp() {
if (!drag.dragging) return;
if (drag.x > 100) doSwipe('right');
else if (drag.x < -100) doSwipe('left');
else setDrag({ x: 0, y: 0, dragging: false });
}
// Build the top-3 cards (top first)
const cards = [];
for (let i = 0; i < 3; i++) {
const g = deck[pos + i];
if (g) cards.push(g);
}
const deckExhausted = !loading && deck.length > 0 && pos >= deck.length;
const deckEmpty = !loading && deck.length === 0;
return (
Swipe
{(deckEmpty || deckExhausted) && (
{deckEmpty ? (
) : (
)}
{deckEmpty ? 'Aucun jeu à proposer' : 'Fin du deck'}
{deckEmpty
? 'Vos ludothèques combinées ne contiennent aucun jeu. Ajoutez-en via le scan.'
: 'Vous avez vu tous les jeux. En attente des autres joueurs…'}
))}