<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game Launcher</title>
    <link rel="stylesheet" href="assets/css/launcherstart.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

<body>
    <button id="closeButtonTop" onclick="closeApp()">✖</button>
    
    <!-- Profile Player -->
    <div class="container">
        <div class="user-profile-info-container">
            <div class="user-profile-info">
                <h4 class="user-CharacterName">PlayerName</h4>
                <div class="user-balance">
                    <div><img src="assets/images/icons/money.png" alt="Rain Icon"> Rain: 1,000</div>
                    <div><img src="assets/images/icons/cash.png" alt="Cash Icon"> Cash: 500</div>
                </div>
            </div>
            <div class="avatar">
                <img src="assets/images/avatars/chicks.png" alt="Avatar">
            </div>
        </div>
        
        <!-- Start Game Section -->
        <div class="start-container">
            <div class="start-info-container">
                <select class="channel-selector">
                    <option value="CH-1">Channel 1</option>
                    <option value="CH-2">Channel 2</option>
                    <option value="CH-3">Channel 3</option>
                </select>
                <button class="start-game-button">Start Game</button>
            </div>
        </div>

        <!-- Version Game Section -->
        <div class="version-container">
            <div class="version-info-container">
                <p>Version Launcher 0.124 | Patch 0.0.1</p>
            </div>
        </div>

        <!-- Language Game Section -->
        <div class="language-container">
            <div class="language-info-container">
                <label for="language-selector" class="language-label">
                    <img src="assets/images/icons/question-mark.png" alt="Language Icon"> ภาษาของเกมส์
                </label>
                <select id="language-selector" class="language-selector">
                    <option value="language-th">ไทย</option>
                    <option value="language-kr">Korea</option>
                    <option value="language-en">England</option>
                </select>
            </div>
        </div>

        <!-- Option Game Section -->
        <div class="option-container">
            <div class="option-info-container">
                <label for="option-selector" class="option-label">
                    <img src="assets/images/icons/question-mark.png" alt="Language Icon"> ปรับ Option ภายในเกมส์
                </label>
                <button class="option-game-button">Option</button>
            </div>
        </div>

        <!-- News Section -->
        <div class="news-container">
            <div class="news-info-container">
                <label for="news-selector" class="news-label">
                    News
                </label>
            </div>
        </div> 

        <!-- News Image Section -->
        <div class="news-image-container">
            <button class="prev-btn" onclick="changeImage(-1)">&#10094;</button>
    
            <div class="news-image">
                <img src="assets/images/news/news1.png" alt="News Image 1">
            </div>
            <div class="news-image">
                <img src="assets/images/news/news2.png" alt="News Image 2">
            </div>
            <div class="news-image">
                <img src="assets/images/news/news3.png" alt="News Image 3">
            </div>

            <button class="next-btn" onclick="changeImage(1)">&#10095;</button>
        </div>

    </div> <!-- .container -->

    <script src="assets/js/launcher.js"></script>

    <script>
        function closeApp() {
            window.open('', '_self');
            window.close();
        }

        let currentIndex = 0;
        const images = document.querySelectorAll('.news-image');
        const totalImages = images.length;

        function hideImages() {
            images.forEach(image => {
                image.style.display = 'none';
            });
        }

        function showImage(index) {
            hideImages();
            images[index].style.display = 'block';
        }

        function changeImage(direction) {
            currentIndex = (currentIndex + direction + totalImages) % totalImages;
            showImage(currentIndex);
        }

        setInterval(() => {
            changeImage(1); 
        }, 3000);

        showImage(currentIndex);
    </script>
</body>
</html>
