// Spiele (Games) screen + Crew screen
// How many games a user may shortlist as their "picks".
const MAX_PICKS = 33;
function ScreenSpiele({ wide, activeGroupId, groupGames, onToggleGroupGame, steamBusy, steamStatus, onDismissSteamStatus }) {
const t = window.t;
const de = (window.__LANG || 'de') !== 'en';
// Multiplayer is the default view — it's a group-gaming app, so co-op/multi
// games are what people usually want to pick for a session.
const [filter, setFilter] = React.useState('multi');
const [myPicks, setMyPicks] = React.useState(window.PICKS.me);
// "Hide single-player games" profile preference (default on). When active the
// multiplayer/single filter chips are pointless, so they're removed.
const [hideSingle, setHideSingle] = React.useState(window.__MY_HIDE_SINGLE !== false);
React.useEffect(() => {
const onPrefs = () => setHideSingle(window.__MY_HIDE_SINGLE !== false);
window.addEventListener('zocker-prefs-changed', onPrefs);
return () => window.removeEventListener('zocker-prefs-changed', onPrefs);
}, []);
const steamConnected = !!window.__MY_STEAM?.connected;
const steamCount = (window.MY_LIBRARY || []).filter(g => g.source === 'steam').length;
const startSteamLogin = () => {
window.location.href = `${window.API_BASE || ''}/api/steam/login`;
};
// Link straight to the user's Steam privacy settings (game details).
const steamPrivacyUrl = steamStatus?.steamId
? `https://steamcommunity.com/profiles/${steamStatus.steamId}/edit/settings`
: 'https://steamcommunity.com/my/edit/settings';
// Manual add (search) state
const [searchOpen, setSearchOpen] = React.useState(false);
const [query, setQuery] = React.useState('');
const [results, setResults] = React.useState([]);
const [searching, setSearching] = React.useState(false);
const [searchErr, setSearchErr] = React.useState(null);
const [, forceRerender] = React.useReducer(x => x + 1, 0);
const searchPanelRef = React.useRef(null);
const searchBtnRef = React.useRef(null);
// Has the initial DB load settled? While it hasn't (or a Steam import is
// running) and we have no games yet, show a spinner instead of an empty list.
const dataReady = window.useDataReady ? window.useDataReady() : true;
// Re-render when games arrive after this screen mounted (Steam import, late
// crew-member loads) so they show up without needing a tab switch.
React.useEffect(() => {
const onGames = () => forceRerender();
window.addEventListener('zocker-games-updated', onGames);
return () => window.removeEventListener('zocker-games-updated', onGames);
}, []);
// Close the manual-add panel when clicking anywhere outside it
React.useEffect(() => {
if (!searchOpen) return;
const onDown = (e) => {
if (searchPanelRef.current?.contains(e.target)) return;
if (searchBtnRef.current?.contains(e.target)) return;
setSearchOpen(false);
};
document.addEventListener('mousedown', onDown);
document.addEventListener('touchstart', onDown);
return () => {
document.removeEventListener('mousedown', onDown);
document.removeEventListener('touchstart', onDown);
};
}, [searchOpen]);
const runSearch = async (e) => {
e?.preventDefault();
if (!query.trim()) return;
setSearching(true); setSearchErr(null);
const res = await window.fbSearchGames(query.trim());
setSearching(false);
if (!res.ok) setSearchErr(de ? 'Suche fehlgeschlagen. Backend/API-Key konfiguriert?' : 'Search failed. Is the backend/API key set up?');
setResults(res.games || []);
};
const addManualGame = async (g) => {
await window.fbAddGame({
id: g.id, title: g.title, img: g.img, tag: g.tag || 'game',
genre: g.genre || '', modes: g.modes || [],
plat: ['manual'], source: 'manual',
});
forceRerender();
};
// Groups the user is in (so we can show toggle chips for them)
const myGroups = window.GROUPS.filter(g => g.memberIds.includes('me'));
// Group scope for vote counting
const scopeMemberIds = activeGroupId === 'all'
? Object.keys(window.PICKS)
: window.GROUPS_BY_ID[activeGroupId].memberIds;
// The library shown here is the user's OWN games only — never games shared via
// crew members' libraries. (window.GAMES is the merged catalog of everyone's
// games; window.MY_LIBRARY is just mine.)
const myLibrary = window.MY_LIBRARY || [];
// Distinct genres present in my own library → one filter badge each (sorted).
const genreList = React.useMemo(() => {
const set = new Set();
for (const g of myLibrary) {
const label = window.gameGenreLabel(g);
if (label) set.add(label);
}
return [...set].sort((a, b) => a.localeCompare(b));
}, [myLibrary.length, filter]);
// With the preference on, the multi/single chips are hidden — fall back to
// "all" if one of them was the active filter.
const effFilter = hideSingle && (filter === 'multi' || filter === 'single') ? 'all' : filter;
const filtered = myLibrary.filter(g => {
// Global preference: hide every non-multiplayer game.
if (hideSingle && !window.gameIsMultiplayer(g)) return false;
if (effFilter === 'all') return true;
if (effFilter === 'steam') return g.plat.includes('steam');
if (effFilter === 'multi') return window.gameIsMultiplayer(g);
if (effFilter === 'single') return (g.modes || []).includes('single') && !window.gameIsMultiplayer(g);
if (effFilter.startsWith('genre:')) return window.gameGenreLabel(g) === effFilter.slice(6);
return true;
});
// Sort order:
// 1. the user's own library always bubbles to the top, then
// 2. when a specific crew is active, games excluded from it sink to the bottom.
// groupGames[groupId] holds the ids EXCLUDED from that group; by default every
// game is available for every group.
const mineIds = new Set((window.MY_LIBRARY || []).map(g => g.id));
const excludedFromGroup = (gid) =>
activeGroupId !== 'all' && (groupGames[activeGroupId] || []).includes(gid);
const sorted = [...filtered].sort((a, b) => {
const am = mineIds.has(a.id) ? 0 : 1;
const bm = mineIds.has(b.id) ? 0 : 1;
if (am !== bm) return am - bm;
const ax = excludedFromGroup(a.id) ? 1 : 0;
const bx = excludedFromGroup(b.id) ? 1 : 0;
return ax - bx;
});
// Show the loading spinner while the DB load (or a Steam import) is still in
// flight and we don't yet have anything to display.
const gamesLoading = (!dataReady || steamBusy) && sorted.length === 0;
const togglePick = (gid) => {
setMyPicks(prev => {
const next = prev.includes(gid)
? prev.filter(x => x !== gid)
: prev.length >= MAX_PICKS ? prev : [...prev, gid];
window.fbSavePicks?.(next);
return next;
});
};
const voteCount = (gid) => {
let n = 0;
for (const fid of scopeMemberIds) {
if (fid === 'me') {
if (myPicks.includes(gid)) n++;
} else if (window.PICKS[fid]?.includes(gid)) n++;
}
return n;
};
const scopeSize = scopeMemberIds.length;
return (
{de ? 'Dein Steam-Profil ist privat' : 'Your Steam profile is private'}
{de
? 'Wir konnten deine Bibliothek nicht laden. Stelle in den Steam-Datenschutzeinstellungen „Spieldetails" auf Öffentlich – danach erneut verbinden.'
: 'We couldn\'t load your library. In your Steam privacy settings, set "Game details" to Public, then connect again.'}
{de
? 'Beim Import ist etwas schiefgelaufen. Bitte versuche es erneut.'
: 'Something went wrong during import. Please try again.'}
{steamStatus.message ? ` (${steamStatus.message})` : ''}
)}
)}
{!steamConnected && !steamStatus && (
{de
? 'Verbinde Steam, um deine echte Bibliothek zu importieren. Dein Steam-Profil muss „Spieldetails" öffentlich haben.'
: 'Connect Steam to import your real library. Your Steam profile\'s game details must be public.'}
{myGroups.map(grp => {
// Available for the group by default; "excluded" when listed.
const excluded = (groupGames[grp.id] || []).includes(g.id);
return (
);
})}
);
})}
)}
);
}
function ConnectionChip({ label, connected, count, onClick }) {
return (
);
}
// Crew screen — groups + members
function ScreenCrew({ wide, activeGroupId, onChangeGroup, onOpenWeekly, onOpenNewGroup, onOpenAddFriend }) {
const t = window.t;
const [openGroupId, setOpenGroupId] = React.useState(null);
const [openPersonId, setOpenPersonId] = React.useState(null);
const [priorityMode, setPriorityMode] = React.useState(false);
// Listed in crew-priority order so the most important crew is always on top.
const myGroups = window.groupsByPriority(window.GROUPS.filter(g => g.memberIds.includes('me')));
const canPrioritize = myGroups.length > 1;
// Person detail — clicking a member opens a page with all their games.
// Takes priority so it can be opened from the group view too.
if (openPersonId && window.FRIENDS_BY_ID[openPersonId]) {
return setOpenPersonId(null)} />;
}
// Group detail — open one group to see all its members
const openGroup = openGroupId ? window.GROUPS_BY_ID[openGroupId] : null;
if (openGroup) {
return setOpenGroupId(null)}
onOpenAddFriend={onOpenAddFriend} onOpenPerson={setOpenPersonId} />;
}
// Members in scope
const memberIds = activeGroupId === 'all'
? [...new Set(window.GROUPS.flatMap(g => g.memberIds))]
: window.GROUPS_BY_ID[activeGroupId].memberIds;
const members = memberIds.map(id => window.FRIENDS_BY_ID[id]).filter(Boolean);
const onlineCount = members.filter(m => m.online).length;
return (
);
}
// Number of games for a member (library if we have it, else their picks)
function memberGameCount(id) {
if (id === 'me') return (window.MY_LIBRARY?.length) || (window.PICKS.me?.length) || 0;
return (window.PICKS[id]?.length) || 0;
}
// Group detail — header + full member list (name, gamertag, number of games)
function GroupDetail({ wide, group, onBack, onOpenAddFriend, onOpenPerson }) {
const t = window.t;
const members = group.memberIds.map(id => window.FRIENDS_BY_ID[id]).filter(Boolean);
return (
{/* Group header */}
{group.glyph}
{window.groupName(group)}
{t('members_count', members.length)}
{members.map(f => onOpenPerson?.(f.id)} />)}
);
}
function GroupMemberRow({ friend, onOpen }) {
const t = window.t;
const isMe = friend.id === 'me';
const gamerTag = friend.gamertag && friend.gamertag.trim();
const games = memberGameCount(friend.id);
return (
{friend.name}{isMe && · {t('du')}}
{gamerTag ? `@${gamerTag}` : t('no_gamertag')}
{games}
{t('spiele')}
);
}
function GroupCard({ group, active, onSelect }) {
const t = window.t;
const members = group.memberIds.map(id => window.FRIENDS_BY_ID[id]).filter(Boolean);
const onlineN = members.filter(m => m.online).length;
return (
);
}
// One row in the priority list — looks like a GroupCard but carries a rank
// badge + drag handle and acts as the drag grip (pointer events live on it).
function PriorityRow({ group: g, rank, dragging, style, onGrab }) {
const t = window.t;
const rowRef = React.useRef(null);
return (
);
}
// All games a person has shared — their full library if we have it,
// otherwise their current picks resolved from the catalog.
function personGames(id) {
const lib = id === 'me' ? (window.MY_LIBRARY || []) : ((window.FRIEND_LIBRARY || {})[id] || []);
if (lib && lib.length) return lib;
return (window.PICKS[id] || []).map(gid => window.GAMES_BY_ID[gid]).filter(Boolean);
}
// Person detail — header + the full list of games this person has.
function PersonDetail({ wide, personId, onBack }) {
const t = window.t;
const friend = window.FRIENDS_BY_ID[personId];
if (!friend) return null;
const isMe = personId === 'me';
const gamerTag = friend.gamertag && friend.gamertag.trim();
const games = personGames(personId);
const pickIds = new Set(window.PICKS[personId] || []);
const picksCount = (window.PICKS[personId] || []).length;
return (