@myvillage/cli 1.63.0 → 1.64.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myvillage/cli",
-  "version": "1.63.0",
+  "version": "1.64.1",
   "description": "MyVillageOS CLI for community developers",
   "type": "module",
   "bin": {

package/src/utils/templates.js

@@ -55,6 +55,15 @@ const BRAND = {
 
 export function createGameProject(targetDir, options) {
   const { name, description, type, ageGroup, orientation = 'landscape' } = options;
+
+  // A quiz is a 2D UI experience, not a 3D world — it gets a dedicated DOM/CSS
+  // scaffold (no Three.js, no renderer, no game loop) instead of the shared
+  // 3D shell the exploration/narrative/custom types use.
+  if (type === 'quiz') {
+    createQuizProject(targetDir, options);
+    return;
+  }
+
   const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
 
   // Create directory structure
@@ -110,6 +119,480 @@ export function createGameProject(targetDir, options) {
   }
 }
 
+// ── Quiz Game Project (2D) ─────────────────────────────────────────
+// A quiz is a UI experience, so this scaffold is plain DOM/CSS — no Three.js,
+// no renderer, no game loop. Two files hold everything a developer edits:
+//   src/questions.js  - the questions + quiz settings (content)
+//   src/styles.css    - the look
+// src/main.js runs the quiz lifecycle (start → questions → results) and reports
+// the result through the shared MyVillage game contract.
+function createQuizProject(targetDir, options) {
+  const { name, description, ageGroup, orientation = 'portrait' } = options;
+  const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+
+  const dirs = ['', 'src', 'assets', 'public'];
+  for (const dir of dirs) {
+    mkdirSync(join(targetDir, dir), { recursive: true });
+  }
+
+  writeFileSync(join(targetDir, 'package.json'), generateQuizPackageJson(name, description, slug, ageGroup, orientation));
+  writeFileSync(join(targetDir, 'vite.config.js'), generateViteConfig());
+  writeFileSync(join(targetDir, '.gitignore'), generateGitignore());
+  writeFileSync(join(targetDir, 'index.html'), generateQuizIndexHtml(name, orientation));
+  writeFileSync(join(targetDir, 'README.md'), generateQuizReadme(name, description, ageGroup));
+
+  writeFileSync(join(targetDir, 'src/main.js'), generateQuizApp());
+  writeFileSync(join(targetDir, 'src/questions.js'), generateQuizQuestions(name));
+  writeFileSync(join(targetDir, 'src/styles.css'), generateQuizStyles());
+  writeFileSync(join(targetDir, 'src/myvillage-game.js'), generateMyVillageGameSdk());
+
+  writeFileSync(join(targetDir, 'assets/README.md'), generateAssetsReadme(orientation));
+  copyTemplateArt(targetDir, 'quiz', orientation);
+}
+
+function generateQuizPackageJson(name, description, slug, ageGroup, orientation) {
+  return JSON.stringify({
+    name: slug,
+    version: '1.0.0',
+    description,
+    private: true,
+    type: 'module',
+    scripts: {
+      dev: 'vite',
+      build: 'vite build',
+      preview: 'vite preview',
+    },
+    // No Three.js — a quiz is pure DOM/CSS.
+    devDependencies: {
+      vite: '^5.0.0',
+    },
+    myvillage: {
+      name: name,
+      gameId: null,
+      gameType: 'quiz',
+      targetAge: ageGroup,
+      orientation,
+      aspectRatio: orientation === 'portrait' ? '9:16' : '16:9',
+      assets: {
+        thumbnail: 'assets/thumbnail.png',
+        banner: 'assets/banner.png',
+      },
+      villages: [],
+      lastDeployed: null,
+    },
+  }, null, 2) + '\n';
+}
+
+function generateQuizIndexHtml(name, orientation) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <!-- orientation: ${orientation} -->
+  <title>${name}</title>
+  <link rel="stylesheet" href="/src/styles.css" />
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>
+`;
+}
+
+function generateQuizQuestions(name) {
+  return `// Quiz content — edit this file to make the quiz your own.
+//
+// Each question has the prompt, a list of choices, and \`correct\`: the index of
+// the right choice, starting at 0. Add or remove questions freely.
+
+export const quizConfig = {
+  // Shown on the start screen.
+  title: ${JSON.stringify(name)},
+  intro: 'Answer the questions and see how many you get right!',
+  // Fraction of questions you must get right to "win" (0.6 = 60%).
+  passThreshold: 0.6,
+  // Briefly highlight the correct / incorrect answer after each pick.
+  showFeedback: true,
+};
+
+export const questions = [
+  {
+    question: 'What is 2 + 2?',
+    choices: ['3', '4', '5', '6'],
+    correct: 1,
+  },
+  {
+    question: 'What is the capital of France?',
+    choices: ['London', 'Berlin', 'Paris', 'Madrid'],
+    correct: 2,
+  },
+  {
+    question: 'Which planet is closest to the Sun?',
+    choices: ['Venus', 'Mercury', 'Earth', 'Mars'],
+    correct: 1,
+  },
+];
+`;
+}
+
+function generateQuizApp() {
+  return `// Quiz Game — a 2D question/answer game.
+//
+// Edit your questions and settings in src/questions.js, and the look in
+// src/styles.css. This file runs the quiz: it renders the start screen, each
+// question (with a progress bar + score), instant right/wrong feedback, and a
+// results screen — then reports the result to the MyVillage host.
+
+import { MyVillageGame } from './myvillage-game.js';
+import { quizConfig, questions } from './questions.js';
+
+class QuizGame {
+  constructor(root) {
+    this.root = root;
+    this.index = 0;
+    this.score = 0;
+    this.answered = false;
+
+    this.renderStart();
+
+    // Tell the MyVillage host the game is loaded and interactive.
+    MyVillageGame.ready();
+  }
+
+  renderStart() {
+    this.root.innerHTML = \`
+      <main class="screen">
+        <div class="card start-card">
+          <h1 class="title">\${quizConfig.title}</h1>
+          <p class="intro">\${quizConfig.intro}</p>
+          <button class="btn primary" id="start-btn">Start Quiz</button>
+        </div>
+      </main>
+    \`;
+    this.root.querySelector('#start-btn').addEventListener('click', () => this.begin());
+  }
+
+  begin() {
+    this.index = 0;
+    this.score = 0;
+    this.renderQuestion();
+  }
+
+  renderQuestion() {
+    if (this.index >= questions.length) {
+      this.renderResults();
+      return;
+    }
+
+    this.answered = false;
+    const q = questions[this.index];
+    const total = questions.length;
+    const progress = (this.index / total) * 100;
+
+    this.root.innerHTML = \`
+      <main class="screen">
+        <header class="quiz-header">
+          <div class="progress"><div class="progress-fill" style="width: \${progress}%"></div></div>
+          <div class="meta">
+            <span>Question \${this.index + 1} of \${total}</span>
+            <span>Score: \${this.score}</span>
+          </div>
+        </header>
+        <div class="card question-card">
+          <p class="question">\${q.question}</p>
+          <div class="choices">
+            \${q.choices.map((choice, i) => \`<button class="btn choice" data-index="\${i}">\${choice}</button>\`).join('')}
+          </div>
+        </div>
+      </main>
+    \`;
+
+    this.root.querySelectorAll('.choice').forEach((btn) => {
+      btn.addEventListener('click', () => this.answer(Number(btn.dataset.index)));
+    });
+  }
+
+  answer(choiceIndex) {
+    if (this.answered) return; // ignore extra taps while showing feedback
+    this.answered = true;
+
+    const q = questions[this.index];
+    if (choiceIndex === q.correct) this.score++;
+
+    // Reveal the right answer (and the wrong pick, if any).
+    const buttons = this.root.querySelectorAll('.choice');
+    buttons.forEach((btn, i) => {
+      btn.disabled = true;
+      if (quizConfig.showFeedback) {
+        if (i === q.correct) btn.classList.add('correct');
+        else if (i === choiceIndex) btn.classList.add('incorrect');
+      }
+    });
+
+    const delay = quizConfig.showFeedback ? 900 : 150;
+    window.setTimeout(() => {
+      this.index++;
+      this.renderQuestion();
+    }, delay);
+  }
+
+  renderResults() {
+    const total = questions.length;
+    const won = total > 0 && this.score / total >= quizConfig.passThreshold;
+    const pct = total > 0 ? Math.round((this.score / total) * 100) : 0;
+
+    this.root.innerHTML = \`
+      <main class="screen">
+        <div class="card results-card">
+          <h2 class="title">\${won ? 'Great job!' : 'Quiz complete'}</h2>
+          <p class="result-score">\${this.score} / \${total}</p>
+          <p class="result-pct">\${pct}% correct</p>
+          <button class="btn primary" id="again-btn">Play Again</button>
+        </div>
+      </main>
+    \`;
+    this.root.querySelector('#again-btn').addEventListener('click', () => this.begin());
+
+    // REQUIRED: tell the MyVillage host the game is finished. The host records
+    // the session, awards this game's MVT reward, and returns the player to the
+    // catalog. During \`npm run dev\` there's no host, so this just logs.
+    MyVillageGame.complete({ score: this.score, won, custom: { total } });
+  }
+}
+
+new QuizGame(document.getElementById('app'));
+`;
+}
+
+function generateQuizStyles() {
+  return `/* Quiz styling — tweak freely. Colors use the MyVillage palette. */
+
+:root {
+  --gold: #FFD700;
+  --primary: #B07C00;
+  --cream: #E4DCCB;
+  --dark: #302017;
+  --deep-green: #043922;
+  --green: #228B22;
+  --teal: #799C9F;
+  --correct: #2e9e4f;
+  --incorrect: #c0392b;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html, body {
+  height: 100%;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+  background: linear-gradient(160deg, var(--deep-green), var(--dark));
+  color: var(--cream);
+  display: flex;
+  -webkit-font-smoothing: antialiased;
+}
+
+#app { flex: 1; display: flex; }
+
+.screen {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  padding: 24px;
+  width: 100%;
+}
+
+.card {
+  width: 100%;
+  max-width: 480px;
+  background: rgba(48, 32, 23, 0.92);
+  border: 2px solid var(--primary);
+  border-radius: 20px;
+  padding: 28px 24px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
+}
+
+.start-card, .results-card { text-align: center; }
+
+.title {
+  color: var(--gold);
+  font-size: 30px;
+  margin-bottom: 12px;
+}
+
+.intro {
+  font-size: 16px;
+  line-height: 1.5;
+  margin-bottom: 24px;
+  color: var(--cream);
+}
+
+/* Header: progress bar + meta row */
+.quiz-header { width: 100%; max-width: 480px; }
+
+.progress {
+  height: 8px;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 99px;
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--gold);
+  border-radius: 99px;
+  transition: width 0.3s ease;
+}
+
+.meta {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  color: var(--teal);
+  font-weight: 600;
+}
+
+.question {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--gold);
+  margin-bottom: 20px;
+  text-align: center;
+  line-height: 1.4;
+}
+
+.choices { display: flex; flex-direction: column; gap: 12px; }
+
+/* Buttons */
+.btn {
+  font-family: inherit;
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 12px;
+  border: none;
+  cursor: pointer;
+  min-height: 52px;
+  padding: 14px 18px;
+  transition: transform 0.05s ease, background 0.2s ease, border-color 0.2s ease;
+}
+
+.btn:active { transform: scale(0.98); }
+
+.btn.primary {
+  background: var(--primary);
+  color: #fff;
+  width: 100%;
+  font-size: 18px;
+}
+
+.btn.primary:hover { background: #c98f0a; }
+
+.choice {
+  background: var(--deep-green);
+  color: var(--cream);
+  border: 2px solid var(--green);
+  text-align: left;
+  width: 100%;
+}
+
+.choice:hover:not(:disabled) { border-color: var(--gold); }
+.choice:disabled { cursor: default; opacity: 0.95; }
+
+.choice.correct {
+  background: var(--correct);
+  border-color: var(--correct);
+  color: #fff;
+}
+
+.choice.incorrect {
+  background: var(--incorrect);
+  border-color: var(--incorrect);
+  color: #fff;
+}
+
+.result-score {
+  font-size: 48px;
+  font-weight: 800;
+  color: var(--gold);
+  margin: 12px 0 4px;
+}
+
+.result-pct {
+  font-size: 18px;
+  color: var(--teal);
+  margin-bottom: 24px;
+}
+`;
+}
+
+function generateQuizReadme(name, description, ageGroup) {
+  return `# ${name}
+
+${description}
+
+- **Game Type**: Quiz
+- **Target Age Group**: ${ageGroup}
+- **Built with**: MyVillageOS CLI
+
+A 2D quiz game — no 3D engine. Edit two files to make it yours:
+
+- **src/questions.js** — your questions, answers, and quiz settings (title, pass mark, feedback)
+- **src/styles.css** — colors, fonts, and layout
+
+## Getting Started
+
+\`\`\`bash
+npm install
+npm run dev      # play it locally with live reload
+npm run build    # build for production (outputs to dist/)
+\`\`\`
+
+## Editing questions
+
+Open \`src/questions.js\`. Each question is an object with the prompt, the list of
+\`choices\`, and \`correct\` — the index of the right choice (0 = the first):
+
+\`\`\`js
+{
+  question: 'Which planet is closest to the Sun?',
+  choices: ['Venus', 'Mercury', 'Earth', 'Mars'],
+  correct: 1, // 'Mercury'
+}
+\`\`\`
+
+\`quizConfig\` at the top of the file controls the title, intro text, the pass
+threshold (fraction correct needed to "win"), and whether to flash right/wrong
+feedback after each answer.
+
+## The game contract
+
+When the quiz finishes it calls \`MyVillageGame.complete({ score, won })\`, so the
+MyVillage host records the session and awards the player this game's MVT reward.
+\`MyVillageGame.ready()\` is called on load. During \`npm run dev\` there's no host
+attached, so these just log to the console — that's expected.
+
+## Deploying
+
+Starter cover art ships in \`assets/\` — swap in your own thumbnail.png + banner.png, then:
+
+\`\`\`bash
+myvillage deploy
+\`\`\`
+
+## Learn More
+
+- [Vite Documentation](https://vitejs.dev/)
+- [MyVillageOS Developer Guide](https://portal.myvillageproject.ai)
+`;
+}
+
 // ── Unity Game Project ─────────────────────────────────────────────
 
 export async function createUnityGameProject(targetDir, options) {