Jukebox

A retro-inspired jukebox, built for the Recurse Center's RCade.

Adding songs

There are currently only 16 slots, so get them while they're hot!

1. Add your song to the /public folder
2. Add your metadata to songs.ts
3. Make a pull request

---

About RCade

This game is built for RCade, a custom arcade cabinet at The Recurse Center. Learn more about the project at github.com/fcjr/RCade.

Getting Started

Install dependencies:

npm install

Start the development server:

npm run dev

This launches Vite on port 5173 and connects to the RCade cabinet emulator.

Building

npm run build

Output goes to dist/ and is ready for deployment.

Project Structure

├── public/           # Static assets (copied as-is)
├── src/
│   ├── main.ts       # Game entry point
│   └── style.css     # Styles
├── index.html        # HTML entry
├── vite.config.js    # Vite configuration
├── tsconfig.json     # TypeScript config
└── package.json

Adding Assets

Imported assets (recommended) - Place in src/ and import them. Vite bundles these with hashed filenames for cache busting:

import spriteUrl from './sprite.png';
import jumpSound from './jump.mp3';

const img = new Image();
img.src = spriteUrl;

const sound = new Audio(jumpSound);
sound.play();

Static assets - Place in public/ for files copied as-is. Access via root path (/sprite.png).

Arcade Controls

This template uses @rcade/plugin-input-classic for arcade input:

import { PLAYER_1, SYSTEM } from '@rcade/plugin-input-classic'

// D-pad
if (PLAYER_1.DPAD.up) { /* ... */ }
if (PLAYER_1.DPAD.down) { /* ... */ }
if (PLAYER_1.DPAD.left) { /* ... */ }
if (PLAYER_1.DPAD.right) { /* ... */ }

// Buttons
if (PLAYER_1.A) { /* ... */ }
if (PLAYER_1.B) { /* ... */ }

// System
if (SYSTEM.ONE_PLAYER) { /* Start game */ }

Deployment

First, create a new repository on GitHub:

1. Go to github.com/new
2. Create a new repository (can be public or private)
3. Don't initialize it with a README, .gitignore, or license

Then connect your local project and push:

git remote add origin git@github.com:YOUR_USERNAME/YOUR_REPO.git
git push -u origin main

The included GitHub Actions workflow will automatically deploy to RCade.

---

Made with <3 at The Recurse Center