DEV Community: Hasan Alp Güngör

A Major-style live broadcast overlay for CS2 with Game State Integration

Hasan Alp Güngör — Mon, 26 Oct 2026 16:13:22 +0000

Watching Major tournaments, the broadcast overlay always caught my eye: every player's health, money and weapons, the killfeed, the bomb timer. I wanted to build something like it for my own matches.

Getting data out of the game

CS2 has a feature called Game State Integration (GSI). You put a file in the game's cfg folder, and during a match the game sends the data you asked for as JSON to the address you gave it. Mine asks for updates every 0.1 seconds, sent to a local server:

"Manyaksisko35 GSI v1"
{
 "uri" "http://127.0.0.1:3000"
 "throttle" "0.1"
 "data"
 {
   "map"                    "1"
   "round"                  "1"
   "player_state"           "1"
   "allplayers_state"       "1"
   "allplayers_weapons"     "1"
   "allplayers_match_stats" "1"
   "phase_countdowns"       "1"
 }
}

A Python server in between

The JSON the game sends is big and messy. A small Flask server I wrote in Python takes it and boils it down: scores, the round, the bomb state, the time left, and for every player their name, health, money, main weapon, grenades and K/D. To find the main weapon I skip the knife, the C4 and the pistol, and fall back to the pistol if there's nothing else. The overlay pulls this clean data from a separate address.

An overlay that doesn't flicker

The overlay is HTML, CSS and JavaScript, and it pulls from the server 10 times a second. My first version redrew every panel each time and it flickered on stream. Now each field only updates when its value actually changes, and the health bars slide smoothly with a CSS transition.

The killfeed the game doesn't send

GSI doesn't say who killed whom. So on every update I compare each player's kills and deaths with the previous state. Players whose kills went up are the killers, players whose deaths went up are the victims; I pair them up and add them to the killfeed with the weapon icon. Each line fades out after five seconds.

players.forEach((p) => {
  const before = previous[p.name];
  if (before && p.kills > before.kills) killers.push(p);
  if (before && p.deaths > before.deaths) victims.push(p);
});
for (let i = 0; i < Math.max(killers.length, victims.length); i++) {
  addKillItem(killers[i], victims[i]);
}

The bomb timer

When the bomb is planted, the round timer gives way to a 40-second red bomb bar. When a defuse starts, the bar turns white. The game doesn't say how long the defuse takes, so I look at the time left: under 5.5 seconds means the player has a kit and the bar runs over 5 seconds, otherwise over 10.

The code is open on GitHub, and I also walked through building it on my YouTube channel.

Originally published on my website. I'm Hasan Alp Güngör, a software and game developer from İzmir; more of my projects are at hasanalpgungor.com.

Translating game text without breaking {placeholders}: how LocaGen works

Hasan Alp Güngör — Mon, 26 Oct 2026 15:23:46 +0000

Game text usually lives in a JSON file as keys and values, and translating a game looks as simple as translating those values. That's what I thought at first, until I ran into placeholders.

{
  "welcome": "Welcome back, {player}!",
  "coins": "You have %d coins",
  "warning": "<b>Danger:</b> low health"
}

If you send that straight to a translation service, {player} sometimes comes back translated, %d turns into "% d" and the tag goes missing. The game then can't find its placeholders and either shows the wrong text or throws an error.

Hiding the placeholders

My fix is simple: before translating, I find every placeholder and swap it for a marker like [VAR_0] or [VAR_1] that the translator leaves alone. When the translation comes back, I swap the markers back. Translators sometimes lowercase the marker, so I also check for [var_0].

PATTERN = re.compile(r'(\{.*?\}|<.*?>|%[sd])')

def translate(text, target):
    placeholders = {}
    for i, match in enumerate(PATTERN.findall(text)):
        marker = f"[VAR_{i}]"
        placeholders[marker] = match
        text = text.replace(match, marker)

    result = GoogleTranslator(source="auto", target=target).translate(text)

    for marker, original in placeholders.items():
        result = result.replace(marker, original).replace(marker.lower(), original)
    return result

Keys are never touched; only values get translated. The file can be a flat key-value map or a list of objects, and both work.

The free version

The free version is a desktop app written in Python. I designed its terminal-style interface with CustomTkinter and use Google Translate through deep-translator. Translation runs on a separate thread, so the interface doesn't freeze and the progress bar fills live. On launch the app checks GitHub for the latest release and downloads it if there's a new one.

The PRO version: Gemini that talks like a gamer

