if(!u) return;
const res=await fetch("/check-username/"+u);
const data=await res.json();
document.getElementById("check").innerText = data.available?"✅ disponible":"❌ déjà pris";
}

function capturePhoto(){
const v=document.getElementById("video");
if(!v.videoWidth) return null;
const c=document.getElementById("canvas");
c.width=v.videoWidth;
c.height=v.videoHeight;
c.getContext("2d").drawImage(v,0,0);
return c.toDataURL("image/png");
}

async function register(){
const photo = capturePhoto();

const res=await fetch("/register",{
method:"POST",
headers:{"Content-Type":"application/json"},
body:JSON.stringify({
username:register_username.value,
password:register_password.value,
email:email.value,
photo:photo
})});

if(res.ok){
alert("Compte créé");
}else alert(await res.text());
}

async function login(){
const res=await fetch("/login",{
method:"POST",
headers:{"Content-Type":"application/json"},
body:JSON.stringify({
username:login_username.value,
password:login_password.value
})});

if(res.ok) location.href="/profile.html";
else alert(await res.text());
}

async function loadProfile(){
const res=await fetch("/profile");
if(!res.ok) return location.href="/login.html";

const user = await res.json();
name.innerText = user.username;

const avatarContainer = document.getElementById("avatar-container");
avatarContainer.innerHTML = "";

if(user.photo){
const img = document.createElement("img");
img.src = user.photo;
img.className = "avatar-img";
avatarContainer.appendChild(img);
}else{
const div = document.createElement("div");
div.className = "avatar-placeholder";
div.innerText = user.username.charAt(0).toUpperCase();
avatarContainer.appendChild(div);
}
}

initCamera();
if(window.location.pathname.includes("profile")) loadProfile();
.modal{
position:fixed;
inset:0;
background:rgba(0,0,0,0.6);
display:flex;
justify-content:center;
align-items:center;
}

.modal-content{
background:#151520;
padding:30px;
border-radius:20px;
width:320px;
animation:fade .3s ease;
}

.close{
margin-top:15px;
background:#2a2a3c;
}