<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LoadingScreen</title>
    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
    <style>
        @font-face {
            font-family: Unbounded;
            src: url(./fonts/Unbounded-Variable.ttf);
        }

        body {
            margin: 0;
            padding: 0;
            background-image: url('./assets/font.png');
            background-size: cover;
            background-position: center;
            font-family: Arial, sans-serif;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        #app {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .loading-assets {
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .logo {
            top: 298px;
            left: center;
            width: 251px;
            height: 339px;
            margin-bottom: 20px;
        }

        .loadingbar-wrapper {
            position: absolute;
            width: 1651px;
            height: 1vh;
            background-color: #303030;
            left: 134px;
            top: 990px;
            border-radius: 2vh;
            z-index: 1;
        }

        .loading-text {
            position: absolute;
            top: 949px;
            left: 147px;
            font-size: 16px;
            color: #797979;
            font-family: Arial, sans-serif;
            font-weight: bold;
            z-index: 3;
        }

        .loading-text img {
            margin-right: 8px;
            height: 20px;
            width: auto;
        }

        @keyframes dots {
            0% {
                content: "";
            }
            33% {
                content: ".";
            }
            66% {
                content: "..";
            }
            100% {
                content: "...";
            }
        }

        .loading-text::after {
            display: inline-block;
            animation: dots 1.5s infinite steps(3);
            content: "...";
        }

        .loadingbar-loaded {
            width: 0%;
            height: 100%;
            background-color: #5936A0;
            box-shadow: 0vh 0vh 1.5vh #5936A0;
            border-radius: 2vh;
            z-index: 2;
        }

        .loading-percentage {
            position: absolute;
            top: -20px;
            right: 1px;
            font-size: 12px;
            color: #FFFFFF;
            font-weight: bold;
            border-radius: 2vh;
            z-index: 11;
        }

        audio {
            display: none;
        }

        .music-toggle-container {
            position: absolute;
            top: 949px;
            left: center;
            font-size: 12px;
            color: #797979;
            font-family: 'Unbounded', sans-serif;
            font-weight: bold;
            z-index: 3;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .music-space-button {
            width: 55px;
            height: 18px;
            flex-shrink: 0;
            border-radius: 4px;
            border: 1px solid var(--Main, #5936A0);
            background: #111;
            color: #5936A0;
            font-family: 'Unbounded', sans-serif;
            font-size: 10px;
            font-style: normal;
            font-weight: 700;
            line-height: 10px;
            text-align: center;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            padding: 0 4px;
        }

        .terms-container {
            position: absolute;
            top: 1035px;
            left: center;
            text-align: center;
            font-family: 'Unbounded', sans-serif;
            font-size: 12px;
            color: #797979;
            font-weight: 400;
        }

        .terms-highlight {
            color: #5936A0;
            font-weight: 700;
        }

        .logo-linear {
            position: absolute;
            top: 15px;
            left: 1855px;
            width: 40px;
            height: 40px;
            background-size: contain;
        }
    </style>
</head>
<body>
    <img src="./assets/logo-linear.png" alt="Logo-Linear" class="logo-linear">
    <div class="loading-assets">
        <img src="./assets/logo.png" alt="Logo" class="logo">
        <audio id="audio_loading" src="./assets/song.mp3" autoplay loop></audio>
    </div>
    <div class="loading-text">
        <img src="./assets/icone.png" alt="Icon">
        Logging in<span></span>
    </div>   
    <div class="music-toggle-container">
        Press <span class="music-space-button">SPACE</span> to turn off the music
    </div>    
    <div class="loadingbar-wrapper">
        <div class="loadingbar-loaded"></div>
    </div>
    <div class="terms-container">
        By connecting on <span class="terms-highlight">Ryle Games</span>, you accept our terms and policies available on our website.
    </div>    

    <script>
        window.addEventListener('message', (e) => {
            switch (e.data.eventName) {
                case 'loadProgress':
                    this.loadFraction = e.data.loadFraction;
                    document.querySelector('.loadingbar-loaded').style.width = (this.loadFraction * 100) + '%';
                    break;
                case 'onLogLine':
                    this.loadFraction = 0;
                    document.querySelector('.loadingbar-loaded').style.width = '0%';
                    break;
            }
        });

        var play = true;
        var myAudio = document.getElementById("audio_loading");

        myAudio.volume = 0.2;

        function onKeyDown(event) {
            switch (event.keyCode) {
                case 32:          
                    if (play) {
                        myAudio.pause();
                        play = false;
                    } else {
                        myAudio.play();
                        play = true;
                    }
                    break;
            }
            return false;
        }

        window.addEventListener("keydown", onKeyDown, false);
    </script>
</body>
</html>

