01 Our New Focus
The web client is now the primary development focus for Encoro IT. While we started as a terminal-only game, the web client unlocks capabilities that simply aren't possible over Telnet — and it's where we're putting our energy going forward.
Why the shift?
The web client renders everything on your computer using your GPU. Each terminal player runs a full Node.js process on our server — roughly 175MB RAM and ~20% CPU per player. The web client offloads ALL rendering to your browser. The server only sends lightweight game state as JSON. This frees up massive server resources and lets us support far more simultaneous players.
AI Testing Bots
We've programmed AI bots to do automated test runs across the entire game — exploring tunnels, fighting enemies, buying gear, testing drops. This helps us dial in economy balance, drop rates, and overall game feel while accelerating rapid development. When you see suspiciously perfect play patterns on the scoreboard, that's probably a bot.
02 What's Different
Under the hood it's the same game — same server, same world, same mechanics, same save files. You can switch between Telnet and the web client seamlessly. Your character is your character regardless of how you connect.
Enhanced Visuals
The web client runs a full particle VFX engine on top of the monospace grid. Effects that are approximated with colored ASCII characters in the terminal are rendered as real particles with physics, glow, and blending in the browser.
| 3D Walls | Extruded wall faces with perspective, directional shading, and biome-colored lighting |
| Raytraced Light Bounce | Light hitting wall faces bounces onto adjacent floor tiles as colored glow puddles |
| Particle Reflections | VFX particles bounce off walls with energy loss and spawn bright sparks on impact |
| Particle VFX | Real fire with embers, recursive lightning, frost crystals, plasma trails, gravity vortex |
| Dynamic Lighting | Light sources cast glow that blends with biome color grading |
| Sub-tile Movement | Smooth interpolation between tiles at 60fps instead of tile-snapping |
| Persistent Fog of War | Explored areas stay visible as dim outlines; three-zone smooth visibility |
| Death Cinematics | Visual death sequence with particle effects |
| Tunnel Warp | Warp transition effect when entering tunnels |
| Boss Telegraphs | Ground cracks and screen shake for incoming boss attacks |
Mouse Aiming
Left click fires Gadget 1, right click fires Gadget 2. Aim with your mouse cursor for directional gadgets. Keyboard controls still work exactly the same.
Settings Panel
The web client has a settings panel where you can tune visual quality to match your hardware:
| VFX Quality | Overall particle quality and count (Low / Medium / High / Ultra) |
| Particles | Toggle particle effects on/off |
| Screen Effects | Post-processing and color grading |
| Screen Shake | Camera shake on impacts and explosions |
| Dynamic Lighting | Real-time light sources and glow |
| Damage Numbers | Floating damage values on hits |
| GPU Particles | Hardware-accelerated particle rendering |
| 3D Walls | Extruded 3D wall rendering with perspective (enabled by default) |
| Light Bounce (RT) | Raytraced light bouncing off 3D walls onto floors |
| Particle Bounce | Particles reflect off walls with sparks instead of dying |
03 VFX Engine
The web client's particle VFX engine renders real-time visual effects on an HTML5 Canvas layer composited on top of the monospace game grid. Every gadget, every boss attack, every environmental effect has a unique particle system.
1,200 pre-allocated particle objects recycled via object pool. No garbage collection pressure during gameplay. Each particle has position, velocity, lifetime, color, size, and opacity.
Glow effects use additive canvas blending — overlapping particles brighten instead of occlude, creating convincing fire glow, lightning flashes, and energy effects.
Heat gradient particles with ember trails rising from the flame source and smoke sub-emitters that fade to gray. Temperature drives color from white-hot core to orange to deep red.
Lightning bolts generated via midpoint displacement algorithm with recursive branching. Each branch spawns sub-branches with decreasing intensity, wrapped in a bright glow pass.
Frost crystal particles with angular velocity and faceted shapes. Cryo nova expands as a ring of ice shards that shatter on impact.
Spiral particle trajectories pulled toward the vortex center with increasing speed. Debris particles orbit and eventually collapse inward.
Plasma trails leave lingering energy wisps. Acid clouds use randomized drift patterns with corrosive green particle sprays and drip effects.
Boss telegraph cracks split the ground with fracture-line particles. Screen shake on impact scales with damage. Cone attacks sweep particles across the telegraph zone.
Adaptive Performance
The VFX engine auto-scales particle count and quality based on your frame rate. If FPS drops below target, particle LOD (level of detail) reduces automatically — fewer particles, shorter lifetimes, simpler physics — to maintain smooth gameplay. You can also manually tune effects via the settings panel.
Biome Color Grading
Each tunnel biome applies a unique color tint to the entire screen. Magma biomes cast a warm red-orange glow. Ice biomes shift toward cool blue. Datastream biomes pulse with cyan-green. The grading is subtle but gives each biome a distinct atmosphere beyond just the tile colors.
04 Information for Nerds
Technical breakdown of how the web client was built, for those who want to know what's happening under the hood.
Architecture
HTML5 Canvas monospace grid renderer with a particle VFX overlay composited on top. The game grid renders each tile as a colored character on canvas at fixed cell dimensions. VFX particles draw on a separate canvas layer with additive blending for glow effects.
Connection
The browser connects via WebSocket at /ws. Nginx reverse-proxies this to port 7778 on the game server. The server uses a WebSocket adapter pattern — incoming WS connections get wrapped in a TCP-like socket interface (write(), on(), destroy()) so the existing game logic doesn't need any changes. The same authoritative server handles both terminal and web players identically.
State Synchronization
The server pushes game state as newline-delimited JSON. Map data uses versioning — the full map grid is only sent when it changes (version mismatch). Log messages use delta delivery — only new entries since the last broadcast. Together, this achieves roughly 80% bandwidth savings over naive full-state broadcasts.
Rendering Pipeline
The renderer draws a monospace grid where each cell is a single character. Tiles, entities, health rings, and VFX effects are all composited in strict priority order (combat VFX > status effects > trails > telegraphs > health rings > ambient > biome coloring > base tiles). The camera follows the player with smooth scrolling.
Smooth Movement
The server ticks at 900ms intervals and movement is tile-based, but the client interpolates between tile positions at 60fps for smooth visual movement. The server remains fully authoritative — the client predicts locally and the server confirms. Tile-center collision detection with corner rounding prevents visual jitter.
Input System
WASD for movement, mouse for gadget aiming (left click = gadget 1, right click = gadget 2), keyboard for overlays. The input module tracks which overlay is currently open (inventory, shop, chat, look mode, party, tickets) and blocks conflicting keys. This prevents movement while typing in chat or accidentally firing gadgets while browsing the shop.
Adaptive Framerate
The client drops framerate after periods of no input to save battery and CPU. Any keypress or mouse movement instantly snaps back to full framerate.
File Structure
| File | Lines | Purpose |
|---|---|---|
game.js | ~1,400 | Main loop, WebSocket connection, state transform |
renderer.js | ~1,200 | Canvas grid renderer, camera, lighting |
vfx.js | ~1,800 | Particle VFX engine with 14+ effect types |
input.js | — | Keyboard and mouse input with overlay mode tracking |
hud.js | — | HUD overlays: stats, inventory, shop, chat, look, party, tickets |
constants.js | — | Biome colors, enemy characters, shared data |
palette.js | — | xterm-256 color to RGB lookup table |
VFX Engine Internals
The VFX engine (vfx.js) manages a pre-allocated pool of 1,200 particle objects. Particles are recycled — never created or destroyed during gameplay — eliminating garbage collection pauses. Each particle carries position, velocity, acceleration, lifetime, color, size, and opacity. Per-frame physics updates run before the draw pass. Fire uses heat gradients with ember and smoke sub-emitters. Lightning uses recursive midpoint displacement. Each of the 14+ gadget and environmental effect types has its own particle system configuration.
Rate Limiting & Performance
The server enforces a cap of 20 messages per 100ms per connection, preventing input flooding from affecting game state or other players.
State broadcasts use a 16ms dirty flag to prevent redundant JSON serialization. Multiple state changes within a single tick are coalesced into one broadcast.
ws npm package on the server side for WebSocket support. Every file loads directly in the browser as-is.
05 3D Walls & Ray Tracing
The web client renders walls as extruded 3D faces with CSS perspective transform, giving tunnels real depth and visual weight. This is a web-client-exclusive feature enabled by default.
How It Works
After the base tile grid is drawn, a multi-pass 3D wall renderer runs:
| Pass 1 — Face Detection | Scans every wall tile for exposed faces (south, east, west) adjacent to floor or open space |
| Pass 2 — Face Drawing | Draws extruded rectangular faces with directional shading — south faces brightest, east/west progressively darker |
| Pass 3 — Light Tinting | Nearby light sources (gadgets, fire, explosions) tint wall faces toward the light color using color replacement blending |
| Pass 4 — Light Bounce (RT) | Lit wall faces cast colored glow puddles onto adjacent floor tiles. Secondary bounce extends 2 tiles out with diminishing intensity |
Raytraced Light Bounce
When a light source (flamethrower, arc welder, explosion) illuminates a 3D wall face, the light bounces back and illuminates nearby floor tiles. The bounce color matches the light source — fire casts warm orange puddles, cryo casts cool blue. A secondary bounce extends the effect 2 tiles further at reduced intensity. This creates realistic indirect illumination that makes tunnels feel alive.
Particle Wall Reflections
VFX particles that hit walls no longer just disappear. With Particle Bounce enabled, fast-moving particles reflect off wall surfaces with 45-55% energy loss and spawn bright spark sub-particles on impact. This means flamethrower embers bounce off corridor walls, lightning sparks scatter from surfaces, and explosions send debris ricocheting through rooms.
06 Persistent Fog of War
The web client features a three-zone fog of war system with smooth color transitions that gives tunnels a real sense of exploration. This is a web-client-only visual feature — the terminal client uses a simpler bright/dim/hidden approach.
Three Visibility Zones
| Bright Zone | The area immediately around your character. Full biome colors, full detail — walls, floors, enemies, and items render at their true colors. |
| Dim Zone | A transitional ring surrounding the bright zone. Biome colors smoothly blend toward gray using color interpolation — no harsh edges between bright and dim. The further from center, the more desaturated the tiles become. |
| Fog Zone | Beyond the dim ring, tiles fade from gray to very dim. Only the faintest outlines of walls and corridors are visible, giving you a sense of nearby structure without full clarity. |
Persistent Discovery
As you explore, the fog of war remembers where you've been. Explored areas remain visible as a faint gray map outline even after you move away — you can always glance back and see the shape of corridors and rooms you've already traversed. Undiscovered areas remain completely black.
Smooth Transitions
Unlike a hard cutoff between visible and hidden tiles, the web client uses per-tile color interpolation to blend smoothly between zones. Wall and floor colors gracefully desaturate from full biome palette through muted tones to gray, creating a natural gradient that feels like real light falloff rather than a game mechanic.
07 Demo Mode
The login page includes a Demo Mode button that lets you try the web client without creating an account. Demo mode connects to the real game server and spawns you into a custom sandbox tunnel with pre-placed enemies and Mk.III gadgets equipped.
What's Included
| Sandbox Tunnel | Custom 60×50 map with multiple rooms, corridors, and environmental tiles |
| Pre-spawned Enemies | 9 enemies of various types to test combat against |
| Equipped Gear | Mk.III Flamethrower and Mk.III Arc Welder — the two most visually impressive gadgets |
| God Mode | Demo player takes no damage so you can focus on exploring the VFX and controls |
| Full VFX | All particle effects, 3D walls, ray tracing, and visual features are active |