statki/views/index.handlebars

<nav><span onclick="switchView('settingsView')">{{ t 'menu.navbar.Settings' }}</span><span onclick="switchView('mainMenuView')">{{ t 'menu.navbar.Main menu' }}</span> <span id="profileButton" onclick="switchView('profileView')">{{ t 'menu.navbar.Profile' }}</span></nav>
<div class="container" id="mainMenuView" data-path="/">
    <div>
        
        <h2>{{ t 'menu.index.Select game mode' }}</h2>
        <div class="modes">
            <div onclick="switchView('pvpMenuView')">
                <h2>{{ t 'menu.index.PvP' }}</h2>
                <p>{{ t 'menu.index.Play against another player' }}</p>
            </div>
            <div onclick="switchView('vsAiView')">
                <h2>{{ t 'menu.index.Vs AI' }}</h2>
                <p>{{ t 'menu.index.Play against the computer' }}</p>
            </div>
        </div>
    </div>
</div>

<div class="container" id="vsAiView" data-path="/pve">
    <div>
        <h2>{{ t 'menu.PvE.Create' }}</h2>
        <h3>{{ t 'menu.PvE.Choose the difficulty mode' }}</h3>
        <div class="modes">
            <div>
                <form action="#" id="pveCreateForm">
                    <select name="difficulty" id="pveDifficulty">
                        <option value="simple">Simple</option>
                        <option value="smart">Smart</option>
                        <option value="overkill">Overkill</option>
                    </select>
                    <p id="difficultyDescription">
                        {{ t 'menu.PvE.difficulty.Simple.description' }}
                    </p>
                    <input type="submit" value="{{ t 'menu.PvE.Begin' }}">
                </form>
            </div>
        </div>
    </div>
</div>

<div class="container" id="pvpMenuView" data-path="/pvp">
    <div>
        <h2>{{ t 'menu.PvP.PvP' }}</h2>
        <div class="modes">
            <div id="createGameButton">
                <h2>{{ t 'menu.PvP.Create' }}</h2>
                <p>{{ t 'menu.PvP.Create your own room' }}</p>
            </div>
            <div onclick="switchView('pvpJoinView')">
                <h2>{{ t 'menu.PvP.Join' }}</h2>
                <p>{{ t 'menu.PvP.Join a room by a code' }}</p>
            </div>
        </div>
    </div>
</div>

<div class="container" id="pvpCreateView" data-path="/pvp/create" data-pathlock>
    <div>
        <h2>{{ t 'menu.PvP/Create.PvP / Create' }}</h2>
        <div class="modes">
            <div>
                <h2>{{ t 'menu.PvP/Create.Room code:' }}</h2>
                <input type="text" maxlength="6" readonly value="-" id="createGameCode">
                <h3>{{ t 'menu.PvP/Create.Waiting for an opponent' }}</h3>
                <button id="leaveGameButton">{{ t 'menu.PvP/Create.Leave the room' }}</button>
            </div>
        </div>
    </div>
</div>

<div class="container" id="pvpJoinView" data-path="/pvp/join">
    <div>
        <h2>{{ t 'menu.PvP/Join.PvP / Join' }}</h2>
        <div class="modes">
            <div>
                <form action="#" id="pvpJoinForm">
                    <input type="text" maxlength="6" id="pvpJoinCode" placeholder="{{ t 'menu.PvP/Join.Room code' }}" autocomplete="off">
                    <input type="submit" value="{{ t 'menu.PvP/Join.Join' }}">
                </form>
            </div>
        </div>
    </div>
</div>

<div class="container" id="preparingGame" data-path="/pvp/prepairing" data-pathlock>
    <div>
        <h2>{{ t 'menu.PvP/Loading.PvP / Loading' }}</h2>
        <div class="modes">
            <div>
                <h2>{{ t 'menu.PvP/Loading.Wait' }}</h2>
                <h3>{{ t 'menu.PvP/Loading.You will be redirected soon' }}</h3>
                <h3>{{ t 'menu.PvP/Loading.Opponent:' }}</h3>
                <h4 id="oppNameField"></h4>
            </div>
        </div>
    </div>
</div>

<div class="container" id="profileView" data-path="/profile">
    <div class="profile">
        <h1 class="nickname">{{ t 'menu.Profile.Loading' }}</h1>
        <div>
            <span>{{ t 'menu.Profile.Player since:' }} </span>
            <span id="playerSince">-</span>
        </div>
    </div>
    <div class="stats">
        <div class="matchList"></div>
        <div class="periodal">
            <div class="stat"><h1 id="monthlyPlayed">-</h1><span>{{ t 'menu.Profile.matches played this month' }}</span></div>
            <div class="stat"><h1 id="totalPlayed">-</h1><span>{{ t 'menu.Profile.total matches played' }}</span></div>
            <div class="stat"><h1 id="winrate">-</h1><span>{{ t 'menu.Profile.winrate' }}</span></div>
        </div>
    </div>
</div>

<div class="container" id="settingsView" data-path="/settings">
    <div>
        <h1>{{ t 'menu.Settings.Settings' }}</h1>
        <h2>{{ t 'menu.Settings.General' }}</h2>
        <label for="language">Language: </label>
        <select name="language" id="languages">
            
        </select>

        <h2>{{ t 'menu.Settings.Account' }}</h2>
        <h3>{{ t 'menu.Settings.Current nickname:' }} <span class="nickname dynamic">{{ t 'menu.Profile.Loading' }}</span></h3>
        <button onclick="window.location.href = '/nickname'">{{ t 'menu.Settings.Change nickname' }}</button>
        <h3 id="logout">{{ t 'menu.Settings.Log out' }}</h3>
        <p class="versionInfo">statki ver. {{ ver }}<br>© 2024 MCJK <a href="/privacy" target="_blank">{{ t 'landing.Privacy policy' }}</a></p>
    </div>
</div>

<script>
    window.locale = {
        "Unknown error occured": "{{ t 'menu.General.Unknown error occured' }}",
        "Status:": "{{ t 'menu.General.Status:' }}",
        "Victory": "{{ t 'menu.Profile.Victory' }}",
        "Defeat": "{{ t 'menu.Profile.Defeat' }}",
        "Click to view match statistics": "{{ t 'menu.Profile.Click to view match statistics' }}",
        "No matches played": "{{ t 'menu.Profile.No matches played' }}",

        "Reconnecting": "{{ t 'errors.Reconnecting' }}",
        "Reconnected": "{{ t 'errors.Reconnected' }}",
        "Reconnection error occured": "{{ t 'errors.Reconnection error occured' }}",
        "Reconnection failed": "{{ t 'errors.Reconnection failed' }}",
        "Disconnected": "{{ t 'errors.Disconnected' }}",
        "Try to refresh the page if this error reoccurs": "{{ t 'errors.Try to refresh the page if this error reoccurs' }}",
        "Connection error": "{{ t 'errors.Connection error' }}",
        "Simple description": "{{ t 'menu.PvE.difficulty.Simple.description' }}",
        "Smart description": "{{ t 'menu.PvE.difficulty.Smart.description' }}",
        "Overkill description": "{{ t 'menu.PvE.difficulty.Overkill.description' }}"
    };
</script>
<script src="/assets/js/spa_lib.js"></script>
<script src="/assets/js/socket.js"></script>
<script src="/assets/js/socket-err-handler.js"></script>