statki/views/index.handlebars

<nav><span>Strona główna</span> <span id="profileButton" onclick="switchView('profileView')">Profil</span></nav>
{{!-- <h1 class="header">Statki</h1> --}}
<div class="container" id="mainMenuView" data-title="Statki" data-path="/">
    <div>
        
        <h2>Wybierz tryb gry</h2>
        <div class="modes">
            <div id="pvpMenuButton">
                <h2>PvP</h2>
                <p>Graj przeciwko innemu graczowi</p>
            </div>
            <div>
                <h2 id="ai">Vs. AI</h2>
                <p>Graj przeciwko komputerowi</p>
            </div>
        </div>
    </div>
</div>

<div class="container" id="pvpMenuView" data-title="Statki / PvP" data-path="/pvp">
    <div>
        <h2>PvP</h2>
        <div class="modes">
            <div id="createGameButton">
                <h2>Stwórz</h2>
                <p>Stwórz własny pokój</p>
            </div>
            <div onclick="switchView('pvpJoinView')">
                <h2>Dołącz</h2>
                <p>Dołącz do czyjegoś pokoju poprzez kod</p>
            </div>
        </div>
    </div>
</div>

<div class="container" id="pvpCreateView" data-title="Statki / PvP / Stwórz" data-path="/pvp/create">
    <div>
        <h2>PvP / Stwórz</h2>
        <div class="modes">
            <div>
                <h2>Kod pokoju:</h2>
                <input type="text" maxlength="6" readonly value="123456" id="createGameCode">
                <h3>Oczekiwanie na gracza...</h3>
                <button id="leaveGameButton">Opuść pokój</button>
            </div>
        </div>
    </div>
</div>

<div class="container" id="pvpJoinView" data-title="Statki / PvP / Dołącz" data-path="/pvp/join">
    <div>
        <h2>PvP / Dołącz</h2>
        <div class="modes">
            <div>
                <form action="/api/joinme" id="pvpJoinForm">
                    <input type="text" maxlength="6" id="pvpJoinCode" placeholder="Kod pokoju" autocomplete="off">
                    <input type="submit" value="Dołącz">
                </form>
            </div>
        </div>
    </div>
</div>

<div class="container" id="preparingGame" data-title="Statki / PvP / Przygotowywanie" data-path="/pvp/prepairing">
    <div>
        <h2>PvP / Wczytywanie</h2>
        <div class="modes">
            <div>
                <h2>Czekaj...</h2>
                <h3>Wkrótce nastąpi przekierowanie</h3>
                <h3>Przeciwnik:</h3>
                <h4 id="oppNameField"></h4>
            </div>
        </div>
    </div>
</div>

<div class="container" id="profileView" data-title="Statki / Profil" data-path="/profile">
    <div class="profile">
        <h1>MaciejkaG</h1>
        <div>
            <span>Odznaki: </span>
            <span>Deweloper, Wczesny użytkownik</span>
        </div>
    </div>
    <div class="stats">
        <div class="matchList">
            <div class="match">
                <div><h1 class="dynamic danger">Porażka</h1><span> vs. MaciejkaG</span></div>
                <h2 class="statsButton">Kliknij by wyświetlić statystyki</h2>
            </div>
            <div class="match">
                <div><h1 class="dynamic">Zwycięstwo</h1><span> vs. MaciejkaG</span></div>
                <h2 class="statsButton">Kliknij by wyświetlić statystyki</h2>
            </div>
        </div>
        <div class="periodal">
            <div class="stat"><h1>10</h1><span>meczów zagranych w ostatnim miesiącu</span></div>
            <div class="stat"><h1>100</h1><span>meczów zagranych łącznie</span></div>
            <div class="stat"><h1>50%</h1><span>winrate</span></div>
        </div>
    </div>
</div>

<script src="/assets/js/spa_lib.js"></script>
<script src="/assets/js/socket.js"></script>
<script src="/assets/js/socket-err-handler.js"></script>