Win/Loss Overlay

A lightweight streaming overlay for tracking wins and losses in real time. Press a hotkey while gaming — the counter updates instantly in OBS.

---

Files

File	Purpose
winloss-overlay.html	The browser-based overlay (display + logic)
WinLossBridge.ahk	AutoHotkey script that bridges keypresses to the overlay
wl_cmd.txt	Temporary command file written by the AHK script and polled by the overlay (auto-created at runtime)

---

How It Works

1. WinLossBridge.ahk listens for F21–F24 globally (system-wide, even when your game is focused) and writes a command + timestamp to wl_cmd.txt in the same folder.
2. winloss-overlay.html polls wl_cmd.txt every 100 ms via fetch(). When it detects a new command, it updates the counters and triggers the appropriate animation.

Because the bridge file uses a timestamp, the same command issued twice in a row is always treated as two distinct events.

---

Setup

Prerequisites

• AutoHotkey v1.x installed
• OBS Studio (or any broadcaster that supports a Browser Source)

Steps

1. Place WinLossBridge.ahk and winloss-overlay.html in the same folder.
2. Double-click WinLossBridge.ahk to start it (a tray icon will appear).
3. In OBS, add a Browser Source:
   • Check "Local file" and point it at winloss-overlay.html.
   • Enable "Allow access to local files" in the source properties.
   • Recommended size: 400 × 90 px (adjust to taste).
4. To get a standalone overlay URL (e.g. for a separate browser window), open the HTML file in a browser and click "copy overlay url" at the bottom. The ?overlay query string hides the controls and makes the background transparent.

---

Hotkeys

Key	Action
F21	+ Win
F22	+ Loss
F23	Undo last change
F24	Reset both counters

These keys are registered globally by the AHK script, so they work even when your game window is in focus. F21–F24 are uncommon enough that they shouldn't conflict with most games, but you can edit the key bindings in WinLossBridge.ahk if needed.

The overlay also responds to the same keys when the browser window itself is focused (no AHK required in that case).

---

Manual Controls

When the overlay is opened directly in a browser (not in ?overlay mode), a control panel is visible with + Win, + Loss, Undo, and Reset buttons. This is useful for testing or for setups that don't use AutoHotkey.

---

Customization

All styling is in the <style> block of winloss-overlay.html.

Thing to change	Where to look
Font size	.label and .value font-size properties
Colors	#a855f7 (purple), #00ff66 (win green), #ff2244 (loss red)
Glow animation duration	glowWin / glowLoss keyframes
Poll interval	setTimeout(pollBridge, 100) — lower = more responsive, higher = less CPU
Hotkeys	F21::, F22::, etc. in WinLossBridge.ahk

---

Troubleshooting

Counter isn't updating in OBS

• Confirm "Allow access to local files" is enabled on the Browser Source.
• Make sure WinLossBridge.ahk is running (check the system tray).
• Verify both files are in the same directory — wl_cmd.txt is written relative to the AHK script's folder.

Hotkeys aren't working

• Check that the AHK script is running and hasn't exited with an error.
• Some keyboards don't have F21–F24 keys; remap to keys your keyboard supports (e.g. F13, Numpad0, or a ^/!-modified key).

Background isn't transparent in OBS

• Make sure you're using the ?overlay URL and that the Browser Source has "Custom CSS" left at default (or empty).