Somewhat responsiveness on

public/assets/css/board-responsive.css

@@ -0,0 +1,19 @@
+@media only screen and (max-width: 1280px) {
+
+}
+
+@media only screen and (max-width: 820px) {
+    .boardContainer {
+        width: 90vw;
+        aspect-ratio: 1;
+    }
+
+    .panelContainer {
+        flex-direction: column-reverse;
+    }
+
+    .field {
+        width: 7.5vw; /* still need to test that */
+    }
+}
+

public/assets/css/board.css

@@ -285,3 +285,7 @@ h1,h2,h3,h4,h5,h6 {
 #timer.active {
     animation: timerDanger 1s infinite ease;
 }
+
+.tippyTemplate {
+    display: none;
+}

public/assets/css/main.css

@@ -228,6 +228,8 @@ nav span:hover {
     align-items: center;
     width: 45vw;
     justify-content: space-between;
+
+    gap: 1rem;
 }
 
 #profileView .stats {
@@ -316,3 +318,7 @@ nav span:hover {
 #profileView .periodal .stat h1 {
     margin: 0.5rem;
 }
+
+.tippyTemplate {
+    display: none;
+}

public/assets/js/socket-game.js

@@ -7,14 +7,34 @@ var occupiedFields = [];
 
 var lastTimeClick = 0;
 
+tippy('#board .field', {
+    allowHTML: true,
+    placement: "top",
+    theme: "translucent",
+    animation: "shift-toward-subtle",
+    interactive: true,
+    content: (reference) => {
+        let fieldData = `${$(reference).data('pos-x') }, ${$(reference).data('pos-y') }`;
+
+        return $('#mainTippyTemplate').html().replaceAll("[[FIELDPOS]]", fieldData);
+    },
+});
+
 $('#board .field').on('click', function () {
-    console.log(new Date().getTime() / 1000 - lastTimeClick);
     if (new Date().getTime() / 1000 - lastTimeClick > 0.3) {
+        if ($(window).width() > 820) {
             socket.emit("place ship", selectedShip, $(this).data('pos-x'), $(this).data('pos-y'), shipRotation);
             lastTimeClick = new Date().getTime() / 1000;
+        } // else {
+        // }
     }
 });
 
+function manualPlace(posX, posY) {
+    // console.log(args);
+    socket.emit("place ship", selectedShip, posX, posY, shipRotation);
+}
+
 $('#secondaryBoard .field').on('click', function () {
     if (new Date().getTime() / 1000 - lastTimeClick > 0.3) {
         socket.emit("shoot", $(this).data('pos-x'), $(this).data('pos-y'));

public/assets/js/socket.js

@@ -2,6 +2,7 @@ const socket = io();
 
 // Handling server-sent events
 socket.on("joined", (nick) => {
+    returnLock = false;
     lockUI(true);
     $("#oppNameField").html(nick);
     switchView("preparingGame");
@@ -21,7 +22,6 @@ socket.on("gameReady", (gameId) => {
 });
 
 var nickname;
-var myProfile;
 
 socket.emit("my profile", (profile) => {
     // General profile data
@@ -32,7 +32,7 @@ socket.emit("my profile", (profile) => {
     // Profile stats
     $("#monthlyPlayed").html(profile.stats.monthly_matches);
     $("#totalPlayed").html(profile.stats.alltime_matches);
-    $("#winrate").html(`${profile.stats.winrate}%`);
+    $("#winrate").html(profile.stats.winrate !== null ? `${profile.stats.winrate}%` : "-");
 
     // Match history
     var matchHistory = profile.matchHistory;
@@ -53,6 +53,10 @@ socket.emit("my profile", (profile) => {
         matchHistoryDOM += `<div class="match" data-matchid="${match.match_id}"><div><h1 class="dynamic${match.won === 1 ? "" : " danger"}">${match.won === 1 ? "Zwycięstwo" : "Porażka"}</h1><span> vs. ${match.match_type === "pvp" ? match.opponent : "AI"}</span></div><h2 class="statsButton">Kliknij by wyświetlić statystyki</h2><span>${date}</span><br><span>${duration}</span></div>`;
     }
 
+    if (matchHistoryDOM === "") {
+        matchHistoryDOM = "<h2>Brak zagranych meczów</h2>";
+    }
+
     $(".matchList").html(matchHistoryDOM);
 });
 
@@ -62,17 +66,6 @@ socket.emit("whats my nick", (myNickname) => {
     console.log(nickname);
 });
 
-socket.on("game start", (gameInfo) => {
-    let opp;
-    if (gameInfo.players[0]!==nickname) {
-        opp = gameInfo.players[0];
-    } else {
-        opp = gameInfo.players[1];
-    }
-
-    alert(`Grasz przeciwko: ${opp}`);
-});
-
 $("#createGameButton").on("click", function () {
     lockUI(true);
     socket.emit("create lobby", (response) => {

views/board.handlebars

@@ -18,10 +18,16 @@
                     <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 id="boardSwitch"><span class="important">B</span> Zamiana planszy</h3>
+                </div>
+                <div class="mobileControls">
+                    <button>Zmień statek</button>
+                    <button>Zmień planszę</button>
+                </div>
                 <span class="break"></span>
                 <h3><span class="dynamic" id="whosTurn"></span></h3>
                 <h2 class="important" id="timer">∞</h2>
@@ -35,6 +41,15 @@
     </div>
 </div>
 
+<div id="mainTippyTemplate" class="tippyTemplate">
+    <button onclick="manualPlace([[FIELDPOS]])">Postaw</button>
+    <button>Obróć</button>
+</div>
+
+<div id="secondaryTippyTemplate" class="tippyTemplate">
+    <button>Strzel</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>

views/layouts/main.handlebars

@@ -13,7 +13,12 @@
     <link rel="stylesheet" href="/assets/css/board.css">
     <link rel="stylesheet" href="/assets/css/main.css">
     <link rel="stylesheet" href="/assets/css/responsive.css">
+    <link rel="stylesheet" href="/assets/css/board-responsive.css">
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
+    <script src="https://unpkg.com/@popperjs/core@2"></script>
+    <script src="https://unpkg.com/tippy.js@6"></script>
+    <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/shift-toward-subtle.css" />
+    <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/themes/translucent.css" />
 </head>
 <body>
     <span class="designerTag">Designed by Maciejka</span>