Files
OpenFrontIO/resources
Kyriakos Dimitriou 28e22c9ca8 Improve public lobby join button UI/UX with animated three-dot indicator (#2670)
## Description:

This PR improves the public lobby join button UI by providing clearer,
state-aware feedback while a player is waiting to enter a match.

The button text now reflects two distinct phases of the join flow:
- **Waiting for players** while the lobby is filling
- **Starting game…** when the match is about to begin

This removes ambiguity caused by relying only on button color changes
and makes it immediately clear whether the join action has registered
and what stage the lobby is currently in.

### Demo
![Joining indicator
demo](https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExdWg1aXNxenI4bmI2ZjlseTVnZGRvNG1wMW9icTgyMHM1NmVjY200MSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/ktmzjf0Lz55bfqbZUT/giphy.gif)

## How

- Replaces the static **“Join next game”** label with dynamic text based
on lobby state
- Shows **“Waiting for players”** with an animated three-dot indicator
while the lobby fills
- Switches to **“Starting game…”** shortly before the match begins
- Animation and state reset cleanly when leaving or cancelling
- Uses existing lobby timing and state, with no additional network calls

## Notes

- No CSS changes
- No behavioral changes to matchmaking logic
- Fully contained within `PublicLobby.ts`
- Added translation keys for the updated indicators to `en.json` (Rest
of language files will need to be updated)

## Testing notes

During local testing (single-player, local server), the button text
transitions as follows:

- Initial state (not clicked): **“Join next game”**
- After first click, the text briefly shows **“Starting game…”**
- It then switches to **“Waiting for players”** with the animated dots
- Shortly before the match starts, it switches back to **“Starting
game…”** and proceeds to start a solo game

Not sure why this flow happens in the testing environment:

**“Join next game”** ->**“Starting game…”** (brief) -> **“Waiting for
**players...”**** -> **“Starting game…”** (brief)

instead of just:

**“Join next game”** -> **“Waiting for **players...”**** -> **“Starting
game…”** (brief)

More testing is needed.

## Checklist

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [ ] I have added relevant tests to the test directory
- [ ] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
2025-12-24 10:17:22 -08:00
..
2025-11-19 10:34:23 -08:00
2025-09-30 13:18:03 -07:00
2025-12-09 16:12:00 -08:00
2025-09-28 17:47:05 -07:00
2025-09-03 18:54:12 -07:00
2025-05-29 11:07:04 -07:00