A CS student's journey from a blank repo to a production platform with a custom scripting language, 60fps physics engine, and 3,000+ lines of battle-tested TypeScript.

The Idea

I wanted to build something that made competitive programming fun. Not another LeetCode clone. Something where your algorithm doesn't just pass a test case — it fights.

The concept: players write code to control robots. The robots battle in real-time. Your logic vs the world.

That's Logic Arena.

Starting From Zero — The Engine

The first challenge was building a game engine from scratch. No Unity, no Phaser — pure TypeScript.

Version 0.2.0 was just two robots moving in a canvas. But getting there required solving the first real technical scar:

The Singleton Problem. Two NestJS services were sharing the game engine — or so I thought. They each had their own instance, so state was completely desynced. The fix: @Global() decorator to enforce a single shared engine across the entire module.

@Global()
@Module({
  providers: [GameService],
  exports: [GameService],
})
export class GameModule {}

One decorator. Three hours of debugging.

Building AliScript — A Custom Scripting Language

This was the craziest decision I made. Instead of using JavaScript or Lua for robot scripting, I built my own language.

Why? I wanted players to think algorithmically, not just copy-paste code. AliScript had to be simple enough for beginners but powerful enough to reward expert thinking.

The pipeline:

String Script → Lexer → Tokens → Parser → AST → Server Evaluator → Robot Actions

First version supported basic conditionals:

IF CAN_SEE_ENEMY
  FIRE
END
MOVE

By v2.4, it became Turing-complete-ish:

WHILE TRUE DO
  IF CAN_SEE_ENEMY AND MY_ENERGY > 30 DO
    BROADCAST(NEAREST_VISIBLE_X)
    BURST_FIRE
  ELSE IF IN_STASIS DO
    WAIT
  ELSE DO
    SCAN
    PATHFIND
  END
END

The hardest bug? Operator precedence.

2 + 3 * 4 was evaluating to 20 instead of 14. Every multiplication-heavy script was silently computing wrong values. The fix required splitting parseBinaryExpression() into two separate precedence levels — parseAddition() and parseMultiply().

The Performance Crisis

By v1.3.0, the arena was running at ~15fps. Profiling revealed the culprit:

3,862ms scripting bottleneck — the main thread was choking on useState updates 60 times per second.

The fix was a dual-state architecture:

// Before: useState causes re-render on every tick
const [gameState, setGameState] = useState(null);

// After: useRef for game logic, throttled state for UI only
const gameStateRef = useRef(null); // updates at 60fps, zero re-renders
const [uiState, setUiState] = useState(null); // updates at 10fps, DOM only

Scripting time dropped from 3,862ms to near zero.

Six Performance Fixes in One Release

By v2.5.0, I ran a full profiling audit and found six simultaneous bottlenecks:

1. Obstacles in every WebSocket payload — static data sent 10x/sec for no reason. Fix: initialize once, strip from all subsequent payloads.

2. 30 WebGL draw calls for obstacles — rewrote to THREE.InstancedMesh. 30 draw calls → 4 draw calls.

3. 10 useFrame JS callbacks for obstacle animations — moved all pulse math to GPU via fragment shaders. 0 JS callbacks per frame.

4. Server memory leak — replay snapshots were deep-cloning unboundedly. Added ring buffer capped at 300 objects.

5. The Ghost Match Massacre — when players closed their browser, the physics engine kept running at full speed indefinitely. Hundreds of ghost matches accumulating CPU in silence. Fix: wired disconnect lifecycle to stop the engine the moment the last player leaves.

The Deployment Nightmare

Going from localhost to production at logicarena.dev was a gauntlet.

The 2.57GB Docker Context Bomb — first build transferred 2.57GB to the Docker daemon because node_modules wasn't excluded. Fixed .dockerignore, dropped build context to 15MB.

The Prisma Ghost Engine — Alpine Linux refused to execute the Windows-compiled Prisma binary. Added linux-musl to binaryTargets.

The WebSocket CORS Wall — every Socket.IO connection rejected because the gateway was hardcoded to localhost:3000. Extended CORS array, fixed Nginx WebSocket proxy headers.

The Silent Postman — DigitalOcean silently blocks outbound SMTP on new Droplets. Zero errors, zero delivery, just void.

The Architecture Today

logic-arena/
├── apps/
│   ├── client/     # Next.js 16, React Three Fiber, PWA
│   └── server/     # NestJS 11, Socket.io, JWT
└── packages/
    ├── engine/     # Custom TypeScript physics engine
    └── logic-parser/ # AliScript lexer, parser, evaluator

What I Learned

1. Architecture decisions compound. Every "quick fix" that bypassed the module system created three bugs later.

2. Profile before optimizing. The 3,862ms bottleneck was invisible until I actually measured it.

3. Custom languages are feasible. An AST evaluator is just a recursive tree walker — intimidating name, straightforward implementation.

4. Ship early, iterate fast. Logic Arena went from 2 robots on a canvas to a 60-level algorithmic campaign in 4 months of solo development.

Try It

Live: logicarena.dev — no account required, join as guest.

GitHub: Ali-Haggag7/logic-arena

Write your first script, watch your robot fight, and tell me what you think in the comments!