init

.gitignore

@@ -0,0 +1,3 @@
+.venv
+__pycache__
+.vscode

back/__init__.py

@@ -0,0 +1,19 @@
+from fastapi import APIRouter
+from socketio import AsyncServer
+
+from .socket import Socket
+from .game import game_router
+from .create_room import create_room_router
+
+
+def get_backend() -> tuple[APIRouter, AsyncServer]:
+    router = APIRouter(prefix="/api")
+    sio = AsyncServer(async_mode="asgi")
+    server = Socket(sio)
+
+    @sio.on("connect")  # type: ignore
+    async def sio_connect(sid, _):
+        socket = server.to(sid)
+        await create_room_router(server, socket)
+
+    return router, sio

back/create_room.py

@@ -0,0 +1,108 @@
+from random import randint
+
+from .socket import Socket
+from .game import game_router
+
+
+async def create_room_router(server: Socket, socket: Socket):
+    async def check_nickname(nickname: str) -> str | None:
+        nickname = nickname.strip()
+        if len(nickname) < 4:
+            await socket.emit("room-error", "Никнейм должен быть больше 4 букв!")
+            return
+
+        return nickname
+
+    async def check_width(width: str) -> int | None:
+        width = width.strip()
+        if not width.isnumeric():
+            await socket.emit("room-error", "Ширина должна быть числом!")
+            return
+
+        width_i = int(width)
+
+        if width_i < 5 or width_i > 25:
+            await socket.emit("room-error", "Ширина может быть числом от 5 до 25!")
+            return
+
+        return width_i
+
+    async def check_height(height: str) -> int | None:
+        height = height.strip()
+        if not height.isnumeric():
+            await socket.emit("room-error", "Высота должна быть числом!")
+            return
+
+        height_i = int(height)
+
+        if height_i < 5 or height_i > 15:
+            await socket.emit("room-error", "Высота может быть числом от 5 до 15!")
+            return
+
+        return height_i
+
+    async def check_bombs(bombs: str, width: int, height: int) -> int | None:
+        bombs = bombs.strip()
+        if not bombs.isnumeric():
+            await socket.emit("room-error", "Кол-во бомб должно быть числом!")
+            return
+
+        bombs_i = int(bombs)
+        bombs_max = (width * height * 2) // 5
+
+        if bombs_i < 5 or bombs_i > bombs_max:
+            await socket.emit(
+                "room-error", f"Кол-во бомб может быть от 5 до {bombs_max}!"
+            )
+            return
+
+        return bombs_i
+
+    async def check_room(room_id: str) -> str | None:
+        room_id = room_id.strip()
+
+        if not room_id.isnumeric() or len(room_id) != 6:
+            await socket.emit("room-error", "Код должен быть из 6 цифр!")
+            return
+
+        if not server.room_exists(room_id):
+            await socket.emit("room-error", "Такой комнаты не существует!")
+            return
+
+        return room_id
+
+    @socket.on("create-room")
+    async def create_room(_nickname: str, _width: str, _height: str, _bombs: str):
+        nickname = await check_nickname(_nickname)
+        if nickname is None:
+            return
+
+        width = await check_width(_width)
+        if width is None:
+            return
+
+        height = await check_height(_height)
+        if height is None:
+            return
+
+        bombs = await check_bombs(_bombs, width, height)
+        if bombs is None:
+            return
+
+        room_id = str(randint(100000, 999999))
+
+        room = await socket.join(room_id)
+        await game_router(server, socket, room, nickname, width, height, bombs)
+
+    @socket.on("join-room")
+    async def join_room(_nickname: str, _room_id: str):
+        nickname = await check_nickname(_nickname)
+        if nickname is None:
+            return
+
+        room_id = await check_room(_room_id)
+        if room_id is None:
+            return
+
+        room = await socket.join(room_id)
+        await game_router(server, socket, room, nickname)

back/game.py

