SansanandClaude Opus 5.5
ef6ac8f1fd
Covers: statistics cards show the soundtrack's cover on the left, and the
statistics popup shows it large. Until it arrives, and without a cover, the
soundtrack's initials stand in. Covers load only for cards on or near the
screen, three at a time, and are cached in covers/ next to the settings
(CoverCache), downloaded again only when cover_modified changes. The index and
file handling are shared with CharacterCache in a new FileCache.
Alternative names: the popup shows them and has an editor (add, remove, save)
that sends PUT /soundtracks/{uuid}/alternative-names. The statistics search and
the Search popup find soundtracks by them; Search shows the matching name after
the real one. Search now loads /soundtracks, falling back to the plain list.
The API types are regenerated from the server's spec, with a SoundtrackCover
theme style in every theme.
Closes #49
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
105 lines
7.0 KiB
Markdown
105 lines
7.0 KiB
Markdown
# Themes
|
||
|
||
The whole look of the game comes from a theme. Scenes and scripts never set colours,
|
||
font sizes or style boxes themselves; they name one of the theme's styles instead, and
|
||
`tests/integration/test_theme.gd` checks that it stays that way.
|
||
|
||
| Theme | File | |
|
||
|---|---|---|
|
||
| Classic | `main_theme.tres` | The default. Also the project theme (Project Settings → GUI → Theme → Custom), which the editor shows |
|
||
| Original web | `original_web_theme.tres` | Looks like MusicFrontend, the web version: orange-bordered buttons, `#333` header and popups, `#424242` panels, `#4e4e4e` alternating rows, a yellow playing song and a light grey player bar |
|
||
| Nord | `nord_theme.tres` | Dark blues from the app icon (`#1e4a69` window, `#1a3e5a` panels, `#29577f` buttons) with Nord's Snow Storm text, Frost and Aurora accents: Aurora yellow `#EBCB8B` for the playing song and highlights. Round shapes: pill buttons and tabs, 14–16 px corners, soft shadows on popups, cards and the player bar, and rounded text fields |
|
||
| Christmas | `christmas_theme.tres` | Santa and a Christmas tree: Christmas red (`#7a1520` window, `#5c0f18` panels) with snow white buttons and red text, a thick white "fur" trim on popups, cards, the lists and the player bar, the tree's green (`#1f6b3c`) for the chosen tab and the play button, and gold for the playing song and highlights. The same round shapes as Nord |
|
||
|
||
## Picking a theme
|
||
|
||
The themes are listed in `Settings.THEMES` (`data/settings.gd`): an id, the name shown
|
||
and the file. The player picks one in Settings → Theme, and it applies at once.
|
||
`Settings.apply_theme()` sets the theme of the root window, which every control without a
|
||
theme of its own uses, and saves the id as `theme_id` in `settings.cfg`. The saved theme
|
||
is applied when the game starts.
|
||
|
||
Code that reads theme colours itself redraws on `NOTIFICATION_THEME_CHANGED`, e.g. the
|
||
score graph and the popup backdrop. `Settings.theme_changed` is emitted after a switch.
|
||
|
||
To see the pictures of the screenshot tour in another theme, pass its id:
|
||
`godot --path . -s tools/take_screenshots.gd -- <dir> original_web`.
|
||
|
||
## Making a new theme
|
||
|
||
1. Copy `main_theme.tres`, e.g. to `dark_blue_theme.tres`.
|
||
2. Open the copy in Godot (double-click it) and change its colours, style boxes and font
|
||
sizes in the theme editor. Keep every style's name.
|
||
3. Add it to `Settings.THEMES`. `test_theme.gd` checks that it has every style, colour and
|
||
size that `main_theme.tres` has.
|
||
|
||
The **font** is the theme's default font, Godot's own Open Sans with Noto Sans JP for
|
||
Japanese text; see `fonts/README.md`.
|
||
|
||
Icons (play, restart, add player, the slider and switch knobs) are not part of the theme;
|
||
they come from the image files in `icons/` and Godot's built-in theme.
|
||
|
||
## What is in the theme
|
||
|
||
**Godot's default look** for every kind of control the game uses (Button, Label, Panel,
|
||
CheckButton, sliders, scroll bars, text fields and so on), copied in so it can be changed
|
||
here.
|
||
|
||
**Named styles** (theme type variations), picked with *Theme Type Variation* in a node's
|
||
inspector or `theme_type_variation` in code:
|
||
|
||
| Style | Based on | Used for |
|
||
|---|---|---|
|
||
| `WindowBackground` | Panel | The background behind everything in the main window |
|
||
| `PopupBackground` | Panel | The panel of every popup: dark, bordered and rounded |
|
||
| `TopBarBackground` | PanelContainer | The bar along the top of the window |
|
||
| `PlayerList` | PanelContainer | The player list, with space around its rows |
|
||
| `PlayerScore` | Label | A player's points (24) |
|
||
| `PlayerCharacter`, `PlayerCharacterHover` | PanelContainer | The frame around a player's character, and the one under the mouse |
|
||
| `StepButton` | Button | The small +1 and -1 buttons, with less padding than other buttons |
|
||
| `CharacterCard` | Panel | A character in the character select popup |
|
||
| `MusicList` | PanelContainer | The list of songs in the quiz |
|
||
| `SongRow`, `SongRowOdd` | PanelContainer | Alternating songs in that list |
|
||
| `SongRowHover`, `SongRowPlaying` | PanelContainer | The song under the mouse, and the one that is playing |
|
||
| `SongRowPictureLines`, `SongRowPictureLine` | VBoxContainer, HBoxContainer | The space between the lines of player pictures on a song, and between the pictures |
|
||
| `ShortcutRowDark` | PanelContainer | Every other row in the shortcuts popup |
|
||
| `ListRowEven`, `ListRowOdd` | PanelContainer | Alternating rows in the inspiration, sync and statistics song lists |
|
||
| `ListRowHover` | PanelContainer | A row in the statistics song list under the mouse |
|
||
| `TitleLarge` | Label | The soundtrack that is playing (50) |
|
||
| `TitleMedium` | Label | The song that is playing, and the winner (35) |
|
||
| `Title` | Label | The window title and popup titles (25) |
|
||
| `TextLarge` | Label | Log rows, shortcuts and the inspiration list (20) |
|
||
| `TextMedium` | Label | Rows in the sync result (18) |
|
||
| `HighlightLarge`, `HighlightMedium` | Label | Orange text: sync headers and every other sync row |
|
||
| `SongRowLabel`, `SongRowLabelPlaying` | Label | A song's text, and the one that is playing |
|
||
| `TabButton` | Button | The Quiz and Statistics tabs; the chosen one is orange |
|
||
| `SoundtrackCover` | Panel | A soundtrack's cover on a statistics card and in its popup: the colour behind the initials until the cover arrives, and the rounded corners the cover is cut to |
|
||
| `StatisticsCard`, `StatisticsCardHover` | PanelContainer | A soundtrack card in the statistics, and the one under the mouse |
|
||
| `StatisticsGrid` | GridContainer | The grid of soundtrack cards, with the space between them |
|
||
| `PlayerBar` | PanelContainer | The music player's rounded bar |
|
||
| `PlayerButtonPrimary`, `PlayerButton` | Button | The round play button, and the restart button; the icon's colour on hover comes from here |
|
||
| `ProgressSlider`, `VolumeBar` | HSlider | How far the song has played (orange), and the volume |
|
||
| `PlayerTime` | Label | The time played and the song's length |
|
||
| `PlayerIcon` | Button | The volume icon in the music player: a flat button that only shows its icon, in the theme's colour |
|
||
| `SongStatsHeader` | PanelContainer | The column titles above the statistics song list, spaced like its rows |
|
||
| `SongStatsText`, `SongStatsSecondary` | RichTextLabel | A song's name and its soundtrack (dimmer) in the statistics song list |
|
||
|
||
**Palette**: colours used from code.
|
||
|
||
| Colour | Used for |
|
||
|---|---|
|
||
| `backdrop` | The dimming behind an open popup |
|
||
| `first_point` | The flash over a player's row on their first point (see `common/anim.gd`) |
|
||
| `match_point` | The glow over a player's row while they are one point from winning |
|
||
| `flash` | The flash over a song's row when it starts playing or is answered |
|
||
|
||
**ScoreGraph**: the graph of the game on the Winner popup, drawn from code.
|
||
|
||
| Item | Used for |
|
||
|---|---|
|
||
| `player_1` … `player_7` | Each player's line, dots, score and legend square, by their place in the player list |
|
||
| `grid`, `axis_text` | The gridlines and the numbers along the axes |
|
||
| `winning_line` | The dashed line at the winning score |
|
||
| `line_width`, `dot_radius` | How thick the lines are and how big the dots |
|
||
| `font_size` | The axis numbers and the scores at the end of the lines |
|