Mobile devices and RRPSFD support

README.md

@@ -0,0 +1,12 @@
+# Мультиплеерный сапер
+
+Написан на `Python` фреймворке `FastAPI` с использованием `Socket.IO` и чистого `HTML/CSS/JS`
+
+Развернут по адресу: https://ms.3spikes.space/ с помощью [RRPSFD](https://git.3spikes.space/docker/rrpsfd)
+
+## Фичи
+
+- Комнаты - Играй с друзьями, просто пришли им код своей комнаты
+- Полная кастомизация - Меняй параметры игры, а также почти всю цветовую палитру
+- Минималистичный дизайн
+- (Новое) Поддержка мобильных устройств и устройств с маленьким (в меру) экраном

docker-compose.yml

@@ -1,10 +1,6 @@
-version: '3.8'
 services:
   main:
     build: .
     restart: unless-stopped
-    networks:
+    labels:
-      - tss-net
+      rrpsfd:ms.3spikes.space: 80 # link to rrpsfd instead of ports: - "80:80"
-networks:
-  tss-net:
-    external: true

static/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Сапер мультиплеер</title>
     <link rel="stylesheet" href="/static/style.css">
+    <link rel="stylesheet" href="/static/small-screens.css">
     <link rel="stylesheet" href="/static/colorpicker.min.css" />
     <script src="/static/socket.io.js"></script>
     <script src="/static/colorpicker.iife.min.js"></script>
@@ -35,8 +36,10 @@
                     </div>
                 </div>
                 <div class="block">
-                    <h3>Новая комната</h3>
                     <div>
+                        <h3>Новая комната</h3>
+                    </div>
+                    <div class="no-wrap">
                         <input id="width" type="number" placeholder="25" min="5" max="25" value="25">
                         <b>X</b>
                         <input id="height" type="number" placeholder="15" min="5" max="15" value="15">

static/small-screens.css

@@ -0,0 +1,25 @@
+@media (max-width: 1200px) {
+    #game-canvas {
+        width: calc(100% - 300px);
+    }
+}
+
+@media (max-width: 768px) {
+    html {
+        zoom: 75%;
+    }
+
+    #game {
+        flex-direction: column;
+    }
+
+    #game-tools {
+        height: 50vh;
+    }
+
+    #game-canvas {
+        width: 100%;
+    }
+}
+
+@media (max-width: 480px) {}

static/style.css

@@ -51,6 +51,7 @@ body {
 
 .block>div {
     display: flex;
+    flex-wrap: wrap;
     flex: 1 1 auto;
     gap: 5px;
 }
@@ -60,6 +61,10 @@ body {
     text-align: center;
 }
 
+.block>div:not(.no-wrap)>* {
+    min-width: 100px;
+}
+
 #game {
     background: #fff;
 
@@ -72,15 +77,14 @@ body {
     overflow: hidden;
 }
 
-#game,
+/* #game,
 #game-canvas {
-    height: 600px;
+} */
-}
 
 #game-canvas {
     border-right: 1px solid var(--bg);
     background-color: var(--bg-2);
-    width: 800px;
+    aspect-ratio: 4/3;
 }
 
 #game-tools {