@@ -0,0 +1,231 @@
+from dataclasses import dataclass, field
+from types import SimpleNamespace
+from random import randint
+
+from .socket import Socket
+
+
+class CellState:
+    OPEN = 0
+    CLOSED = 1
+    FLAGGED = 2
+    MARKED = 3
+    NOT_A_FIELD = 4
+
+
+STR_CLOSED = ""
+STR_BOMB = "💣"
+STR_FLAGGED = "🚩"
+STR_MARKED = "❓"
+STR_NUMBERS = [" ", *(str(i) for i in range(1, 9))]
+
+
+@dataclass
+class GameData:
+    width: int
+    height: int
+    bombs: int
+    game_over: bool = False
+    win: bool = True
+    bombs_in_field: list[tuple[int, int]] = field(default_factory=list)
+    field: list[list[int]] = field(default_factory=list)
+
+    def generate(self) -> "GameData":
+        self.game_over = False
+        self.win
+
+        self.field.clear()
+        self.bombs_in_field.clear()
+
+        for _ in range(self.width):
+            self.field.append([CellState.CLOSED for _ in range(self.height)])
+
+        return self
+
+    def generate_bombs(self, ex: int, ey: int):
+        while len(self.bombs_in_field) < self.bombs:
+            x = randint(0, self.width - 1)
+            y = randint(0, self.height - 1)
+            if x == ex and y == ey:
+                continue
+
+            skip = False
+            for x1, y1 in self.bombs_in_field:
+                if x1 == x and y1 == y:
+                    skip = True
+                    break
+
+            if skip:
+                continue
+
+            self.bombs_in_field.append((x, y))
+
+    def is_bomb(self, x: int, y: int) -> bool:
+        for x1, y1 in self.bombs_in_field:
+            if x1 == x and y1 == y:
+                return True
+        return False
+
+    def get_number(self, x: int, y: int) -> int:
+        bombs = 0
+
+        for i in range(-1, 2):
+            for j in range(-1, 2):
+                if i == 0 and j == 0:
+                    continue
+                if self.is_bomb(x + i, y + j):
+                    bombs += 1
+
+        return bombs
+
+    def is_win(self) -> bool:
+        if len(self.bombs_in_field) == 0:
+            return False
+
+        must_be_open = self.width * self.height - self.bombs
+        flaged_cells = 0
+        open_cells = 0
+
+        for x in range(self.width):
+            for y in range(self.height):
+                if self.field[x][y] == CellState.FLAGGED and self.is_bomb(x, y):
+                    flaged_cells += 1
+                if self.field[x][y] == CellState.OPEN:
+                    open_cells += 1
+
+        if open_cells == must_be_open or self.bombs == flaged_cells:
+            return True
+
+        return False
+
+
+async def game_router(
+    server: Socket,
+    socket: Socket,
+    room: Socket,
+    nickname: str,
+    width=0,
+    height=0,
+    bombs=0,
+):
+    async def emit_all_in_room(event: str, *args):
+        await socket.emit(event, *args)
+        await room.emit(event, *args)
+
+    async def update_field():
+        str_field = []
+        flags = 0
+
+        for x, row in enumerate(data.field):
+            str_row = []
+            for y, cell in enumerate(row):
+                if (
+                    data.game_over
+                    and (not data.win or cell != CellState.FLAGGED)
+                    and data.is_bomb(x, y)
+                ):
+                    str_row.append(STR_BOMB)
+                else:
+                    match cell:
+                        case CellState.CLOSED:
+                            str_row.append(STR_CLOSED)
+                        case CellState.FLAGGED:
+                            str_row.append(STR_FLAGGED)
+                            flags += 1
+                        case CellState.MARKED:
+                            str_row.append(STR_MARKED)
+                        case _:
+                            str_row.append(STR_NUMBERS[data.get_number(x, y)])
+
+            str_field.append(str_row)
+
+        if data.game_over:
+            text = "Победа!" if data.win else "Поражение!"
+        else:
+            text = ""
+        await emit_all_in_room("update-field", str_field, flags, data.bombs, text)
+
+    is_host = width > 0 and height > 0 and bombs > 0
+    room_id = room.sid
+    data = room.room_data(lambda: GameData(width, height, bombs).generate())
+
+    @socket.on("chat")
+    async def chat(msg: str):
+        await room.emit("chat", nickname, msg)
+
+    @socket.on("disconnect")
+    async def disconnect(_reason):
+        if is_host:
+            await room.emit("reload-page")
+        else:
+            await room.emit("other-disconnect", socket.sid, nickname)
+
+    @socket.on("about-me")
+    async def about_me():
+        await room.emit("about-me", socket.sid, nickname + (" 👑" if is_host else ""))
+
+    @socket.on("cursor")
+    async def cursor(x: float, y: float):
+        await room.emit("cursor", socket.sid, nickname, x, y)
+
+    @socket.on("restart")
+    async def restart():
+        data.generate()
+        await update_field()
+
+    def openCells(x: int, y: int):
+        if (
+            x < 0
+            or y < 0
+            or x >= data.width
+            or y >= data.height
+            or data.field[x][y] == CellState.OPEN
+        ):
+            return
+
+        data.field[x][y] = CellState.OPEN
+
+        if data.get_number(x, y) == 0:
+            for i in range(-1, 2):
+                for j in range(-1, 2):
+                    openCells(x + i, y + j)
+
+    @socket.on("click")
+    async def click(left: bool, x: int, y: int):
+        if data.game_over or x < 0 or y < 0 or x >= data.width or y >= data.height:
+            return
+
+        cell = data.field[x][y]
+
+        if cell == CellState.OPEN:
+            return
+
+        if left:
+            if cell != CellState.CLOSED:
+                return
+            if data.is_bomb(x, y):
+                data.game_over = True
+                data.field[x][y] = CellState.OPEN
+            else:
+                if len(data.bombs_in_field) == 0:
+                    data.generate_bombs(x, y)
+                openCells(x, y)
+                data.win = data.is_win()
+                if data.win:
+                    data.game_over = True
+
+        else:
+            cell += 1
+            if cell == CellState.NOT_A_FIELD:
+                cell = CellState.CLOSED
+            data.field[x][y] = cell
+            if cell == CellState.FLAGGED:
+                data.win = data.is_win()
+                if data.win:
+                    data.game_over = True
+
+        await update_field()
+
+    await socket.emit("room-join", room_id)
+    await room.emit("other-join", socket.sid, nickname)
+    await update_field()

