Find three cards that form a "set" — for each feature (shape, color, number, shading), the three cards must be all the same or all different. This is for RCade an awesome project by Frank Chiarulli Jr. you can read about below :)

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

Install dependencies:

npm install

Start the development server:

npm run dev

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

npm run build

Output goes to dist/ and is ready for deployment.

├── src/
│   ├── sketch.ts     # p5.js sketch (game code)
│   └── style.css     # Styles
├── index.html        # HTML entry
├── tsconfig.json     # TypeScript config
└── package.json

The template uses p5.js in instance mode with TypeScript:

import p5 from "p5";

const sketch = (p: p5) => {
    p.setup = () => {
        p.createCanvas(336, 262);  // RCade dimensions
    };

    p.draw = () => {
        p.background(26, 26, 46);
        p.fill(255);
        p.ellipse(p.width / 2, p.height / 2, 50, 50);
    };
};

new p5(sketch, document.getElementById("sketch")!);

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 */ }

The RCade cabinet uses a 336x262 pixel display. The template is pre-configured with these dimensions.

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 [email protected]: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