nhcarrigan/library
9
0
Fork 0
generated from nhcarrigan/template
Code Issues Pull Requests 54 Actions Releases 3 Activity

feat: support cover arts

Browse Source
This commit is contained in:
Naomi Carrigan
2026-02-04 13:11:26 -08:00
parent 318f3bc500
commit d338c8b52f
3 changed files with 411 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/app/components/games/games-list.component.ts
+137 -3
View File
@@ -85,6 +85,26 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment } from '@librar
></textarea>
</div>
<div class="form-group">
<label for="coverImage">Box Art (max 500KB)</label>
<input
type="file"
id="coverImage"
name="coverImage"
accept="image/*"
(change)="onImageSelected($event, 'new')"
>
@if (newGameImagePreview()) {
<div class="image-preview">
<img [src]="newGameImagePreview()" alt="Box art preview">
<button type="button" (click)="clearImage('new')" class="btn btn-danger btn-sm">Remove</button>
</div>
}
@if (imageError()) {
<span class="error-text">{{ imageError() }}</span>
}
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Add Game</button>
<button type="button" (click)="toggleAddForm()" class="btn btn-secondary">Cancel</button>
@@ -150,6 +170,26 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment } from '@librar
></textarea>
</div>
<div class="form-group">
<label for="edit-coverImage">Box Art (max 500KB)</label>
<input
type="file"
id="edit-coverImage"
name="coverImage"
accept="image/*"
(change)="onImageSelected($event, 'edit')"
>
@if (editGameImagePreview()) {
<div class="image-preview">
<img [src]="editGameImagePreview()" alt="Box art preview">
<button type="button" (click)="clearImage('edit')" class="btn btn-danger btn-sm">Remove</button>
</div>
}
@if (imageError()) {
<span class="error-text">{{ imageError() }}</span>
}
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save Changes</button>
<button type="button" (click)="cancelEdit()" class="btn btn-secondary">Cancel</button>
@@ -531,6 +571,39 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment } from '@librar
color: #6b7280;
font-size: 0.9rem;
}
.image-preview {
margin-top: 0.5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.image-preview img {
max-width: 100px;
max-height: 150px;
border-radius: 4px;
border: 2px solid #e5e7eb;
}
.error-text {
color: #ef4444;
font-size: 0.875rem;
display: block;
margin-top: 0.25rem;
}
input[type="file"] {
padding: 0.5rem;
border: 2px dashed #e5e7eb;
border-radius: 4px;
background: #f9fafb;
cursor: pointer;
}
input[type="file"]:hover {
border-color: #10b981;
}
`]
})
export class GamesListComponent implements OnInit {
@@ -550,6 +623,12 @@ export class GamesListComponent implements OnInit {
expandedComments = signal<Record<string, boolean>>({});
newCommentContent: Record<string, string> = {};
// Image upload state
newGameImagePreview = signal<string | null>(null);
editGameImagePreview = signal<string | null>(null);
imageError = signal<string | null>(null);
private readonly MAX_IMAGE_SIZE = 500 * 1024; // 500KB
// Expose GameStatus enum to template
GameStatus = GameStatus;
@@ -618,8 +697,11 @@ export class GamesListComponent implements OnInit {
platform: '',
status: GameStatus.backlog,
rating: undefined,
notes: ''
notes: '',
coverImage: undefined
};
this.newGameImagePreview.set(null);
this.imageError.set(null);
}
addGame() {
@@ -630,7 +712,8 @@ export class GamesListComponent implements OnInit {
platform: this.newGame.platform,
status: this.newGame.status,
rating: this.newGame.rating,
notes: this.newGame.notes
notes: this.newGame.notes,
coverImage: this.newGame.coverImage
};
this.gamesService.createGame(gameToAdd).subscribe(() => {
@@ -654,14 +737,19 @@ export class GamesListComponent implements OnInit {
platform: game.platform,
status: game.status,
rating: game.rating,
notes: game.notes
notes: game.notes,
coverImage: game.coverImage
};
this.editGameImagePreview.set(game.coverImage || null);
this.showAddForm.set(false);
this.imageError.set(null);
}
cancelEdit() {
this.editingGame.set(null);
this.editGame = {};
this.editGameImagePreview.set(null);
this.imageError.set(null);
}
saveEdit() {
@@ -674,6 +762,52 @@ export class GamesListComponent implements OnInit {
});
}
// Image handling methods
onImageSelected(event: Event, target: 'new' | 'edit') {
const input = event.target as HTMLInputElement;
const file = input.files?.[0];
if (!file) return;
this.imageError.set(null);
if (file.size > this.MAX_IMAGE_SIZE) {
this.imageError.set(`Image too large. Maximum size is ${this.MAX_IMAGE_SIZE / 1024}KB.`);
input.value = '';
return;
}
if (!file.type.startsWith('image/')) {
this.imageError.set('Please select an image file.');
input.value = '';
return;
}
const reader = new FileReader();
reader.onload = () => {
const base64 = reader.result as string;
if (target === 'new') {
this.newGameImagePreview.set(base64);
this.newGame.coverImage = base64;
} else {
this.editGameImagePreview.set(base64);
this.editGame.coverImage = base64;
}
};
reader.readAsDataURL(file);
}
clearImage(target: 'new' | 'edit') {
if (target === 'new') {
this.newGameImagePreview.set(null);
this.newGame.coverImage = undefined;
} else {
this.editGameImagePreview.set(null);
this.editGame.coverImage = undefined;
}
this.imageError.set(null);
}
// Comments methods
formatDate(date: Date | string): string {
return new Date(date).toLocaleDateString();