Chief/romm-web-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
romm-web-ui/client_history.txt

1071 lines
80 KiB
Plaintext
Raw Permalink Blame History

commit 37e349d3e3cc2a8bd4fb4c59c9094ab6ff1b1474
Author: roormonger <34205054+roormonger@users.noreply.github.com>
Date: Fri Mar 27 13:13:28 2026 -0400
removed junk
diff --git a/src/api/client.ts b/src/api/client.ts
index a5d20b5..a398ab6 100644
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -142,6 +142,10 @@ export interface UserProfile {
// Function to safely extract base URL
const getBaseUrl = () => {
+ // During development, if we're on localhost, we prefer relative paths to leverage the Vite proxy and avoid CORS.
+ if (import.meta.env.DEV && window.location.hostname === 'localhost') {
+ return '';
+ }
const rawUrl = import.meta.env.VITE_ROMM_BASE_URL || 'http://localhost:8080';
const cleanUrl = rawUrl.endsWith('/') ? rawUrl.slice(0, -1) : rawUrl;
return cleanUrl;
@@ -192,6 +196,7 @@ const formatDate = (unixSeconds: any) => {
export const rommApiClient = {
get apiBase() {
const cleanUrl = getBaseUrl();
+ if (cleanUrl === '') return '/api';
return cleanUrl.endsWith('/api') ? cleanUrl : `${cleanUrl}/api`;
},
@@ -437,6 +442,9 @@ export const rommApiClient = {
...(json.screenshots || []).map((s: any) => s.url ? getFullImageUrl(s.url) || '' : ''),
...(getFirst('screenshots') || [])
])).filter(Boolean) as string[],
+ notes: json.all_user_notes || [],
+ saves: json.user_saves || [],
+ states: json.user_states || [],
};
},
commit 2bb3c150f54917f5423faf00243ba87e553784a0
Author: roormonger <34205054+roormonger@users.noreply.github.com>
Date: Thu Mar 26 22:13:07 2026 -0400
pretty much completed game metadata area
diff --git a/src/api/client.ts b/src/api/client.ts
index cee0f0a..a5d20b5 100644
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -24,6 +24,18 @@ export interface RAAchievement {
badge_id: string | null;
}
+export interface HLTBMetadata {
+ main_story: number;
+ main_plus_extra: number;
+ completionist: number;
+ all_styles?: number;
+ main_story_count?: number;
+ main_plus_extra_count?: number;
+ completionist_count?: number;
+ all_styles_count?: number;
+ image?: string;
+}
+
export interface RomRAMetadata {
first_release_date?: number | null;
genres?: string[];
@@ -74,6 +86,40 @@ export interface DetailedGame extends Game {
youtubeId?: string; // YouTube ID for embed
ra_id?: number;
merged_ra_metadata?: RomRAMetadata;
+ hltb_id?: number;
+ hltb_metadata?: HLTBMetadata;
+ notes?: RomNote[];
+ saves?: RomSave[];
+ states?: RomState[];
+}
+
+export interface RomSave {
+ id: number;
+ file_name: string;
+ file_size_bytes: number;
+ emulator: string;
+ slot?: number;
+ created_at: string;
+ updated_at: string;
+}
+
+export interface RomState {
+ id: number;
+ file_name: string;
+ emulator: string;
+ created_at: string;
+ updated_at: string;
+}
+
+export interface RomNote {
+ id: number;
+ title: string;
+ content: string;
+ is_public: boolean;
+ tags?: string[];
+ username: string;
+ created_at: string;
+ updated_at: string;
}
export interface RommCollection {
@@ -384,6 +430,8 @@ export const rommApiClient = {
youtubeId: json.youtube_video_id || json.igdb_metadata?.youtube_video_id || json.launchbox_metadata?.youtube_video_id,
ra_id: json.ra_id,
merged_ra_metadata: json.merged_ra_metadata,
+ hltb_id: json.hltb_id,
+ hltb_metadata: json.hltb_metadata,
screenshots: Array.from(new Set([
...(json.merged_screenshots || []).map((s: string) => getFullImageUrl(s)),
...(json.screenshots || []).map((s: any) => s.url ? getFullImageUrl(s.url) || '' : ''),
@@ -521,5 +569,23 @@ export const rommApiClient = {
ra_username: json.ra_username,
ra_progression: json.ra_progression,
};
+ },
+
+ async fetchRomSaves(id: string): Promise<RomSave[]> {
+ const res = await fetch(`${this.apiBase}/saves?rom_id=${id}`, { headers: this.headers });
+ if (!res.ok) throw new Error('Failed to fetch saves.');
+ return res.json();
+ },
+
+ async fetchRomStates(id: string): Promise<RomState[]> {
+ const res = await fetch(`${this.apiBase}/states?rom_id=${id}`, { headers: this.headers });
+ if (!res.ok) throw new Error('Failed to fetch states.');
+ return res.json();
+ },
+
+ async fetchRomNotes(id: string): Promise<RomNote[]> {
+ const res = await fetch(`${this.apiBase}/roms/${id}/notes`, { headers: this.headers });
+ if (!res.ok) throw new Error('Failed to fetch notes.');
+ return res.json();
}
};
commit 7ccc48ae0f5f849ea3fe26199f0349ace782175b
Author: roormonger <34205054+roormonger@users.noreply.github.com>
Date: Thu Mar 26 07:13:42 2026 -0400
retro achievement integration
diff --git a/src/api/client.ts b/src/api/client.ts
index 16c6fa0..cee0f0a 100644
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -14,6 +14,43 @@ export interface Platform {
iconUrl?: string;
}
+export interface RAAchievement {
+ ra_id: number | null;
+ title: string | null;
+ description: string | null;
+ points: number | null;
+ num_awarded: number | null;
+ num_awarded_hardcore: number | null;
+ badge_id: string | null;
+}
+
+export interface RomRAMetadata {
+ first_release_date?: number | null;
+ genres?: string[];
+ companies?: string[];
+ achievements: RAAchievement[];
+}
+
+export interface EarnedAchievement {
+ id: string;
+ date: string;
+ date_hardcore?: string;
+}
+
+export interface RAProgressionResult {
+ rom_ra_id: number | null;
+ max_possible: number | null;
+ num_awarded: number | null;
+ num_awarded_hardcore: number | null;
+ most_recent_awarded_date?: string | null;
+ earned_achievements: EarnedAchievement[];
+}
+
+export interface RAProgression {
+ total: number;
+ results: RAProgressionResult[];
+}
+
export interface DetailedGame extends Game {
summary?: string;
developers?: string[];
@@ -35,6 +72,8 @@ export interface DetailedGame extends Game {
platformId?: number;
videoUrl?: string; // Direct video link
youtubeId?: string; // YouTube ID for embed
+ ra_id?: number;
+ merged_ra_metadata?: RomRAMetadata;
}
export interface RommCollection {
@@ -51,6 +90,8 @@ export interface UserProfile {
username: string;
avatarUrl?: string;
roleName: string;
+ ra_username?: string | null;
+ ra_progression?: RAProgression | null;
}
// Function to safely extract base URL
@@ -341,6 +382,8 @@ export const rommApiClient = {
platformId: json.platform_id,
videoUrl: getFullImageUrl(json.url_video || json.ss_metadata?.video_url),
youtubeId: json.youtube_video_id || json.igdb_metadata?.youtube_video_id || json.launchbox_metadata?.youtube_video_id,
+ ra_id: json.ra_id,
+ merged_ra_metadata: json.merged_ra_metadata,
screenshots: Array.from(new Set([
...(json.merged_screenshots || []).map((s: string) => getFullImageUrl(s)),
...(json.screenshots || []).map((s: any) => s.url ? getFullImageUrl(s.url) || '' : ''),
@@ -475,6 +518,8 @@ export const rommApiClient = {
username: json.username || 'Unknown',
avatarUrl: constructedAvatarUrl,
roleName: json.role?.role_name || json.role?.name || String(json.role) || 'User',
+ ra_username: json.ra_username,
+ ra_progression: json.ra_progression,
};
}
};
commit 3d593b83f05a4035fbc24a705d2f54d4f57bafd8
Author: roormonger <34205054+roormonger@users.noreply.github.com>
Date: Wed Mar 25 21:18:44 2026 -0400
more filling out of game page
diff --git a/src/api/client.ts b/src/api/client.ts
index ed0df15..16c6fa0 100644
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -33,6 +33,8 @@ export interface DetailedGame extends Game {
favorite?: boolean;
manualUrl?: string;
platformId?: number;
+ videoUrl?: string; // Direct video link
+ youtubeId?: string; // YouTube ID for embed
}
export interface RommCollection {
@@ -309,7 +311,6 @@ export const rommApiClient = {
genres: getAll('genres').map(sanitize).filter(Boolean),
franchises: getAll('franchises').map(sanitize).filter(Boolean),
releaseDate: formatDate(json.release_date || getFirst('first_release_date') || getFirst('release_date')),
- screenshots: (json.screenshots || []).map((s: any) => s.url ? getFullImageUrl(s.url) || '' : ''),
fsName: json.fs_name,
regions: regions.length > 0 ? regions : ['Global'],
players: (() => {
@@ -338,6 +339,13 @@ export const rommApiClient = {
favorite: (json.user_collections || json.rom_collections || []).some((c: any) => c.is_favorite || c.name === 'Favorites'),
manualUrl: getFullImageUrl(json.url_manual),
platformId: json.platform_id,
+ videoUrl: getFullImageUrl(json.url_video || json.ss_metadata?.video_url),
+ youtubeId: json.youtube_video_id || json.igdb_metadata?.youtube_video_id || json.launchbox_metadata?.youtube_video_id,
+ screenshots: Array.from(new Set([
+ ...(json.merged_screenshots || []).map((s: string) => getFullImageUrl(s)),
+ ...(json.screenshots || []).map((s: any) => s.url ? getFullImageUrl(s.url) || '' : ''),
+ ...(getFirst('screenshots') || [])
+ ])).filter(Boolean) as string[],
};
},
commit 2efd6cae9a334b36caf98ee7f192fdd09ab8215a
Author: roormonger <34205054+roormonger@users.noreply.github.com>
Date: Wed Mar 25 20:34:53 2026 -0400
more game page stuff
diff --git a/src/api/client.ts b/src/api/client.ts
index c1089cf..ed0df15 100644
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -32,6 +32,7 @@ export interface DetailedGame extends Game {
collections?: string[];
favorite?: boolean;
manualUrl?: string;
+ platformId?: number;
}
export interface RommCollection {
@@ -311,7 +312,22 @@ export const rommApiClient = {
screenshots: (json.screenshots || []).map((s: any) => s.url ? getFullImageUrl(s.url) || '' : ''),
fsName: json.fs_name,
regions: regions.length > 0 ? regions : ['Global'],
- players: json.players || getFirst('total_players') || getFirst('players'),
+ players: (() => {
+ let val = json.metadatum?.player_count || json.players || getFirst('player_count') || getFirst('total_players') || getFirst('players') || getFirst('max_players');
+ if (val && (String(val) === '1' || String(val).toLowerCase() === 'single player')) {
+ const modes = getAll('game_modes').map(sanitize).map(m => m.toLowerCase());
+ if (modes.includes('multiplayer') || modes.includes('co-operative') || modes.includes('split screen')) {
+ val = 'Multiplayer';
+ }
+ }
+ if (val) {
+ val = String(val);
+ if (!val.toLowerCase().includes('player')) {
+ val = `${val} ${val === '1' ? 'Player' : 'Players'}`;
+ }
+ }
+ return val;
+ })(),
rating: ratingVal ? Math.round(Number(ratingVal)) : undefined,
esrbRating: ageRatingStr,
sha1: json.hashes?.sha1,
@@ -321,6 +337,7 @@ export const rommApiClient = {
])).filter(Boolean),
favorite: (json.user_collections || json.rom_collections || []).some((c: any) => c.is_favorite || c.name === 'Favorites'),
manualUrl: getFullImageUrl(json.url_manual),
+ platformId: json.platform_id,
};
},
@@ -422,6 +439,19 @@ export const rommApiClient = {
return res.json();
},
+ getPlayUrl(gameId: string): string {
+ return `${this.apiBase}/roms/${gameId}/play`;
+ },
+
+ getManualUrl(gameId: string, platformId?: number): string {
+ // Constructed manual URL: /assets/romm/resources/roms/[platform_id]/[rom_id]/manual/[rom_id].pdf
+ // We return a relative path to ensure the request goes through our local origin (bypassing CORS via Vite proxy).
+ if (platformId) {
+ return `/assets/romm/resources/roms/${platformId}/${gameId}/manual/${gameId}.pdf`;
+ }
+ return `${this.apiBase}/roms/${gameId}/manual`;
+ },
+
async fetchCurrentUser(): Promise<UserProfile> {
const res = await fetch(`${this.apiBase}/users/me`, { headers: this.headers });
if (!res.ok) throw new Error('Failed to fetch user profile.');
commit 4e6ce29f0b13a61e9bf9e91c037f660f92653a27
Author: roormonger <34205054+roormonger@users.noreply.github.com>
Date: Wed Mar 25 16:08:46 2026 -0400
more game page development
diff --git a/src/api/client.ts b/src/api/client.ts
index bbf231d..c1089cf 100644
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -30,11 +30,14 @@ export interface DetailedGame extends Game {
ratingIconUrl?: string; // Icon for Age Rating
sha1?: string;
collections?: string[];
+ favorite?: boolean;
+ manualUrl?: string;
}
export interface RommCollection {
id: string;
name: string;
+ is_favorite?: boolean;
ownerRole: 'admin' | 'user';
games: Game[];
coverUrl?: string; // RomM collections can have intrinsic covers
@@ -119,7 +122,7 @@ export const rommApiClient = {
data.append('password', password);
data.append('grant_type', 'password');
// Ensure we request the explicit permissions RomM FastAPI needs
- data.append('scope', 'me.read roms.read collections.read assets.read platforms.read');
+ data.append('scope', 'me.read roms.read roms.user.write collections.read collections.write assets.read platforms.read');
const res = await fetch(`${this.apiBase}/token`, {
method: 'POST',
@@ -216,6 +219,11 @@ export const rommApiClient = {
return Array.from(new Set(all)).filter(Boolean);
};
+ const sanitize = (val: any): string => {
+ if (typeof val !== 'string') return String(val?.name || val?.display_name || val || '');
+ return val.trim().replace(/;+$/, '');
+ };
+
// Extract Age Ratings from all providers (array format for IGDB/ScreenScraper)
const ageRatings = new Set<string>();
for (const p of providers) {
@@ -254,7 +262,7 @@ export const rommApiClient = {
// 1. Root lists
const rootList = type === 'developer' ? (json.developers || json.companies) : (json.publishers || json.companies);
if (Array.isArray(rootList)) {
- rootList.forEach(c => companies.add(typeof c === 'string' ? c : (c.name || c.display_name)));
+ rootList.forEach(c => companies.add(sanitize(c)));
}
// 2. Provider metadata
@@ -262,20 +270,20 @@ export const rommApiClient = {
// IGDB involved_companies
if (Array.isArray(p.involved_companies)) {
p.involved_companies.forEach((ic: any) => {
- if (ic[type] && ic.company?.name) companies.add(ic.company.name);
+ if (ic[type] && ic.company?.name) companies.add(sanitize(ic.company.name));
});
}
// General companies/developers/publishers lists
const pList = p.companies || (type === 'developer' ? (p.developers || p.developer_companies) : (p.publishers || p.publisher_companies));
if (Array.isArray(pList)) {
- pList.forEach((c: any) => companies.add(typeof c === 'string' ? c : (c.name || c.display_name)));
+ pList.forEach((c: any) => companies.add(sanitize(c)));
}
}
// 3. Root singulars
const rootSingular = type === 'developer' ? (json.developer || json.developer_name) : (json.publisher || json.publisher_name);
- if (rootSingular && typeof rootSingular === 'string') companies.add(rootSingular);
+ if (rootSingular && typeof rootSingular === 'string') companies.add(sanitize(rootSingular));
return Array.from(companies).filter(Boolean);
};
@@ -297,8 +305,8 @@ export const rommApiClient = {
summary: json.summary || getFirst('summary') || getFirst('description'),
developers: devList,
publishers: pubList,
- genres: getAll('genres').map(g => typeof g === 'string' ? g : (g.name || g.display_name)),
- franchises: getAll('franchises').map(f => typeof f === 'string' ? f : (f.name || f.display_name)),
+ genres: getAll('genres').map(sanitize).filter(Boolean),
+ franchises: getAll('franchises').map(sanitize).filter(Boolean),
releaseDate: formatDate(json.release_date || getFirst('first_release_date') || getFirst('release_date')),
screenshots: (json.screenshots || []).map((s: any) => s.url ? getFullImageUrl(s.url) || '' : ''),
fsName: json.fs_name,
@@ -311,6 +319,8 @@ export const rommApiClient = {
...(json.rom_collections || []).map((c: any) => c.name),
...(getFirst('collections') || [])
])).filter(Boolean),
+ favorite: (json.user_collections || json.rom_collections || []).some((c: any) => c.is_favorite || c.name === 'Favorites'),
+ manualUrl: getFullImageUrl(json.url_manual),
};
},
@@ -341,6 +351,7 @@ export const rommApiClient = {
return {
id: String(c.id),
name: c.name,
+ is_favorite: c.is_favorite || false,
ownerRole: role,
games: gamesItems,
coverUrl
@@ -350,6 +361,67 @@ export const rommApiClient = {
return mapped;
},
+ async fetchCollectionDetails(collectionId: string): Promise<any> {
+ const res = await fetch(`${this.apiBase}/collections/${collectionId}`, { headers: this.headers });
+ if (!res.ok) throw new Error('Failed to fetch collection details.');
+ return res.json();
+ },
+
+ async updateCollection(collectionId: string, data: { name: string; description?: string; rom_ids: number[] }): Promise<any> {
+ const formData = new FormData();
+ formData.append('name', data.name);
+ formData.append('description', data.description || '');
+ formData.append('rom_ids', JSON.stringify(data.rom_ids));
+
+ const res = await fetch(`${this.apiBase}/collections/${collectionId}?is_public=false&remove_cover=false`, {
+ method: 'PUT',
+ headers: this.headers,
+ body: formData
+ });
+ if (!res.ok) throw new Error('Failed to update collection.');
+ return res.json();
+ },
+
+ async toggleFavorite(gameId: string, favorite: boolean): Promise<any> {
+ // 1. Find the Favorites collection
+ const collections = await this.fetchCollections();
+ const favCol = collections.find(c => c.is_favorite);
+ if (!favCol) throw new Error("Could not find Favorites collection");
+
+ // 2. Fetch current member IDs (full list for collection-tier update)
+ const details = await this.fetchCollectionDetails(favCol.id);
+ let ids: number[] = details.rom_ids || [];
+
+ // 3. Toggle membership
+ const numId = parseInt(gameId);
+ if (favorite) {
+ if (!ids.includes(numId)) ids.push(numId);
+ } else {
+ ids = ids.filter(id => id !== numId);
+ }
+
+ // 4. Persistence via Multipart-Encoded PUT
+ return this.updateCollection(favCol.id, {
+ name: favCol.name || 'Favorites',
+ rom_ids: ids
+ });
+ },
+
+ async createCollection(name: string, description: string = ''): Promise<any> {
+ const formData = new FormData();
+ formData.append('name', name);
+ formData.append('description', description);
+ formData.append('rom_ids', '[]'); // Start empty
+
+ const res = await fetch(`${this.apiBase}/collections?is_public=false`, {
+ method: 'POST',
+ headers: this.headers,
+ body: formData
+ });
+ if (!res.ok) throw new Error('Failed to create collection.');
+ return res.json();
+ },
+
async fetchCurrentUser(): Promise<UserProfile> {
const res = await fetch(`${this.apiBase}/users/me`, { headers: this.headers });
if (!res.ok) throw new Error('Failed to fetch user profile.');
commit d2e976a14529acded3efb87797782737fad1a954
Author: roormonger <34205054+roormonger@users.noreply.github.com>
Date: Tue Mar 24 22:37:24 2026 -0400
game page refinements
diff --git a/src/api/client.ts b/src/api/client.ts
index 4e2fd8d..bbf231d 100644
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -16,11 +16,20 @@ export interface Platform {
export interface DetailedGame extends Game {
summary?: string;
- developer?: string;
- publisher?: string;
+ developers?: string[];
+ publishers?: string[];
genres?: string[];
+ franchises?: string[]; // New field
releaseDate?: string;
screenshots?: string[];
+ fsName?: string;
+ regions?: string[];
+ players?: string;
+ rating?: number; // New field
+ esrbRating?: string;
+ ratingIconUrl?: string; // Icon for Age Rating
+ sha1?: string;
+ collections?: string[];
}
export interface RommCollection {
@@ -79,6 +88,14 @@ const formatBytes = (bytes: number) => {
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
};
+const formatDate = (unixSeconds: any) => {
+ if (!unixSeconds) return undefined;
+ const val = Number(unixSeconds);
+ if (isNaN(val) || val < 1000000) return String(unixSeconds);
+ const date = new Date(val * 1000);
+ return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(date);
+};
+
export const rommApiClient = {
get apiBase() {
const cleanUrl = getBaseUrl();
@@ -173,14 +190,127 @@ export const rommApiClient = {
if (!res.ok) throw new Error('Failed to fetch game details.');
const json = await res.json();
const game = mapRomToGame(json);
+
+ // Extract metadata with fallbacks across all providers
+ const providers = [
+ json.latest_igdb_metadata, json.igdb_metadata,
+ json.latest_moby_metadata, json.moby_metadata,
+ json.latest_screenscraper_metadata, json.screenscraper_metadata,
+ json.latest_launchbox_metadata, json.launchbox_metadata,
+ json.latest_steamgrid_metadata, json.steamgrid_metadata
+ ].filter(Boolean);
+
+ const getFirst = (key: string) => {
+ for (const p of providers) {
+ if (p[key] !== undefined && p[key] !== null) return p[key];
+ }
+ return json[key];
+ };
+
+ const getAll = (key: string) => {
+ const all: any[] = [];
+ if (Array.isArray(json[key])) all.push(...json[key]);
+ for (const p of providers) {
+ if (Array.isArray(p[key])) all.push(...p[key]);
+ }
+ return Array.from(new Set(all)).filter(Boolean);
+ };
+
+ // Extract Age Ratings from all providers (array format for IGDB/ScreenScraper)
+ const ageRatings = new Set<string>();
+ for (const p of providers) {
+ if (Array.isArray(p.age_ratings)) {
+ p.age_ratings.forEach((ar: any) => {
+ if (ar.rating) ageRatings.add(String(ar.rating));
+ });
+ }
+ const pRating = p.esrb_rating || p.esrb || p.pegi_rating || p.pegi;
+ if (pRating && typeof pRating === 'string') ageRatings.add(pRating);
+ }
+
+ // Filter out placeholders like "Not Rated" or "Unknown" if we have valid ratings
+ let finalRatings = Array.from(ageRatings).filter(Boolean);
+ const placeholders = ['not rated', 'unknown', 'pending', 'nr', 'rp', 'rating pending'];
+ if (finalRatings.some(r => !placeholders.includes(r.toLowerCase()))) {
+ finalRatings = finalRatings.filter(r => !placeholders.includes(r.toLowerCase()));
+ }
+
+ const ageRatingStr = finalRatings.join(' / ') || (json.esrb_rating || json.esrb);
+
+ // Defensive mapping for regions
+ const regionsRaw = [
+ ...(json.rom_regions || []),
+ ...(json.region ? [json.region] : []),
+ ...(getFirst('regions') || [])
+ ];
+
+ const regions = Array.from(new Set(regionsRaw.map((r: any) =>
+ typeof r === 'string' ? r : (r.display_name || r.name || String(r))
+ ))).filter(Boolean);
+
+ const extractCompanies = (type: 'developer' | 'publisher') => {
+ const companies = new Set<string>();
+
+ // 1. Root lists
+ const rootList = type === 'developer' ? (json.developers || json.companies) : (json.publishers || json.companies);
+ if (Array.isArray(rootList)) {
+ rootList.forEach(c => companies.add(typeof c === 'string' ? c : (c.name || c.display_name)));
+ }
+
+ // 2. Provider metadata
+ for (const p of providers) {
+ // IGDB involved_companies
+ if (Array.isArray(p.involved_companies)) {
+ p.involved_companies.forEach((ic: any) => {
+ if (ic[type] && ic.company?.name) companies.add(ic.company.name);
+ });
+ }
+
+ // General companies/developers/publishers lists
+ const pList = p.companies || (type === 'developer' ? (p.developers || p.developer_companies) : (p.publishers || p.publisher_companies));
+ if (Array.isArray(pList)) {
+ pList.forEach((c: any) => companies.add(typeof c === 'string' ? c : (c.name || c.display_name)));
+ }
+ }
+
+ // 3. Root singulars
+ const rootSingular = type === 'developer' ? (json.developer || json.developer_name) : (json.publisher || json.publisher_name);
+ if (rootSingular && typeof rootSingular === 'string') companies.add(rootSingular);
+
+ return Array.from(companies).filter(Boolean);
+ };
+
+ const devList = extractCompanies('developer');
+ const pubList = extractCompanies('publisher');
+
+ // Rating extraction with ScreenScraper/Launchbox fallbacks
+ let ratingVal = getFirst('rating') || getFirst('total_rating') || getFirst('aggregated_rating') || getFirst('ss_score') || getFirst('community_rating');
+ if (ratingVal && String(ratingVal).includes('.')) {
+ const parsed = parseFloat(String(ratingVal));
+ // Normalize 0-10 or 0-5 scales to 100%
+ if (parsed <= 10) ratingVal = parsed * 10;
+ else if (parsed <= 5) ratingVal = parsed * 20;
+ }
+
return {
...game,
- summary: json.summary,
- developer: json.developer,
- publisher: json.publisher,
- genres: json.genres,
- releaseDate: json.release_date,
- screenshots: (json.screenshots || []).map((s: any) => getFullImageUrl(s.url) || '')
+ summary: json.summary || getFirst('summary') || getFirst('description'),
+ developers: devList,
+ publishers: pubList,
+ genres: getAll('genres').map(g => typeof g === 'string' ? g : (g.name || g.display_name)),
+ franchises: getAll('franchises').map(f => typeof f === 'string' ? f : (f.name || f.display_name)),
+ releaseDate: formatDate(json.release_date || getFirst('first_release_date') || getFirst('release_date')),
+ screenshots: (json.screenshots || []).map((s: any) => s.url ? getFullImageUrl(s.url) || '' : ''),
+ fsName: json.fs_name,
+ regions: regions.length > 0 ? regions : ['Global'],
+ players: json.players || getFirst('total_players') || getFirst('players'),
+ rating: ratingVal ? Math.round(Number(ratingVal)) : undefined,
+ esrbRating: ageRatingStr,
+ sha1: json.hashes?.sha1,
+ collections: Array.from(new Set([
+ ...(json.rom_collections || []).map((c: any) => c.name),
+ ...(getFirst('collections') || [])
+ ])).filter(Boolean),
};
},
commit 5fe789a8fd64d073228f0d8516086e1b293dff8a
Author: roormonger <34205054+roormonger@users.noreply.github.com>
Date: Mon Mar 23 22:24:45 2026 -0400
basic games page layout
diff --git a/src/api/client.ts b/src/api/client.ts
index b8c42af..4e2fd8d 100644
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -2,8 +2,25 @@ export interface Game {
id: string;
title: string;
system: string;
+ size: string;
coverUrl: string;
- size: number;
+}
+
+export interface Platform {
+ id: number;
+ name: string;
+ slug: string;
+ romCount: number;
+ iconUrl?: string;
+}
+
+export interface DetailedGame extends Game {
+ summary?: string;
+ developer?: string;
+ publisher?: string;
+ genres?: string[];
+ releaseDate?: string;
+ screenshots?: string[];
}
export interface RommCollection {
@@ -45,23 +62,23 @@ const getFullImageUrl = (urlPath: string | undefined): string | undefined => {
// Map RomM's native spec to our simplified app interface
const mapRomToGame = (apiRom: any): Game => {
- let coverUrl = 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&q=80&w=400';
-
- if (apiRom.url_cover) {
- coverUrl = getFullImageUrl(apiRom.url_cover) || coverUrl;
- } else if (apiRom.url_covers_large && apiRom.url_covers_large.length > 0) {
- coverUrl = getFullImageUrl(apiRom.url_covers_large[0]) || coverUrl;
- }
-
return {
id: String(apiRom.id),
- title: apiRom.name || apiRom.fs_name_no_ext || 'Unknown Title',
+ title: apiRom.name || apiRom.fs_name,
system: apiRom.platform_display_name || apiRom.platform_slug || 'Unknown Platform',
- coverUrl,
- size: apiRom.fs_size_bytes || 0
+ size: formatBytes(apiRom.fs_size_bytes || 0),
+ coverUrl: getFullImageUrl(apiRom.url_cover) || 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&q=80&w=400',
};
};
+const formatBytes = (bytes: number) => {
+ if (bytes === 0) return '0 B';
+ const k = 1024;
+ const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+};
+
export const rommApiClient = {
get apiBase() {
const cleanUrl = getBaseUrl();
@@ -131,6 +148,42 @@ export const rommApiClient = {
return res.json();
},
+ async fetchPlatforms(): Promise<Platform[]> {
+ const res = await fetch(`${this.apiBase}/platforms`, { headers: this.headers });
+ if (!res.ok) throw new Error('Failed to fetch platforms.');
+ const json = await res.json();
+ return json.map((p: any) => ({
+ id: p.id,
+ name: p.display_name || p.name || p.fs_slug,
+ slug: p.fs_slug,
+ romCount: p.rom_count || 0,
+ iconUrl: getFullImageUrl(p.url_logo)
+ }));
+ },
+
+ async fetchGamesByPlatform(platformId: number): Promise<Game[]> {
+ const res = await fetch(`${this.apiBase}/roms?platform_ids=${platformId}&limit=100`, { headers: this.headers });
+ if (!res.ok) throw new Error('Failed to fetch platform games.');
+ const json = await res.json();
+ return json.items ? json.items.map(mapRomToGame) : [];
+ },
+
+ async fetchGameDetails(gameId: string): Promise<DetailedGame> {
+ const res = await fetch(`${this.apiBase}/roms/${gameId}`, { headers: this.headers });
+ if (!res.ok) throw new Error('Failed to fetch game details.');
+ const json = await res.json();
+ const game = mapRomToGame(json);
+ return {
+ ...game,
+ summary: json.summary,
+ developer: json.developer,
+ publisher: json.publisher,
+ genres: json.genres,
+ releaseDate: json.release_date,
+ screenshots: (json.screenshots || []).map((s: any) => getFullImageUrl(s.url) || '')
+ };
+ },
+
async fetchCollections(): Promise<RommCollection[]> {
const res = await fetch(`${this.apiBase}/collections`, { headers: this.headers });
if (!res.ok) throw new Error('Failed to fetch collections meta.');
commit 4e0b510d7f6d0b414ef8abc2152a8fce63d66f25
Author: roormonger <34205054+roormonger@users.noreply.github.com>
Date: Mon Mar 23 17:09:47 2026 -0400
fixed some navigation issues
diff --git a/src/api/client.ts b/src/api/client.ts
index 15a7776..b8c42af 100644
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -112,15 +112,14 @@ export const rommApiClient = {
},
async fetchRecentGames(): Promise<Game[]> {
- // Ordering by internal id desc is functionally identical to created_at logic natively
- const res = await fetch(`${this.apiBase}/roms?limit=20&order_by=id&order_dir=desc`, { headers: this.headers });
+ const res = await fetch(`${this.apiBase}/roms?limit=50&order_by=id&order_dir=desc`, { headers: this.headers });
if (!res.ok) throw new Error('Failed to fetch recents.');
const json = await res.json();
return json.items ? json.items.map(mapRomToGame) : [];
},
async fetchFavorites(): Promise<Game[]> {
- const res = await fetch(`${this.apiBase}/roms?favorite=true&limit=20`, { headers: this.headers });
+ const res = await fetch(`${this.apiBase}/roms?favorite=true&limit=50`, { headers: this.headers });
if (!res.ok) throw new Error('Failed to fetch favorites.');
const json = await res.json();
return json.items ? json.items.map(mapRomToGame) : [];
commit f6ae56c8487a4cd1723ebda34d4005966929f0c6
Author: roormonger <34205054+roormonger@users.noreply.github.com>
Date: Mon Mar 23 16:43:09 2026 -0400
fixed little controller issue and wired up stats in top bar
diff --git a/src/api/client.ts b/src/api/client.ts
index 264f987..15a7776 100644
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -126,6 +126,12 @@ export const rommApiClient = {
return json.items ? json.items.map(mapRomToGame) : [];
},
+ async fetchStats(): Promise<any> {
+ const res = await fetch(`${this.apiBase}/stats`, { headers: this.headers });
+ if (!res.ok) throw new Error('Failed to fetch stats.');
+ return res.json();
+ },
+
async fetchCollections(): Promise<RommCollection[]> {
const res = await fetch(`${this.apiBase}/collections`, { headers: this.headers });
if (!res.ok) throw new Error('Failed to fetch collections meta.');
commit 9e8f148a10dd0ea63d7c7893c1a863282c1d25ef
Author: roormonger <34205054+roormonger@users.noreply.github.com>
Date: Mon Mar 23 15:31:41 2026 -0400
feat: initial romm web ui architecture, bento grids, and spatial gamepad bindings
diff --git a/src/api/client.ts b/src/api/client.ts
new file mode 100644
index 0000000..264f987
--- /dev/null
+++ b/src/api/client.ts
@@ -0,0 +1,182 @@
+export interface Game {
+ id: string;
+ title: string;
+ system: string;
+ coverUrl: string;
+ size: number;
+}
+
+export interface RommCollection {
+ id: string;
+ name: string;
+ ownerRole: 'admin' | 'user';
+ games: Game[];
+ coverUrl?: string; // RomM collections can have intrinsic covers
+}
+
+export interface UserProfile {
+ id: string;
+ username: string;
+ avatarUrl?: string;
+ roleName: string;
+}
+
+// Function to safely extract base URL
+const getBaseUrl = () => {
+ const rawUrl = import.meta.env.VITE_ROMM_BASE_URL || 'http://localhost:8080';
+ const cleanUrl = rawUrl.endsWith('/') ? rawUrl.slice(0, -1) : rawUrl;
+ return cleanUrl;
+};
+
+// Function to handle external URLs directly mapped from SteamGrid or IGDB dynamically
+const getFullImageUrl = (urlPath: string | undefined): string | undefined => {
+ if (!urlPath) return undefined;
+ if (urlPath.startsWith('http://') || urlPath.startsWith('https://') || urlPath.startsWith('//')) {
+ return urlPath;
+ }
+ const base = getBaseUrl();
+ if (urlPath.startsWith('/') && base.endsWith('/')) {
+ return `${base.slice(0, -1)}${urlPath}`;
+ } else if (!urlPath.startsWith('/') && !base.endsWith('/')) {
+ return `${base}/${urlPath}`;
+ }
+ return `${base}${urlPath}`;
+};
+
+// Map RomM's native spec to our simplified app interface
+const mapRomToGame = (apiRom: any): Game => {
+ let coverUrl = 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&q=80&w=400';
+
+ if (apiRom.url_cover) {
+ coverUrl = getFullImageUrl(apiRom.url_cover) || coverUrl;
+ } else if (apiRom.url_covers_large && apiRom.url_covers_large.length > 0) {
+ coverUrl = getFullImageUrl(apiRom.url_covers_large[0]) || coverUrl;
+ }
+
+ return {
+ id: String(apiRom.id),
+ title: apiRom.name || apiRom.fs_name_no_ext || 'Unknown Title',
+ system: apiRom.platform_display_name || apiRom.platform_slug || 'Unknown Platform',
+ coverUrl,
+ size: apiRom.fs_size_bytes || 0
+ };
+};
+
+export const rommApiClient = {
+ get apiBase() {
+ const cleanUrl = getBaseUrl();
+ return cleanUrl.endsWith('/api') ? cleanUrl : `${cleanUrl}/api`;
+ },
+
+ get token() {
+ return localStorage.getItem('romm_token');
+ },
+
+ get headers() {
+ return {
+ 'Authorization': `Bearer ${this.token}`,
+ 'Accept': 'application/json'
+ };
+ },
+
+ async login(username: string, password: string): Promise<any> {
+ const data = new URLSearchParams();
+ data.append('username', username);
+ data.append('password', password);
+ data.append('grant_type', 'password');
+ // Ensure we request the explicit permissions RomM FastAPI needs
+ data.append('scope', 'me.read roms.read collections.read assets.read platforms.read');
+
+ const res = await fetch(`${this.apiBase}/token`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+ body: data
+ });
+
+ if (!res.ok) throw new Error('Authentication failed');
+ const json = await res.json();
+ localStorage.setItem('romm_token', json.access_token);
+ return json;
+ },
+
+ logout() {
+ localStorage.removeItem('romm_token');
+ },
+
+ async fetchGames(): Promise<Game[]> {
+ // We use this as a stand-in for 'Continue Playing'. Fetching last played games.
+ const res = await fetch(`${this.apiBase}/roms?last_played=true&limit=10`, { headers: this.headers });
+ if (!res.ok) throw new Error('Failed to fetch last played network data.');
+ const json = await res.json();
+ return json.items ? json.items.map(mapRomToGame) : [];
+ },
+
+ async fetchRecentGames(): Promise<Game[]> {
+ // Ordering by internal id desc is functionally identical to created_at logic natively
+ const res = await fetch(`${this.apiBase}/roms?limit=20&order_by=id&order_dir=desc`, { headers: this.headers });
+ if (!res.ok) throw new Error('Failed to fetch recents.');
+ const json = await res.json();
+ return json.items ? json.items.map(mapRomToGame) : [];
+ },
+
+ async fetchFavorites(): Promise<Game[]> {
+ const res = await fetch(`${this.apiBase}/roms?favorite=true&limit=20`, { headers: this.headers });
+ if (!res.ok) throw new Error('Failed to fetch favorites.');
+ const json = await res.json();
+ return json.items ? json.items.map(mapRomToGame) : [];
+ },
+
+ async fetchCollections(): Promise<RommCollection[]> {
+ const res = await fetch(`${this.apiBase}/collections`, { headers: this.headers });
+ if (!res.ok) throw new Error('Failed to fetch collections meta.');
+ const collections = await res.json();
+
+ // Concurrently fetch the games arrays for each populated collection to supply UI with hydration
+ const mapped = await Promise.all(collections.map(async (c: any) => {
+ let gamesItems: Game[] = [];
+ try {
+ const gamesRes = await fetch(`${this.apiBase}/roms?collection_id=${c.id}&limit=20`, { headers: this.headers });
+ if (gamesRes.ok) {
+ const gamesJson = await gamesRes.json();
+ gamesItems = gamesJson.items ? gamesJson.items.map(mapRomToGame) : [];
+ }
+ } catch (e) { console.error("Could not fetch collection games", e) }
+
+ const coverUrl = c.url_cover ? getFullImageUrl(c.url_cover) : undefined;
+
+ // Currently extrapolating that public featured collections represent admin
+ let role: "admin" | "user" = "user";
+ if (c.name.toLowerCase() === 'featured' && c.is_public) {
+ role = "admin";
+ }
+
+ return {
+ id: String(c.id),
+ name: c.name,
+ ownerRole: role,
+ games: gamesItems,
+ coverUrl
+ };
+ }));
+
+ return mapped;
+ },
+
+ async fetchCurrentUser(): Promise<UserProfile> {
+ const res = await fetch(`${this.apiBase}/users/me`, { headers: this.headers });
+ if (!res.ok) throw new Error('Failed to fetch user profile.');
+ const json = await res.json();
+
+ // RomM obfuscates user assets using hex-encoded IDs (e.g. "User:1" -> "557365723a31")
+ const hexId = Array.from(`User:${json.id}`).map(c => c.charCodeAt(0).toString(16).padStart(2, '0')).join('');
+ const ts = new Date().getTime(); // Auto-cache bust like official UI
+ const constructedAvatarUrl = `${getBaseUrl()}/assets/romm/assets/users/${hexId}/profile/avatar.png?ts=${ts}`;
+
+ return {
+ id: String(json.id),
+ username: json.username || 'Unknown',
+ avatarUrl: constructedAvatarUrl,
+ roleName: json.role?.role_name || json.role?.name || String(json.role) || 'User',
+ };
+ }
+};
Reference in New Issue View Git Blame Copy Permalink