<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>回答者ページ</title>
<!-- ▼▼▼【変更】外部CSSファイルを読み込む ▼▼▼ -->
<link rel="stylesheet" href="client.css">
</head>
<body>
<div class="container">
<h1>イントロクイズ</h1>
<!-- ▼▼▼ 参加セクション ▼▼▼ -->
<div id="join-section">
<h2>参加登録</h2>
<select id="groupSelect">
<option value="">グループを選択</option>
<option value="1班">1班</option>
<option value="2班">2班</option>
<option value="3班">3班</option>
<option value="4班">4班</option>
<option value="5班">5班</option>
</select>
<input id="nameInput" type="text" placeholder="名前を入力">
<button id="joinBtn">この内容で参加する</button>
</div>
<!-- ▼▼▼ ゲームセクション ▼▼▼ -->
<div id="game-section">
<p id="myInfo"></p>
<button id="raiseBtn">挙手！</button>
<p id="status">待機中...</p>
<p id="queue">現在の順番: まだ挙手なし</p>
</div>
</div>
<script>
// JavaScript部分は変更ありません
const serverIP = location.hostname;
const conn = new WebSocket(`ws://${serverIP}:8888/`);
const joinSection = document.getElementById("join-section");
const groupSelect = document.getElementById("groupSelect");
const nameInput = document.getElementById("nameInput");
const joinBtn = document.getElementById("joinBtn");
const gameSection = document.getElementById("game-section");
const myInfo = document.getElementById("myInfo");
const raiseBtn = document.getElementById("raiseBtn");
const status = document.getElementById("status");
const queueDisplay = document.getElementById("queue");
joinBtn.addEventListener("click", () => {
const group = groupSelect.value;
const name = nameInput.value.trim();
if (!group) { alert("グループを選択してください！"); return; }
if (!name) { alert("名前を入力してください！"); return; }
conn.send(JSON.stringify({ type: "join", group: group, name: name }));
joinSection.style.display = "none";
gameSection.style.display = "block";
myInfo.textContent = `ようこそ、${group} の ${name} さん！`;
});
raiseBtn.addEventListener("click", () => {
conn.send(JSON.stringify({ type: "raise" }));
});
conn.onmessage = ev => {
let msg;
try { msg = JSON.parse(ev.data); } catch { return; }
switch (msg.type) {
case "select": status.textContent = "曲選択完了！"; break;
case "play": status.textContent = "再生中..."; break;
case "pause": status.textContent = "一時停止中"; break;
case "stop": status.textContent = "停止中"; break;
case "announce":
const queue = msg.queue || [];
if (queue.length === 0) {
queueDisplay.textContent = "現在の順番: まだ挙手なし";
} else {
const firstRaiser = queue[0];
status.textContent = `${firstRaiser.group} の ${firstRaiser.name} さんが挙手！`;
queueDisplay.textContent = "現在の順番:\n" + queue.map((p, i) => `${i + 1}. ${p.group} - ${p.name}`).join('\n');
}
break;
}
};
conn.onopen = () => console.log("WebSocket 接続成功");
conn.onerror = e => console.error("WebSocket エラー", e);
conn.onclose = () => { status.textContent = "サーバーとの接続が切れました。"; };
</script>
</body>
</html>
