From b06e12aad2f40caf89d6097230735d057e82f2cd Mon Sep 17 00:00:00 2001
From: Fasterino <fasterino@Fasterino-MacBook.local>
Date: Fri, 31 Oct 2025 05:32:08 +0300
Subject: [PATCH] Mobile devices and RRPSFD support

---
 .DS_Store                | Bin 6148 -> 8196 bytes
 README.md                |  12 ++++++++++++
 docker-compose.yml       |   8 ++------
 static/index.html        |   5 ++++-
 static/small-screens.css |  25 +++++++++++++++++++++++++
 static/style.css         |  12 ++++++++----
 6 files changed, 51 insertions(+), 11 deletions(-)
 create mode 100644 README.md
 create mode 100644 static/small-screens.css

diff --git a/.DS_Store b/.DS_Store
index 5bfc8adab31bf8831570de03e7cf68385fabacef..46abf03ba6fd4172865a58a336ded9951dc350f8 100644
GIT binary patch
literal 8196
zcmeHM&1(}u6n~RVnw6piQ7H7X)oY3U@(V%I7(wYpx}t)XG@GPN=w>G-n?|XHoIL0s
zAcz;ig9lGNi5Ghi#G9wmtKwacp42xVjWgS9J!yr`l$ke~_ujtW`|+6B*#ZE`cPf(r
zBLHAyXEHO4!+^&0tnX?GxiW^5pg;J_lWv(dn!7B`f?>cgU>GnA7zPXj{|f_nX0v9;
zocls+M#F$%;6O6K_6G+$lQ}7SLh`Kx2Yv-WnZ#w@aGqfkl#Y}+DSJYq1{)EsD1|GL
zR}3QDaov%2IVpQW3U?s#@<C)|B5x>!N5|(o+#E<wNHZD+3<J9v7{jF`WMLWV5Nh{#
z^5KW7YtTZ$^Qnhx_L1Q0#)A8PR@Ybd)HiF&w}I3mx<U%$u0j<8SXCpF7u#F9R*n5>
z)4KI^p2t@F8}xVd!4_(K^5q(fKMY0uYr=gfLkW8gvEa&8pO$5&Y%|GY&;I0%ImLOY
z830&s<1N)}u53J*doHqxL8E5&XKOV}xf3VB<Jql5^4dUzYF>RiJ(D-03gk0X?4#dv
zb1wz<zORaQkY304jq#a+C1?S~DhPFi<U|CaVyR;sVpXhYRg_0x&5l0Xsh55v73W|J
z9jSu>APo&<vW`fztZH<$33ec<d}c7KD%^z*dazl8S9%C-^bX-(G}}Zg;%}p6i1AuD
zW^rDN#QPkvACmSV#w+W#*8E<!Ubo$p_5Rvx`t^1=F|kDwRx&k|w$th1^nzQXT{kR+
zop!#|y3KxFr_}d$<|Xe&z1l5ij$NWbSgHrr7I&yus%UcOW<99TZk~36N}Kz-LSY}W
z?P6wRZEfo8>2YWJ+|2s8vvz)JV%(XTKC`}V+s99yx-ef{@f!hsg!r)$dHBO&@w-1h
z#+jDCRv*^GCsDmxAs<KIZC@0-nf45|M&fL=DzP>hAnh5eZY%I<u#D?F*qM!KhJpQO
zz!DHf*!}-<{P+L;2Wk))1`Gp#jRBG@xCQo_8+SypR~rZWB6il8T~A2vf&(*Q>-;*7
ivi}c5oI6sNld>lyYOwwD4*~rB$ejP2d@~$a27UqlqkrrG

delta 169
zcmZp1XfcprU|?W$DortDU=RQ@Ie-{Mvv5sJ6q~50D9Qzr2a6>$Br+s3WH6*M#BWSo
z&dkU)`GBC*WH~|k$!`TUCie<yak4XHG2}B8FeFZP5EkKOoCMUW_a6)xHX94CXWX16
uI-PMbI|qj#Gf)Z$1h|2OE6BEuiQkzg^UHXG>}FtsxC7)ghRyLjbC>}Q$06qc

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..b2f672a
--- /dev/null
+++ b/README.md
@@ -0,0 +1,12 @@
+# Мультиплеерный сапер
+
+Написан на `Python` фреймворке `FastAPI` с использованием `Socket.IO` и чистого `HTML/CSS/JS`
+
+Развернут по адресу: https://ms.3spikes.space/ с помощью [RRPSFD](https://git.3spikes.space/docker/rrpsfd)
+
+## Фичи
+
+- Комнаты - Играй с друзьями, просто пришли им код своей комнаты
+- Полная кастомизация - Меняй параметры игры, а также почти всю цветовую палитру
+- Минималистичный дизайн
+- (Новое) Поддержка мобильных устройств и устройств с маленьким (в меру) экраном
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index 2d85172..a6f7c9d 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,10 +1,6 @@
-version: '3.8'
 services:
   main:
     build: .
     restart: unless-stopped
-    networks:
-      - tss-net
-networks:
-  tss-net:
-    external: true
+    labels:
+      rrpsfd:ms.3spikes.space: 80 # link to rrpsfd instead of ports: - "80:80"
diff --git a/static/index.html b/static/index.html
index c997b50..ec4372b 100644
--- a/static/index.html
+++ b/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">
diff --git a/static/small-screens.css b/static/small-screens.css
new file mode 100644
index 0000000..5c461ce
--- /dev/null
+++ b/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) {}
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 8d5dde2..544166f 100644
--- a/static/style.css
+++ b/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 {