back/socket.py

@@ -0,0 +1,123 @@
+from dataclasses import dataclass, field
+from typing import Any, Callable, TypeVar
+from socketio import AsyncServer
+
+
+T = TypeVar("T")
+
+
+@dataclass
+class SocketMemory:
+    callbacks: dict[str, dict[str, Callable]] = field(default_factory=dict)
+    room_data: dict[str, tuple[str, Any]] = field(default_factory=dict)
+
+
+class Socket:
+    sio: AsyncServer
+    from_sid: str | None
+    sid: str | None
+    mem: SocketMemory
+
+    def __init__(self, sio: AsyncServer, mem: SocketMemory | None = None) -> None:
+        self.sio = sio
+        self.from_sid = None
+        self.sid = None
+        if mem is None:
+            self.mem = SocketMemory()
+            self.on("disconnect")(lambda: None)
+        else:
+            self.mem = mem
+
+    def __str__(self) -> str:
+        if self.sid is None:
+            return "Server Socket"
+        elif self.from_sid is None:
+            return "Client Socket {id: " + self.sid + "}"
+        else:
+            return "Room Socket {id: " + self.sid + ", room_id: " + self.from_sid + "}"
+
+    def clear(self, sid: str) -> None:
+        for event in self.mem.callbacks:
+            if sid in self.mem.callbacks[event]:
+                self.mem.callbacks[event].pop(sid)
+
+        for room in tuple(self.mem.room_data.keys()):
+            owner = self.mem.room_data[room][0]
+            if owner == sid:
+                self.mem.room_data.pop(room)
+
+    def to(self, sid: str) -> "Socket":
+        socket = Socket(self.sio, self.mem)
+        socket.from_sid = self.sid
+        socket.sid = sid
+
+        return socket
+
+    def on(self, event: str):
+        def wrapper(f: Callable):
+            if event not in self.mem.callbacks:
+                self.mem.callbacks[event] = {}
+
+                @self.sio.on(event)  # type: ignore
+                async def handler(sid: str, *args):
+                    if sid in self.mem.callbacks[event]:
+                        await self.mem.callbacks[event][sid](*args)
+
+                    if event == "disconnect":
+                        self.clear(sid)
+
+            if self.sid is not None:
+
+                async def wrapper_inner(*args):
+                    try:
+                        await f(*args)
+                    except Exception as e:
+                        print("Error:", e)
+
+                self.mem.callbacks[event][self.sid] = wrapper_inner
+
+            return f
+
+        return wrapper
+
+    async def emit(self, event: str, *args):
+        if self.from_sid is None:
+            await self.sio.emit(event, args, to=self.sid)
+        else:
+            await self.sio.emit(event, args, room=self.sid, skip_sid=self.from_sid)
+
+    async def join(self, room: str) -> "Socket":
+        await self.sio.enter_room(self.sid, room)
+
+        return self.to(room)
+
+    async def leave(self, room: str):
+        await self.sio.leave_room(self.sid, room)
+
+    def room_exists(self, room: str):
+        rooms = self.sio.manager.rooms.get("/", {})
+        return room in rooms and len(rooms[room]) > 0
+
+    def room_data(self, f: Callable[[], T]) -> T:
+        if self.from_sid is None or self.sid is None:
+            raise Exception(f"{self} cannot use room data")
+        if self.sid in self.mem.room_data:
+            data = self.mem.room_data[self.sid][1]
+            return data
+        else:
+            data = f()
+            self.mem.room_data[self.sid] = self.from_sid, data
+            return data
+
+
+async def connect(sio: AsyncServer, sid: str):
+    server = Socket(sio)
+    socket = server.to(sid)
+
+    print(f"Client #{sid} connected")
+
+    await socket.emit("msg", "Test", 123, [1, True, None])
+
+    @socket.on("msg")
+    async def test(s: str, n: int, l: list):
+        print(s, n * 10, l[0])

