statki/views/board.handlebars

<div class="cover">
    <h1 class="title">Łączenie...</h1>
    <div class="dialog">
        <h1 id="state"></h1>
        <h3 id="opponent"></h3>
        <button onclick="window.location.href = '/'">Powróć do menu</button>
    </div>
</div>

<div class="container" id="gameView">
    <div>
        <h1>Statki</h1>
        <div class="panelContainer">
            <div class="shapes">
                <div class="ownBoardInfo">
                    <h3>Wybrany statek</h3>
                    <h2 class="dynamic" id="selectedShip">Jednomasztowiec</h2>
                    <h3>Dostępne: <span class="dynamic danger" id="shipsLeft">1</span></h3>
                </div>
                <span class="break"></span>
                <div class="controls">
                    <h2>Sterowanie</h2>
                    <h3 class="controlsOwnBoard"><span class="important">S</span> Zmiana statku</h3>
                    <h3 class="controlsOwnBoard"><span class="important">R</span> Obrót statku</h3>
                    <h3 class="boardSwitch"><span class="important">B</span> Zamiana planszy</h3>
                </div>
                <div class="mobileControls">
                    <button class="controlsOwnBoard" onclick="switchShips()">Zmiana statku</button>
                    <button class="boardSwitch" onclick="switchBoards()">Zmiana planszy</button>
                </div>
                <span class="break"></span>
                <h3><span class="dynamic" id="whosTurn"></span></h3>
                <h2 class="important" id="timer">∞</h2>
            </div>
            <div class="boardContainer">
                <div class="board" id="board" oncontextmenu="return false;"></div>
                <div class="board" id="secondaryBoard" class="secondary" oncontextmenu="return false;"></div>
            </div>
            <div class="spaceFiller"></div>
        </div>
    </div>
</div>

<div id="mainTippyTemplate" class="tippyTemplate">
    <button class="tippyBtn" style="background-color: var(--dynamic)" onclick="manualPlace([[FIELDPOS]])"><span class="material-symbols-outlined">place_item</span></button>
    <button class="tippyBtn" style="background-color: var(--important)" onclick="switchRotation()"><span class="material-symbols-outlined">refresh</span></button>
</div>

<div id="secondaryTippyTemplate" class="tippyTemplate">
    <button class="tippyBtn" style="background-color: var(--danger)" onclick="manualShoot([[FIELDPOS]])"><span class="material-symbols-outlined">ads_click</span></button>
</div>

<script src="/assets/js/battleships-lib.js"></script>
<script src="/assets/js/main.js"></script>
<script src="/assets/js/key-handling.js"></script>
<script src="/assets/js/socket-game.js"></script>
<script src="/assets/js/socket-err-handler.js"></script>