Media Cover Art Selection Screen - cressie176/Load64 GitHub Wiki

Primary Purpose

Assign a cover art image to a game by selecting from candidates or adding new ones.

Main Screen Design

Standard mode

Reached from the Game Management screen.

┌──────────────────────────────────────────────────────────────────────────────┐
│ TOP BAR                                                                      │
│  <Game Title> > Media > Cover Art                                    [Back]  │
├──────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  ┌─────────────────┐ │ ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  │
│  │                 │ │ │              │  │              │  │              │  │
│  │                 │ │ │              │  │              │  │              │  │
│  │                 │ │ │              │  │              │  │              │  │
│  │                 │ │ └──────────────┘  └──────────────┘  └──────────────┘  │
│  │                 │ │ ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  │
│  │                 │ │ │              │  │              │  │              │  │
│  └─────────────────┘ │ │              │  │              │  │              │  │
│       Cover Art      │ │              │  │              │  │              │  │
│                      │ └──────────────┘  └──────────────┘  └──────────────┘  │
│                      │                                                       │
│                      │ [Get Media]  [Save]  [Cancel]                         │
│                                                                              │
├──────────────────────────────────────────────────────────────────────────────┤
│ BOTTOM BAR                                                                   │
└──────────────────────────────────────────────────────────────────────────────┘

Import mode

┌──────────────────────────────────────────────────────────────────────────────┐
│ TOP BAR                                                                      │
│  Import Games > <Title> > Media > Cover Art                          [Back]  │
├──────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  ┌─────────────────┐ │ ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  │
│  │                 │ │ │              │  │              │  │              │  │
│  │                 │ │ │              │  │              │  │              │  │
│  │                 │ │ │              │  │              │  │              │  │
│  │                 │ │ └──────────────┘  └──────────────┘  └──────────────┘  │
│  │                 │ │ ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  │
│  │                 │ │ │              │  │              │  │              │  │
│  └─────────────────┘ │ │              │  │              │  │              │  │
│       Cover Art      │ │              │  │              │  │              │  │
│                      │ └──────────────┘  └──────────────┘  └──────────────┘  │
│                      │                                                       │
│                      │ [Get Media]  [Save]  [Cancel]                         │
│                                                                              │
├──────────────────────────────────────────────────────────────────────────────┤
│ BOTTOM BAR                                                                   │
└──────────────────────────────────────────────────────────────────────────────┘

TOP BAR

Focusable: [Back] CTA only
Interactive: [Back] CTA only
Purpose: Identify the game and provide a back action

  • In standard mode the title is <Game Title> > Media > Cover Art.
  • In import mode the title is Import Games > <Title> > Media > Cover Art.
  • See Import Candidate screen for the <Title> derivation rule.

[Back] CTA

In standard mode, returns to the Game Management screen.

In import mode, returns to the Game Details Edit screen.

Left Panel — Cover Art

Focusable: Yes (when a cover art image is assigned)
Interactive: Yes (context menu available when a cover art image is assigned)
Purpose: Show the currently assigned cover art image

A vertical panel on the left side of the screen, separated from the candidates by a vertical divider. Displays the image currently saved to the cover_thumbnail slot at the same size as the candidate thumbnails. Labelled Cover Art beneath the image. If no image is assigned, the panel is empty.

The left panel shows a preview of the currently selected candidate. When the user selects a candidate (by pressing Enter or clicking), the left panel updates immediately to show that image. On [Save] the previewed image becomes the permanent assignment; on [Cancel] the left panel reverts to the previously saved image.

Context Menu

Only available on the cover art image (when one is assigned). Opens a menu overlay:

┌──────────────────────────────────────────────────────────────────────────────┐
│                        ┌──────────────────────┐                              │
│                        │                      │                              │
│                        │   > Delete cover art │                              │
│                        │                      │                              │
│                        └──────────────────────┘                              │
└──────────────────────────────────────────────────────────────────────────────┘
Action Behaviour
Delete cover art Opens a confirmation overlay before clearing the cover art assignment.

Confirmation overlay:

