<!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>
<button id="inviteBtn" class="start-btn" style="margin-top:10px;">
共有リンクを作成して参加
</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 () => {
await createGroup(false);
};
document.getElementById("inviteBtn").onclick = async () => {
await createGroup(true);
};
async function createGroup(makeInvite) {
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;
}
// 作成
await supa.from("groups").insert({
group_name: group,
password: pass,
host_name: user
});
/* ------------- 共有リンクを作成する場合 ------------- */
if (makeInvite) {
const inviteURL =
`https://www.yatex.org/gitbucket/KoekiGameDesign/2025-shino/pages/join_group.html`
+ `?group=${encodeURIComponent(group)}&pass=${encodeURIComponent(pass)}`;
try {
await navigator.clipboard.writeText(inviteURL);
alert("🎉 招待リンクをコピーしました！\n友だちに送ってください。");
} catch {
alert("コピーに失敗しました…");
}
}
/* ------------ 自分はそのまま参加 ------------ */
location.href = `map4.html?group=${group}&user=${user}&host=1`;
}
</script>
</body>
</html>
