<<<<<<< HEAD
<?php
session_start();
if (!isset($_SESSION['user'])) {
    header("Location: index.php");
    exit;
}

$conn = new mysqli("localhost", "root", "", "dodge_game");
$user = $_SESSION['user'];

// AMBIL SKIN USER SEKARANG
$qSkin = $conn->query("SELECT skin FROM users WHERE username='$user'");
$currentSkin = $qSkin->fetch_assoc()['skin'];

// LIST SKIN
$skins = [
    "cyan" => "#00ffff",
    "blue" => "#0066ff",
    "yellow" => "#ffee00",
    "purple" => "#ff55ff",
    "green" => "#33ff55"
];

// AMBIL SKIN USER
$qSkin = $conn->query("SELECT skin FROM users WHERE username='$user'");
$data = $qSkin->fetch_assoc();

// PROSES SIMPAN SKIN
if (isset($_POST['chooseSkin'])) {
    $selectedSkin = $_POST['skin'];
    $conn->query("UPDATE users SET skin='$selectedSkin' WHERE username='$user'");
    $currentSkin = $selectedSkin;
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Pilih Skin</title>
<link rel="stylesheet" href="assets/style.css">

<style>
body {
    text-align: center;
    padding-top: 40px;
    color: white;
}

.skin-container {
    margin-top: 20px;
}

.skin-box {
    width: 90px;
    height: 90px;
    border-radius: 12px;
    display: inline-block;
    margin: 12px;
    cursor: pointer;
    transition: 0.2s;
    border: 4px solid transparent;
}

.skin-box:hover {
    transform: scale(1.1);
}

.skin-selected {
    border: 4px solid #fff;
    box-shadow: 0 0 15px white;
}

.hidden-radio {
    display: none;
}
</style>
</head>

<body>

<h2>Pilih Skin Pemain</h2>

<form method="POST">

<div class="skin-container">

<?php foreach ($skins as $name => $color): ?>
    <label>
        <input 
            type="radio" 
            name="skin" 
            class="hidden-radio"
            value="<?= $name ?>" 
            <?= $currentSkin == $name ? "checked" : "" ?>
        >
        <div 
            class="skin-box <?= $currentSkin == $name ? "skin-selected" : "" ?>"
            style="background: <?= $color ?>"
        ></div>
    </label>
<?php endforeach; ?>

</div>

<br><br>
<button type="submit" name="chooseSkin" style="width:250px;">Simpan Skin</button>

</form>

<a href="menu.php">
    <button style="width:250px; background:#555; margin-top:20px;">Kembali</button>
</a>

<script>
// AUTO HIGHLIGHT SKIN KETIKA DIPILIH
const radios = document.querySelectorAll("input[name='skin']");
const boxes = document.querySelectorAll(".skin-box");

boxes.forEach((box, index) => {
    box.addEventListener("click", () => {
        // pilih radio
        radios[index].checked = true;

        // remove highlight
        boxes.forEach(b => b.classList.remove("skin-selected"));

        // add highlight ke yang dipilih
        box.classList.add("skin-selected");
    });
});
</script>

</body>
=======
<?php
session_start();
if (!isset($_SESSION['user'])) {
    header("Location: index.php");
    exit;
}

$conn = new mysqli("localhost", "root", "", "dodge_game");
$user = $_SESSION['user'];

// AMBIL SKIN USER SEKARANG
$qSkin = $conn->query("SELECT skin FROM users WHERE username='$user'");
$currentSkin = $qSkin->fetch_assoc()['skin'];

// LIST SKIN
$skins = [
    "cyan" => "#00ffff",
    "blue" => "#0066ff",
    "yellow" => "#ffee00",
    "purple" => "#ff55ff",
    "green" => "#33ff55"
];

// AMBIL SKIN USER
$qSkin = $conn->query("SELECT skin FROM users WHERE username='$user'");
$data = $qSkin->fetch_assoc();

// PROSES SIMPAN SKIN
if (isset($_POST['chooseSkin'])) {
    $selectedSkin = $_POST['skin'];
    $conn->query("UPDATE users SET skin='$selectedSkin' WHERE username='$user'");
    $currentSkin = $selectedSkin;
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Pilih Skin</title>
<link rel="stylesheet" href="assets/style.css">

<style>
body {
    text-align: center;
    padding-top: 40px;
    color: white;
}

.skin-container {
    margin-top: 20px;
}

.skin-box {
    width: 90px;
    height: 90px;
    border-radius: 12px;
    display: inline-block;
    margin: 12px;
    cursor: pointer;
    transition: 0.2s;
    border: 4px solid transparent;
}

.skin-box:hover {
    transform: scale(1.1);
}

.skin-selected {
    border: 4px solid #fff;
    box-shadow: 0 0 15px white;
}

.hidden-radio {
    display: none;
}
</style>
</head>

<body>

<h2>Pilih Skin Pemain</h2>

<form method="POST">

<div class="skin-container">

<?php foreach ($skins as $name => $color): ?>
    <label>
        <input 
            type="radio" 
            name="skin" 
            class="hidden-radio"
            value="<?= $name ?>" 
            <?= $currentSkin == $name ? "checked" : "" ?>
        >
        <div 
            class="skin-box <?= $currentSkin == $name ? "skin-selected" : "" ?>"
            style="background: <?= $color ?>"
        ></div>
    </label>
<?php endforeach; ?>

</div>

<br><br>
<button type="submit" name="chooseSkin" style="width:250px;">Simpan Skin</button>

</form>

<a href="menu.php">
    <button style="width:250px; background:#555; margin-top:20px;">Kembali</button>
</a>

<script>
// AUTO HIGHLIGHT SKIN KETIKA DIPILIH
const radios = document.querySelectorAll("input[name='skin']");
const boxes = document.querySelectorAll(".skin-box");

boxes.forEach((box, index) => {
    box.addEventListener("click", () => {
        // pilih radio
        radios[index].checked = true;

        // remove highlight
        boxes.forEach(b => b.classList.remove("skin-selected"));

        // add highlight ke yang dipilih
        box.classList.add("skin-selected");
    });
});
</script>

</body>
>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4
</html>