Google Translate gets the words right, but it doesn't know how games talk; terms like "health potion" come out robotic. In the PRO version Gemini 2.5 Flash does the translation. I tell it to act as a game localization expert, to translate terms the way a player would say them, to never touch the keys and to return nothing but valid JSON.

The biggest lesson from working with an AI model was not to trust its answer blindly. I always try to parse what Gemini sends back as JSON, and if it's invalid I show an error instead of handing the user a broken file. The PRO version runs on PHP and MySQL, with user accounts, translation history and an admin panel.

Originally published on my website. I'm Hasan Alp Güngör, a software and game developer from İzmir; more of my projects are at hasanalpgungor.com.
``

How I turned my logo into 3D glass that breaks apart as you scroll

Hasan Alp Güngör — Mon, 26 Oct 2026 15:22:36 +0000

My portfolio started with a 3D game controller. Then I decided to use my own logo instead, and I wanted this: when the page opens the logo is intact, as you scroll it first cracks, then breaks apart, and every piece shows one of my skills. This post is about how I built that.

1. From an image to a shape

All I had was an image of the logo, and 3D needs corner points. I turned the image black and white with OpenCV, traced its contours, simplified away the extra points and scaled everything to 2.6 units tall. What was left was one outer outline and the eight holes inside the logo.

Cutting the logo with straight lines looked fake, so I drew jagged "crack" lines and split the logo along them with shapely. That gave seven pieces that look actually broken: web, C# and Java, 3D, Python, game development, hardware and backend.

I gave each piece depth with three.js's ExtrudeGeometry and added a bevel to the edges. Those rounded edges are what catch the light in the glass effect.

2. Glass with nothing behind it

For the glass I used drei's MeshTransmissionMaterial, which fakes glass by bending the scene behind it. But there was a problem: the site's silver background isn't in the 3D scene, it's drawn with CSS. The 3D scene behind the logo was empty, so the glass had nothing to bend and looked like flat gray plastic.

My fix was to redraw a lookalike of the background with a shader. Every frame I hide the logo, draw that background into an off-screen buffer (an FBO), and hand the buffer to the material as what's behind it. Now the glass bends the silver light behind the page. On top of that I added a separate fresnel shader that makes the edges glow white.

3. The scroll story

I tied the logo's pose to the scroll position with GSAP ScrollTrigger. There are a few key poses (intact, cracked, exploded, turned) and scrolling moves between them. The labels on the pieces are plain HTML: every frame I project the piece's 3D position onto the screen and move the label there.

The most annoying bug showed up here: scrolling back to the very top made the logo disappear. The cause was setting the ScrollTrigger start to "top top". At scroll 0 the trigger wasn't considered active, and I stopped rendering while it was inactive. Changing the start to "top bottom" fixed it.

4. Weak phones

This glass effect is heavy, so when the site opens it looks at the device and picks one of three quality levels:

High: the full glass effect at a sharper resolution
Medium: for phones and devices with 4 GB of memory or less; the glass uses fewer samples
Lite: when data saver is on or the device is very weak; a simple translucent material instead of the glass effect

In case that guess is wrong, after a few seconds the site starts watching the frame rate, and if it stays under 30 frames per second it steps down a level on its own.

function detect(): Quality {
  const nav = navigator as Navigator & { deviceMemory?: number; connection?: { saveData?: boolean } };
  const memory = nav.deviceMemory ?? 8;
  const cores = nav.hardwareConcurrency ?? 8;
  if (nav.connection?.saveData || memory <= 2 || cores <= 2) return 'lite';
  if (matchMedia('(pointer: coarse)').matches || memory <= 4 || cores <= 4) return 'medium';
  return 'high';
}

5. Glass that ripples under the cursor

Finally, I wanted the glass to ripple when the cursor is over the logo. I cast a ray from the pointer and check whether it hits the logo. If it does, I push the coordinates around the cursor with a sine wave in the background shader. Since the glass refracts that warped background, the ripple shows up inside the glass.

vec2 toMouse = (uv - uMouse) * vec2(uAspect, 1.0);
float dist = length(toMouse);
float wave = sin(dist * 70.0 - uTime * 7.0) * exp(-dist * 7.0) * uHover;
uv += normalize(toMouse + 1e-5) * wave * 0.03;

To see the result, just open the home page and scroll down. All the code is open on GitHub.

Originally published on my website. I'm Hasan Alp Güngör, a software and game developer from İzmir; more of my projects are at hasanalpgungor.com.
``