## Description:
Add dynamic alliance icon with time-based fill and extension request
indicator
- Implement bottom-up green fill on alliance icon proportional to
remaining time
- Use AllianceIconFaded.svg as base layer with green overlay clipped
from top
- Add 20-82.40% clip range to account for icon vertical offset
## 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
<img width="1132" height="631" alt="Screenshot 2025-11-18 205205"
src="https://github.com/user-attachments/assets/4af71ddc-f847-4460-9046-167275efc773"
/>
<img width="1387" height="792" alt="Screenshot 2025-11-18 205532"
src="https://github.com/user-attachments/assets/9dd0e018-323f-4de1-bae8-2633c09fe867"
/>
## Please put your Discord username so you can be contacted if a bug or
regression is found:
hauke4707
---------
Co-authored-by: Evan <evanpelle@gmail.com>
Resolves#2452
## Description:
Created a Clan Stats PR to show top clans. In another PR we can show the
player leaderboard to show top players.
Based on PR from https://github.com/Geekyhobo
<img width="659" height="792" alt="Screenshot 2025-11-19 at 10 00 40 AM"
src="https://github.com/user-attachments/assets/9333b7e2-2357-47a6-a7c8-788cf81e9be3"
/>
## 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:
evan
Co-authored-by: Geekyhobo <geekyhobo@users.noreply.github.com>
Resolves#1686
## Description:
Above or behind the player names on the map, there are icons (images
and/or emojis).
This PR also adds these icons to the PlayerInfoOverlay (on the right
side of the player name).
To share the logic, a new file PlayerIcons.ts has been created.
<img width="215" height="355" alt="Screenshot 2025-11-14 024435"
src="https://github.com/user-attachments/assets/2e581ef9-0330-4c9d-9c52-5f943a58e64b"
/>
<img width="203" height="337" alt="Screenshot 2025-11-14 024731"
src="https://github.com/user-attachments/assets/0c2bf278-b8ca-43c2-b466-ea7a83577b25"
/>
<img width="193" height="288" alt="Screenshot 2025-11-14 024639"
src="https://github.com/user-attachments/assets/be114bc6-f3a8-4b8d-b267-025587c9eafe"
/>
The alliance icon is NOT shown because it's already on the left side of
the alliance timer.
### Why is this change needed?
Sometimes you can't quickly find the nametag of a player on the map.
Especially if a player's territory is scattered around the map, maybe
even on several small islands.
But you still want to know if the player is AFK, has a traitor debuff,
etc.
So it's very useful to get this information by just hovering over a
player instead of needing to search for the floating nametag.
## 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
---------
Co-authored-by: Evan <evanpelle@gmail.com>
If this PR fixes an issue, link it below. If not, delete these two
lines.
Resolves #(issue number)
## Description:
Describe the PR.
## 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
If this PR fixes an issue, link it below. If not, delete these two
lines.
Resolves#2447
## Description:
This PR updates the logic used to generate structure fill and border
colors. Currently, (v0.26.16 and earlier), some light territory colors
have structures that are difficult to see and identify. This PR ensures
that all territory colors have structures that are easily visible.
Instead of using `Colord.lighten()` and `Colord.darken()` to generate
structure colors, the logic now:
- queries the territory color and border color of the structure owner
- Converts these colors to the [LAB color
space](https://en.wikipedia.org/wiki/CIELAB_color_space) (which is a
human-perception-uniform color space).
- Darkens the border color (by decreasing LAB luminance) and sometimes
lightens the territory color (by increasing LAB luminance) until a
specific `Color Delta` is achieved (currently `delta > 0.5`)
- This ensures contrast between the structure and the territory
background.
Additionally, this PR re-organizes colors in the `Colors.ts` file for
better visibility and removes redundant colors from the `nationColors`
list.
This PR is an implementation of the proposed mock-up posted on imgur in
issue #2447. Screenshots of the original, final, and side-by-side
comparison of structure colors (for all available player colors) are in
the [imgur
album](https://imgur.com/a/openfront-color-playground-4cxSbbj).
I'd recommend inclusion as a feature/fix for v27.
## 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:
GlacialDrift
## Description:
Adds a reusable FrameProfiler utility, and a way to export profiling
data for offline analysis.
### What this PR changes in the existing performance monitor
This PR enhances the performance monitor by:
- **Introducing a reusable `FrameProfiler` utility**
- New `FrameProfiler` singleton in
`src/client/graphics/FrameProfiler.ts`.
- Profiling is only active when the performance overlay is visible
(toggled via user settings), to avoid unnecessary overhead.
- **Per-layer and span-level timing integration**
- `GameRenderer.renderGame` now:
- Clears the profiler at the start of each frame.
- Wraps each `layer.renderLayer?.(this.context)` call with
`FrameProfiler.start()/end()`, keyed by the layer’s constructor name.
- Consumes the recorded timings at the end of the frame and passes them
into `PerformanceOverlay.updateFrameMetrics(frameDuration,
layerDurations)`.
- `TerritoryLayer` instruments key operations:
- `renderTerritory`
- `putImageData`
- Drawing the main canvas
- Drawing the highlight canvas during spawn
- These show up in the performance overlay as additional entries (e.g.
`TerritoryLayer:renderTerritory`).
- **JSON export of performance snapshots**
- `PerformanceOverlay` can now build a full performance snapshot
(`buildPerformanceSnapshot`) containing:
- FPS and frame time stats (current, 60s average, 60s history).
- Tick metrics (avg/max execution and delay, plus raw samples).
- Layer breakdown (EMA-smoothed avg, max, total time per layer/span).
- A new “Copy JSON” button:
- Uses `navigator.clipboard.writeText` when available and falls back to
a hidden `<textarea>` + `document.execCommand("copy")`.
- Provides user feedback via a transient status ("Copy JSON" → "Copied!"
or "Failed to copy").
- **Enable/disable functionality hooked into the UI**
- `FrameProfiler.setEnabled(visible)` is invoked:
- When the overlay visibility is toggled (`init` → `setVisible`).
- When the overlay re-checks visibility in `updateFrameMetrics`, so the
profiler state stays in sync with user settings.
- When disabled, `FrameProfiler` becomes a no-op (returns `0` from
`start`, ignores `record`/`end`, and `consume` returns an empty object),
ensuring minimal overhead when performance monitoring is off.
- **Performance overlay UX and i18n improvements**
- New controls:
- **Reset** button to clear all FPS/tick/layer stats.
- **Copy JSON** button with a tooltip and transient status text.
- Visual enhancements:
- Wider overlay (`min-width: 420px`) and extra padding for readability.
- Layer breakdown section with:
- A list that is now sorted by total accumulated time.
- A horizontal bar per entry, scaled by average cost.
- Avg / max time display per layer/span.
- All new text is routed through `translateText` and backed by
`en.json`:
- `performance_overlay.reset`
- `performance_overlay.copy_json_title`
- `performance_overlay.copy_clipboard`
- `performance_overlay.copied`
- `performance_overlay.failed_copy`
- `performance_overlay.fps`
- `performance_overlay.avg_60s`
- `performance_overlay.frame`
- `performance_overlay.tick_exec`
- `performance_overlay.tick_delay`
- `performance_overlay.layers_header`
---
### How to set up profiling for new functions / code paths
For any function or code block you want to profile during a frame:
```ts
import { FrameProfiler } from "../FrameProfiler";
function heavyOperation() {
const spanStart = FrameProfiler.start();
// ... your existing work ...
FrameProfiler.end("MyFeature:heavyOperation", spanStart);
}
```
Guidelines:
- Use descriptive, stable names:
- Prefix with the component or layer name, e.g.:
- `"TerritoryLayer:prepareTiles"`
- `"GameRenderer:resolveVisibility"`
- `"FooFeature:fetchData"`
- The same name can be called multiple times per frame; the profiler
accumulates the durations in that frame.
- The accumulated values will appear:
- In `layerDurations` consumed at the end of the frame.
- In the overlay “Layers (avg / max, sorted by total time)” section.
- In the exported JSON under `layers` with `avg`, `max`, and `total`.
**3. Record pre-computed durations (optional)**
If you already have a measured duration and just want to attach it:
```ts
FrameProfiler.record("MyFeature:step1", someDurationInMs);
```
- This is equivalent to calling `start`/`end` but with your own timing
logic.
- Again, multiple calls with the same name in one frame will be summed.
---
<img width="466" height="823" alt="image"
src="https://github.com/user-attachments/assets/354b249a-25eb-4c3f-bd2e-9906372f761b"
/>
## 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
---------
Co-authored-by: Evan <evanpelle@gmail.com>
## Description:
I haven't been able to play openfront for a while now, so today I took
some time to fix the performance issue.
It turns out its `backdrop-filter: blur(5px);` being used on a
background element, causing the entire website to re-paint on nearly
every change.
This causes the game to run at 8 fps on my computer, with chrome
reporting 700ms of INP presentation delay.
The solution here was simply to pre-blur the background image.
<details>
<summary>Here's the instructions on how to pre-blur exactly like it
currently does</summary>
Install sharp
`npm install sharp`
Run blur
```ts
sharp(`./resources/images/EuropeBackground.webp`)
.blur(5)
.toFile(`./resources/images/EuropeBackgroundBlurred.webp`);
```
This could be automated if you plan to do more backgrounds.
</details>
The surprising part is that I'm running a A5000 with a Ryzen 9 5950X. So
I usually never lag from anything, which is what made this kinda
interesting. I assume the issue is caused by my 4K display or Kubuntu.
## Video:
This video showcases the 700+ms of delay on the main menu buttons. Video
is in real-time.
https://github.com/user-attachments/assets/ad5ff509-6bc7-48ff-8cba-85409be774f0
## 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
<details>
<summary>Discord Username</summary>
fx.morin
</details>
Simplify the login flow.
## 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:
evan
Resolves#2431
## Description:
Adds a button in the pattern menu to hide non owned skins
<img width="1264" height="976" alt="image"
src="https://github.com/user-attachments/assets/70a27c99-82f2-4414-b218-59deed723177"
/>
## 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:
notifxy (1379678982676676639)
Resolves#2096
## Description:
(TO CLEARIFY THEIRS NO GRACE PERIOD ADDED, AS THAT ISSUE THAT WOULD OF
NEEDED IT WAS FIXED BEFORE ON ITS OWN)
Shows the amount left in the UI for the player who trigged it
<img width="374" height="80" alt="image"
src="https://github.com/user-attachments/assets/f269c015-5a78-4e85-a9c0-cdf039d93d2a"
/>
also the betryal icon, after 15 seconds starts a slow flash, then after
10 seconds it speeds up, and then at 5 seconds it quickly flashs.
this was a nice way to show the time left without adding any new ui
componets.
video link 36 seconds (https://streamable.com/cwzxch)
## 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:
notifxy (1379678982676676639)
## Description:
Finishes & closes#1969 and closes#1806.
## 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:
w.o.n
---------
Co-authored-by: Evan <evanpelle@gmail.com>
## Description: Fix Emoji Panel Hidden Behind Player Info Panel
According to : https://github.com/openfrontio/OpenFrontIO/issues/2367
After my previous Player Info Panel layout fix, the Emoji Panel was
accidentally rendered behind it (see
[comment](https://github.com/openfrontio/OpenFrontIO/pull/2410#issuecomment-3507266463)).
This PR updates EmojiTable.ts to ensure the Emoji Panel displays
correctly in front of the Player Info Panel.
Changes:
Increased z-index values for the Emoji backdrop, content, and close
button above z-[10001].
backdrop: z-[10002]
content: z-[10003]
close button: z-[10004]
Expected outcome:
The Emoji picker (backdrop, content, and close button) now correctly
appears above the Player Panel.
<img width="1325" height="857" alt="Ekran Resmi 2025-11-09 09 42 38"
src="https://github.com/user-attachments/assets/08f81d88-70be-4690-b13f-01f09766df04"
/>
- [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
Discord Username : bilgehandk
## Description:
This adds moving warships by tapping them on a touchscreen. Now you can
steer them just like you already could with a mouse.
Also has some earlier returns, doing checks only when needed, prevent as
much duplicate checks and a bugfix.
In onMouseUp:
- early return if no OceanTile. Before, function findWarshipsNearCell
would still go look for warships even if ocean wasn't clicked.
- Move const nearbyWarShips down. It isn't needed when this.selectedUnit
is true.
- Remove unnecessary const clickedWarship.
- Move getting clickRef from function findWarshipsNearCell into
onMouseUp. Because it is needed in case of this.selectedUnit too, within
onMouseUp.
Getting a valid clickRef for this.selectedUnit fixes: Runtime error when
clicking outside the map after selecting a warship. The isValidCoord/Ref
check was missing for this.selectedUnit.
For findWarshipsNearCell:
- moved the cell/tile checks out to onMouseUp, the only caller of the
function.
- did NOT rename findWarshipsNearCell. Although it now uses tileRef as
input. Renaming can cause merge issues so i only do this when needed.
Added onTouch:
- Tests if we need to look for warships to select/move or if we can open
Radial Menu.
- Prevent as much duplicated checks as possible. So if no there's no
Ocean Tile found, just send the radial menu event, which checks
isValidCoord anyway. isOceanTile itself works fine even if it's no valid
cell (proven by this.selectedUnit working all this time in onMouseUp
without an isValidCoord test).
Screencap on mobile, shows selecting and moving warships, no runtime
error when clicking outside the map after selecting a warship, while
radial menu still opens as normal:
https://github.com/user-attachments/assets/1300d557-ae2f-46e3-92bd-d434c523aae7
## 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:
tryout33
## Description: Fixes a usability issue where the Player Info Panel and
Emoji Table overflowed the viewport on smaller screens, hiding key
controls (like Stop Trade) behind the Build Bar/Menu. Makes these panels
responsive and scrollable with minimal, low-risk CSS changes.
According to : https://github.com/openfrontio/OpenFrontIO/issues/2367
<img width="1120" height="774" alt="Ekran Resmi 2025-11-07 23 06 01"
src="https://github.com/user-attachments/assets/6fe23c23-ab5b-4254-8872-9880c322e164"
/>
Changes:
- Increased overlay z-index from 1001 to 10001 to ensure it renders
above Build Menu.
- Replaced static layout with scrollable inner container:
- Applied `max-height: calc(100vh - 120px -
env(safe-area-inset-bottom))`
- Enabled scrolling with `overflow: auto` and
`-webkit-overflow-scrolling: touch`
- Added sticky header with close (✕) button for persistent visibility
during scroll.
- Removed unused `init()` method for cleanup.
Discord: bilgehandk
## Description:
Following discussion on discord, some people (including me) thought it
would be nice to show the changelog whenever there is a new version, as
people seemed not to be aware of the gameplay change
https://github.com/user-attachments/assets/00b9531d-ea7a-4e69-8a01-64ef3b39536b
## 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
Added some basic fixes:
- Add backdrop overlay with outside-click-to-close
- Reduce emoji button sizes to fit all emojis without scrolling
- Update styling to match player info panel theme
## Description:
I updated the emoji panel such as reducing the size so it fits on the
screen without scrolling for emojis, and ability to close the panel by
clicking outside of it. Previously you couldn't close the panel by
clicking outside of it, and this was inconsistent with the rest of the
UI. I also updated the styling to match the panel before that (the
player info panel).
## Please complete the following:
- [x] I have added screenshots for all UI updates
- [ ] 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
## Please put your Discord username so you can be contacted if a bug or
regression is found:
insane.p
<img width="1237" height="874" alt="image"
src="https://github.com/user-attachments/assets/5c0bd229-0f9b-489d-bc34-a4a70021b78d"
/>
---------
Co-authored-by: Evan <evanpelle@gmail.com>
## Description:
Added prominent red alert notifications for incoming land attacks,
reusing the existing betrayal alert mechanism. Players will now receive
visual feedback when they are being attacked, improving awareness of
incoming threats.
Addressing #2355
## Please complete the following:
- [x] I have added screenshots for all UI updates
> <img width="2559" height="1436" alt="image"
src="https://github.com/user-attachments/assets/cd69a58d-764f-4910-8006-a143685a771a"
/>
- [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:
kerverse
## Description:
Resolves#2257
Before:
<img width="644" height="380" alt="Screenshot 2025-11-06 at 21 36 50"
src="https://github.com/user-attachments/assets/f2502d17-ef22-4b2e-ab10-22c3b8fc9efc"
/>
After:
<img width="644" height="380" alt="Screenshot 2025-11-06 at 21 36 40"
src="https://github.com/user-attachments/assets/25efe3a2-632f-4a4f-941a-2305705380d5"
/>
## 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
## Description:
Two bugs where causing 403s when trying to connect to a game after
refreshing the jwt:
1. __isLoggedIn was not cleared, so the existing, cached, token was
used.
2. set "credentials: "include" in the refresh request so we get the
token as a cookie. getToken() checks cookie before checking "token" in
localstorage. So cookie wasn't being updated and we were using the
existing cookie.
## 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:
evan
## Description:
Implements SAM range extension for stacked SAMs to cover hydros as
requested in #2347 and many times from users in discord.
This implementation is as simple as possible: At level 5 and higher,
SAMs extend their range to the range of a hydrogen bomb + 10 for a small
safety margin. Levels 2-4 are interpolated between.
Screenshot to show the sizes compared to a hydro:
<img width="400" alt="image"
src="https://github.com/user-attachments/assets/a857d66c-e3d4-467f-855f-3539cc90b719"
/>
Everything works together with the new range UI, although I might need
to unify with / rebase on #2350. Not yet tested with #2348, but
shouldn't be an issue.
## Input needed:
- Should I add tests for this?
- This is in effect a massive buff to SAMs, might be too strong. Popular
ideas / suggestions from Discord to balance things:
- Cap the SAM upgrade level at the maximum range (easy to do)
- Alternative, instead of capping the level, decrease the range when
missiles are reloading
- Increase the cost scaling for SAMs per stack, and scale way higher
(e.g. 1.5M > 3M > 4.5M > 6M or something like that) (UI integration
unclear, breaks with existing cost logic)
- Decrease SAM hit probability for Hydros
I'm happy to implement any of these paths, or just roll with the simple
way it's set up now, just let me know.
## 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:
newyearnewphil
---------
Co-authored-by: Evan <evanpelle@gmail.com>
## Description:
Implements trajectory preview for nuke selection as requested in #2346.
When selecting an AtomBomb or HydrogenBomb, a dashed line preview now
shows the trajectory path from the launch silo to the target location
before launching. Line uses player's territory color with 70% opacity
and dashed pattern for clear visibility
## Please complete the following:
- [x] I have added screenshots for all UI updates
<img width="716" height="483" alt="image"
src="https://github.com/user-attachments/assets/4c263230-34ba-4e56-9502-4a59c84b5943"
/>
<img width="1199" height="965" alt="image"
src="https://github.com/user-attachments/assets/72eda758-e192-45a0-b01d-5a8f413a07d5"
/>
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file (No new text strings added)
- [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:
kerverse
---------
Co-authored-by: Evan <evanpelle@gmail.com>
## Description:
Enhanced the performance overlay to display additional tick-related
performance metrics. The overlay now shows:
1. **Tick Execution Duration** - Average and maximum time (in
milliseconds) it takes to execute a game tick
2. **Tick Delay** - Average and maximum time (in milliseconds) between
receiving tick updates from the server
The server sends 10 updates per second (100ms interval), so these
metrics help identify:
- Client-side performance bottlenecks (tick execution duration)
- Network latency issues (tick delay)
**Additional improvements:**
- Renamed `FPSDisplay` component to `PerformanceOverlay` to better
reflect its expanded purpose
- Updated method names (`updateFPS` → `updateFrameMetrics`) and CSS
classes for consistency
All metrics are tracked over the last 60 ticks, providing rolling
averages and maximum values for performance analysis.
## Please complete the following:
- [x] I have added screenshots for all UI updates:
- <img width="495" height="227" alt="image"
src="https://github.com/user-attachments/assets/142b0313-61bf-46cc-b595-61fe73f6b54c"
/>
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- Translation keys already exist in en.json for
"performance_overlay_label" and "performance_overlay_desc"
- [x] I have added relevant tests to the test directory
- All existing tests pass (309/310 tests passed)
- No new tests added as this is primarily a display enhancement
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- Tested locally with npm test
- Verified performance overlay displays all metrics correctly
- Confirmed tick metrics are calculated and displayed accurately
## Please put your Discord username so you can be contacted if a bug or
regression is found:
Discord: kerverse
---------
Co-authored-by: Evan <evanpelle@gmail.com>
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
## Description:
Adds a win modal for OFM and the main discord. Adds needed translation
keys and an OFM picture back to the resources 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
## Please put your Discord username so you can be contacted if a bug or
regression is found:
Iamlewis
---------
Co-authored-by: evanpelle <evanpelle@gmail.com>
## Description:
Adds a win modal for OFM and the main discord. Adds needed translation
keys and an OFM picture back to the resources 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
## Please put your Discord username so you can be contacted if a bug or
regression is found:
Iamlewis
---------
Co-authored-by: evanpelle <evanpelle@gmail.com>
## Description:
Fixes https://github.com/openfrontio/OpenFrontIO/issues/2356
Leaderboard was empty on replay of Team games. This fixes it.
For v26, since the bug was introduced in v26. Set main as target branch
though.
**BEFORE**
<img width="1918" height="1075"
alt="508510056-b5ec5c7e-33a7-4bae-92f8-103e6cc1f165"
src="https://github.com/user-attachments/assets/f8c7d029-1c8b-4bbe-8288-e73829f1c239"
/>
**AFTER**
<img width="1065" height="567" alt="image"
src="https://github.com/user-attachments/assets/f29fb7ef-78df-414e-8ea8-e1f86433b4c6"
/>
## 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:
tryout33
## Description:
Enhanced the performance overlay to display additional tick-related
performance metrics. The overlay now shows:
1. **Tick Execution Duration** - Average and maximum time (in
milliseconds) it takes to execute a game tick
2. **Tick Delay** - Average and maximum time (in milliseconds) between
receiving tick updates from the server
The server sends 10 updates per second (100ms interval), so these
metrics help identify:
- Client-side performance bottlenecks (tick execution duration)
- Network latency issues (tick delay)
**Additional improvements:**
- Renamed `FPSDisplay` component to `PerformanceOverlay` to better
reflect its expanded purpose
- Updated method names (`updateFPS` → `updateFrameMetrics`) and CSS
classes for consistency
All metrics are tracked over the last 60 ticks, providing rolling
averages and maximum values for performance analysis.
## Please complete the following:
- [x] I have added screenshots for all UI updates:
- <img width="495" height="227" alt="image"
src="https://github.com/user-attachments/assets/142b0313-61bf-46cc-b595-61fe73f6b54c"
/>
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- Translation keys already exist in en.json for
"performance_overlay_label" and "performance_overlay_desc"
- [x] I have added relevant tests to the test directory
- All existing tests pass (309/310 tests passed)
- No new tests added as this is primarily a display enhancement
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- Tested locally with npm test
- Verified performance overlay displays all metrics correctly
- Confirmed tick metrics are calculated and displayed accurately
## Please put your Discord username so you can be contacted if a bug or
regression is found:
Discord: kerverse
---------
Co-authored-by: Evan <evanpelle@gmail.com>
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
## Description:
Fixes https://github.com/openfrontio/OpenFrontIO/issues/2356
Leaderboard was empty on replay of Team games. This fixes it.
For v26, since the bug was introduced in v26. Set main as target branch
though.
**BEFORE**
<img width="1918" height="1075"
alt="508510056-b5ec5c7e-33a7-4bae-92f8-103e6cc1f165"
src="https://github.com/user-attachments/assets/f8c7d029-1c8b-4bbe-8288-e73829f1c239"
/>
**AFTER**
<img width="1065" height="567" alt="image"
src="https://github.com/user-attachments/assets/f29fb7ef-78df-414e-8ea8-e1f86433b4c6"
/>
## 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:
tryout33
## Description:
Fix null socket crashing the log
## 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:
Mr.Box
## Description:
Prevent users from "scrolling"/moving the map outside of viewport and
"being lost and unable to find the map back". This can happen by
pressing keys intentionally (RIP me) or conflict with browser shortcut
containing a WASD key which would keep moving.
Related to reports from discord as highlighted by here:
https://discord.com/channels/1359946986937258015/1360078040222142564/1432750863994192003
Here is the new behavior. I am actively pressing WASD key to try to "get
out" but I can't. Same with mouse clicks.
https://www.loom.com/share/a9ecb0a7514d4e54b92d24678833eb2e
## 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
Adds a timer before self deleting units
Adds a loading bar under deleting units
Adds a timer in radial menu for clarity purposes
- [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
regression is found:
Mr.Box
---------
Co-authored-by: Evan <evanpelle@gmail.com>
## Description:
- Move the Delete button to where the Boat button is otherwise. The Boat
and Delete button already mutually exclude eachother anyway; boat button
is only visible on other's tiles, delete button is only visible on your
own tiles. Evan agreed to this new position:
https://discord.com/channels/1359946986937258015/1381293863712591872/1429147325049077860
- Increase the cooldown between deletions from 5 to 15 seconds. PR #2216
introduced a destruction time (deletionMarkDuration) making it take 15s
to delete a building. With the cooldown of 15s between clicking the
Delete button (deleteUnitCooldown) on top of that, you can actually only
delete a building every 15 seconds while it also takes that same time to
destruct it. Players have voiced between 10s to 30s or more so 15s is
still a reasonable time, keeping deletion of mistakenly placed buildings
still possible, while also keeping a small 'scorched earth' option
during an attack but probably only being able to delete 1-2 units in an
attack. Evan and Vivacious Box agreed with the mentioned 10-15s cooldown
too:
https://discord.com/channels/1359946986937258015/1381293863712591872/1429103999088459897
**Video: Delete button new location and 15s cooldown:**
https://github.com/user-attachments/assets/b0b13fc1-1e50-4a7a-8f32-55f7891f9945
**Delete button new location disabled:**
<img width="310" height="316" alt="Delete button disabled new location
radial menu"
src="https://github.com/user-attachments/assets/f65b88ad-5859-4982-be53-8f2f693f5767"
/>
**Delete button new location enabled:**
<img width="332" height="305" alt="Delete button enabled new location
radial menu"
src="https://github.com/user-attachments/assets/037f07c5-622a-4857-9ab8-fc20981de816"
/>
**Radial menu unchanged on others' tiles:**
<img width="346" height="307" alt="Radial menu unchanged on other
territory"
src="https://github.com/user-attachments/assets/085b2043-096f-4c44-8917-467adb8a7213"
/>
## 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:
tryout33
---------
Co-authored-by: Vivacious Box <jon@rouillard.org>
## Description:
Change Colour/Thickness and Add Rotation to SAM Radius
https://github.com/user-attachments/assets/c701c877-4b71-4266-ad86-bf8e8d61756ahttps://github.com/user-attachments/assets/2ea24df7-ae8f-425e-bb07-19c731529ab6
## 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:
w.o.n
## Description:
There was a small bug when ownership was updated (annexed territory) and
it wasn't redrawing the radiuses. Complements #2307
## 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:
w.o.n
## Description:
* Create CREDITS.md
* add all link to it on loading page
<img width="338" height="254" alt="Screenshot 2025-10-30 at 6 24 07 PM"
src="https://github.com/user-attachments/assets/5e89c846-f672-44e1-9add-3d03608c849e"
/>
## 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:
evan
## Description:
Currently not an issue, but this is a code smell in case we ever decide
to have it editable, current implementation will make the default
overwrite the custom setting
Pointed out by #1804
## 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:
Mr. Box
## Description:
This PR adds the Nuke Wars Baikal map (more balanced out than the
original). This is made for the upcoming Nuke Wars gamemode.
## 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
Nikola123
## Description:
Fixes#2257 (well, a part of it)
This PR implements a new async helper function in client Utils.ts (
getSvgAspectRatio), which caches and then retrieves aspect ratios for
Svg files. (I am not married to it being in Utils.ts, I just couldn't
find a better place to put it, and it seemed like something that should
be accessible to many files).
It then implements this helper in RadialMenu.ts to fix incorrect aspect
ratios. It uses the default value for the smaller side, and the computed
value for the larger side.
Before fixing the stretching in EventsDisplay.ts, this PR first
consolidates the hard coded html for toggle buttons into a helper
function (renderToggleButton). Afterwards, it adds width calculation to
this helper function using getSvgAspectRatio.
## Potential flaws
- getSvgAspectRatio might potentially be in the wrong file
- EventsDisplay.ts consolidation may be out of scope, but it seemed
necessary to make clean changes. It also introduces a slight delay
before toggle buttons are loaded once a player enters the match
- If the icon is not cached yet, the RadialMenu implementation shows the
old stretched icon for a split second. In regular gameplay this should
probably not be noticeable,
- For some reason (I guess because of slightly too many characters)
prettier split up exactly one of the renderToggleButton calls which
makes it ugly, but thats what prettier wants lol
- Not sure if I should add any tests? If so feel free to tell me, but I
didn't so far.
## Screenshots
Before
<img width="323" height="416" alt="image"
src="https://github.com/user-attachments/assets/709493c8-c8d6-48c1-9d44-4d6608d7da93"
/>
After
<img width="323" height="390" alt="image"
src="https://github.com/user-attachments/assets/a786c83e-2ef9-47d6-9858-1aeaa4ae548a"
/>
## 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:
Lavodan
---------
Co-authored-by: Evan <evanpelle@gmail.com>
## Description:
This PR addresses issue #2302: where there is no obvious information
about the self-player's team during the spawn phase of the game.
Currently, during TEAM games (where there is a set number of teams
defined), the self player's spawn highlight color is white, while all
other players are shown with a team-based spawn highlight color. This
makes it difficult to discern who is a teammate, especially since the
current live version (v0.26.7) uses green/yellow for other players to
depict teammate/other team, respectively.
Technically, the same is true for Duos, Trios, and Quads games, although
this has been addressed separately with PR #2298 by reverting to
green/yellow for teammate/other team players.
This PR changes the color of the self player's breathing spawn highlight
ring to match their assigned team color (with `alpha=0.5` for
transparency). The breathing ring is semi transparent on top of the
existing white static semi-transparent ring, giving the breathing ring a
**tint** of the team color instead of the exact team color.
This allows a player to immediately identify their assigned team and
maintains overall consistency with FFA, Duos, Trios, and Quads game
modes.
See below for example implementation. In this screenshot, the self
player is on the red team as shown by the red tint to the breathing
spawn highlight ring. The screenshot also shows some of the static white
semi-transparent ring around the spawn location. The self player's
teammate is to the top left of the image with a solid red spawn
highlight. The non-player (nation) opponent on the blue team is shown to
the bottom left. In online games, nations are not present in team games.
In single player or private lobby games they are shown as here, without
a spawn color highlight and only a territory color.
<img width="402" height="292" alt="Team Spawn Color Tint"
src="https://github.com/user-attachments/assets/5696a408-a633-4ec8-bf93-c8afa8e2e121"
/>
## 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:
GlacialDrift
Hauke12345