VSArcade

Retro arcade games inside VS Code — Game Boy-inspired visuals, shared webview runtime, zero context switching.

🕹️ Turn the Explorer sidebar into a tiny arcade cabinet: pick a game, play it in place, pop it out to fullscreen, or let auto-play take over for passive fun while you work.


_{Sidebar mode}	_{Fullscreen mode}

✨ Why VSArcade


🎮 10 retro games	Play without leaving the editor
⚡ Shared runtime	One shell powers every game — built once, not per game
🔲 Fullscreen toggle	Move the active game to fullscreen without losing state
🤖 Auto-play AI	Every game ships an AI module for hands-free fun

🕹️ Games

All games render on a 160×144 canvas — the original Game Boy resolution — and support both manual play and auto-play.

Game	Inspired by	What you do
🧱 Falling Blocks	Tetris	Rotate and drop blocks to clear full lines
🐍 Snakey	Snake	Eat to grow longer; avoid the walls and your own tail
🔢 Twos	2048	Slide tiles to merge matching numbers
💣 MineHunt	Minesweeper	Clear safe cells and flag the hidden mines
🏓 Pong	Pong	Rally the ball past the opponent's paddle
🧱 Brickout	Breakout	Bounce a ball off a paddle to break every brick
🐦 Skyhop	Flappy Bird	Tap to flap through the gaps between pipes
👾 DotChase	Pac-Man	Eat pellets in a maze while four ghosts hunt you
👾 Invaders	Space Invaders	Shoot down descending waves of aliens
🥊 Duel	Street Fighter	Land high and low hits, block, and drain the opponent's health

🚀 Quick Start

Open the VSArcade view from the Explorer sidebar.
Run VSArcade: Select Game from the Command Palette.
Pick a game from the list.
Run VSArcade: Toggle Fullscreen to move the active game into the editor area.

⌨️ Commands

Command	What it does
`VSArcade: Select Game`	Opens the game picker and switches the active game
`VSArcade: Toggle Fullscreen`	Moves the current game into a fullscreen webview panel
`VSArcade: Toggle Auto Play`	Turns AI-driven play on and off for the active game

🧩 Feature Overview

Area	Details
Sidebar play	Runs in a dedicated webview view inside the Explorer
Fullscreen mode	Uses a centered `WebviewPanel` and keeps runtime state in sync
Shared runtime	One browser-side runtime loads the selected game bundle dynamically
Auto-play	Each game bundles an AI module the runtime can drive hands-free
Theme awareness	Adapts shell styling to VS Code dark and light themes
Retro rendering	Pixel-font helpers and canvas-first rendering keep the arcade feel

🛠️ Development

This project uses pnpm — see pnpm-lock.yaml.

pnpm install
pnpm run watch     # rebuild on change
pnpm run compile   # one-off build

Press F5 to open an Extension Development Host and test locally.

Project Shape

Path	Responsibility
`src/extension.ts`	Registers commands, views, and the game library
`src/constants.ts`	Command, view, and game identifiers plus the shared palette
`src/types/game.d.ts`	`IGameDescriptor` contract every game implements
`src/core/GameManager.ts`	Tracks active game selection, runtime snapshot, and surface ownership
`src/core/ArcadeViewProvider.ts`	Builds the sidebar webview shell
`src/core/FullscreenPanel.ts`	Hosts the fullscreen version of the active game
`src/webview/runtime.ts`	Shared browser-side runtime and message bus
`src/webview/text.ts`	Shared pixel text measurement and drawing helpers
`src/games/*`	One folder per game

Anatomy of a game

Every game folder follows the same layout:

File	Responsibility
`descriptor.ts`	Host-side metadata: `id`, `name`, `version`, webview entry
`engine.ts`	Pure game logic and state updates
`renderer.ts`	Draws the game state onto the canvas
`ai.ts`	Auto-play strategy for the game
`webview.ts`	Wires engine, renderer, and AI into the shared runtime
`constants.ts`	Tunable values — sizes, speeds, colors
`types.ts`	Game-specific state and snapshot types

Architecture Notes

The extension host never runs game logic — it only registers games and owns surfaces.
Each game is registered through an IGameDescriptor with its own webview entry bundle.
The shared runtime handles input wiring, the render loop, state sync, and shell controls.
Engine, renderer, and AI are separate modules per game, so logic stays free of rendering.
Sidebar and fullscreen surfaces stay synchronized through host-managed snapshots.

📜 License

MIT

VS Arcade

Monosen