docker-compose.yml

@@ -0,0 +1,10 @@
+version: '3.8'
+services:
+  main:
+    image: express-reverse-proxy:latest
+    restart: unless-stopped
+    networks:
+      - tss-net
+networks:
+  tss-net:
+    external: true

front/__init__.py

@@ -0,0 +1,16 @@
+from sys import prefix
+from fastapi import APIRouter
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+
+
+def get_frontend() -> APIRouter:
+    router = APIRouter(prefix="")
+
+    @router.get("/", response_class=HTMLResponse)
+    async def index():
+        with open("./static/index.html", "r") as file:
+            content = file.read()
+        return content
+
+    return router

main.py

@@ -0,0 +1,23 @@
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+from socketio import ASGIApp
+
+import back
+import front
+
+app = FastAPI()
+
+
+router, sio = back.get_backend()
+app.include_router(router)
+app.include_router(front.get_frontend())
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+
+app.mount("/", ASGIApp(sio))
+
+
+if __name__ == "__main__":
+    import uvicorn
+
+    uvicorn.run(app, host="0.0.0.0", port=8000, reload=True)

requirements.txt

@@ -0,0 +1,3 @@
+fastapi
+uvicorn
+python-socketio

start.sh

@@ -0,0 +1 @@
+python3 -m uvicorn main:app --host 0.0.0.0 --reload

static/game.js

