Skip to content

Polish kill feed visuals and smoke overlay #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cupid00772 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Polish kill feed visuals and smoke overlay #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
19bffc2
Polish kill feed visuals and smoke overlay
cupid00772 May 13, 2026
1af966a
docs: update README setup details and refresh squad settings
cupid00772 May 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 34 additions & 16 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
# War Thunder OBS/Streaming overlay

(Modified by cupid00772, thx to TuxCoding !)
![A promotional banner for "Thunder Overlay," a streaming overlay for War Thunder kill feeds. The background features an in-game scene from War Thunder, showing two tanks and a missile in mid-flight with a fiery trail. Above the missile, two usernames, "^GFF7^ games647" and "^GFF7^ Somebody," are displayed in teal text, resembling an in-game kill feed](https://github.com/user-attachments/assets/a48cf364-69f8-4fd7-a810-7eeef0298b6d "Project logo.avif")

## Description
Expand All @@ -10,16 +11,19 @@ This could include an image of the vehicle helping people who are not familiar w

You can see demonstration here (low quality to be hosted on GitHub):

[Kill overlay.vp9.webm](https://github.com/user-attachments/assets/f61f20fa-680b-49d0-852d-6f0a91345aa2)
(Modified kill feed)
<img width="800" height="145" alt="WT_killfeed_showcase" src="https://github.com/user-attachments/assets/ed39020b-35aa-43df-9a3b-346f16cd0bfa" />


### Features


- Supports different vehicle types:
- Tanks
- Planes
- Helicopter
- Navy
- Nukes and drones too ;)
- Nukes and drones too ;) (Manually added in `ThunderOverlay\src\lang\mappings\special.json`)
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Fix incorrect mapping filename in docs.

Line 26 points to special.json, but the mappings file is specials.json. This will send users to a non-existent path.

