code002lover/game_list
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Projects Releases Wiki Activity

feat: display game thumbnails using GameImage component across game and person detail lists.

Browse Source
This commit is contained in:
code002lover 2025-12-04 19:13:17 +01:00
parent ff9d5632d7
commit defcb0e0bc
4 changed files with 68 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/GameFilter.tsx
View File

@ -142,9 +142,7 @@ export function GameFilter() {
✓ All {selectedPeople.size} selected would play ✓ All {selectedPeople.size} selected would play
</div> </div>
</div> </div>
<div style={{ width: "100px", marginLeft: "1rem" }}> <GameImage game={game} />
<GameImage game={game} />
</div>
</Link> </Link>
))} ))}
</ul> </ul>

56
frontend/src/GameImage.tsx
View File

@ -9,36 +9,40 @@ export function GameImage({ game }: GameImageProps) {
if (error) { if (error) {
return ( return (
<div <div style={{ width: "100px", marginLeft: "1rem" }}>
style={{ <div
width: "100%", style={{
height: "150px", width: "100%",
background: "#ddd", height: "150px",
display: "flex", background: "#ddd",
alignItems: "center", display: "flex",
justifyContent: "center", alignItems: "center",
color: "#666", justifyContent: "center",
borderRadius: "8px", color: "#666",
marginTop: "0.5rem", borderRadius: "8px",
}} marginTop: "0.5rem",
> }}
No Image Available >
No Image Available
</div>
</div> </div>
); );
} }
return ( return (
<img <div style={{ width: "100px", marginLeft: "1rem" }}>
src={`/api/game_thumbnail/${encodeURIComponent(game)}`} <img
alt={`${game} cover`} src={`/api/game_thumbnail/${encodeURIComponent(game)}`}
onError={() => setError(true)} alt={`${game} cover`}
style={{ onError={() => setError(true)}
width: "100%", style={{
height: "auto", width: "100%",
borderRadius: "8px", height: "auto",
marginTop: "0.5rem", borderRadius: "8px",
objectFit: "cover", marginTop: "0.5rem",
}} objectFit: "cover",
/> }}
/>
</div>
); );
} }

15
frontend/src/GameList.tsx
View File

@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
import { Game, Source, GameList as GameListProto } from "../items"; import { Game, Source, GameList as GameListProto } from "../items";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { apiFetch } from "./api"; import { apiFetch } from "./api";
import { GameImage } from "./GameImage";
export function GameList() { export function GameList() {
const [games, setGames] = useState<Game[]>([]); const [games, setGames] = useState<Game[]>([]);
@ -439,19 +440,13 @@ export function GameList() {
style={{ style={{
textDecoration: "none", textDecoration: "none",
color: "inherit", color: "inherit",
display: "block", display: "flex",
justifyContent: "space-between",
alignItems: "center",
}} }}
> >
<strong>{game.title}</strong> <strong>{game.title}</strong>
<div <GameImage game={game.title} />
style={{
fontSize: "0.9em",
color: "var(--text-muted)",
marginTop: "0.5rem",
}}
>
{game.source === Source.STEAM ? "Steam" : "Roblox"}
</div>
</Link> </Link>
))} ))}
</ul> </ul>

44
frontend/src/PersonDetails.tsx
View File

@ -1,5 +1,5 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useParams } from "react-router-dom"; import { Link, useParams } from "react-router-dom";
import { import {
Person, Person,
AddOpinionRequest, AddOpinionRequest,
@ -9,6 +9,7 @@ import {
AuthStatusResponse, AuthStatusResponse,
} from "../items"; } from "../items";
import { apiFetch } from "./api"; import { apiFetch } from "./api";
import { GameImage } from "./GameImage";
export const PersonDetails = () => { export const PersonDetails = () => {
const { name } = useParams<{ name: string }>(); const { name } = useParams<{ name: string }>();
@ -116,21 +117,23 @@ export const PersonDetails = () => {
<h2>{person.name}</h2> <h2>{person.name}</h2>
<ul className="grid-container"> <ul className="grid-container">
{person.opinion.map((op, i) => ( {person.opinion.map((op, i) => (
<li <Link
to={`/game/${encodeURIComponent(op.title)}`}
key={i} key={i}
className="list-item" className="list-item"
style={{ borderColor: op.wouldPlay ? "#4caf50" : "#f44336" }} style={{
textDecoration: "none",
color: "inherit",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
borderColor: op.wouldPlay ? "#4caf50" : "#f44336",
}}
> >
<strong>{op.title}</strong> <strong>{op.title}</strong>
<div
style={{ <GameImage game={op.title} />
color: op.wouldPlay ? "#4caf50" : "#f44336", </Link>
marginTop: "0.5rem",
}}
>
{op.wouldPlay ? "Would Play" : "Would Not Play"}
</div>
</li>
))} ))}
</ul> </ul>
</div> </div>
@ -192,6 +195,23 @@ export const PersonDetails = () => {
Add Add
</button> </button>
</div> </div>
<div style={{ marginTop: "1rem" }}>
<Link
to={`/game/${encodeURIComponent(gameTitle)}`}
key={gameTitle}
className="list-item"
style={{
textDecoration: "none",
color: "inherit",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<strong>{gameTitle}</strong>
<GameImage game={gameTitle} />
</Link>
</div>
</div> </div>
)} )}
</div> </div>