<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>グループ作成</title>
<link rel="icon" type="image/png"
href="https://www.yatex.org/gitbucket/KoekiGameDesign/2025-shino/raw/40090c17567c3d3a452181432db7315951a59407/hamster.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>
</head>
<body class="index-page fadeIn">
<div class="index-container fadeInUp">
<h2>新規グループ作成</h2>
<input type="text" id="group" placeholder="グループ名" class="input-box">
<input type="password" id="pass" placeholder="パスワード" class="input-box">
<input type="text" id="user" placeholder="あなたのユーザー名" class="input-box">
<button id="createBtn" class="start-btn">作成する</button>
<p id="msg"></p>
</div>
<script>
const supa = supabase.createClient(
"https://ogtlmtnjkpsxsqzqlacj.supabase.co",
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9ndGxtdG5qa3BzeHNxenFsYWNqIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjMyOTU3NjUsImV4cCI6MjA3ODg3MTc2NX0.JnCE7oUQwrSgGqiu-QRbwnaLBZrO8JX1_RUb37VIMFI"
);
document.getElementById("createBtn").onclick = async () => {
const group = document.getElementById("group").value.trim();
const pass = document.getElementById("pass").value.trim();
const user = document.getElementById("user").value.trim();
const msg = document.getElementById("msg");
if (!group || !pass || !user) {
msg.textContent = "すべて入力してください";
return;
}
// 既存確認
const { data: exists } = await supa
.from("groups")
.select("*")
.eq("group_name", group)
.maybeSingle();
if (exists) {
msg.textContent = "このグループ名はすでに使われています";
return;
}
// 作成（host_name を追加）
await supa.from("groups").insert({
group_name: group,
password: pass,
host_name: user
});
// ホストとしてマップへ
location.href = `map4.html?group=${group}&user=${user}&host=1`;
};
</script>
</body>
</html>