Suggested doc fix 
-    -   Nukes and drones too ;) (Manually added in `ThunderOverlay\src\lang\mappings\special.json`)
+    -   Nukes and drones too ;) (Manually added in `ThunderOverlay/src/lang/mappings/specials.json`)
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
- Nukes and drones too ;) (Manually added in `ThunderOverlay\src\lang\mappings\special.json`)
- Nukes and drones too ;) (Manually added in `ThunderOverlay/src/lang/mappings/specials.json`)
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@README.md` at line 26, Update the README.md documentation to reference the
correct mappings filename: replace the incorrect "special.json" string with
"specials.json" so links and instructions point to the existing mappings file;
ensure the textual mention in README.md now matches the actual file name
"specials.json".

- Multi language support
- Works online and offline locally

Expand Down Expand Up @@ -67,8 +71,8 @@ pnpm watchJS

* OBS 31+
* Project uses CSS nesting which the browser inside OBS in older version doesn't support
* Use the full game client (don't have game quality set to minimal)
* The web server accessible under `http://localhost:9111` from the game client is only provided by the full client version.
* Use the full game client (!!!don't have game quality set to minimal!!!)
* The web server accessible under `http://localhost:8111` from the game client is only provided by the full client version

## Installation

Expand All @@ -90,12 +94,20 @@ This version makes web requests to retrieve the image data for vehicle and avata
* `USERNAME`: Your own username
* Full example: `...?username=TuxCode,cardicon_esport_drops&`

### Local
### Local (Recommended)

This version uses only local files. All relevant data is extracted from the game client.

1. Download the project
2. Open `src/settings.json` in a text editor and edit
2. Compile the project():
```shell
cd [location of ThunderOverlay]
pnpm install
pnpm watchJS
```
3. Configure your squad members by editing `\src\settings.json`
4. add all kinds of warthunder vehicle into `\src\assets\img\vehicles`(AI is very useful)

<details>
<summary>
settings.json
Expand Down Expand Up @@ -125,11 +137,11 @@ settings.json

### Kill feed

1. Add browser source pointing to local file `NotificationFeed`
1. Add browser source pointing to local file `NotificationFeed.html`
2. Set browser size to: `1200x400`
3. Move it to the correct position
- I found horizontal centered and height `150px` a good fit below the mission objective and above a kill notification
4. Cut out at the bottom `200px` using transformation to make it slide out
3. Ensure War Thunder is running (web server on `http://localhost:8111` must be accessible)
4. Move it to the correct position
5. Cut out at the bottom `200px` using transformation to make it slide out

<details>
<summary>
Expand Down Expand Up @@ -218,13 +230,19 @@ Either:

### How does it work?

It extracts the data from the battle log. This log is pulled from the the web server `http://localhost:9111` provided
by the War Thunder client itself. It parses the corresponding textual data about player and vehicle names. Then, the localized vehicle
names are translated back to vehicle identifiers using name mappings from the game client. This allows us to find the correct vehicle image,
because the game files uses those identifiers. Squad membership and player avatars are unfortunatly manually configurred, but are less likely to change.
It extracts kill events from the battle log via the War Thunder web server running on `http://localhost:8111`.

The system works as follows:
1. **Fetch events**: The `hudmsg` endpoint provides real-time kill and damage events from the in-game battle log
2. **Parse messages**: Each event is parsed to extract player names and vehicle identifiers
3. **Localize vehicle names**: Vehicle names are translated from localized names back to their identifiers using language mappings from the game client
4. **Match squad members**: Player names are checked against your manually configured squad list in `src/settings.json`
5. **Display notification**: When a squad member gets a kill, a notification is displayed with their avatar and vehicle image using CSS animations

**Important limitation**: Squad membership and player avatars **must be manually configured** in `src/settings.json`. The War Thunder API does not expose this information through the web interface.

The kill notification is then displayed using CSS animations on a transparant background. The smoke effect is shown with a video where
the green background is keyed out to add an alpha channel in order to make it transparant as well.
The kill notification is then displayed using CSS animations on a transparent background. The smoke effect is shown with a video where
the green background is keyed out to add an alpha channel in order to make it transparent as well.

## Credits

Expand Down
6 changes: 5 additions & 1 deletion pnpm-workspace.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
allowBuilds:
'@swc/core': true
esbuild: true
unrs-resolver: true

# PNPM approved build scripts
ignoredBuiltDependencies:
- esbuild
- unrs-resolver
Comment on lines +1 to 9
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🌐 Web query:

What is the difference between allowBuilds and ignoredBuiltDependencies in pnpm-workspace.yaml configuration?

💡 Result:

In pnpm-workspace.yaml, allowBuilds and ignoredBuiltDependencies are both about whether pnpm will run a package’s “build” scripts during install—but ignoredBuiltDependencies was an older/removed setting, while allowBuilds is the current one. 1) allowBuilds (current setting) - allowBuilds is a map of package matchers to explicitly allow (true) or disallow (false) script execution. [1] - Default behavior: packages not listed are disallowed by default, with an error printed (because strictDepBuilds is true by default). [1] - During install, pnpm may add placeholders for ignored builds that aren’t yet listed in allowBuilds into pnpm-workspace.yaml so you can decide what to do (set them to true/false). [1] - pnpm approve-builds writes entries into allowBuilds in pnpm-workspace.yaml (true for approved, false for unapproved). [2] 2) ignoredBuiltDependencies (older/removed setting) - pnpm’s documentation says that ignoredBuiltDependencies (along with other older settings like onlyBuiltDependencies / neverBuiltDependencies / ignoreDepScripts) was removed in v11 and replaced by allowBuilds. [1] So the practical difference is: - You should use allowBuilds going forward (v11+). It is the mechanism to “allow or deny builds per package” via a true/false map. [1] - ignoredBuiltDependencies is not the supported modern config key; it was replaced by allowBuilds in pnpm v11+. [1] If you were migrating an older pnpm-workspace.yaml that used ignoredBuiltDependencies, the equivalent is to put those same package matchers in allowBuilds with a false value (i.e., allowBuilds: { : false }). This equivalence is reflected by pnpm removing ignoredBuiltDependencies and documenting allowBuilds as its replacement. [1]

Citations:

Remove the deprecated ignoredBuiltDependencies configuration.

The ignoredBuiltDependencies section (lines 7-9) is deprecated and was removed in pnpm v11+. It has been replaced by allowBuilds.

To modernize this configuration, remove the ignoredBuiltDependencies section entirely. If esbuild and unrs-resolver should not run builds, set them to false in allowBuilds instead:

allowBuilds:
  '@swc/core': true
  esbuild: false
  unrs-resolver: false
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@pnpm-workspace.yaml` around lines 1 - 9, Remove the deprecated
ignoredBuiltDependencies section and migrate its intent into allowBuilds: delete
the ignoredBuiltDependencies block entirely and update the allowBuilds map so
packages that should not run builds (esbuild, unrs-resolver) are explicitly set
to false while keeping '@swc/core' set to true; update the allowBuilds entries
(symbols: allowBuilds, esbuild, unrs-resolver, '@swc/core',
ignoredBuiltDependencies) accordingly.


# Don't install packages < 1 day old to "reduce" risk of supply chain attacks
minimumReleaseAge: 1440

3 changes: 2 additions & 1 deletion src/NotificationFeed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,10 @@

<div id="title" class="title">
<span id="killer-name" class="player-name"></span>
<span id="action-text" class="action-text">DESTROYED</span>

<!-- <span>destroyed</span> -->
<video id="smoke">
<video id="smoke" preload="auto" muted playsinline>
<!--
Only VP9 or older codecs (HEVC, VP8, codecs for MOV container) supports transparant videos
AV1 apparently doesn't, but AVIF does
Expand Down
38 changes: 0 additions & 38 deletions src/assets/img/APFSDS.svg
View file
Open in desktop

This file was deleted.

Loading