@@ -0,0 +1,226 @@
+// CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
+//   if (w < 2 * r) r = w / 2;
+//   if (h < 2 * r) r = h / 2;
+//   this.beginPath();
+//   this.moveTo(x+r, y);
+//   this.arcTo(x+w, y,   x+w, y+h, r);
+//   this.arcTo(x+w, y+h, x,   y+h, r);
+//   this.arcTo(x,   y+h, x,   y,   r);
+//   this.arcTo(x,   y,   x+w, y,   r);
+//   this.closePath();
+//   return this;
+// }
+
+function startGame() {
+    const canvas = document.querySelector("canvas");
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    ctx.font = "24px Montserrat"
+    ctx.imageSmoothingEnabled = true
+
+
+    canvas.addEventListener('mousemove', (e) => {
+
+        const rect = canvas.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+
+        if (x < 0 || y < 0 || x > rect.width || y > rect.height) return;
+
+        // Adjust for potential canvas scaling (e.g. high DPI)
+        const scaleX = canvas.width / rect.width;
+        const scaleY = canvas.height / rect.height;
+        socket.emit("cursor", x * scaleX, y * scaleY);
+    })
+
+    canvas.addEventListener('click', e => click(true, e, canvas))
+    canvas.addEventListener('contextmenu', e => click(false, e, canvas))
+
+    gameLoop(ctx)
+}
+
+/**
+ * 
+ * @param {boolean} left 
+ * @param {PointerEvent} e 
+ * @param {HTMLCanvasElement} canvas 
+ */
+function click(left, e, canvas) {
+    e.preventDefault()
+
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    if (x < 0 || y < 0 || x > rect.width || y > rect.height) return;
+
+    // Adjust for potential canvas scaling (e.g. high DPI)
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    socket.emit("click", left, Math.floor((x * scaleX - offsetX()) / CELL_SIZE), Math.floor((y * scaleY - offsetY()) / CELL_SIZE));
+}
+
+/**
+ * 
+ * @param {CanvasRenderingContext2D} ctx 
+ */
+function gameLoop(ctx) {
+    ctx.save()
+    ctx.clearRect(0, 0, 800, 600)
+
+
+    for (let x = 0; x < data.field.length; x++)
+        for (let y = 0; y < data.field[x].length; y++)
+            drawCell(ctx, x, y)
+
+    const x = 400
+    const y = 600 - (600 - (CELL_SIZE * MAX_HEIGTH)) * 0.5
+
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillStyle = getColor('fg')
+
+    const w = data.field.length
+    const h = w && data.field[0].length
+    ctx.fillText(`${data.text}    🚩 ${data.flags}    💣 ${data.bombs}    Поле ${w}x${h}`.trim(), x, y)
+
+    for (const sid of Object.keys(data.cursors))
+        drawCursor(ctx, sid)
+
+
+    ctx.restore();
+    window.requestAnimationFrame(() => gameLoop(ctx))
+}
+
+const HALF_CELL_SIZE = 16
+const CELL_SIZE = HALF_CELL_SIZE * 2
+const MAX_WIDTH = 25
+const MAX_HEIGTH = 15
+
+function offsetX() {
+    return (MAX_WIDTH - data.field.length) * HALF_CELL_SIZE
+}
+function offsetY() {
+    return (MAX_HEIGTH - (data.field.length && data.field[0].length)) * HALF_CELL_SIZE
+}
+
+/**
+ * 
+ * @param {CanvasRenderingContext2D} ctx 
+ * @param {number} cx 
+ * @param {number} cy 
+ */
+function drawCell(ctx, cx, cy) {
+    let cell = data.field[cx][cy]
+    switch (cell) {
+        case "":
+        case "🚩":
+        case "❓":
+            ctx.fillStyle = getColor("bgCellClosed")
+            break;
+        case " ":
+        case "1":
+        case "2":
+        case "3":
+        case "4":
+        case "5":
+        case "6":
+        case "7":
+        case "8":
+            ctx.fillStyle = getColor("bgCellOpen")
+            break
+        default:
+            ctx.fillStyle = getColor("bgCellBomb")
+            break
+    }
+    ctx.strokeStyle = getColor("bg")
+    ctx.lineWidth = 4
+
+    const x = cx * CELL_SIZE + offsetX();
+    const y = cy * CELL_SIZE + offsetY();
+    ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE)
+    ctx.strokeRect(x, y, CELL_SIZE, CELL_SIZE)
+    switch (cell) {
+        case "":
+        case " ":
+            return
+        case "1":
+        case "2":
+        case "3":
+        case "4":
+        case "5":
+        case "6":
+        case "7":
+        case "8":
+            ctx.fillStyle = getColor('fgCell' + cell)
+            break
+        default:
+            ctx.fillStyle = "white"
+            break
+    }
+
+    ctx.textAlign = "center"
+    ctx.textBaseline = "middle"
+    ctx.fillText(cell, x + HALF_CELL_SIZE, y + HALF_CELL_SIZE)
+}
+
+/**
+ * 
+ * @param {CanvasRenderingContext2D} ctx 
+ * @param {string} sid 
+ * @param {number} x 
+ * @param {number} y 
+ * @param {number} w 
+ * @param {number} h 
+ */
+function drawCursor(ctx, sid, w = 15, h = 20) {
+    const { x, y, nickname } = data.cursors[sid];
+
+    const a = sid.charCodeAt(0) % 256;
+    const b = sid.charCodeAt(1) % 256;
+    const c = sid.charCodeAt(2) % 3;
+
+    const aStr = a < 16 ? "0" + a.toString(16) : a.toString(16);
+    const bStr = b < 16 ? "0" + b.toString(16) : b.toString(16);
+
+    let color = "#";
+    switch (c) {
+        case 0:
+            color += "ff" + aStr + bStr;
+            break;
+        case 1:
+            color += aStr + "ff" + bStr;
+            break;
+        default:
+            color += aStr + bStr + "ff";
+            break;
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + w, y + h * 0.6);
+    ctx.lineTo(x + w * 0.6, y + h * 0.5);
+    ctx.lineTo(x + w, y + h * 0.9);
+    ctx.lineTo(x + w * 0.9, y + h);
+    ctx.lineTo(x + w * 0.5, y + h * 0.6);
+    ctx.lineTo(x + w * 0.6, y + h);
+    ctx.closePath();
+
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.strokeStyle = "black"
+    ctx.lineWidth = 1
+    ctx.stroke();
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'top';
+    ctx.textBaseline = 'top';
+    ctx.fillStyle = "#00000077";
+    const { width: tw, ideographicBaseline: th } = ctx.measureText(nickname)
+    ctx.beginPath();
+    ctx.roundRect(x + w * 2, y, tw + w * 2, Math.abs(th), [w])
+    ctx.fill()
+    ctx.fillStyle = "#ffffff"
+    ctx.fillText(nickname, x + w * 3, y)
+}

static/index.html

