SansanandClaude Opus 5.5
f39865fffc
"Version X is available" in the top bar is now a button that opens an Update popup: - Update and restart gets the download link from the server (the redirect is not followed, as the Gitea link needs no token), downloads the new game next to the running one with a progress bar, checks it (complete, and an MZ or ELF file), swaps it in and restarts. The quiz is saved first and continues. On Windows the running .exe is renamed to .old, put back if the swap fails, and deleted at the next start. - Download in browser opens the .exe, the Linux package, or the release page on other platforms. - From the editor, an unwritable folder or another platform, only the browser download is offered, with the reason. The message now fits between the tabs and the buttons in every theme; in Nord and Christmas it ran into Sync. The macOS export preset is removed, and the unused download_client_* functions are replaced by fetch_client_download_url. Closes #13 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
106 lines
7.2 KiB
Markdown
106 lines
7.2 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 |
|
||
| `UpdateButton` | Button | "Version X is available" in the top bar: highlighted text without a background, lighter under the mouse |
|
||
| `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 |
|