statki/views/index.handlebars

<nav><span onclick="switchView('mainMenuView')">{{ t 'menu.navbar.Main menu' }}</span> <span id="profileButton" onclick="switchView('profileView')">{{ t 'menu.navbar.Profile' }}</span></nav>
{{!-- <h1 class="header">Statki</h1> --}}
<div class="container" id="mainMenuView" data-path="/">
    <div>
        
        <h2>{{ t 'menu.index.Select game mode' }}</h2>
        <div class="modes">
            <div id="pvpMenuButton">
                <h2>{{ t 'menu.index.PvP' }}</h2>
                <p>{{ t 'menu.index.Play against another player' }}</p>
            </div>
            <div>
                <h2 id="ai">{{ t 'menu.index.Vs AI' }}</h2>
                <p>{{ t 'menu.index.Play against the computer' }}</p>
            </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">
    <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="/api/joinme" 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">
    <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 id="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>

<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' }}",

        "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' }}",
    };
</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>