[test11.html(javascript)]
let pageIndex = 0;
const pageMax = 8;
let timerId = null; //setTimeoutのIDを保持します
let isRunning = false;

async function displayScreen() 
{
	if (!isRunning) return;
	
	console.log("ページインデックス:", pageIndex);
	const imgEl = document.getElementById("img");
	const storyEl = document.getElementById("story");
	
	imgEl.className = "";
	storyEl.className = "";
	
	try {
		const storyRes = await fetch("/img/test11.php", {
			method: "POST",
			headers: { "Content-Type": "application/json" },
			body: JSON.stringify({ no: pageIndex, lang: 0 }),
		});
		const storyData = await storyRes.json();
		console.log("ストーリー取得成功:", storyData.story);
		storyEl.innerText = storyData.story;
		fadeIn(storyEl);
	} catch (e) {
		console.error("ストーリー取得失敗:", e);
	}
	
	try {
		const imgRes = await fetch("/img/getImage2.php", {
			method: "POST",
			headers: { "Content-Type": "application/json" },
			body: JSON.stringify({ no: pageIndex }),
		});
		const blob = await imgRes.blob();
		const url = URL.createObjectURL(blob);
		console.log("画像URL:", url);
		imgEl.onload = () => fadeIn(imgEl);
		imgEl.src = url;
	} catch (e) {
		console.error("画像取得失敗:", e);
	}
	
	// 次のページへ進む前に、終了条件をチェック！
	if (pageIndex >= pageMax - 1) {
		console.log("自動停止します。");
		isRunning = false;
		return; // ここで終了！
	}
	
	pageIndex++;
	timerId = setTimeout(displayScreen, 3000);
}

function fadeIn(element) {
	element.className = "";
	requestAnimationFrame(() => {
		requestAnimationFrame(() => {
			element.classList.add("visible");
			console.log("→ .visible クラス追加:", element.id);
		});
	});
}

// 停止ボタン
document.getElementById("stopBtn").addEventListener("click", () => {
	isRunning = false;
	clearTimeout(timerId);
	console.log("⏹️ 停止しました");
});

// リセットボタン
document.getElementById("resetBtn").addEventListener("click", () => {
	clearTimeout(timerId);
	pageIndex = 0;
	isRunning = true;
	displayScreen();
	console.log("🔄 リセットして再開！");
});

// 最初にスタート
isRunning = true;
displayScreen();

[test11.html(javascript)]
let pageIndex = 0;
const pageMax = 8;
let timerId = null; //Retains the setTimeout ID
let isRunning = false;

async function displayScreen()
{
	if (!isRunning) return;
	
	console.log("Page Index:", pageIndex);
	const imgEl = document.getElementById("img");
	const storyEl = document.getElementById("story");
	
	imgEl.className = "";
	storyEl.className = "";
	
	try {
		const storyRes = await fetch("/img/test11.php", {
			method: "POST",
			headers: { "Content-Type": "application/json" },
			body: JSON.stringify({ no: pageIndex, lang: 0 }),
		});
		const storyData = await storyRes.json();
		console.log("Story successfully retrieved:", storyData.story);
		storyEl.innerText = storyData.story;
		fadeIn(storyEl);
	} catch (e) {
		console.error("Failed to retrieve story:", e);
	}
	
	try {
		const imgRes = await fetch("/img/getImage2.php", {
			method: "POST",
			headers: { "Content-Type": "application/json" },
			body: JSON.stringify({ no: pageIndex }),
		});
		const blob = await imgRes.blob();
		const url = URL.createObjectURL(blob);
		console.log("Image URL:", url);
		imgEl.onload = () => fadeIn(imgEl);
		imgEl.src = url;
	} catch (e) {
		console.error("Failed to retrieve image:", e);
	}
	
	// Check the termination condition before proceeding to the next page!
	if (pageIndex >= pageMax - 1) {
		console.log("Automatically pausing.");
		isRunning = false;
		return; // Stop here!
	}
	
	pageIndex++;
	timerId = setTimeout(displayScreen, 3000);
}

function fadeIn(element) {
	element.className = "";
	requestAnimationFrame(() => {
		requestAnimationFrame(() => {
			element.classList.add("visible");
			console.log("→ .visible class added:", element.id);
		});
	});
}

// Stop button
document.getElementById("stopBtn").addEventListener("click", () => {
	isRunning = false;
	clearTimeout(timerId);
	console.log("⏹️ Stopped");
});

// Reset button
document.getElementById("resetBtn").addEventListener("click", () => {
	clearTimeout(timerId);
	pageIndex = 0;
	isRunning = true;
	displayScreen();
	console.log("🔄 Reset and restart!");
});

// Start at the beginning
isRunning = true;
displayScreen();