# Quick Start Guide

Get up and running with Suno Gamez in 5 minutes!

## Prerequisites

- Node.js 18+ installed
- Convex account (free at [convex.dev](https://convex.dev))

## Setup Steps

### 1. Install Dependencies

```bash
npm install
```

### 2. Start Convex Development Server

```bash
npx convex dev
```

This will:
- Create or connect to your Convex project
- Generate `.env.local` with your Convex URL
- Watch for schema changes
- Keep the backend in sync

**Keep this terminal running!**

### 3. Seed Demo Games

In a new terminal or in the Convex dashboard:

#### Option A: Using Convex Dashboard

1. Open [dashboard.convex.dev](https://dashboard.convex.dev)
2. Select your project
3. Go to "Functions" tab
4. Find and run `seed:seedDemoGames`
5. Click "Run"

#### Option B: Using Convex CLI

```bash
npx convex run seed:seedDemoGames
```

This creates:
- A system creator
- A demo "Beat Clicker" game at `/games/demo-game/`

### 4. Start Next.js Development Server

In a new terminal:

```bash
npm run dev
```

### 5. Open Your Browser

Navigate to [http://localhost:3000](http://localhost:3000)

You should see:
- The discovery feed with your demo game
- Click on "Open" to see the full game page
- Click the game button to interact and send postMessage events

## Verify Everything Works

1. **Feed loads**: Home page shows the Beat Clicker game
2. **Iframe renders**: You can see and interact with the game
3. **Navigation works**: Click "Open" to go to `/game/demo-game`
4. **Styling works**: Tailwind CSS is applied correctly

## Next Steps

### Add More Games

Run in Convex dashboard or CLI:

```javascript
// Using the admin.seedGame mutation
api.admin.seedGame({
  title: "Your Game Title",
  slug: "your-game-slug",
  srcUrl: "/games/your-game-slug/index.html", // or external URL
  runtime: "vercel-static", // or "external"
  coverUrl: "https://example.com/cover.jpg",
  description: "Game description here",
  tags: ["tag1", "tag2"]
})
```

### Create Your Own Game

1. Create a folder: `public/games/my-game/`
2. Add an `index.html` file (see `public/games/demo-game/index.html` as template)
3. Use the postMessage API to communicate with the host:

```javascript
// When game starts
window.parent?.postMessage({
  type: 'game:start',
  slug: 'my-game'
}, '*');

// When score updates
window.parent?.postMessage({
  type: 'game:score',
  slug: 'my-game',
  score: yourScore
}, '*');

// Listen for host commands
window.addEventListener('message', (ev) => {
  if (ev.data?.type === 'host:pause') {
    // Pause your game
  }
});
```

4. Seed it using `admin.seedGame` mutation

## Troubleshooting

### "No games yet" message appears

- Check Convex dashboard to see if games were seeded
- Run `npx convex run seed:seedDemoGames` again
- Check browser console for errors

### Iframe not loading

- Make sure `public/games/demo-game/index.html` exists
- Check browser console for CORS or CSP errors
- Try opening the iframe URL directly: `http://localhost:3000/games/demo-game/index.html`

### TypeScript errors

```bash
# Regenerate Convex types
npx convex dev
```

### Environment variable not set

- Make sure `.env.local` has `NEXT_PUBLIC_CONVEX_URL`
- Restart Next.js dev server after adding env vars

## Development Tips

1. **Hot reloading**: Both Convex and Next.js support hot reloading
2. **Convex dashboard**: Great for testing mutations and queries
3. **Browser DevTools**: Check Network and Console tabs for issues
4. **PostMessage debugging**: Add console.logs in the message handlers

## Ready to Deploy?

See [README.md](./README.md) for production deployment instructions!