<!DOCTYPE html>
<html lang="en" class="notranslate" translate="no">    <!-- All translators -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="color-wars-online Is Games Turn Base 2 Players">
    <title>Color Wars Online</title>
    <link rel="icon" type="image/x-icon" href="/src/img/color.png">
    <link rel="stylesheet" href="/src/package/css/bootstrap.min.css">
    <link rel="stylesheet" href="/src/main/styles.css">
</head>
<body>
    <audio id="messageSound" src="/src/audio/live-chat.mp3"></audio>
    <audio id="notificationSound" src="/src/audio/system.mp3"></audio>

    <div id="no-internet-warning" class="fade-in" style="display: none;">
        <div class="no-internet-logo"><img src="/src/img/no-wifi.png" alt="No Internet Logo" draggable="false"></div>
        <div class="no-internet-message">Please check your internet connection</div>
        <div class="no-internet-tip">Required for Connect To With Color Wars Online Services</div>
        <div class="no-internet-powered">Powered by Color Wars Online</div>
    </div>

    <!-- HTML สำหรับหน้าเตือน VPN Detect -->
    <div id="rtc-warning" class="fade-in" style="display: none;">
        <div class="rtc-logo"><img src="/src/img/rtc.png" alt="Not Have Rtc Logo" draggable="false"></div>
        <div class="rtc-message">Please Checks WebRTC Is Enabled Or Checks Browser Is Support WebRTC</div>
        <div class="rtc-tip">Required for Connect To PeerJS</div>
        <div class="rtc-powered">Powered by Color Wars Online</div>

    </div>

    <footer style="position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; font-size: 12px; color: #828582;">
        Color Wars Online - A 2 Players game and have lady bug feature
    </footer>

        <!-- HTML สำหรับหน้าเตือน Incognito mode -->
        <div id="incognito-warning" class="fade-in" style="display: none;">
            <div class="incognito-logo">
                <svg version="1.1" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
                    <g fill-rule="evenodd">
                        <path d="m60 0c33.137 0 60 26.863 60 60s-26.863 60-60 60-60-26.863-60-60 26.863-60 60-60z" fill="#dadce0"/>
                        <path d="m69.533 27.008c-0.47605-0.02886-0.96361 0.0302-1.4434 0.18945l-8.0898 2.7168-8.1289-2.7168-0.19141-0.058594c-1.928-0.533-3.953 0.50972-4.668 2.3867l-8.8672 23.475h43.711l-8.9062-23.475-0.07617-0.18555c-0.6-1.365-1.9117-2.2455-3.3398-2.332zm-44.533 29.992v4h70v-4zm17.5 7.8379c-7.506 0-13.611 6.092-13.611 13.582 0 7.489 6.1053 13.58 13.611 13.58 7.156 0 12.95-5.5091 13.494-12.494 1.167-0.815 4.2397-2.3298 8.0117 0.07617 0.622 6.946 6.3771 12.418 13.494 12.418 7.506 0 13.611-6.0911 13.611-13.58 0-7.49-6.1053-13.582-13.611-13.582-6.456 0-11.823 4.5016-13.223 10.516-3.267-1.397-6.2987-1.0091-8.5547-0.03906-1.439-6.014-6.8057-10.477-13.223-10.477zm0 3.8789c5.367 0 9.7227 4.3481 9.7227 9.7031s-4.3557 9.6992-9.7227 9.6992-9.7227-4.3442-9.7227-9.6992 4.3557-9.7012 9.7227-9.7012zm35 0c5.367 0 9.7227 4.3481 9.7227 9.7031s-4.3557 9.6992-9.7227 9.6992-9.7227-4.3442-9.7227-9.6992 4.3557-9.7012 9.7227-9.7012z" fill="#272727" stroke-width="0"/>
                    </g>
                </svg>
            </div>
            <div class="incognito-message">Please Not Use Incognito mode Or Private Mode</div>
            <div class="incognito-tip">Required for Best connection</div>
            <div class="incognito-powered">Powered by detectIncognito.js</div>
        </div>

    <!-- HTML สำหรับหน้าว่างพร้อมปุ่ม Connect -->
    <div id="connectScreen" class="fade-in" style="display: none;">
        <h1>Color Wars Online</h1>
        <button type="button" class="btn btn-primary" id="connectBtn">Connect</button>
    </div>
    
    <div id="joinRoomModal" class="fade-in" style="display: none;">
            <h2>Join Room</h2>
            <input type="text" class="form-control" aria-label="Join Modal" aria-describedby="inputGroup-sizing-default" id="roomIdInput" placeholder="Enter Room ID" autocomplete="off" required>
            <button type="button" class="btn btn-primary" id="cancelJoinBtn">Cancel</button>
            <button type="button" class="btn btn-primary" id="confirmJoinBtn">Join</button>
        </div>
    <div id="gameContainer">
        <div id="namePrompt" class="fade-in">
        </div>

        <div id="waitingScreen" class="fade-in">
            <p>Waiting for other players to join...</p>
        </div>
        
        <div id="cache" class="fade-in">
            <p>Please Refesh Website</p>
        </div>

        <div id="joiningScreen" class="fade-in">
            <p>Waiting for host to accept your request...</p>
            <button type="button" class="btn btn-primary" id="backToLobbyBtn">Back to Lobby</button>
        </div>

        <div id="reset">
            <div class="spinner"></div>
            <p>Resetting The Game...</p>
        </div>

        <div id="modal">
            <div id="modalMessage"></div>
            <div>
                <button type="button" class="btn btn-primary" id="noBtn">No</button>
                <button type="button" class="btn btn-primary" id="yesBtn">Yes</button>
            </div>
        </div>

        <div id="lobby" class="fade-in">
            <h1>Color Wars Lobby</h1>
            <button type="button" class="btn btn-primary" id="createRoomBtn">Create Room</button>
            <button type="button" class="btn btn-primary" id="joinGameBtn">Join Game</button>
            <button type="button" class="btn btn-danger" id="logoutBtn">Logout</button>
        </div>

        <div id="gameArea">
            <div  id="pingInfo">Ping: -- ms</div>
            <div id="turnIndicator"></div>
            <div id="grid"></div>
            <div id="chatArea" class="minimized">
                <div id="chatHeader">
                    <span>Chat</span>
                    <button type="button" class="btn btn-primary" id="chatToggle"></button>
                </div>
                <div id="chatMessages"></div>
                <div id="chatInputArea">
                    <input type="text" id="chatInput" placeholder="Only Commands!" maxlength="60" autocomplete="off" required>
                    <button type="button" class="btn btn-primary" id="sendMessageBtn">Send</button>
                </div>
            </div>
            <div id="wins">
                <p>Red wins: <span id="redWins">0</span></p>
                <p>Blue wins: <span id="blueWins">0</span></p>
              </div>
    </div>
    <div id="connectingScreen">
        <div class="spinner"></div>
        <p>Connecting...</p>
    </div>
    
    <div id="creatingRoomScreen">
        <div class="spinner"></div>
        <p>Creating room...</p>
    </div>

    <div id="load">
        <div class="spinner"></div>
        <p>Loading...</p>
    </div>

</div>

    <!-- Setup -->
    <script src="/src/color-wars-online/load.js"></script>
    <script src="/src/color-wars-online/cache.js"></script>
    <script type="module">import devtools from '/src/package/js/devtools.js';</script>
    <script src="/src/color-wars-online/devtools.js"></script>
    <!-- Setup -->

    <!-- CDN -->
    <script src="/src/package/js/detectIncognito.js"></script>
    <script src="/src/package/js/peerjs.min.js"></script>
    <script src="/src/package/js/firebase-app-compat.js"></script>
    <script src="/src/package/js/firebase-auth-compat.js"></script>
    <script src="/src/color-wars-online/process.js"></script>
    <!-- CDN -->

    <!-- SCRIPTS By Color-wars -->
    <script src="/src/main/scripts.js"></script>
    <script src="/src/color-wars-online/checkInternetConnection.js"></script>
    <script src="/src/color-wars-online/isWebRTCSupported.js"></script>
    <script src="/src/color-wars-online/detectIncognito.js"></script>
    <script src="/src/color-wars-online/ActiveTab.js"></script>
    <!-- SCRIPTS By Color-wars -->

</body>
</html>