TalkQuest - City Speaking Game

Interactive board-style speaking trainer for 1-on-1 ESL lessons.

Features

• Two-player turn-based board flow (Student + Teacher)
• Dice roll 1–10 with animated piece movement
• Location scenes with speaking prompts and roleplay briefs
• Theme support: city, museum, airport
• Session-only state (no login, no progress save)
• Responsive wrapper scales 1280×720 to any viewport (phone / tablet / desktop)
• npm package with scoped CSS — safe to embed on host sites

Install

npm install speakid-city-speaking-game

Peer dependencies: react and react-dom (>= 18.2).

Usage

import CityGame from "speakid-city-speaking-game";
import "speakid-city-speaking-game/style.css";

// Fills viewport; scales 1280×720 canvas to fit (portrait mobile included)
<CityGame theme="city" baseURL="/cloud/speakid/games/talkquest/" />

Give the host container a defined height (for example 100vh or min-height: 600px).

Fixed 1280×720 canvas without scaling:

import { CityGame as CityGameFixed } from "speakid-city-speaking-game";
import "speakid-city-speaking-game/style.css";

<CityGameFixed theme="city" baseURL="" />;

Style isolation

Styles are scoped so they do not clash with the host site:

1. Import speakid-city-speaking-game/style.css once in your app.
2. Components render inside [data-talkquest-root] (set automatically).
3. CSS module class names are prefixed (tq__…) and wrapped under [data-talkquest-root].

Host global rules like .btn, .sidebar, or button { … } should not override game UI. The game styles do not leak generic class names into the page.

Props

| Prop | Type | Description | |------|------|-------------| | theme | "city" \| "museum" \| "airport" | Location set and map | | baseURL | string | CDN base for images/sounds. Default: /cloud/speakid/games/talkquest/ | | showLogo | boolean | Show SPEAKID logo on map (default true) | | logoUrl | string | Custom logo base URL (without extension) |

CityGameWrapper also accepts baseWidth / baseHeight (default 1280×720).

Development

npm install
npm run dev

Build & publish

npm run build
npm publish

prepublishOnly runs the build automatically. The package ships only dist/ and README.md.

Cloud assets

| Asset | Path | |-------|------| | City map | {baseURL}images/map.png | | Scene images | {baseURL}images/themes/{locationId}/scene-{n}.png | | Game pieces | {baseURL}images/pieces/ | | Dice physics | {baseURL}assets/dice-box/ (wasm + textures) |

If baseURL is omitted, the game uses /cloud/speakid/games/talkquest/.

MinIO layout (games/talkquest/):

logo.svg
images/map.png, [email protected], pieces/, themes/
sounds/dice-roll.wav
assets/dice-box/ammo/ammo.wasm.wasm
assets/dice-box/themes/default/...

For .wasm files the server must return Content-Type: application/wasm (not text/html on 404).

Exports

import CityGame, {
  CityGameWrapper,
  CityGame as CityGameFixed,
  useAdaptiveScale,
  resolveAssetsBaseURL,
  TALKQUEST_ROOT_ATTRIBUTE,
} from "speakid-city-speaking-game";