Sansan
a21b6e9b22
Part of #41. The top bar has Quiz and Statistics tabs instead of the Statistics button. The Statistics tab replaces the quiz below the top bar (the song keeps playing) and shows every soundtrack as a card with its plays, last played date and most and least played songs, loaded from the new GET /api/v1/statistics/soundtracks. The cards can be searched (with the Search popup's matching, now in SoundtrackSearch), filtered on played or never played, and sorted A-Z, Z-A, most or least played. Clicking a card opens a popup with all its songs. Screenshots of the other states only differ in the top bar, and the layout baseline is taken again with the new statistics states.
54 lines
2.8 KiB
Markdown
54 lines
2.8 KiB
Markdown
# Themes
|
|
|
|
The whole look of the game comes from one theme, `main_theme.tres`. It is the project
|
|
theme (Project Settings → GUI → Theme → Custom), so every scene uses it without setting
|
|
anything. 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.
|
|
|
|
## 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. Point Project Settings → GUI → Theme → Custom at the copy.
|
|
|
|
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 |
|
|
| `DarkSpacer` | Panel | The dark gaps in the player list and the add player row |
|
|
| `CharacterCard` | Panel | A character in the character select popup |
|
|
| `MusicList` | PanelContainer | The list of songs in the quiz |
|
|
| `SongRow` | PanelContainer | One song in that list |
|
|
| `ShortcutRowDark` | PanelContainer | Every other row in the shortcuts popup |
|
|
| `ListRowEven`, `ListRowOdd` | PanelContainer | Alternating rows in the inspiration and sync lists |
|
|
| `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 |
|
|
| `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 |
|
|
|
|
**Palette**: colours used from code.
|
|
|
|
| Colour | Used for |
|
|
|---|---|
|
|
| `backdrop` | The dimming behind an open popup |
|