A lightweight VS Code extension that adds a reel spinner webview to the Explorer panel.
Players can spin the reels, track balance, and reset credits while keeping the UI inside a VS Code custom view.
Features
- Webview-based slot machine UI inside the Explorer view
- Current balance display and spin cost indicator
- Animated reel behavior and result messages
- Reset balance command to restore credits
- Custom commands exposed in the Command Palette
Usage
- Open this extension folder in VS Code.
- Run
npm installif dependencies are not already installed. - Build the extension with:
npm run compile
- Press
F5to launch the extension in the Extension Development Host. - Open the
Code Spinview from the Explorer panel. - Click Spin to play and Reset to restore the balance to 100.
Commands
codeSpin.spin— Trigger a reel spin from the Command Palette.codeSpin.resetBalance— Reset the balance to 100.
Development
Use these scripts during development:
npm run compile— Compile TypeScript to JavaScript.npm run watch— Run the TypeScript compiler in watch mode.npm run lint— Run ESLint on thesrcfolder.npm test— Run the extension tests.
Project structure
src/extension.ts— Extension activation, webview provider, and message handling.src/view.html.ts— Webview HTML builder and client-side slot logic.src/view.css— External CSS used by the webview.src/slotlogic.ts— Slot spin simulation and payout calculation.src/test/extension.test.ts— Extension unit tests.
Notes
- The extension contributes a custom Explorer webview named
Code Spin. - The webview loads CSS via
webview.asWebviewUri(...). - State persistence is handled with
acquireVsCodeApi().setState(...).
License
This project is provided as-is. Update the license and contribution details as needed.