┌──────────────────────────────────────────────────────────────────────────────┐
│                    ┌──────────────────────────────┐                          │
│                    │ Delete cover art?            │                          │
│                    │                              │                          │
│                    │   > Yes                      │                          │
│                    │     No                       │                          │
│                    └──────────────────────────────┘                          │
└──────────────────────────────────────────────────────────────────────────────┘
Option Behaviour
Yes Clears the cover art assignment. The left panel becomes empty.
No Closes the overlay. The cover art assignment is unchanged.

Right Panel — Candidates

Focusable: Yes (primary focus region)
Interactive: Yes
Purpose: Show candidate images to assign to the cover art slot

A 3-column × 2-row visible grid of thumbnail images to the right of the divider. Candidates are scanned from the media/cover/ subfolder of the game's media directory when the screen is displayed, ordered by file creation timestamp (oldest first).

Candidates fill the grid left-to-right, top-to-bottom. The grid always shows exactly 2 rows of 3 cells. Cells without a candidate image are displayed as empty placeholder boxes, indistinguishable in shape from occupied cells. There is no hard cap on the total number of candidates.

The grid scrolls vertically. When the user navigates to the bottom row and presses Down, the grid scrolls one row so the next row becomes visible. Pressing Up from the top row does not scroll — it moves focus out of the grid.

Focusing a thumbnail highlights it. The focused thumbnail does not automatically become the selected image — [Save] commits the choice.

Thumbnails are displayed at the cover_thumbnail aspect ratio. See Media for expected dimensions.

Regardless of the source image dimensions, LoadC64 resizes the selected image to fit the expected slot dimensions on save.

Context Menu

Only available on candidate thumbnails. Opens a menu overlay:

┌──────────────────────────────────────────────────────────────────────────────┐
│                              ┌──────────────┐                                │
│                              │              │                                │
│                              │   > Remove   │                                │
│                              │              │                                │
│                              └──────────────┘                                │
└──────────────────────────────────────────────────────────────────────────────┘
Action Behaviour
Remove Removes the candidate from the grid. No confirmation required. Focus moves to the next candidate in the grid; if the removed candidate was the last, focus moves to the new last candidate; if the grid is now empty, focus remains in the candidates panel.

[Get Media]

Located in the actions row, left-aligned to the start of the candidates column. Opens a choice overlay:

┌──────────────────────────────────────────────────────────────────────────────┐
│                    ┌──────────────────────────────┐                          │
│                    │ Get media                    │                          │
│                    │                              │                          │
│                    │   > From catalogue           │                          │
│                    │     From URL                 │                          │
│                    │     From file                │                          │
│                    └──────────────────────────────┘                          │
└──────────────────────────────────────────────────────────────────────────────┘
Option Behaviour
From catalogue Navigates to the Get from Catalogue screen in the Cover Art flow.
From URL Navigates to the Get from URL screen in the Cover Art context.
From file Navigates to the Get from File screen in the Cover Art context.

[Save] / [Cancel]

  • [Save] assigns the currently selected candidate to the cover_thumbnail slot. If no candidate has been selected, the slot is unchanged. Returns to the previous screen.
  • [Cancel] discards any candidate additions or removals and returns to the previous screen without changing the slot.

In import mode, [Save] navigates to the Screenshots screen.

Navigation

Focus regions and Tab order: Cover Art → Candidates → Actions → TOP BAR → Cover Art

Region Entry focus
Cover Art the cover art image (only when an image is assigned)
Candidates first candidate thumbnail
Actions [Get Media] (leftmost button)
TOP BAR leftmost CTA

When no cover art image is assigned, the Cover Art panel is skipped in the Tab order.

Cover Art

Input Behaviour
Enter Open the context menu

Candidates

Input Behaviour
Up / Down / Left / Right Move focus between candidate thumbnails
Down (at bottom row) Scroll the grid down one row, keeping focus on the bottom row
Enter Select the focused candidate (updates left panel)

Actions

Input Behaviour
Left / Right Move focus between [Get Media], [Save], [Cancel]
Enter Activate the focused action

BOTTOM BAR

Focusable: No
Interactive: No
Purpose: Structural consistency with other screens. No messages are shown on this screen.

⚠️ **GitHub.com Fallback** ⚠️