<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>キャラ選択ボタン版 注文システム</title>
<style>
body {
font-family: Arial;
padding: 20px;
background-color: #f0f8ff;
}
.box {
background-color: #fff;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
max-width: 500px;
}
.char-button {
padding: 8px 16px;
margin: 5px;
font-size: 16px;
cursor: pointer;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="box">
<h2>座席番号を入力</h2>
<input type="number" id="seatInput" />
<button onclick="startOrder()">開始</button>
</div>
<div id="charBox" class="box hidden">
<h2>キャラクターを選んでください</h2>
<div id="charButtons"></div>
</div>
<div id="orderBox" class="box hidden">
<h2>メニューを選択</h2>
<select id="menuSelect">
<option value="マグロ寿司">マグロ寿司</option>
<option value="エビ寿司">エビ寿司</option>
<option value="サーモン寿司">サーモン寿司</option>
</select>
<br><br>
<button onclick="makeOrder()">注文</button>
</div>
<div id="myOrdersBox" class="box hidden">
<h3>自分の注文</h3>
<div id="myOrders"></div>
<h3>この座席の全員の注文</h3>
<div id="allOrders"></div>
</div>
<script>
var allSeats = {}; // 座席ごとの注文
var characterList = ["ポポ", "ピピ", "ププ"];
var currentCharacter = "";
var currentSeat = "";
// 座席選択後に呼ばれる
function startOrder() {
var seatInput = document.getElementById("seatInput").value;
if (seatInput === "") {
alert("座席番号を入力してください。");
return;
}
currentSeat = seatInput;
if (!allSeats[currentSeat]) {
allSeats[currentSeat] = {
orders: [],
usedChars: []
};
}
showCharacterButtons();
document.getElementById("charBox").classList.remove("hidden");
}
// キャラ選択ボタンを生成
function showCharacterButtons() {
var container = document.getElementById("charButtons");
container.innerHTML = "";
for (var i = 0; i < characterList.length; i++) {
var charName = characterList[i];
if (allSeats[currentSeat].usedChars.indexOf(charName) === -1) {
var btn = document.createElement("button");
btn.innerText = charName;
btn.className = "char-button";
btn.setAttribute("data-char", charName);
btn.onclick = function() {
selectCharacter(this.getAttribute("data-char"));
};
container.appendChild(btn);
}
}
}
// キャラが選ばれたら実行
function selectCharacter(charName) {
currentCharacter = charName;
allSeats[currentSeat].usedChars.push(charName);
document.getElementById("charBox").classList.add("hidden");
document.getElementById("orderBox").classList.remove("hidden");
}
// 注文処理
function makeOrder() {
var menu = document.getElementById("menuSelect").value;
var order = {
character: currentCharacter,
menu: menu
};
allSeats[currentSeat].orders.push(order);
showOrders();
}
// 注文の表示
function showOrders() {
document.getElementById("myOrdersBox").classList.remove("hidden");
var myOrdersArea = document.getElementById("myOrders");
var allOrdersArea = document.getElementById("allOrders");
myOrdersArea.innerHTML = "";
allOrdersArea.innerHTML = "";
var orders = allSeats[currentSeat].orders;
for (var i = 0; i < orders.length; i++) {
var o = orders[i];
var pAll = document.createElement("p");
pAll.innerText = (i + 1) + ": " + o.character + " - " + o.menu;
allOrdersArea.appendChild(pAll);
if (o.character === currentCharacter) {
var pMine = document.createElement("p");
pMine.innerText = (i + 1) + ": " + o.menu;
myOrdersArea.appendChild(pMine);
}
}
}
// 会計リセット（例: ?reset=1）
var params = new URLSearchParams(window.location.search);
if (params.has("reset")) {
var resetSeat = params.get("reset");
allSeats[resetSeat] = { orders: [], usedChars: [] };
alert("座席 " + resetSeat + " の会計がリセットされました。");
}
</script>
</body>
</html>
