jwalsh / jwalsh/2048-cli-debug

Build 2048 as WebAssembly (WASM) for browser play

Open
#2 0 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
Python
Stars
0
Forks
0
PR merge metrics
No merged PRs in 30d

Description

## Feature Request: WebAssembly Build Target

### Description
Add support for compiling 2048-cli to WebAssembly, enabling the game to run in web browsers while maintaining the debugging capabilities.

### Motivation
- Run the game in any modern web browser
- Enable web-based debugging and visualization
- Share game states via URLs
- Create interactive tutorials
- Cross-platform without installation

### Proposed Implementation

1. **Add WASM build target**:
```makefile
# In Makefile
wasm: $(FILTERED_C_FILES) src/gfx_web.c
emcc $(CFLAGS) $(FILTERED_C_FILES) $(MERGE_FILE) src/gfx_web.c \
-o 2048.js \
-s WASM=1 \
-s EXPORTED_FUNCTIONS='["_main", "_engine_move", "_gamestate_init"]' \
-s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'
```

2. **Create web graphics layer** (`src/gfx_web.c`):
```c
#include
#include

void gfx_draw(struct gfx_state *s, struct gamestate *g) {
EM_ASM({
updateBoard($0, $1);
}, g->grid_data_ptr, g->gridsize);
}
```

3. **HTML Interface**:
```html
<\!DOCTYPE html>


2048 Debug (WASM)

.tile { width: 70px; height: 70px; ... }
.debug-panel { ... }





Dump Memory
Show State




```

4. **Debug Interface**:
```javascript
// JavaScript debugging functions
function dumpMemory() {
const ptr = Module._gamestate_get_grid_ptr();
const size = Module._gamestate_get_size();
const memory = new Int32Array(Module.HEAP32.buffer, ptr, size);
console.table(memory);
}
```

### Architecture Considerations
- Memory management between JS and WASM
- Input handling (keyboard events)
- Rendering performance
- Debug symbol preservation

### Tasks
- [ ] Install and configure Emscripten
- [ ] Create gfx_web.c implementation
- [ ] Add WASM build targets
- [ ] Create HTML/CSS interface
- [ ] Implement JavaScript debugging tools
- [ ] Add memory inspection utilities
- [ ] Create web-based REPL for testing
- [ ] Package as npm module
- [ ] Deploy demo to GitHub Pages

### Benefits
- Universal access via web browsers
- No installation required
- Easy sharing and embedding
- Rich debugging UI possibilities
- Educational tool for algorithm visualization

### Challenges
- File I/O (highscores) needs web storage
- Terminal UI needs translation to DOM
- Performance optimization for smooth gameplay

### References
- [Emscripten Documentation](https://emscripten.org/docs/)
- [WebAssembly.org](https://webassembly.org/)
- [WASM Memory Model](https://webassembly.github.io/spec/core/syntax/modules.html#memories)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.