Contentful でゲーム仕様を構造化しておくと、クイズ Bot などへの再利用が簡単だった話

import type { ContentfulResponse, StageEntry } from "@/types/contentful";

function getContentfulConfig() {
  const spaceId = process.env.CONTENTFUL_SPACE_ID || "vw67dgbqxobj";
  const environmentId = process.env.CONTENTFUL_ENVIRONMENT_ID || "master";
  const accessToken = process.env.CONTENTFUL_CDA_TOKEN;

  if (!accessToken) {
    throw new Error("CONTENTFUL_CDA_TOKEN is not set");
  }

  return { spaceId, environmentId, accessToken };
}

export async function getBattleStages(): Promise<StageEntry[]> {
  const { spaceId, environmentId, accessToken } = getContentfulConfig();

  const params = new URLSearchParams({
    content_type: "stage",
    "fields.stageType": "battle",
    "fields.bossName[exists]": "true",
    select:
      "sys.id,fields.stageNumber,fields.name,fields.bossName,fields.stageType",
  });

  const url = `https://cdn.contentful.com/spaces/${spaceId}/environments/${environmentId}/entries?${params}`;

  const response = await fetch(url, {
    headers: {
      Authorization: `Bearer ${accessToken}`,
      "Content-Type": "application/json",
    },
  });

  if (!response.ok) {
    throw new Error(
      `Failed to fetch stages from Contentful: ${response.status} ${response.statusText}`,
    );
  }

  const data: ContentfulResponse<StageEntry["fields"]> = await response.json();
  return data.items;
}

import { NextResponse } from "next/server";
import { getBattleStages } from "@/lib/contentful";
import type { Quiz } from "@/types/quiz";

function getRandomElement<T>(array: T[]): T {
  return array[Math.floor(Math.random() * array.length)];
}

function shuffle<T>(array: T[]): T[] {
  const shuffled = [...array];
  for (let i = shuffled.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
  }
  return shuffled;
}

export async function GET() {
  const stages = await getBattleStages();

  if (stages.length < 3) {
    return NextResponse.json(
      { error: "クイズを生成するには最低3つのバトルステージが必要です" },
      { status: 400 },
    );
  }

  // 正解となるステージをランダムに 1 件選ぶ
  const correctStage = getRandomElement(stages);
  const correctBossName = correctStage.fields.bossName!;
  const stageNumber = correctStage.fields.stageNumber;

  // 誤答用のボス名を集める
  const otherStages = stages.filter(
    (stage) => stage.sys.id !== correctStage.sys.id,
  );
  const wrongChoices = shuffle(otherStages)
    .slice(0, 3)
    .map((stage) => stage.fields.bossName!);

  const choices = shuffle([correctBossName, ...wrongChoices]);
  const answerIndex = choices.indexOf(correctBossName);

  const quiz: Quiz = {
    stageNumber,
    questionText: `第${stageNumber}面のボスの名前はどれ`,
    choices,
    answerIndex,
  };

  return NextResponse.json(quiz);
}

"use client";

import { useState } from "react";
import type { Quiz } from "@/types/quiz";

type GameState = "idle" | "playing" | "answered";

export default function Home() {
  const [quiz, setQuiz] = useState<Quiz | null>(null);
  const [selectedChoice, setSelectedChoice] = useState<number | null>(null);
  const [gameState, setGameState] = useState<GameState>("idle");

  const fetchQuiz = async () => {
    const response = await fetch("/api/quiz");
    if (!response.ok) {
      // エラーハンドリングは実装例を参照
      return;
    }
    const data: Quiz = await response.json();
    setQuiz(data);
    setSelectedChoice(null);
    setGameState("playing");
  };

  const handleSubmit = () => {
    if (selectedChoice === null) return;
    setGameState("answered");
  };

  const isCorrect =
    gameState === "answered" &&
    quiz &&
    selectedChoice !== null &&
    selectedChoice === quiz.answerIndex;

  return (
    <main>
      <button onClick={fetchQuiz} disabled={gameState === "playing"}>
        クイズを出題
      </button>

      {quiz && (
        <>
          <p>{quiz.questionText}</p>
          <ul>
            {quiz.choices.map((choice, index) => (
              <li key={choice}>
                <label>
                  <input
                    type="radio"
                    name="choice"
                    value={index}
                    checked={selectedChoice === index}
                    onChange={() => setSelectedChoice(index)}
                  />
                  {choice}
                </label>
              </li>
            ))}
          </ul>
          <button onClick={handleSubmit}>回答する</button>

          {gameState === "answered" && (
            <p>{isCorrect ? "正解です" : "残念、はずれです"}</p>
          )}
        </>
      )}
    </main>
  );
}