<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>codebeater</title>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <audio id="bgm" src="/assets/music/onboard.mp3" loop autoplay></audio>
    <audio id="hover-sfx" src="/assets/music/hover.mp3" ></audio>
    <div class="container-onboard">
    <?php include 'notif.php'; ?>
    <?php
    if (!empty($_SESSION['flash'])) {
        echo "<script>showNotif(" . json_encode($_SESSION['flash']) . ");</script>";
        unset($_SESSION['flash']);
    }
    ?>
        <h1 data-aos="zoom-out" data-aos-duration="1000">👾 codebeater 👾</h1>
        <div class="menu">
            <a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="game/thirdperson.html">Game Start</a>
            <a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="leaderboard.php">leaderboard</a>
            <a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="credit.html">Credit</a>
            <a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="logout.php">Exit</a>
        </div>
    </div>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init();
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const bgm = document.getElementById("bgm");
            const hoversfx = document.getElementById('hover-sfx');
            const buttons = document.querySelectorAll('.hover-btn');

            bgm.volume =0.2;
            hoversfx.volume =0.2;
            buttons.forEach(button => {
                button.addEventListener('mouseenter', () => {
                    hoversfx.currentTime = 0;
                    hoversfx.play().catch(error => console.log('menunggu iteraksi user'))
                });
            });
            function playBGM(){
                bgm.play().then(()=>{
                    console.log('BGM Berputar')
                }).catch(error => {
                    console.log('auto diblok')
                });
            }
            playBGM();


            document.body.addEventListener("click", () => {
                if (bgm.paused) {
                    bgm.play();
                }
            }, { once: true });
        });
    </script>
</body>

</html>