@@ -0,0 +1,166 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <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/colorpicker.min.css" />
+    <script src="/static/socket.io.js"></script>
+    <script src="/static/colorpicker.iife.min.js"></script>
+
+</head>
+
+<body>
+    <div id="content">
+        <div class="block" id="create-room" data-block="create-room">
+            <div>
+                <h3>Ваш никнейм</h3>
+            </div>
+            <div>
+                <input id="nickname" type="text" placeholder="Введите никнейм">
+            </div>
+            <div></div>
+            <div>
+                <div class="block">
+                    <div>
+                        <h3>Присоединиться</h3>
+                    </div>
+                    <div>
+                        <input id="room-id" type="text" placeholder="Код">
+                    </div>
+                    <div>
+                        <button onclick="join()">Присоединиться</button>
+                    </div>
+                </div>
+                <div class="block">
+                    <h3>Новая комната</h3>
+                    <div>
+                        <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">
+                        <div></div>
+                        <b>Бомб:</b>
+                        <input id="bombs" type="number" placeholder="15" min="5" max="150" value="100">
+                    </div>
+                    <div>
+                        <button onclick="create()">Создать</button>
+                    </div>
+                </div>
+            </div>
+            <div></div>
+            <div></div>
+            <div>
+                <h3>Основные цвета</h3>
+            </div>
+            <div>
+                <button id="color-bg"></button>
+                <button id="color-bg-2"></button>
+                <button id="color-fg"></button>
+            </div>
+            <div></div>
+            <div>
+                <h3>Цвета чата</h3>
+            </div>
+            <div>
+                <div class="block">
+                    <div>
+                        <h3>Уведомления</h3>
+                    </div>
+                    <div>
+                        <button id="color-bg-chat-service"></button>
+                        <button id="color-fg-chat-service"></button>
+                    </div>
+                </div>
+                <div class="block">
+
+                    <div>
+                        <h3>Исходящие</h3>
+                    </div>
+                    <div>
+                        <button id="color-bg-chat-self"></button>
+                        <button id="color-fg-chat-self"></button>
+                    </div>
+                </div>
+                <div class="block">
+                    <div>
+                        <h3>Входящие</h3>
+                    </div>
+                    <div>
+                        <button id="color-bg-chat-other"></button>
+                        <button id="color-fg-chat-other"></button>
+                    </div>
+                </div>
+            </div>
+            <div></div>
+            <div>
+                <h3>Цвета клеток</h3>
+            </div>
+            <div>
+                <div class="block">
+                    <div>
+                        <h3>Фон открытой</h3>
+                    </div>
+                    <div>
+                        <button id="color-bg-cell-open"></button>
+                    </div>
+                </div>
+                <div class="block">
+
+                    <div>
+                        <h3>Фон закрытой</h3>
+                    </div>
+                    <div>
+                        <button id="color-bg-cell-closed"></button>
+                    </div>
+                </div>
+                <div class="block">
+                    <div>
+                        <h3>Фон с бомбой</h3>
+                    </div>
+                    <div>
+                        <button id="color-bg-cell-bomb"></button>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <h3>Цвета цифер</h3>
+            </div>
+            <div>
+                <button id="color-fg-cell-1"></button>
+                <button id="color-fg-cell-2"></button>
+                <button id="color-fg-cell-3"></button>
+                <button id="color-fg-cell-4"></button>
+                <button id="color-fg-cell-5"></button>
+                <button id="color-fg-cell-6"></button>
+                <button id="color-fg-cell-7"></button>
+                <button id="color-fg-cell-8"></button>
+            </div>
+        </div>
+
+        <div id="game" data-block="game" style="display: none;">
+            <canvas id="game-canvas" width="800" height="600"></canvas>
+            <div id="game-tools">
+                <div id="chat-and-users">
+                    <div id="chat"></div>
+                    <div id="users"></div>
+                </div>
+                <div id="buttons">
+                    <input id="chat-msg" placeholder="Сообщение..." type="text">
+                    <button onclick="restart()">Перезапустить</button>
+                </div>
+            </div>
+        </div>
+
+        <footer>
+            Сапер от <a href="https://t.me/fasterino" target="_blank">@fasterino</a> и <a
+                href="http://t.me/synthoria_what" target="_blank">@synthoria_what</a>
+        </footer>
+
+        <script src="/static/main.js"></script>
+        <script src="/static/game.js"></script>
+    </div>
+</body>
+
+</html>

static/main.js

