Web Build Skill

Builds the Asciicker game for web browsers using Emscripten (WebAssembly), utilizing a multi-agent approach for diagnosis and repair.

Quick Start

Attempt web build:

make -f makefile_wasm

Agentic Workflow (Recommended)

Use the installed MCP servers to act as specialized sub-agents:

1. •

   Code Analysis (Serena & Asciicker):

   • •Use asciicker-dev:check_web_build_compatibility on specific files to find C++ issues.
   • •Use serena to analyze complex linker errors or refactor platform-specific code.
   • •Example: "Serena, analyze game.cpp and refactor the file I/O to be Emscripten compatible."
2. •

   Documentation (Context7):

   • •Use context7 to fetch the latest Emscripten or WebGL documentation if flags are unclear.
   • •Example: "Context7, what are the correct linker flags for WebGL 2 in Emscripten?"
3. •

   Runtime Debugging (Chrome DevTools):

   • •Once built, start the local server and use chrome-devtools to inspect the running game.
   • •Example: "Launch Chrome, open http://localhost:8000, and check the console for WASM errors."

Current Status

Phase 3 Goal: Fix web build and get game running in browser

The web build may currently fail due to:

• •Platform-specific code (X11, SDL, terminal rendering)
• •Missing Emscripten compatibility flags
• •File I/O differences in browser environment
• •OpenGL vs WebGL differences

Diagnosis Steps

1. •

   Run Static Analysis: Use the Asciicker MCP tool to check for known issues:

   code

   Use check_web_build_compatibility on "game.cpp"
   

2. •

   Check makefile_wasm exists:

   bash

   ls -la makefile_wasm
   

3. •

   Identify compilation errors:

   bash

   make -f makefile_wasm 2>&1 | tee web_build_errors.log
   

Makefile Configuration

Web build typically needs:

CC = emcc
CXX = em++
LD = em++

CPPFLAGS = -DWASM -DUSE_SDL -O3
LDFLAGS = -s WASM=1 \
          -s USE_SDL=2 \
          -s ALLOW_MEMORY_GROWTH=1 \
          -s FULL_ES3=1 \
          -s TOTAL_MEMORY=256MB \
          --preload-file assets@/

Code Compatibility Issues

Platform-specific code to fix:

1. •

   Terminal rendering (term.cpp, x11.cpp):

   • •Not available in browser
   • •Wrap with #ifndef WASM
2. •

   File I/O:

   • •Use Emscripten virtual filesystem
   • •Preload assets with --preload-file
3. •

   OpenGL:

   • •WebGL 2.0 compatible
   • •Some extensions may not work
4. •

   Threading:

   • •Web Workers for threads
   • •May need different approach

Testing Web Build

After successful build:

# Output: game.html, game.js, game.wasm, game.data

# Serve locally
python3 -m http.server 8000

Then use Chrome DevTools MCP:

1. •Ensure Chrome is running with --remote-debugging-port=9222
2. •Ask Claude: "Open localhost:8000 in Chrome and check for console errors."

Instructions

When the user asks to build for web:

1. •Leverage MCP Tools: immediately check if check_web_build_compatibility or serena are available to analyze the codebase.
2. •Check if makefile_wasm exists.
3. •Attempt build and capture errors.
4. •If errors occur:
   • •Use Context7 to look up specific Emscripten error codes.
   • •Use Serena to propose code fixes for platform incompatibilities.
5. •If build succeeds but fails in browser:
   • •Use Chrome DevTools to capture runtime exceptions.

Related Files

• •makefile_wasm - Web build makefile (may need creation)
• •game_app.cpp - Main game file (may need WASM ifdefs)
• •term.cpp, x11.cpp - Platform-specific (disable for web)
• •Asset files - Need to be preloaded

Phase 3 Tasks

• • Diagnose web build failure points (Use MCP tools)
• • Create/fix makefile_wasm
• • Add WASM compatibility ifdefs (Use Serena)
• • Test basic web build
• • Fix asset loading for web
• • Test in browser (Use Chrome DevTools)