Cursor Set up Prompt Battle Web Game mv First Dev Day

# Set up prompt battle web game MVP
_Exported on 9/11/2025 at 21:59:18 GMT+2 from Cursor (1.5.11)_

---

**User**

Context.
I am building an MVP called Prompt Battle WebGame. Players join a private room, see an AI-generated image, write a short prompt under a strict character limit, submit before a countdown ends, then see a transparent similarity score against the hidden original prompt. For the MVP I will use a tiny curated subset of the Kaggle “Stable Diffusion 100k Custom Prompts and Images” dataset, not the full dataset. I want a deterministic, explainable scoring function. I do not want heavy frameworks. I want plain HTML, CSS, and vanilla JavaScript on the frontend, and a minimal Node.js Express backend with a small SQLite database. Keep everything simple, explicit, and transparent.

Non goals for MVP.
No accounts. No global matchmaking. No chat. No payments. No embeddings. No UI frameworks. No serverless dependencies.

Technical constraints.
Frontend uses plain HTML, CSS, JS ES modules. Backend uses Node 18+, Express, and better-sqlite3. Data rests in a local SQLite file. Environment variables are optional and only for dataset mode or port. Scoring is deterministic and implemented in plain JS. The API returns JSON only. Security is basic and appropriate for a student MVP. The code should run locally with minimal steps.

Deliverable for this prompt.
Set up a working repository scaffold, package scripts, a running Express server that serves the frontend, a health endpoint, SQLite initialization, and placeholders for dataset files. Create minimal HTML shells for seven screens that match these names:
1. Main Lobby (index.html)
2. Host Party Menu (host.html)
3. Guest Party Menu (guest.html)
4. In-Game Round Screen (round.html)
5. Freeze Screen (freeze.html)
6. Results Screen (results.html)
7. Final Results Screen (final.html)

Repository layout to create now.
prompt-battle/
  backend/
    server.js
    scoring.js
    db.js
    dataset/
      images/                ← keep empty for now
      index.csv              ← header only for now
    tests/
      test_scoring.js        ← empty placeholder for now
    package.json
  frontend/
    index.html
    host.html
    guest.html
    round.html
    freeze.html
    results.html
    final.html
    css/styles.css
    js/api.js
    js/lobby.js
    js/host.js
    js/guest.js
    js/round.js
    js/freeze.js
    js/results.js
  docs/
    README_MVP.md
  .gitignore
  README.md

Coding standards and expectations.
1. No UI frameworks. Plain semantic HTML, minimal CSS, small JS modules.
2. Keep server code modular. scoring.js must export scoreAttempt(original, attempt) but may remain a stub for now.
3. db.js must create tables on first run with better-sqlite3. Provide a small helper to run migrations on startup.
4. server.js must serve ../frontend statically and expose GET /api/health that returns { ok: true }.
5. Add basic error handling and CORS disabled by default since frontend is served by the same server.
6. All endpoints will be JSON. No templating engines.
7. Provide simple logging to console with timestamps.

SQLite schema to initialize now.
Tables only. Do not write business logic yet.
rooms(code text primary key, createdAt integer)
players(id integer primary key autoincrement, code text, name text)
rounds(id text primary key, code text, imagePath text, sourcePrompt text, timeLimit integer, createdAt integer, closedAt integer)
submissions(id integer primary key autoincrement, roundId text, playerName text, promptText text, createdAt integer)
results(id integer primary key autoincrement, roundId text, playerName text, promptText text, score integer, matched text, missed text)

NPM scripts to add in backend/package.json.
"start": "node server.js"
"dev": "nodemon server.js"
Also add dependencies express and better-sqlite3 and devDependency nodemon.

Frontend pages.
Create minimal HTML5 skeletons with the page title and a root container. Link styles.css and the page-specific JS module where noted. Do not implement UI logic yet; only ensure the pages load and reference their JS files. Each page must include a visible H1 matching the screen name so I can verify routing.

API wrapper placeholder.
Create frontend/js/api.js with a tiny helper export getJson(url) and postJson(url, body) that use fetch and return parsed JSON. No business endpoints yet.

Dataset placeholders.
Create backend/dataset/index.csv with header: prompt,image_file,split,difficulty
Leave it with just the header and no rows for now. Leave the images folder empty.

Documentation.
Create README.md at repo root with a two minute getting started section:
1. cd backend
2. npm install
3. npm run dev
4. open http://localhost:3000
Create docs/README_MVP.md explaining the seven screens and the upcoming endpoints that will be added later. Keep it brief.

Git ignore.
Ignore node_modules, *.db, .env, and any build artifacts.

Acceptance criteria for this prompt.
1. Running “npm run dev” inside backend starts an Express server on port 3000.
2. Visiting http://localhost:3000 loads index.html from the frontend.
3. GET http://localhost:3000/api/health returns { ok: true }.
4. The SQLite file is created on first run and contains the specified tables.
5. All seven HTML pages render with the correct H1 and link to styles.css and their JS module without 404 errors.
6. The repository structure matches the layout above.

Now implement everything requested above. When finished, show:
1. The created file tree.
2. The exact backend/package.json content.
3. The exact server startup command to run.
4. A short note on where the SQLite file is created.


---

**Cursor**

I'll help you set up the Prompt Battle WebGame MVP scaffold. Let me start by creating the project structure and implementing all the requested components.


Let me start by creating the backend directory structure and package.json:


Let me use the Windows-compatible commands:


Now let me create the backend package.json: