<!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>
<style>
/* かわいい招待ボタン */
.invite-cute-btn {
display: inline-block;
padding: 12px 20px;
font-size: 16px;
font-weight: bold;
border-radius: 25px;
border: none;
color: white;
background: linear-gradient(135deg, #6ea8ff, #3d7eff);
box-shadow: 0 4px 10px rgba(0, 100, 255, 0.3);
cursor: pointer;
transition: 0.25s ease;
letter-spacing: 0.5px;
margin-top: 10px;
width: 100%;
}
.invite-cute-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 14px rgba(0, 100, 255, 0.35);
filter: brightness(1.1);
}
.invite-cute-btn:active {
transform: scale(0.96);
box-shadow: 0 3px 8px rgba(0, 80, 200, 0.25);
}
</style>
</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="invite-cute-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 () => {
await createGroup(false); // 普通に参加
};
document.getElementById("inviteBtn").onclick = async () => {
await createGroup(true); // 共有して参加
};
/* ------------------------------------------------------
グループ作成 & 招待リンク（iPhone対応共有シート）
------------------------------------------------------- */
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
});
const inviteURL =
`https://www.yatex.org/gitbucket/KoekiGameDesign/2025-shino/pages/join_group.html`
+ `?group=${encodeURIComponent(group)}&pass=${encodeURIComponent(pass)}`;
/* ------------- 招待リンク作成したい場合 ------------- */
if (makeInvite) {
// ★ 共有シートが使える（iPhoneでも完璧）★
if (navigator.share) {
try {
await navigator.share({
title: "グループ招待リンク",
text: "このリンクから参加できます👇",
url: inviteURL,
});
} catch (e) {
console.log("共有シート中断:", e);
}
} else {
// PC / Android → 自動コピー
try {
await navigator.clipboard.writeText(inviteURL);
alert("📋 招待リンクをコピーしました！");
} catch {
alert("コピーに失敗しました…\n以下のリンクを手動でコピーしてください。\n\n" + inviteURL);
}
}
}
/* ------------ 自分はそのまま参加 ------------ */
location.href = `map4.html?group=${group}&user=${user}&host=1`;
}
</script>
</body>
</html>