@@ -0,0 +1,208 @@
+const socket = io("/");
+
+const data = { is_host: false, cursors: {}, field: [], flags: 0, bombs: 0, text: "" }
+
+/** @returns {string} */
+function getNickname() {
+    return document.getElementById("nickname").value
+}
+/** @returns {string} */
+function getRoomId() {
+    return document.getElementById("room-id").value
+}
+/** @returns {string} */
+function getWidth() {
+    return document.getElementById("width").value
+}
+/** @returns {string} */
+function getHeight() {
+    return document.getElementById("height").value
+}
+/** @returns {string} */
+function getBombs() {
+    return document.getElementById("bombs").value
+}
+
+function create() {
+    data.is_host = true;
+    socket.emit("create-room", getNickname(), getWidth(), getHeight(), getBombs())
+}
+
+function join() {
+    data.is_host = false;
+    socket.emit("join-room", getNickname(), getRoomId())
+}
+
+function restart() {
+    socket.emit("restart")
+}
+
+/** 
+ * @argument {string} block 
+ */
+function show(block) {
+    document.querySelectorAll('[data-block]').forEach(x => x.style.display = 'none');
+    document.querySelectorAll('[data-block="' + block + '"]').forEach(x => x.style.display = '');
+}
+
+/** 
+ * @argument {string} msg
+ */
+function roomError(msg) {
+    alert(msg)
+}
+/** 
+ * @argument {string} roomId
+ */
+function roomJoin(roomId) {
+    // alert(`Вы подключились к комнате #${roomId}`)
+    localStorage.setItem("__saper_nickname", getNickname())
+    otherJoin(socket.id, getNickname() + (data.is_host ? " (Вы 👑)" : " (Вы)"), true)
+    chatMessage('service', "Вы подключены к комнате #" + roomId)
+    show('game')
+
+    startGame()
+}
+
+/**
+ * @param {"service" | "self" | "other"} type 
+ * @param {string} message 
+ */
+function chatMessage(type, message) {
+    const msg = document.createElement('div')
+    msg.classList.add('chat-' + type + '-msg')
+    msg.innerText = message
+    document.getElementById('chat').appendChild(msg)
+    msg.scrollIntoView({ 'behavior': 'smooth' })
+}
+/**
+ * 
+ * @param {string} sid 
+ * @param {string} nickname 
+ * @param {boolean} onlyList
+ */
+function otherJoin(sid, nickname, onlyList = false) {
+    if (!document.querySelector('[data-sid="' + sid + '"]')) {
+        const user = document.createElement('div');
+        user.classList.add('chat-service-msg')
+        user.innerText = nickname;
+        user.setAttribute('data-sid', sid)
+        document.getElementById('users').appendChild(user)
+    }
+
+    if (!onlyList) {
+        chatMessage('service', "К комнате подключился " + nickname)
+        socket.emit("about-me")
+    }
+}
+
+/**
+ * 
+ * @param {string} sid
+ */
+function otherDisconnect(sid, nickname) {
+    const user = document.querySelector('[data-sid="' + sid + '"]')
+    if (user)
+        user.remove();
+
+    chatMessage('service', "От комнаты отключился " + nickname)
+    if (data.cursors[sid])
+        delete data.cursors[sid];
+}
+
+function chat(nickname, msg) {
+    chatMessage("other", nickname + ": " + msg)
+}
+
+function cursor(sid, nickname, x, y) {
+    data.cursors[sid] = { x, y, nickname }
+}
+
+function updateField(field, flags, bombs, text) {
+    data.field = field
+    data.flags = flags
+    data.bombs = bombs
+    data.text = text
+}
+
+socket.on("room-error", roomError)
+socket.on("room-join", roomJoin)
+socket.on("other-join", otherJoin)
+socket.on("about-me", (sid, nickname) => otherJoin(sid, nickname, true))
+socket.on("other-disconnect", otherDisconnect)
+socket.on("chat", chat)
+socket.on("reload-page", () => window.location.reload())
+socket.on("cursor", cursor)
+socket.on('update-field', updateField)
+
+document.getElementById("nickname").value = localStorage.getItem("__saper_nickname") || ""
+
+const chatMsg = document.getElementById("chat-msg")
+
+const colors = {
+    bg: new ColorPicker('#color-bg'),
+    bg2: new ColorPicker('#color-bg-2'),
+    fg: new ColorPicker('#color-fg'),
+    bgChatService: new ColorPicker('#color-bg-chat-service'),
+    fgChatService: new ColorPicker('#color-fg-chat-service'),
+    bgChatSelf: new ColorPicker('#color-bg-chat-self'),
+    fgChatSelf: new ColorPicker('#color-fg-chat-self'),
+    bgChatOther: new ColorPicker('#color-bg-chat-other'),
+    fgChatOther: new ColorPicker('#color-fg-chat-other'),
+    bgCellOpen: new ColorPicker("#color-bg-cell-open"),
+    bgCellClosed: new ColorPicker("#color-bg-cell-closed"),
+    bgCellBomb: new ColorPicker("#color-bg-cell-bomb"),
+    fgCell1: new ColorPicker("#color-fg-cell-1"),
+    fgCell2: new ColorPicker("#color-fg-cell-2"),
+    fgCell3: new ColorPicker("#color-fg-cell-3"),
+    fgCell4: new ColorPicker("#color-fg-cell-4"),
+    fgCell5: new ColorPicker("#color-fg-cell-5"),
+    fgCell6: new ColorPicker("#color-fg-cell-6"),
+    fgCell7: new ColorPicker("#color-fg-cell-7"),
+    fgCell8: new ColorPicker("#color-fg-cell-8"),
+}
+
+/**
+ * 
+ * @param {keyof colors} color 
+ * @returns {string}
+ */
+function getColor(color) {
+    return colors[color].color.string('hex')
+}
+
+const root = document.querySelector('html')
+const computeStyles = window.getComputedStyle(root);
+for (const color_e of Object.values(colors)) {
+    const color_var = color_e.element.id.replace('color-', '--')
+    const color_key = "__saper_" + color_e.element.id
+    const color = localStorage.getItem(color_key) || computeStyles.getPropertyValue(color_var);
+    color_e.setColor(color)
+    const text = document.createElement('span')
+    text.innerText = color_var.replace('--', '')
+    color_e.element.appendChild(text)
+    root.style.setProperty(color_var, color)
+    color_e.on('pick', c => {
+        const color = c.string('hex')
+        console.log(color)
+        root.style.setProperty(color_var, color)
+        localStorage.setItem(color_key, color)
+
+    })
+}
+
+chatMsg.addEventListener("keyup", function (event) {
+    if (event.key === "Enter") {
+        const msg = chatMsg.value;
+        chatMsg.value = "";
+        socket.emit("chat", msg)
+        chatMessage("self", "Вы: " + msg)
+    }
+});
+
+
+document.getElementById("room-id").addEventListener("keyup", function (event) {
+    if (event.key === "Enter") {
+        join()
+    }
+});

