Commit Graph
11 Commits
Author SHA1 Message Date
FloPinguinandGitHub 0c7da790f1 Improve Ingame UI (#3212)
## Description:

- **Dynamic sidebar offset for top bars** - GameLeftSidebar,
GameRightSidebar, and PlayerInfoOverlay now shift down when SpawnTimer
and/or ImmunityTimer bars are visible (7px per bar). Implemented via
events.
- **Fixed text overflow** in HeadsUpMessage.ts (Random spawn message is
long)
- **Fixed inconsistent text sizing** in EventsDisplay 
- **Alliance icon horizontal** in PlayerInfoOverlay so the size of the
overlay doesn't change if there is an alliance
- **Nation relation coloring** - Nation player names are now colored
based on their relation
- **Background & Blur Unification**
- **Border Radius & Page Edge Gap Standardization**
- **EventsDisplay collapsed button:** Fixed badge hidden / inline-block
CSS conflict (conditional rendering), added gap-2 between text and badge
- **Right panel spacing:** Changed right container from sm:w-1/2 to
sm:flex-1 to fill remaining space
- **Leaderboard**: Rounded grid corners (rounded-lg overflow-hidden),
removed last-row border, added `willUpdate` for auto-refresh on
hide/show click, plus button styled to match toggle buttons
- Other little CSS fixes (margins etc)

Showcase:
(Note the red mexico name on betrayal)


https://github.com/user-attachments/assets/f0ed91de-3a07-4564-a209-3d7723edee55

Two progress bars at the top, mobile UI not cut off:


https://github.com/user-attachments/assets/83f1fd64-ceab-4a74-8d16-6e1eeea1709d

HeadsUpMessage text overflow fixed, SpawnTimer does not cut off the
PlayerInfoOverlay:

<img width="516" height="929" alt="Screenshot 2026-02-14 214410"
src="https://github.com/user-attachments/assets/74f0edea-8c01-4394-a3d0-a3245922e0da"
/>

Previous:

<img width="306" height="118" alt="Screenshot 2026-02-14 213705"
src="https://github.com/user-attachments/assets/a7c7e8f3-f0e8-4213-8a8f-4f3677e9fc98"
/>

Smaller event panel text:

<img width="594" height="975" alt="Screenshot 2026-02-14 215738"
src="https://github.com/user-attachments/assets/33e80570-9260-40b0-b810-c71eda4861fc"
/>

## Please complete the following:

- [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
- [X] I have added relevant tests to the test directory
- [X] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

FloPinguin
2026-02-14 19:48:43 -08:00
scamivandGitHub 0bfad91c04 perf(ui): switch UI layers to wall-time tick intervals (#3025)
## Description:

Preparatory change for the upcoming “unbounded worker” work: 
decouple expensive UI layer updates from game tick frequency by moving
UI ticking to wall-clock intervals. This reduces redundant UI work when
the simulation runs faster than real time (notably replays /
singleplayer at speed > 1) while keeping the UI responsive and
predictable.

## Changes:

- Add optional `Layer.getTickIntervalMs()` and enforce it in
`GameRenderer.tick()` using wall-clock time.
- Convert key UI layers from tick-modulus gating to fixed intervals:
  - `ControlPanel`: 100ms
  - `GameRightSidebar`: 250ms
  - `MainRadialMenu`: 500ms
  - `Leaderboard`, `NameLayer`, `ReplayPanel`, `TeamStats`: 1000ms


## Please complete the following:

- [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
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

DISCORD_USERNAME
2026-01-25 20:14:55 -08:00
e79c805804 refactor(ui): migrate tailwindcss v3 to v4 (#2735)
## Description:

migrate tailwindcss v3 to v4

## Please complete the following:

- [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
- [X] I have added relevant tests to the test directory
- [X] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

wraith4081

---------

Co-authored-by: iamlewis <lewismmmm@gmail.com>
Co-authored-by: Ryan <7389646+ryanbarlow97@users.noreply.github.com>
2026-01-06 14:21:52 -08:00
RoanandGitHub 8dde30ebb6 Update game timer UI (#2577)
## Description:

- use hh:mm:ss for timer format or mm:ss if no hours are present
- refactor classes and code to be simpler
- move timer inline with the buttons so the whole ui is smaller for more
game space
- update fast forward icon to better represent what it does
- move replay controls below game time ui

### Before:

<img width="218" height="155" alt="image"
src="https://github.com/user-attachments/assets/bfdbe571-3ec5-4c02-840b-112e8e3caab1"
/>
<img width="360" height="171" alt="image"
src="https://github.com/user-attachments/assets/ceee2923-fec8-4ebc-b9de-4b30a47b38a8"
/>
<img width="192" height="136" alt="image"
src="https://github.com/user-attachments/assets/8f8f464c-48e4-42c1-b378-51be2b1fc405"
/>


### After:

<img width="287" height="106" alt="image"
src="https://github.com/user-attachments/assets/30246189-9795-4822-b857-0af524cacb92"
/>
<img width="294" height="180" alt="image"
src="https://github.com/user-attachments/assets/065285ca-ae46-4481-9dd5-00d3bb4fcfb3"
/>
<img width="290" height="182" alt="image"
src="https://github.com/user-attachments/assets/c1b3da39-0785-4d50-8105-c028fa496963"
/>
<img width="213" height="88" alt="image"
src="https://github.com/user-attachments/assets/41e0a84c-2f68-4d24-9923-dd92bb70d161"
/>


## Please complete the following:

- [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
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

`rovi.`
2025-12-10 14:51:14 -08:00
Thomas CruveilherandGitHub a335d3cd8d fix(replay): change text to 'replay speed' when watching a replay #2357 (#2365)
Before, the condition was "if it's not singleplayer", but replays are
counted as singleplayer game for some reason (will need to fix the
underlying issue) so it wasn't robust enough Now the condition is based
on are we in replay or not,.

## Description:

Related to issue https://github.com/openfrontio/OpenFrontIO/issues/2357

I cannot get to replay games locally for some reason (client just throws
an error that it cannot load the lobby), so I made sure that the
singleplayer text did not change (at least no regression) cf screenshot:

<img width="1920" height="963" alt="Screenshot 2025-11-02 at 17 46 57"
src="https://github.com/user-attachments/assets/27e055a8-3813-46bd-a8ae-0c463a94d1a8"
/>


## Please complete the following:

- [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
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

sorikairo
2025-11-03 13:18:36 -08:00
VariableVinceandGitHub c7af6c04c5 Fix: "Game speed" not "Replay speed" during Single player game (#1457)
## Description:

Fix for regression. In #1145, "Game speed" was added to show in Single
player instead of "Replay speed", and then in #1243 again. But after the
changes in #1415 it no longer worked, although some code remained.

Before:
<img width="417" height="161" alt="Replay speed when in single player
game"
src="https://github.com/user-attachments/assets/ff9aac99-6948-4c10-bb30-36ba5973c12e"
/>

After:
<img width="392" height="178" alt="Game speed instead of Replay speed"
src="https://github.com/user-attachments/assets/3beb712a-2539-46c5-a50a-eda593a5417c"
/>

## Please complete the following:

- [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
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

tryout33
2025-07-16 20:35:16 -04:00
TomaszGitHubcoderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
4ed4c7e507 Add localization support for game events, settings, and UI text elements (#1372)
## Description:

This PR adds missing translations for various UI components, including
game events and settings. No visual changes were made, so screenshots
are not required. All user-facing text has been properly localized and
added to the en.json file.

## Please complete the following:

- [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
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

pierogi69

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2025-07-08 12:39:28 -07:00
evanpelleandGitHub 2cbe34ed79 update ui (#1368)
## Description:

Center pop & gold information, and split up & remove the top bar.

Before:

<img width="1913" alt="Screenshot 2025-07-07 at 7 54 55 PM"
src="https://github.com/user-attachments/assets/8ab59102-1f0e-4023-905f-e0b1b2fa73a2"
/>


After:

<img width="1916" alt="Screenshot 2025-07-07 at 7 53 02 PM"
src="https://github.com/user-attachments/assets/06c885e3-a179-4447-9d1d-0da3849e726d"
/>


reference:

![image](https://github.com/user-attachments/assets/8c985a1a-e232-45ce-9af7-c1981df7fb15)

## Please complete the following:

- [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
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan
2025-07-07 20:06:14 -07:00
4e48eba910 Better In Game UI (#1243)
## Description:
Top Bar Refactor – UI & UX Improvement Proposal

This update overhauls the top game bar to improve clarity,
responsiveness, and overall user experience across desktop and mobile.
It consolidates player resources (e.g., building counts), integrates
game controls (pause, settings, time), and enhances visual contrast.

Key changes:

Redesigned top bar with player data and game options.

Team color indicator bar (team games only).

Countdown bar during "Choose Starting Position" phase.

Removed redundant info (e.g., troop/worker counts shown elsewhere).

Inspired by strategy games like Travian Legends, this refactor offers a
cleaner and more intuitive layout, especially for smaller screens.

⚠️ Note: This is a large change and likely contains visual or functional
bugs I can’t currently spot due to fatigue. Thorough testing is required
before approval.

## Please complete the following:

- [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
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

Diessel
![Snímek obrazovky 2025-06-21 v 8 13 46](https://github.c
![Snímek obrazovky 2025-06-21 v 8 13
35](https://github.com/user-attachments/assets/e166ee1b-6173-48f5-8e2d-598d796a7e2d)
om/user-attachments/assets/3a0edbef-e621-4fc4-b6b7-c1ed
![Snímek obrazovky 2025-06-21 v 8 13
20](https://github.com/user-attachments/assets/1214ab61-323c-4317-8722-eaa4b932a60c)
8f9a8219)
![Snímek obrazovky 2025-06-21 v 8 10
04](https://github.com/user-attachments/assets/374fe15a-bfad-4469-9950-3ec631b6e2d3)

Closes #1165

---------

Co-authored-by: Scott Anderson <scottanderson@users.noreply.github.com>
Co-authored-by: evanpelle <evanpelle@gmail.com>
2025-06-30 19:49:42 -07:00
VariableVinceandGitHub 4cd3c2f984 Rename Replay speed to Game speed in Singleplayer (#1145)
## Description:

Change the title of the replay panel from "Replay speed" to "Game speed"
when in a Singleplayer game.

BEFORE

![afbeelding](https://github.com/user-attachments/assets/1ff17f05-ebae-4adf-a90d-618a87ca7432)

AFTER
![Game
speed](https://github.com/user-attachments/assets/5af78157-17e9-4e00-b4c3-d36c33b026f9)

## Please complete the following:

- [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
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

tryout33
2025-06-11 02:13:18 -04:00
GhisGitHubcoderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>evanpelle
22e0de9526 Add a Replay speed control feature (#1106)
## Description:
PR for https://github.com/openfrontio/OpenFrontIO/issues/1105
This pull request introduces a new replay-panel under options-menu to
control singleplayer and replay speed.

![image](https://github.com/user-attachments/assets/2f83b969-eff1-4a87-bdca-867f6a98e46b)

User can select 4 different speed multipliers based on the
turnIntervalMs config.

I locally tested the feature in singleplayer mode. I couldn't find a way
to test replay mode.
Tested with the pause button, working as you would expect.


Here is an example:

[replay-speed.webm](https://github.com/user-attachments/assets/7b3a7616-5f8f-4fbb-88ba-0b2414c6f2ea)


## Please complete the following:

- [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
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
⚠️ I need help to test this feature in real conditions with a replayed
game in dev env.

- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

ghisloufou

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: evanpelle <evanpelle@gmail.com>
2025-06-10 13:40:20 -07:00