<!DOCTYPE html>
<html>

<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Chess Against The Aliens</title>
    <meta name="description" content="Chess Against The Aliens" />

    <meta property="og:url" content="index.html">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Chess Against The Aliens">
    <meta property="og:description" content="Chess Against The Aliens">

    <link rel="icon" type="image/svg" href="https://wadeehaddad.com/assets/images/logo.png" />

    <link rel="stylesheet" id="chessboard-css" href="https://wadeehaddad.com/assets/images/logo.png" />
    <link rel="stylesheet" href="css/board.css" />
</head>

<body bgcolor="#000000">
    <div class="content">
    	<span align="center">
            <a href="https://wadeehaddad.com" style="color:#ffffff">
                <img  width="80" height="80" src="https://wadeehaddad.com/assets/images/logo.png" style="display: block; margin-left: auto; margin-right: auto">
                <h1 align="center" style="font-weight:600">AliensEngine</h1>
            </a>
            <h2 align="center" style="color:#ffffff">Chess Against The Aliens</h2>
            <br />
        </span>
            <div class="chess-area">
                <div class="board-table">
                    <div id="board-top-controls" class="top-controls">
                        <div id="game-promotion" class="promotion hidden">
                            <span figure="q">Queen</span>
                            <span figure="b">Bishop</span>
                            <span figure="n">Knight</span>
                            <span figure="r">Rook</span>
                        </div>
                        <div id="board-save-pgn-area" class="popup hidden">
                            <span class="close"></span>
                            <label>Save PGN Notation:</label>
                            <textarea readonly></textarea>
                            <button>Close</button>
                        </div>
                        <div id="board-load-fen-area" class="popup hidden">
                            <span class="close"></span>
                            <label>Load FEN Notation:</label>
                            <textarea></textarea>
                            <button>Load</button>
                        </div>
                        <div id="board-load-pgn-area" class="popup large hidden">
                            <span class="close"></span>
                            <label>Load PGN Notation:</label>
                            <textarea></textarea>
                            <button>Load</button>
                        </div>
                        <div id="board-resign-game-area" class="popup hidden">
                            <span class="close"></span>
                            <label>Do you want to resign you Noob?</label>
                            <button class="yes">Skill Issue</button>
                            <button class="no">Still a Skill Issue XD</button>
                        </div>
                    </div>
                    <div id="board" class="board"></div>
                    
                </div>
                <div class="board-settings">
                    <div class="apex">
                        <span class="label-history">Game History</span>
                        <div class="game-level" id="game-difficulty-option" title="Choose The Engine's Skill Level">
                            <span class="label">Level</span>
                            <span class="value" id="game-difficulty-skill-value">20</span>
                        </div>
                    </div>
                    
                    <div class="turns-history" id="game-turns-history">
                        <ol></ol>
                    </div>
                    <div class="game-analyze hidden" id="game-analyze-string"></div>
            
                    <div class="tunes">

                        <span id="btn-resign" title="Resign" class="btn resign"></span>
                    </div>
                </div>
            </div>
            <div class="chess-log"></div>
    </div>

    <script src="js/libs/jquery-3.6.0.min.js"></script>
    <script src="js/libs/chess.min.js"></script>
    <script src="js/libs/ltpgnviewer.js"></script>
    <script src="js/engine/stockfish-nnue-16.js"></script>
    <script src="js/engine/nn-5af11540bbfe.nnue"></script>
    <script src="js/engine/stockfish-nnue-16-single.wasm"></script>
    <script src="js/engine/stockfish-nnue-16-single.wasm"></script>
    <script src="js/engine/stockfish-nnue-16.wasm"></script>


    <script>
        function is_touch_device() {
            return 'ontouchstart' in window || navigator.maxTouchPoints;
        };

        function loadCss(cssId, cssHref) {
            $('#' + cssId).attr('href', cssHref);
        }

        var mobileLibs = 8;
        var desktopLibs = 8;

        var isMobile = is_touch_device();

        if (isMobile == true) {

            var chess, board;

            loadCss('chessboard-css', 'css/caustique-chessboard.css');

            $.getScript('js/mobile/chessboard-caustique-min.js', initGameBoard('mobile'));
            $.getScript('js/board-controls-side.js', initGameBoard('mobile'));
            $.getScript('js/board-controls-bottom.js', initGameBoard('mobile'));
            $.getScript('js/board-sets.js', initGameBoard('mobile'));

            $.getScript('js/board-time.js', initGameBoard('mobile'));
            $.getScript('js/board-actions.js', initGameBoard('mobile'));
            $.getScript('js/mobile/board-actions-mobile.js', initGameBoard('mobile'));
            $.getScript('js/board-init.js', initGameBoard('mobile'));

        } else {

            loadCss('chessboard-css', 'css/chessboard.css');

            $.getScript('js/libs/chessboard.min.js', initGameBoard('desktop'));
            $.getScript('js/board-controls-side.js', initGameBoard('desktop'));
            $.getScript('js/board-controls-bottom.js', initGameBoard('desktop'));
            $.getScript('js/board-sets.js', initGameBoard('desktop'));

            $.getScript('js/board-time.js', initGameBoard('desktop'));
            $.getScript('js/board-actions.js', initGameBoard('desktop'));
            $.getScript('js/board-actions-desktop.js', initGameBoard('desktop'));
            $.getScript('js/board-init.js', initGameBoard('desktop'));

        }

        function initGameBoard(lib = false) {

            if (lib == 'mobile') {
                mobileLibs--;
                if (mobileLibs == 0) {
                    console.log('Mobile loaded');
                    setTimeout(function() {
                        setMobileBoard();
                    }, 1000);
                }
            }

            if (lib == 'desktop') {
                desktopLibs--;
                if (desktopLibs == 0) {
                    console.log('Desktop loaded');
                    setTimeout(function() {
                        setDesktopBoard();
                    }, 1000);
                }
            }

        }
    </script>

</body>

</html>