static/style.css

@@ -0,0 +1,162 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+
+:root {
+    --bg: #334;
+    --bg-2: #557;
+    --fg: #fff;
+    --bg-chat-service: #ccc;
+    --fg-chat-service: #000;
+    --bg-chat-self: #fff;
+    --fg-chat-self: #000;
+    --bg-chat-other: #335;
+    --fg-chat-other: #fff;
+    --bg-cell-open: #eee;
+    --bg-cell-closed: #adf;
+    --bg-cell-bomb: #f55;
+    --fg-cell-1: #6B9EFF;
+    --fg-cell-2: #6BCF8A;
+    --fg-cell-3: #FF7B7B;
+    --fg-cell-4: #6B7BFF;
+    --fg-cell-5: #C79B6B;
+    --fg-cell-6: #6BD1C7;
+    --fg-cell-7: #666;
+    --fg-cell-8: #999;
+}
+
+* {
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: var(--bg);
+    color: var(--fg);
+    font-family: "Montserrat", sans-serif;
+    font-optical-sizing: auto;
+}
+
+#content {
+    margin: 50px;
+    gap: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.block {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.block>div {
+    display: flex;
+    flex: 1 1 auto;
+    gap: 5px;
+}
+
+.block>div>* {
+    flex: 1 1 0;
+    text-align: center;
+}
+
+#game {
+    background: #fff;
+
+    border: 1px solid var(--bg);
+
+    display: flex;
+
+    border-radius: 10px;
+
+    overflow: hidden;
+}
+
+#game,
+#game-canvas {
+    height: 600px;
+}
+
+#game-canvas {
+    border-right: 1px solid var(--bg);
+    background-color: var(--bg-2);
+    width: 800px;
+}
+
+#game-tools {
+    background-color: var(--bg-2);
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+}
+
+#chat-and-users {
+    border-bottom: 1px solid var(--bg);
+    flex: 1 1 0;
+    display: flex;
+    overflow: hidden;
+}
+
+#chat-and-users>* {
+    flex: 1 1 0;
+    /* display: flex;
+    flex-direction: column; */
+
+    /* justify-content: flex-end; */
+    overflow: auto;
+}
+
+.chat-service-msg,
+.chat-self-msg,
+.chat-other-msg {
+    border-radius: 5px;
+    padding: 5px;
+    margin: 5px;
+    /* width: 100%; */
+    overflow: hidden;
+}
+
+.chat-service-msg {
+    background-color: var(--bg-chat-service);
+    color: var(--fg-chat-service);
+}
+
+.chat-self-msg {
+    background-color: var(--bg-chat-self);
+    color: var(--fg-chat-self);
+}
+
+.chat-other-msg {
+    background-color: var(--bg-chat-other);
+    color: var(--fg-chat-other);
+}
+
+#buttons {
+    display: flex;
+}
+
+#buttons>input {
+    flex: 1 1 auto;
+}
+
+.color-picker {
+    display: flex;
+    align-items: center;
+}
+
+.color-picker>span {
+    flex: 1 1 auto;
+    text-align: center;
+    color: var(--fg);
+}
+
+a {
+    color: var(--fg);
+}
+
+footer {
+    font-size: 1.5em;
+    margin-top: 100px;
+    font-family: 500;
+    text-align: center;
+}