<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>グループ参加</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png"
href="https://www.yatex.org/gitbucket/KoekiGameDesign/2025-shino/raw/40090c17567c3d3a452181432db7315951a59407/hamster.png">
<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="joinBtn" class="start-btn">参加する</button>
<p id="msg"></p>
</div>
<script>
const supa = supabase.createClient(
"https://ogtlmtnjkpsxsqzqlacj.supabase.co",
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9ndGxtdG5qa3BzeHNxenFsYWNqIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjMyOTU3NjUsImV4cCI6MjA3ODg3MTc2NX0.JnCE7oUQwrSgGqiu-QRbwnaLBZrO8JX1_RUb37VIMFI"
);
/* ---------------------------------------------------------
🔵 URLパラメータから group / pass を自動入力する
--------------------------------------------------------- */
const params = new URLSearchParams(location.search);
const autoGroup = params.get("group");
const autoPass = params.get("pass");
if (autoGroup) document.getElementById("group").value = autoGroup;
if (autoPass) document.getElementById("pass").value = autoPass;
// ユーザー名は自由に入力させるので空欄のまま
/* ---------------------------------------------------------
🔵 参加ボタン処理
--------------------------------------------------------- */
document.getElementById("joinBtn").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 } = await supa
.from("groups")
.select("*")
.eq("group_name", group)
.maybeSingle();
if (!data) {
msg.textContent = "そのグループは存在しません";
return;
}
if (data.password !== pass) {
msg.textContent = "パスワードが違います";
return;
}
// ⭐ map4.html 側で host 判定を行う
location.href = `map4.html?group=${group}&user=${user}`;
};
</script>
</body>
</html>
