// Cloud-synced game collections — favorites / bookmarks.
// Supports REST operations with Clerk authentication headers and fallback mock storage.
(function() {
// Local translation wrapper helper
const t = function(key, fallback) {
if (window.t) {
const resolved = window.t(key);
if (resolved !== key) return resolved;
}
return fallback !== undefined ? fallback : key;
};
// Local copy of the screenshot URL resolver to keep collections.jsx self-contained.
function favShotUrl(path) {
if (!path) return '';
const base = window.SCREENSHOT_BASE_URL || '';
if (base) {
const cleanBase = base.endsWith('/') ? base : base + '/';
return cleanBase + path.replace(/\\/g, '/');
}
return path;
}
// ── Favorites REST client ───────────────────────────────────────────────────
const FAV_STORE_KEY = 'archive_favorites';
const FAV_NET_DELAY = 380; // simulated latency for the mock transport
function favWait(ms) { return new Promise((r) => setTimeout(r, ms)); }
function favMockRead() {
try { return JSON.parse(localStorage.getItem(FAV_STORE_KEY)) || []; } catch (e) { return []; }
}
function favMockWrite(ids) {
try { localStorage.setItem(FAV_STORE_KEY, JSON.stringify(ids)); } catch (e) {}
// Broadcast so every mounted button / the collections grid stay in sync.
window.dispatchEvent(new CustomEvent('favorites:changed', { detail: ids.slice() }));
}
const FavoritesAPI = {
base() { return window.FAVORITES_API_BASE || ''; },
async getHeaders() {
const headers = {};
if (typeof Clerk !== 'undefined' && Clerk.session) {
const token = await Clerk.session.getToken();
if (token) {
headers['Authorization'] = `Bearer ${token}`;
}
}
return headers;
},
// GET /api/favorites -> number[]
async list() {
const base = this.base();
const headers = await this.getHeaders();
if (base || headers['Authorization']) {
const res = await fetch((base || '') + '/api/favorites', { headers });
if (!res.ok) throw new Error('GET /api/favorites -> ' + res.status);
const data = await res.json();
return Array.isArray(data) ? data : (data.ids || []);
}
await favWait(FAV_NET_DELAY);
return favMockRead();
},
// POST /api/favorites { gameId }
async add(gameId) {
const base = this.base();
const headers = await this.getHeaders();
if (base || headers['Authorization']) {
const res = await fetch((base || '') + '/api/favorites', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
...headers
},
body: JSON.stringify({ gameId }),
});
if (!res.ok) throw new Error('POST /api/favorites -> ' + res.status);
const ids = favMockRead();
if (!ids.includes(gameId)) ids.unshift(gameId);
favMockWrite(ids);
return;
}
await favWait(FAV_NET_DELAY);
const ids = favMockRead();
if (!ids.includes(gameId)) ids.unshift(gameId);
favMockWrite(ids);
},
// DELETE /api/favorites/:gameId
async remove(gameId) {
const base = this.base();
const headers = await this.getHeaders();
if (base || headers['Authorization']) {
const res = await fetch((base || '') + '/api/favorites/' + gameId, {
method: 'DELETE',
headers
});
if (!res.ok) throw new Error('DELETE /api/favorites -> ' + res.status);
favMockWrite(favMockRead().filter((x) => x !== gameId));
return;
}
await favWait(FAV_NET_DELAY);
favMockWrite(favMockRead().filter((x) => x !== gameId));
},
};
// ── Hook: live list of favorite ids ─────────────────────────────────────────
function useFavorites(auth) {
const [ids, setIds] = React.useState(null); // null = loading
const [error, setError] = React.useState(false);
const load = React.useCallback(() => {
if (auth === 'out') { setIds([]); setError(false); return; }
setError(false);
setIds(null);
FavoritesAPI.list().then(setIds).catch(() => { setError(true); setIds([]); });
}, [auth]);
React.useEffect(() => { load(); }, [load]);
React.useEffect(() => {
const onChange = (e) => setIds(e.detail.slice());
window.addEventListener('favorites:changed', onChange);
return () => window.removeEventListener('favorites:changed', onChange);
}, []);
return { ids, error, reload: load };
}
// ── Favorite (bookmark) toggle button ───────────────────────────────────────
// variant: undefined (drawer, 40px square) | 'card' (corner pill on a FavCard)
function FavoriteButton({ gameId, auth, variant }) {
const [fav, setFav] = React.useState(false);
const [busy, setBusy] = React.useState(false);
const [pop, setPop] = React.useState(false);
const [ready, setReady] = React.useState(false);
// Hydrate initial state from the API.
React.useEffect(() => {
let alive = true;
setReady(false);
FavoritesAPI.list()
.then((list) => { if (alive) { setFav(list.includes(gameId)); setReady(true); } })
.catch(() => { if (alive) setReady(true); });
return () => { alive = false; };
}, [gameId]);
// Stay in sync with changes triggered elsewhere.
React.useEffect(() => {
const onChange = (e) => setFav(e.detail.includes(gameId));
window.addEventListener('favorites:changed', onChange);
return () => window.removeEventListener('favorites:changed', onChange);
}, [gameId]);
if (auth === 'out') return null;
const toggle = async (e) => {
if (e) e.stopPropagation();
if (busy || !ready) return;
const next = !fav;
setBusy(true);
setFav(next); // optimistic
if (next) { setPop(true); setTimeout(() => setPop(false), 420); }
try {
if (next) await FavoritesAPI.add(gameId);
else await FavoritesAPI.remove(gameId);
if (window.pushToast) {
window.pushToast(
next ? t('fav.added', 'Saved to My Collections') : t('fav.removed', 'Removed from My Collections'),
'', next ? 'success' : 'warn');
}
} catch (err) {
setFav(!next); // rollback on failure
if (window.pushToast) {
window.pushToast(t('fav.error', "Couldn't sync favorite"), t('fav.errorSub', 'Check your connection and try again'), 'error');
}
} finally {
setBusy(false);
}
};
const label = fav ? t('fav.remove', 'Remove from My Collections') : t('fav.save', 'Save to My Collections');
const cls = 'fav-btn'
+ (variant === 'card' ? ' fav-btn-card' : '')
+ (fav ? ' on' : '')
+ (pop ? ' pop' : '')
+ (busy ? ' busy' : '');
return (
);
}
// ── Visual card for a saved game ────────────────────────────────────────────
function FavCard({ game, auth, onOpen }) {
const shots = (window.DATA.SCREENSHOTS && window.DATA.SCREENSHOTS[game.id]) || [];
const shot = shots[0];
return (
onOpen(game)}>
{shot ? (
})
) : (
)}
#{game.id}
{game.flags.local && {window.ic.hdd}}
{game.flags.perf && {window.ic.trophy}}
{game.flags.broken && {window.ic.broken}}
{game.title}
{t('card.by', 'by')} {game.creator}
{window.ic.star}{game.rating ? game.rating.toFixed(1) : 'N/A'}
{window.ic.flame}{game.difficulty !== null ? game.difficulty : 'N/A'}
{game.reviews} {t('card.rev', 'rev')}
{t('nav.library', 'Library')}/{t('nav.collections', 'My Collections')}
);
let body;
if (auth === 'out') {
body = (
);
} else if (ids === null) {
body = {Array.from({ length: 8 }).map((_, i) => )}
;
} else if (error) {
body = ;
} else if (games.length === 0) {
body = (
{window.ic.starOutline}
{t('fav.empty.title', 'No saved games yet')}
{t('fav.empty.body', 'Tap the bookmark on any game to add it here. Your collection syncs to the cloud across every device you sign in on.')}
);
} else {
body = (
{games.map((g) => )}
);
}
return (
{header}
{window.ic.star}
{t('nav.collections', 'My Collections')}
{count != null && count > 0 && {count}}
{t('fav.subtitle', 'Your cloud-synced favorites. Bookmarked games appear here and stay in sync across all your devices.')}
{body}