From 70b1edc55407a5d67d1e8e9aebefb632bc1acdce Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Thu, 15 Aug 2024 02:40:19 +0300
Subject: [PATCH 01/32] Formatting

---
 backend/app/main.py         | 2 +-
 backend/app/schemas/game.py | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/backend/app/main.py b/backend/app/main.py
index 1539155..aed2fea 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -43,7 +43,7 @@ async def lifespan(app: FastAPI):
     openapi_url="/api/v1/openapi.json",
     docs_url="/api/v1/docs",
     redoc_url="/api/v1/redoc",
-    description=f"Github commit {settings.branch}:{settings.commit[:7]}"
+    description=f"Github commit {settings.branch}:{settings.commit[:7]}",
 )
 
 # Подключение роутера
diff --git a/backend/app/schemas/game.py b/backend/app/schemas/game.py
index b34ff88..3e09dd2 100644
--- a/backend/app/schemas/game.py
+++ b/backend/app/schemas/game.py
@@ -1,4 +1,10 @@
-from pydantic import BaseModel, ConfigDict, Field, computed_field, field_validator
+from pydantic import (
+    BaseModel,
+    ConfigDict,
+    Field,
+    computed_field,
+    field_validator,
+)
 from pydantic_core.core_schema import FieldValidationInfo
 
 

From 191a8693bf6c5a050d8e6aa688a06549eafd1428 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Thu, 15 Aug 2024 02:42:37 +0300
Subject: [PATCH 02/32] Set button types

---
 frontend/src/components/GameCarousel.vue | 4 ++--
 frontend/src/components/PieceItem.vue    | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/GameCarousel.vue b/frontend/src/components/GameCarousel.vue
index 6806e66..17b63de 100644
--- a/frontend/src/components/GameCarousel.vue
+++ b/frontend/src/components/GameCarousel.vue
@@ -148,7 +148,7 @@
                 </button>
             </div>
         </div>
-        <button v-if="games.length > 1" class="carousel-button prev" @click="prevCard" :disabled="currentIndex === 0">&lt;</button>
-        <button v-if="games.length > 1" class="carousel-button next" @click="nextCard" :disabled="currentIndex === games.length - 1">&gt;</button>
+        <button type="button" v-if="games.length > 1" class="carousel-button prev" @click="prevCard" :disabled="currentIndex === 0">&lt;</button>
+        <button type="button" v-if="games.length > 1" class="carousel-button next" @click="nextCard" :disabled="currentIndex === games.length - 1">&gt;</button>
     </div>
 </template>
\ No newline at end of file
diff --git a/frontend/src/components/PieceItem.vue b/frontend/src/components/PieceItem.vue
index 33c36a8..71a60ac 100644
--- a/frontend/src/components/PieceItem.vue
+++ b/frontend/src/components/PieceItem.vue
@@ -201,7 +201,7 @@
 <template>
   <div class="hover" @mouseenter="hovering=true" @mouseleave="hovering=false">
     <div class="container-row" >
-      <button class="transparent-button" :class="{invisible: !(hovering && canRotate)}" @click="emit('changeVersion', rotate(props.piece.base_version, 1))">
+      <button type="button" class="transparent-button" :class="{invisible: !(hovering && canRotate)}" @click="emit('changeVersion', rotate(props.piece.base_version, 1))">
         ↪️
       </button>
       <div class="piece-box movable">
@@ -217,15 +217,15 @@
           </div>
         </div>
       </div>
-      <button class="transparent-button" :class="{invisible: !(hovering && canRotate)}" @click="emit('changeVersion', rotate(props.piece.base_version, -1))">
+      <button type="button" class="transparent-button" :class="{invisible: !(hovering && canRotate)}" @click="emit('changeVersion', rotate(props.piece.base_version, -1))">
         ↩️
       </button>
     </div>
     <div class="flex-center-content">
-      <button class="centered padded transparent-button" :class="{invisible: !(hovering && canFlip)}" @click="emit('changeVersion', flip(props.piece.base_version, false))">
+      <button type="button" class="centered padded transparent-button" :class="{invisible: !(hovering && canFlip)}" @click="emit('changeVersion', flip(props.piece.base_version, false))">
         🔃
       </button>
-      <button class="centered padded transparent-button" :class="{invisible: !(hovering && canFlip)}" @click="emit('changeVersion', flip(props.piece.base_version, true))">
+      <button type="button" class="centered padded transparent-button" :class="{invisible: !(hovering && canFlip)}" @click="emit('changeVersion', flip(props.piece.base_version, true))">
         🔁
       </button>
     </div>

From ee9f400cb4ed818bda6f6e611c9bcfb644342a59 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Thu, 15 Aug 2024 02:48:24 +0300
Subject: [PATCH 03/32] Add gzip option to nginx config

---
 infra/puzzle/nginx-conf/default.conf | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/infra/puzzle/nginx-conf/default.conf b/infra/puzzle/nginx-conf/default.conf
index 1fea9b6..9b20ab3 100644
--- a/infra/puzzle/nginx-conf/default.conf
+++ b/infra/puzzle/nginx-conf/default.conf
@@ -6,6 +6,8 @@ server {
     client_max_body_size 1M;
     charset utf-8;
     charset_types text/css text/html text/xml text/plain text/vnd.wap.wml application/javascript application/rss+xml application/json;
+    gzip on;
+    gzip_types text/plain application/javascript;
 
     location / {
       # https://webhint.io/docs/user-guide/hints/hint-http-cache

From 7a6d1a0d5c4530bc34fc89d4d8f692a42e5e5fb5 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Thu, 15 Aug 2024 04:55:51 +0300
Subject: [PATCH 04/32] Add thumbnail caching with nginx

---
 backend/app/api/endpoints/game.py    |  9 +++++++--
 infra/puzzle/docker-compose.yaml     |  3 +++
 infra/puzzle/nginx-conf/default.conf | 15 +++++++++++++++
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/backend/app/api/endpoints/game.py b/backend/app/api/endpoints/game.py
index ec23d4a..4676a84 100644
--- a/backend/app/api/endpoints/game.py
+++ b/backend/app/api/endpoints/game.py
@@ -98,7 +98,8 @@ async def remove_game(
     response_class=Response,
 )
 async def game_thumbnail(
-    game_id: int, session: AsyncSession = Depends(get_async_session)
+    game_id: int,
+    session: AsyncSession = Depends(get_async_session),
 ):
     game = await game_extended_repository.get(session, game_id)
     if not game:
@@ -114,4 +115,8 @@ async def game_thumbnail(
     )
     with BytesIO() as data:
         image.save(data, "png")
-        return Response(content=data.getvalue(), media_type="image/png")
+        return Response(
+            content=data.getvalue(),
+            media_type="image/png",
+            headers={"Cache-Control": "max-age=604800"},
+        )
diff --git a/infra/puzzle/docker-compose.yaml b/infra/puzzle/docker-compose.yaml
index e163682..bd8b35c 100644
--- a/infra/puzzle/docker-compose.yaml
+++ b/infra/puzzle/docker-compose.yaml
@@ -43,6 +43,7 @@ services:
     volumes:
       - ./log/nginx:/var/log/nginx
       - ./nginx-conf:/etc/nginx/conf.d
+      - nginx_cache:/data/nginx/cache
     depends_on:
       - web
     restart: unless-stopped
@@ -52,6 +53,8 @@ services:
 volumes:
   db_volume:
     name: db_volume
+  nginx_cache:
+    name: nginx_cache
 
 networks:
   puzzle:
diff --git a/infra/puzzle/nginx-conf/default.conf b/infra/puzzle/nginx-conf/default.conf
index 9b20ab3..f7dcdce 100644
--- a/infra/puzzle/nginx-conf/default.conf
+++ b/infra/puzzle/nginx-conf/default.conf
@@ -1,5 +1,6 @@
 # https://blog.nginx.org/blog/rate-limiting-nginx
 limit_req_zone $binary_remote_addr zone=apilimit:10m rate=5r/s;
+proxy_cache_path /data/nginx/cache keys_zone=apicache:10m;
 
 server {
     listen 80;
@@ -19,6 +20,20 @@ server {
       try_files $uri $uri/ /index.html;
     }
 
+    location /api/v1/games {
+      proxy_cache apicache;
+      limit_req zone=apilimit burst=25 nodelay;
+      limit_req_status 429;
+      proxy_set_header Host $http_host;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-Forwarded-Proto $scheme;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection $connection_upgrade;
+      proxy_redirect off;
+      proxy_buffering on; # required for cache to work
+      proxy_pass http://web:8000;
+    }
+
     location /api {
       limit_req zone=apilimit burst=25 nodelay;
       limit_req_status 429;

From fad475f771059887682430971a2aa4884b4c1169 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Thu, 15 Aug 2024 05:06:54 +0300
Subject: [PATCH 05/32] Add debug header

---
 infra/puzzle/nginx-conf/default.conf | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/infra/puzzle/nginx-conf/default.conf b/infra/puzzle/nginx-conf/default.conf
index f7dcdce..7de9b58 100644
--- a/infra/puzzle/nginx-conf/default.conf
+++ b/infra/puzzle/nginx-conf/default.conf
@@ -1,5 +1,6 @@
 # https://blog.nginx.org/blog/rate-limiting-nginx
 limit_req_zone $binary_remote_addr zone=apilimit:10m rate=5r/s;
+# https://blog.nginx.org/blog/nginx-caching-guide
 proxy_cache_path /data/nginx/cache keys_zone=apicache:10m;
 
 server {
@@ -22,6 +23,7 @@ server {
 
     location /api/v1/games {
       proxy_cache apicache;
+      add_header X-Cache-Status $upstream_cache_status;
       limit_req zone=apilimit burst=25 nodelay;
       limit_req_status 429;
       proxy_set_header Host $http_host;

From 20a6a26c6469e8d0c09c55534f181df6935df2d0 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Thu, 15 Aug 2024 15:16:11 +0300
Subject: [PATCH 06/32] Simplify nginx config

---
 infra/puzzle/nginx-conf/default.conf | 19 +++----------------
 1 file changed, 3 insertions(+), 16 deletions(-)

diff --git a/infra/puzzle/nginx-conf/default.conf b/infra/puzzle/nginx-conf/default.conf
index 7de9b58..2d7cf47 100644
--- a/infra/puzzle/nginx-conf/default.conf
+++ b/infra/puzzle/nginx-conf/default.conf
@@ -21,31 +21,18 @@ server {
       try_files $uri $uri/ /index.html;
     }
 
-    location /api/v1/games {
-      proxy_cache apicache;
-      add_header X-Cache-Status $upstream_cache_status;
-      limit_req zone=apilimit burst=25 nodelay;
-      limit_req_status 429;
-      proxy_set_header Host $http_host;
-      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-      proxy_set_header X-Forwarded-Proto $scheme;
-      proxy_set_header Upgrade $http_upgrade;
-      proxy_set_header Connection $connection_upgrade;
-      proxy_redirect off;
-      proxy_buffering on; # required for cache to work
-      proxy_pass http://web:8000;
-    }
-
     location /api {
       limit_req zone=apilimit burst=25 nodelay;
       limit_req_status 429;
+      proxy_cache apicache;
+      add_header X-Cache-Status $upstream_cache_status;
       proxy_set_header Host $http_host;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection $connection_upgrade;
       proxy_redirect off;
-      proxy_buffering off;
+      proxy_buffering on;
       proxy_pass http://web:8000;
     }
 }

From f037f6a93e09094d41e1dd3e091ed40e89061359 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Thu, 15 Aug 2024 17:51:04 +0300
Subject: [PATCH 07/32] Change colors in the manifest

---
 frontend/public/site.webmanifest | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/public/site.webmanifest b/frontend/public/site.webmanifest
index 52e8762..da3d265 100644
--- a/frontend/public/site.webmanifest
+++ b/frontend/public/site.webmanifest
@@ -1 +1 @@
-{"name":"Polimino puzzle game","short_name":"Puzzle","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
+{"name":"Polimino puzzle game","short_name":"Puzzle","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"purple","background_color":"white","display":"standalone"}
\ No newline at end of file

From 73433347e4c8a8505493988f176dc4817949f58f Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Thu, 15 Aug 2024 17:51:38 +0300
Subject: [PATCH 08/32] Improve template

---
 infra/proxy/static/502.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/infra/proxy/static/502.html b/infra/proxy/static/502.html
index 3963a24..c983990 100644
--- a/infra/proxy/static/502.html
+++ b/infra/proxy/static/502.html
@@ -2,6 +2,8 @@
 <html lang="ru">
   <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>502 - Bad gateway</title>
     <style>
       body {
         background-color: #95c2de;

From 0c80faeefae30ae4a8cf1da8966569b672a0f9b4 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Thu, 15 Aug 2024 17:51:59 +0300
Subject: [PATCH 09/32] Do not cache error page

---
 infra/proxy/proxy-confs/puzzle.subdomain.conf | 1 +
 1 file changed, 1 insertion(+)

diff --git a/infra/proxy/proxy-confs/puzzle.subdomain.conf b/infra/proxy/proxy-confs/puzzle.subdomain.conf
index cf59779..2f411f2 100644
--- a/infra/proxy/proxy-confs/puzzle.subdomain.conf
+++ b/infra/proxy/proxy-confs/puzzle.subdomain.conf
@@ -20,6 +20,7 @@ server {
     }
 
     location = /502.html {
+        add_header Cache-Control "no-cache";
         root /var/www;
     }
 }
\ No newline at end of file

From 803bb0fea9424b3dccb33551f9a767308bf4fbaa Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Thu, 15 Aug 2024 17:52:48 +0300
Subject: [PATCH 10/32] Improve caching headers

---
 infra/puzzle/nginx-conf/default.conf | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/infra/puzzle/nginx-conf/default.conf b/infra/puzzle/nginx-conf/default.conf
index 2d7cf47..c976eb1 100644
--- a/infra/puzzle/nginx-conf/default.conf
+++ b/infra/puzzle/nginx-conf/default.conf
@@ -3,6 +3,10 @@ limit_req_zone $binary_remote_addr zone=apilimit:10m rate=5r/s;
 # https://blog.nginx.org/blog/nginx-caching-guide
 proxy_cache_path /data/nginx/cache keys_zone=apicache:10m;
 
+types {
+  application/manifest+json manifest;
+}
+
 server {
     listen 80;
     client_max_body_size 1M;
@@ -13,7 +17,7 @@ server {
 
     location / {
       # https://webhint.io/docs/user-guide/hints/hint-http-cache
-      add_header Cache-Control "public, max-age=$maxage";
+      add_header Cache-Control "public, max-age=$maxage $immutable";
       add_header X-Content-Type-Options nosniff;
       add_header X-uri "$uri";
       root /usr/share/nginx/html;
@@ -26,6 +30,7 @@ server {
       limit_req_status 429;
       proxy_cache apicache;
       add_header X-Cache-Status $upstream_cache_status;
+      add_header X-Content-Type-Options nosniff;
       proxy_set_header Host $http_host;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
@@ -42,9 +47,20 @@ map $http_upgrade $connection_upgrade {
     '' close;
 }
 
-map $uri $maxage {
-    /index.html 0;
-    ~*.css 31536000;
-    ~*.js 31536000;
+map $uri $static_content {
+  /index.html 2;
+  ~*.css 1;
+  ~*.js 1;
+  default 0;
+}
+
+map $static_content $maxage {
+    2 0;
+    1 31536000;
     default 1M;
+}
+
+map $static_content $immutable {
+  1 ', immutable';
+  default '';
 }
\ No newline at end of file

From 7c74f2f3b0aeb65f1d4ee9fc1fe5c797074858a7 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Thu, 15 Aug 2024 18:03:48 +0300
Subject: [PATCH 11/32] Fix button type on game card

---
 frontend/src/components/GameCarousel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/GameCarousel.vue b/frontend/src/components/GameCarousel.vue
index 17b63de..ad68d49 100644
--- a/frontend/src/components/GameCarousel.vue
+++ b/frontend/src/components/GameCarousel.vue
@@ -143,7 +143,7 @@
                 <div>
                     <img :src="thumbnailUrl(game)" alt="game thumbnail">
                 </div>
-                <button @click="router.push({name: 'game', params: {id: game.id}})" class="cta-button">
+                <button type="button" @click="router.push({name: 'game', params: {id: game.id}})" class="cta-button">
                   Играть
                 </button>
             </div>

From 44d7193f5c0ff418411776d9723eaa0e6dd6c6d6 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Thu, 15 Aug 2024 18:16:41 +0300
Subject: [PATCH 12/32] Fix types

---
 infra/puzzle/nginx-conf/default.conf | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/infra/puzzle/nginx-conf/default.conf b/infra/puzzle/nginx-conf/default.conf
index c976eb1..30936dd 100644
--- a/infra/puzzle/nginx-conf/default.conf
+++ b/infra/puzzle/nginx-conf/default.conf
@@ -4,7 +4,7 @@ limit_req_zone $binary_remote_addr zone=apilimit:10m rate=5r/s;
 proxy_cache_path /data/nginx/cache keys_zone=apicache:10m;
 
 types {
-  application/manifest+json manifest;
+  application/manifest+json webmanifest;
 }
 
 server {

From e58a2c1e2d44f674d87fc32241627335d5d9fd17 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Fri, 16 Aug 2024 00:37:39 +0300
Subject: [PATCH 13/32] Add a readme for the engine

---
 backend/engine/README.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 backend/engine/README.md

diff --git a/backend/engine/README.md b/backend/engine/README.md
new file mode 100644
index 0000000..97ff39d
--- /dev/null
+++ b/backend/engine/README.md
@@ -0,0 +1,17 @@
+# Система решения головоломок типа замощения плитками
+
+Основная процедура решения головоломки находится в модуле [solver.py](solver.py) и реализвана в виде функции-генератора `solutions`.
+
+Для получения решения функции передаются объект доски `board` и набор фигур `piece_set`.
+
+Объект доски типа [Board](board.py) хранит размеры доски и двоичную маску занятых ячеек. Маска представляет собой целое число, при этом установленный бит соответствует занятой ячейке доски, а погашенный - свободной. Битовая маска получается построчной разверткой ячеек доски сверху вниз и слева направо. Младший бит соответствует правому нижнему углу доски. Ячейки могут быть заняты блоками, создаваемыми вместе с игрой, или установленными игроком фигуарми.
+
+Набор фигур содержит все возможные маски всех фигур во всех доступных ориентациях. Маска фигуры представляет собой целое число, которое при совмещении с маской доски с помощью операции побитового **ИЛИ** отметит ячейки, в которые устанавливается фигура, как занятые.
+
+Набор фигур организован в ввиде списка элементов по числу доступных для установки фигур. Каждый элемент в свою очередь представляет собой список длиной равной количеству ячеек на доске. Для каждой позиции в наборе хранится список масок фигур, которые можно установить в данную позицию (без учета наложения на уже установленные фигуры).
+
+При такой схеме хранения могут быть заранее исключены из рассмотрения варианты установок фигур, при которых фигура выходит за границы доски или образует собой вместе с границей доски незаполняемую пустую область.
+
+Алгоритм решения устроен по принципу последовательного перебора с ранним возвратом. На каждом шаге проверяется возможность установить очередную ориентацию очередной фигуры в первую свободную ячейку доски. В случае успеха, фигура фиксируется на доске и перебор продолжается для следующей свободной ячейки. Если никакую фигуру установить невозможно происходит возврат: последняя установленная фигура снимается с доски и перебор продолжается так, как будто её установка была неудачной.
+
+Если после очередного шага алгоритма вся доска оказывается заполненной, список фигур с позициями их установки выдается в качестве решения.

From 40fd9996ad08d8c5139ea2e6dca9ff1bdbfd37e6 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Fri, 16 Aug 2024 04:21:17 +0300
Subject: [PATCH 14/32] Fix palette styles for smooth animation

---
 frontend/src/components/PiecePalette.vue | 1 +
 frontend/src/views/GameView.vue          | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/PiecePalette.vue b/frontend/src/components/PiecePalette.vue
index 14950da..25de490 100644
--- a/frontend/src/components/PiecePalette.vue
+++ b/frontend/src/components/PiecePalette.vue
@@ -16,6 +16,7 @@
 <style scoped>
     .palette-item{
         align-content: center;
+        height: fit-content;
     }
 </style>
 
diff --git a/frontend/src/views/GameView.vue b/frontend/src/views/GameView.vue
index 1cfee3a..83d620b 100644
--- a/frontend/src/views/GameView.vue
+++ b/frontend/src/views/GameView.vue
@@ -177,7 +177,7 @@
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
-        row-gap: 10px;
+        align-items: center;
     }
     .piece-frame{
         margin: 5px;

From 362c1ee80ed79b8a103338fae368777f37d31675 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Sat, 17 Aug 2024 00:30:04 +0300
Subject: [PATCH 15/32] Add titles to buttons

---
 frontend/src/components/PieceItem.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/PieceItem.vue b/frontend/src/components/PieceItem.vue
index 71a60ac..c32f085 100644
--- a/frontend/src/components/PieceItem.vue
+++ b/frontend/src/components/PieceItem.vue
@@ -201,7 +201,7 @@
 <template>
   <div class="hover" @mouseenter="hovering=true" @mouseleave="hovering=false">
     <div class="container-row" >
-      <button type="button" class="transparent-button" :class="{invisible: !(hovering && canRotate)}" @click="emit('changeVersion', rotate(props.piece.base_version, 1))">
+      <button type="button" title="повернуть влево" class="transparent-button" :class="{invisible: !(hovering && canRotate)}" @click="emit('changeVersion', rotate(props.piece.base_version, 1))">
         ↪️
       </button>
       <div class="piece-box movable">
@@ -217,15 +217,15 @@
           </div>
         </div>
       </div>
-      <button type="button" class="transparent-button" :class="{invisible: !(hovering && canRotate)}" @click="emit('changeVersion', rotate(props.piece.base_version, -1))">
+      <button type="button" title="повернуть вправо" class="transparent-button" :class="{invisible: !(hovering && canRotate)}" @click="emit('changeVersion', rotate(props.piece.base_version, -1))">
         ↩️
       </button>
     </div>
     <div class="flex-center-content">
-      <button type="button" class="centered padded transparent-button" :class="{invisible: !(hovering && canFlip)}" @click="emit('changeVersion', flip(props.piece.base_version, false))">
+      <button type="button" title="перевернуть сверху вниз" class="centered padded transparent-button" :class="{invisible: !(hovering && canFlip)}" @click="emit('changeVersion', flip(props.piece.base_version, false))">
         🔃
       </button>
-      <button type="button" class="centered padded transparent-button" :class="{invisible: !(hovering && canFlip)}" @click="emit('changeVersion', flip(props.piece.base_version, true))">
+      <button type="button" title="перевернуть слева направо" class="centered padded transparent-button" :class="{invisible: !(hovering && canFlip)}" @click="emit('changeVersion', flip(props.piece.base_version, true))">
         🔁
       </button>
     </div>

From d15ce142815c428ea7ce09293315a46c9f4fb5db Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Sat, 17 Aug 2024 00:30:55 +0300
Subject: [PATCH 16/32] Add buttons titles and refactor button activation

---
 frontend/src/components/HintBox.vue | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/HintBox.vue b/frontend/src/components/HintBox.vue
index 3c15e5c..b7e8db0 100644
--- a/frontend/src/components/HintBox.vue
+++ b/frontend/src/components/HintBox.vue
@@ -13,14 +13,12 @@
     const loading = ref(false)
     const error = ref(null)
     const hint = ref(null)
-    const info = ref(null)
+    const complete = ref(false)
     const hintActive = ref(true)
 
     const message = computed(
         () => loading.value ? " ...запрашиваю Центр... " : (
-            hint.value ? "могу подсказать ход" : (
-                info.value ? info.value : error.value
-            )
+            hint.value ? "могу подсказать ход" : "безвыходная ситуация"
         )
     )
 
@@ -28,7 +26,7 @@
 
     async function fetchHint(){
         hint.value = null
-        info.value = null
+        complete.value = false
         error.value = null
         if (!hintActive.value) return;
 
@@ -50,13 +48,12 @@
             // progress = 1
             // complete = 2
             // deadlock = 3
-            if (data.status == 3) {
-                info.value = "безвыходная ситуация"
-            } else if (data.status == 2) {
-                error.value = ""
-            } else {
+            if (data.status == 1) {
                 hint.value = Object.values(data.hint)
+            } else if (data.status == 2) {
+                complete.value = true
             }
+            error.value = ""
         } catch (err) {
             console.log("fetching a hint caused the error: ", err.toString())
             if (err instanceof ApiError){
@@ -78,11 +75,13 @@
 
 <template>
     <div class="hint-box">
-        <p @click="hintActive = !hintActive" class="hint-item transparent-button">🤖</p>
-        <p class="hint-item">
+        <button type="button" :title="complete ? 'отключено' : hintActive ? 'выключить' : 'включить'" @click="hintActive = !hintActive" :disabled="complete" class="hint-item transparent-button">
+            🤖
+        </button>
+        <p v-if="hintActive && !complete" class="hint-item">
             {{ message }}
         </p>
-        <button @click="emit('hint', hint)" class="hint-item transparent-button" v-if="hint">🆗</button>
-        <button @click="fetchHint" class="hint-item transparent-button" v-if="error">↩️</button>
+        <button type="button" title="пусть ходит робот" @click="emit('hint', hint)" class="hint-item transparent-button" v-if="hint">🆗</button>
+        <button type="button" title="повторить запрос" @click="fetchHint" class="hint-item transparent-button" v-if="error">↩️</button>
     </div>
 </template>
\ No newline at end of file

From 8823b76abfa5f83d18a3e1a37a720ca9b8f366b7 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Sat, 17 Aug 2024 00:49:45 +0300
Subject: [PATCH 17/32] Install vue3-tour

---
 frontend/package-lock.json | 27 ++++++++++++++++++++++++++-
 frontend/package.json      |  3 ++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 29366e3..5c38ab2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "@formkit/auto-animate": "^0.8.2",
         "vue": "^3.4.15",
-        "vue-router": "^4.4.0"
+        "vue-router": "^4.4.0",
+        "vue3-tour": "^1.0.2"
       },
       "devDependencies": {
         "@eslint/js": "^9.6.0",
@@ -676,6 +677,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.18.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
@@ -2151,6 +2161,11 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/jump.js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/jump.js/-/jump.js-1.0.2.tgz",
+      "integrity": "sha512-oUkJJ/Y4ATU5qjkXBntCZSKctbSyS3ewe2jrLaUu/cc9jsQiAn0fnTUxQnZz3mJdDdem1Q279zrD6h3n+Cgxtg=="
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -3259,6 +3274,16 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue3-tour": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/vue3-tour/-/vue3-tour-1.0.2.tgz",
+      "integrity": "sha512-lMWqogRVDeLnHGE310flOKAQQMiHI/e/pGpd/89JoGjxPC+OkWd1BQCxYBdJMxmva8CxiBhnXpkA5z4nU1CW9g==",
+      "dependencies": {
+        "@popperjs/core": "^2.11.8",
+        "jump.js": "^1.0.2",
+        "vue": "^3.4.23"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 7aee488..5f38596 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,7 +13,8 @@
   "dependencies": {
     "@formkit/auto-animate": "^0.8.2",
     "vue": "^3.4.15",
-    "vue-router": "^4.4.0"
+    "vue-router": "^4.4.0",
+    "vue3-tour": "^1.0.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.6.0",

From bb746b9415473c18c781072095bb415ad587815e Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Sat, 17 Aug 2024 18:08:19 +0300
Subject: [PATCH 18/32] Attach library

---
 frontend/src/main.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/main.js b/frontend/src/main.js
index 306dde4..2b44ffe 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -3,11 +3,13 @@ import './assets/main.css'
 import { createApp } from 'vue'
 import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
 import { OpenAPI } from  './api/generated/core/OpenAPI';
-import App from './App.vue'
-import router from './routers/router'
+import Vue3Tour from 'vue3-tour';
+
+import App from './App.vue';
+import router from './routers/router';
 
 if (import.meta.env.DEV){
     console.log(`base api url: ${import.meta.env.VITE_API_BASE_URI}`)
     OpenAPI.BASE = `${import.meta.env.VITE_API_BASE_URI}`
 }
-createApp(App).use(autoAnimatePlugin).use(router).mount('#app')
+createApp(App).use(autoAnimatePlugin).use(router).use(Vue3Tour).mount('#app')

From 1dceaa735d634237f33fc34f84b577edf95bcdfb Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Sat, 17 Aug 2024 18:09:01 +0300
Subject: [PATCH 19/32] Import component styles

---
 frontend/src/App.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 47d0af8..b075429 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -2,6 +2,9 @@
 
 </script>
 
+<style src="vue3-tour/dist/vue3-tour.css">
+</style>
+
 <style scoped>
 header{
   display: flex;

From 8f0c0810d98e8019d2e60efdee6036b83bd57dd8 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Sat, 17 Aug 2024 18:09:38 +0300
Subject: [PATCH 20/32] Define tour in a separate component

---
 frontend/src/components/GameTour.vue | 61 ++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 frontend/src/components/GameTour.vue

diff --git a/frontend/src/components/GameTour.vue b/frontend/src/components/GameTour.vue
new file mode 100644
index 0000000..24abea4
--- /dev/null
+++ b/frontend/src/components/GameTour.vue
@@ -0,0 +1,61 @@
+<script setup>
+
+  const options = {
+        useKeyboardNavigation: true,
+        highlight: true,
+        labels: {
+            buttonSkip: 'Пропустить',
+            buttonPrevious: 'Назад',
+            buttonNext: 'Вперед',
+            buttonStop: 'Закончить'
+        }
+    }
+  const steps = [
+    {
+      target: '#board',  // We're using document.querySelector() under the hood
+      header: {
+          title: 'Доска',
+      },
+      content: "Все ячейки доски нужно закрыть фигурами без наложения одной на другую.",
+      params: {
+          highlight: true
+      }
+    },
+    {
+        target: '#palette',
+        header: {
+            title: 'Магазин фигур'
+        },
+        content: "Здесь лежат все доступные фигуры. Фигура устанавливается на доску перетаскиванием."
+    },
+    {
+        target: 'div.square:nth-child(1)',
+        content: "Чтобы удалить фигуру с доски обратно в магазин, щелкните по любой её клетке."
+    },
+    {
+        target: 'div.palette-item',
+        content: "Если навести курсор на фигуру, появятся кнопки вращения и переворота, если это можно сделать."
+    },
+    {
+        target: '#hintbox',
+        header: {
+            title: 'Робот'
+        },
+        content: "Робот умеет решать головоломки, он может подсказать хороший ход."
+
+    },
+    {
+        target: '#robotmove',
+        content: "Если нажать на эту кнопку, робот поставит подходящую по его мнению фигуру на доску."
+    },
+    {
+        target: '#robotswitch',
+        content: "С помощью этой кнопки подсказки робота можно отключить."
+    }
+  ]
+
+</script>
+
+<template>
+  <v-tour name="gameTour" :steps="steps" :options="options"></v-tour>
+</template>

From aa1014e89fc8ad4eeffe09fdf1b43e5443f8b664 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Sat, 17 Aug 2024 18:10:12 +0300
Subject: [PATCH 21/32] Add ids to html elements

---
 frontend/src/components/HintBox.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/HintBox.vue b/frontend/src/components/HintBox.vue
index b7e8db0..a6dd26d 100644
--- a/frontend/src/components/HintBox.vue
+++ b/frontend/src/components/HintBox.vue
@@ -75,13 +75,13 @@
 
 <template>
     <div class="hint-box">
-        <button type="button" :title="complete ? 'отключено' : hintActive ? 'выключить' : 'включить'" @click="hintActive = !hintActive" :disabled="complete" class="hint-item transparent-button">
+        <button id="robotswitch" type="button" :title="complete ? 'отключено' : hintActive ? 'выключить' : 'включить'" @click="hintActive = !hintActive" :disabled="complete" class="hint-item transparent-button">
             🤖
         </button>
         <p v-if="hintActive && !complete" class="hint-item">
             {{ message }}
         </p>
-        <button type="button" title="пусть ходит робот" @click="emit('hint', hint)" class="hint-item transparent-button" v-if="hint">🆗</button>
+        <button id="robotmove" type="button" title="пусть ходит робот" @click="emit('hint', hint)" class="hint-item transparent-button" v-if="hint">🆗</button>
         <button type="button" title="повторить запрос" @click="fetchHint" class="hint-item transparent-button" v-if="error">↩️</button>
     </div>
 </template>
\ No newline at end of file

From 734b33b2f98fd53aaab9d08da3e28946f9d0a21e Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Sat, 17 Aug 2024 18:10:51 +0300
Subject: [PATCH 22/32] Add tour to game view

---
 frontend/src/views/GameView.vue | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/GameView.vue b/frontend/src/views/GameView.vue
index 83d620b..3da17e1 100644
--- a/frontend/src/views/GameView.vue
+++ b/frontend/src/views/GameView.vue
@@ -1,8 +1,9 @@
 <script setup>
-    import { computed, ref, watch, watchEffect } from 'vue';
+    import { computed, ref, watch, watchEffect, onMounted, getCurrentInstance } from 'vue';
     import divmod from '@/utils/divmod';
     import counter from '@/utils/counter'
     import BoardGrid from '@/components/BoardGrid.vue';
+    import GameTour from '@/components/GameTour.vue'
     import PiecePalette from '@/components/PiecePalette.vue'
     import HintBox from '@/components/HintBox.vue'
     import { gamesGetGame } from '@/api/generated'
@@ -11,6 +12,15 @@
     const props = defineProps({
         id: String
     })
+
+    const app = getCurrentInstance();
+    onMounted(() => {
+        fetchData(props.id)
+
+        console.log("start tour")
+        app.proxy.$tours["gameTour"].start();
+    })
+
     const cellSize = 30
     const loading = ref(false)
     const error = ref(null)
@@ -36,7 +46,7 @@
     const board = ref(null)
 
     // watch the params of the route to fetch the data again
-    watch(() => props.id, fetchData, { immediate: true })
+    watch(() => props.id, fetchData, { immediate: false })
     watchEffect(saveGame)
 
     function saveGame(){
@@ -232,8 +242,10 @@
                 <p>Доска заполнена!</p>
             </div>
         </div>
-        <BoardGrid ref="board" @install="handleInstall" @remove="handleRemove" :width="game.width" :height="game.height" :cell-size="cellSize" :installed_pieces="installedPieces" />
-        <HintBox @hint="hint => handleInstall(...hint)" :gameId="game.id" :installedPices="installedPieces" />
-        <PiecePalette @changeVersion="onChangeVersion" @piece-touch="onPieceTouch" :availablePieces="availablePieces" :cell-size="cellSize"/>            
-    </div>
-</template>
\ No newline at end of file
+        <BoardGrid id="board" ref="board" @install="handleInstall" @remove="handleRemove" :width="game.width" :height="game.height" :cell-size="cellSize" :installed_pieces="installedPieces" />
+        <HintBox id="hintbox" @hint="hint => handleInstall(...hint)" :gameId="game.id" :installedPices="installedPieces" />
+            <PiecePalette id="palette" @changeVersion="onChangeVersion" @piece-touch="onPieceTouch" :availablePieces="availablePieces" :cell-size="cellSize"/>
+        </div>
+        <GameTour/>
+        <button @click="app.proxy.$tours['gameTour'].start()">Справка</button>
+    </template>
\ No newline at end of file

From 403c4c9a6ef6c1222c9bdc21aaae5f47d5906a49 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Sat, 17 Aug 2024 20:05:23 +0300
Subject: [PATCH 23/32] Expose hasHint variable

---
 frontend/src/components/HintBox.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/HintBox.vue b/frontend/src/components/HintBox.vue
index a6dd26d..bf21e64 100644
--- a/frontend/src/components/HintBox.vue
+++ b/frontend/src/components/HintBox.vue
@@ -7,7 +7,7 @@
         gameId: Number,
         installedPices: Array
     })
-
+   
     const emit = defineEmits(['hint'])
     
     const loading = ref(false)
@@ -15,10 +15,11 @@
     const hint = ref(null)
     const complete = ref(false)
     const hintActive = ref(true)
-
+    const hasHint = computed(() => hint.value !== null)
+    
     const message = computed(
         () => loading.value ? " ...запрашиваю Центр... " : (
-            hint.value ? "могу подсказать ход" : "безвыходная ситуация"
+            hasHint.value ? "могу подсказать ход" : "безвыходная ситуация"
         )
     )
 
@@ -65,6 +66,10 @@
             loading.value = false
         }
     }
+
+    defineExpose({
+        hasHint: hasHint
+    })
 </script>
 
 <style scoped>
@@ -81,7 +86,8 @@
         <p v-if="hintActive && !complete" class="hint-item">
             {{ message }}
         </p>
-        <button id="robotmove" type="button" title="пусть ходит робот" @click="emit('hint', hint)" class="hint-item transparent-button" v-if="hint">🆗</button>
+        <button id="robotmove" type="button" title="пусть ходит робот" @click="emit('hint', hint)" class="hint-item transparent-button" v-if="hasHint">🆗</button>
+        <p id="robotmove" v-else> </p>
         <button type="button" title="повторить запрос" @click="fetchHint" class="hint-item transparent-button" v-if="error">↩️</button>
     </div>
 </template>
\ No newline at end of file

From b2d30ec9aaa8ff29a2057b589b0c5736e7aa30d1 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Sat, 17 Aug 2024 20:06:12 +0300
Subject: [PATCH 24/32] Provide game tour with info on hint avalability

---
 frontend/src/views/GameView.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/GameView.vue b/frontend/src/views/GameView.vue
index 3da17e1..2fce0c0 100644
--- a/frontend/src/views/GameView.vue
+++ b/frontend/src/views/GameView.vue
@@ -16,11 +16,10 @@
     const app = getCurrentInstance();
     onMounted(() => {
         fetchData(props.id)
-
-        console.log("start tour")
-        app.proxy.$tours["gameTour"].start();
     })
 
+    const hintbox = ref(null)
+
     const cellSize = 30
     const loading = ref(false)
     const error = ref(null)
@@ -243,9 +242,9 @@
             </div>
         </div>
         <BoardGrid id="board" ref="board" @install="handleInstall" @remove="handleRemove" :width="game.width" :height="game.height" :cell-size="cellSize" :installed_pieces="installedPieces" />
-        <HintBox id="hintbox" @hint="hint => handleInstall(...hint)" :gameId="game.id" :installedPices="installedPieces" />
-            <PiecePalette id="palette" @changeVersion="onChangeVersion" @piece-touch="onPieceTouch" :availablePieces="availablePieces" :cell-size="cellSize"/>
+        <HintBox id="hintbox" ref="hintbox" @hint="hint => handleInstall(...hint)" :gameId="game.id" :installedPices="installedPieces" />
+        <PiecePalette id="palette" @changeVersion="onChangeVersion" @piece-touch="onPieceTouch" :availablePieces="availablePieces" :cell-size="cellSize"/>
         </div>
-        <GameTour/>
+        <GameTour :hasHint="hintbox ? hintbox.hasHint : false"/>
         <button @click="app.proxy.$tours['gameTour'].start()">Справка</button>
     </template>
\ No newline at end of file

From 66848bad82b569d3224af7873ce6c29c00ceb125 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Sat, 17 Aug 2024 20:06:27 +0300
Subject: [PATCH 25/32] Make tour steps dynamic

---
 frontend/src/components/GameTour.vue | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/GameTour.vue b/frontend/src/components/GameTour.vue
index 24abea4..c30a29e 100644
--- a/frontend/src/components/GameTour.vue
+++ b/frontend/src/components/GameTour.vue
@@ -1,4 +1,8 @@
 <script setup>
+  import { computed } from 'vue';
+  const props = defineProps({
+    hasHint: Number
+  })
 
   const options = {
         useKeyboardNavigation: true,
@@ -10,16 +14,14 @@
             buttonStop: 'Закончить'
         }
     }
-  const steps = [
+
+  const steps = computed(() => [
     {
-      target: '#board',  // We're using document.querySelector() under the hood
+      target: '#board',
       header: {
           title: 'Доска',
       },
       content: "Все ячейки доски нужно закрыть фигурами без наложения одной на другую.",
-      params: {
-          highlight: true
-      }
     },
     {
         target: '#palette',
@@ -45,14 +47,15 @@
 
     },
     {
-        target: '#robotmove',
-        content: "Если нажать на эту кнопку, робот поставит подходящую по его мнению фигуру на доску."
+      target: '#robotmove',
+      content: props.hasHint ? "Если нажать на эту кнопку, робот поставит подходящую фигуру на доску." : "Сейчас у робота нет подсказок, поэтому кнопка хода роботом 🆗 скрыта."
     },
     {
         target: '#robotswitch',
-        content: "С помощью этой кнопки подсказки робота можно отключить."
+        content: "С помощью этой кнопки подсказки робота можно включать и отключать."
     }
   ]
+)
 
 </script>
 

From 9a76c0b2333d55a57bc1c731f43b001aabfe3f6a Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Sat, 17 Aug 2024 20:10:22 +0300
Subject: [PATCH 26/32] Select palette if there is no palette children

---
 frontend/src/components/GameTour.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/GameTour.vue b/frontend/src/components/GameTour.vue
index c30a29e..d428339 100644
--- a/frontend/src/components/GameTour.vue
+++ b/frontend/src/components/GameTour.vue
@@ -35,7 +35,7 @@
         content: "Чтобы удалить фигуру с доски обратно в магазин, щелкните по любой её клетке."
     },
     {
-        target: 'div.palette-item',
+        target: 'div.palette-item, #palette',
         content: "Если навести курсор на фигуру, появятся кнопки вращения и переворота, если это можно сделать."
     },
     {

From bcb9452dc6bdf13c4d000ec7eef8532b5be6cabb Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Sat, 17 Aug 2024 21:30:16 +0300
Subject: [PATCH 27/32] Do not highlight piece palette if there is no pieces

---
 frontend/src/components/GameTour.vue | 19 +++++++++++++------
 frontend/src/views/GameView.vue      |  2 +-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/GameTour.vue b/frontend/src/components/GameTour.vue
index d428339..a317bb6 100644
--- a/frontend/src/components/GameTour.vue
+++ b/frontend/src/components/GameTour.vue
@@ -1,7 +1,8 @@
 <script setup>
   import { computed } from 'vue';
   const props = defineProps({
-    hasHint: Number
+    hasHint: Boolean,
+    hasPieces: Boolean
   })
 
   const options = {
@@ -28,15 +29,21 @@
         header: {
             title: 'Магазин фигур'
         },
-        content: "Здесь лежат все доступные фигуры. Фигура устанавливается на доску перетаскиванием."
+        content: "Здесь лежат все доступные фигуры. Фигура устанавливается на доску перетаскиванием.",
+        params:{
+          highlight: props.hasPieces
+        }
     },
     {
-        target: 'div.square:nth-child(1)',
-        content: "Чтобы удалить фигуру с доски обратно в магазин, щелкните по любой её клетке."
+        target: 'div.palette-item, #palette',
+        content: "Если навести курсор на фигуру, появятся кнопки вращения и переворота. Вращение и переворот доступны не для всех фигур.",
+        params:{
+          highlight: props.hasPieces
+        }
     },
     {
-        target: 'div.palette-item, #palette',
-        content: "Если навести курсор на фигуру, появятся кнопки вращения и переворота, если это можно сделать."
+        target: 'div.square:nth-child(1)',
+        content: "Чтобы удалить фигуру с доски обратно в магазин, щелкните по любой её клетке."
     },
     {
         target: '#hintbox',
diff --git a/frontend/src/views/GameView.vue b/frontend/src/views/GameView.vue
index 2fce0c0..115260a 100644
--- a/frontend/src/views/GameView.vue
+++ b/frontend/src/views/GameView.vue
@@ -245,6 +245,6 @@
         <HintBox id="hintbox" ref="hintbox" @hint="hint => handleInstall(...hint)" :gameId="game.id" :installedPices="installedPieces" />
         <PiecePalette id="palette" @changeVersion="onChangeVersion" @piece-touch="onPieceTouch" :availablePieces="availablePieces" :cell-size="cellSize"/>
         </div>
-        <GameTour :hasHint="hintbox ? hintbox.hasHint : false"/>
+        <GameTour v-if="game && hintbox" :hasHint="hintbox.hasHint" :hasPieces="availablePieces.length > 0"/>
         <button @click="app.proxy.$tours['gameTour'].start()">Справка</button>
     </template>
\ No newline at end of file

From e6812912f11035280932e91815cb60437dae8613 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Sat, 17 Aug 2024 22:35:17 +0300
Subject: [PATCH 28/32] Add concluding step to the tour

---
 frontend/src/components/GameTour.vue | 68 +++++++++++++++-------------
 1 file changed, 37 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/GameTour.vue b/frontend/src/components/GameTour.vue
index a317bb6..d4e54d3 100644
--- a/frontend/src/components/GameTour.vue
+++ b/frontend/src/components/GameTour.vue
@@ -6,14 +6,14 @@
   })
 
   const options = {
-        useKeyboardNavigation: true,
-        highlight: true,
-        labels: {
-            buttonSkip: 'Пропустить',
-            buttonPrevious: 'Назад',
-            buttonNext: 'Вперед',
-            buttonStop: 'Закончить'
-        }
+      useKeyboardNavigation: true,
+      highlight: true,
+      labels: {
+        buttonSkip: 'Пропустить',
+        buttonPrevious: 'Назад',
+        buttonNext: 'Вперед',
+        buttonStop: 'Закончить'
+      }
     }
 
   const steps = computed(() => [
@@ -25,41 +25,47 @@
       content: "Все ячейки доски нужно закрыть фигурами без наложения одной на другую.",
     },
     {
-        target: '#palette',
-        header: {
-            title: 'Магазин фигур'
-        },
-        content: "Здесь лежат все доступные фигуры. Фигура устанавливается на доску перетаскиванием.",
-        params:{
-          highlight: props.hasPieces
-        }
+      target: '#palette',
+      header: {
+          title: 'Магазин фигур'
+      },
+      content: "Здесь лежат все доступные фигуры. Фигура устанавливается на доску перетаскиванием.",
+      params:{
+        highlight: props.hasPieces
+      }
     },
     {
-        target: 'div.palette-item, #palette',
-        content: "Если навести курсор на фигуру, появятся кнопки вращения и переворота. Вращение и переворот доступны не для всех фигур.",
-        params:{
-          highlight: props.hasPieces
-        }
+      target: 'div.palette-item, #palette',
+      content: "Если навести курсор на фигуру, появятся кнопки вращения и переворота. Вращение и переворот доступны не для всех фигур.",
+      params:{
+        highlight: props.hasPieces
+      }
     },
     {
-        target: 'div.square:nth-child(1)',
-        content: "Чтобы удалить фигуру с доски обратно в магазин, щелкните по любой её клетке."
+      target: 'div.square:nth-child(1)',
+      content: "Чтобы удалить фигуру с доски обратно в магазин, щелкните по любой её клетке.",
+      params: {
+        highlight: false
+      }
     },
     {
-        target: '#hintbox',
-        header: {
-            title: 'Робот'
-        },
-        content: "Робот умеет решать головоломки, он может подсказать хороший ход."
-
+      target: '#hintbox',
+      header: {
+          title: 'Робот'
+      },
+      content: "Робот умеет решать головоломки, он может подсказать хороший ход."
     },
     {
       target: '#robotmove',
       content: props.hasHint ? "Если нажать на эту кнопку, робот поставит подходящую фигуру на доску." : "Сейчас у робота нет подсказок, поэтому кнопка хода роботом 🆗 скрыта."
     },
     {
-        target: '#robotswitch',
-        content: "С помощью этой кнопки подсказки робота можно включать и отключать."
+      target: '#robotswitch',
+      content: "С помощью этой кнопки подсказки робота можно включать и отключать."
+    },
+    {
+      target: '#info',
+      content: "Чтобы посмотреть инструкции снова, нажмите кнопку ℹ️ снова."
     }
   ]
 )

From c9fc9df000fa5c023ac14c6b03ae0782545c61c7 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Sat, 17 Aug 2024 22:35:37 +0300
Subject: [PATCH 29/32] Move tour button to the top

---
 frontend/src/views/GameView.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/GameView.vue b/frontend/src/views/GameView.vue
index 115260a..2b10070 100644
--- a/frontend/src/views/GameView.vue
+++ b/frontend/src/views/GameView.vue
@@ -225,6 +225,9 @@
     .big{
         font-size: larger;
     }
+    .align-right{
+        align-self: flex-end;
+    }
 </style>
 
 <template>
@@ -234,6 +237,7 @@
         <p>{{ error }}</p>
     </div>
     <div v-if="game" class="content flex-center-content one-column">
+        <button id="info" type="button" class="transparent-button align-right" @click="app.proxy.$tours['gameTour'].start()">ℹ️</button>
         <h2>{{ game.title }}</h2>
         <div v-auto-animate>
             <div :key=1 v-if="gameComplete" class="card-green">
@@ -244,7 +248,6 @@
         <BoardGrid id="board" ref="board" @install="handleInstall" @remove="handleRemove" :width="game.width" :height="game.height" :cell-size="cellSize" :installed_pieces="installedPieces" />
         <HintBox id="hintbox" ref="hintbox" @hint="hint => handleInstall(...hint)" :gameId="game.id" :installedPices="installedPieces" />
         <PiecePalette id="palette" @changeVersion="onChangeVersion" @piece-touch="onPieceTouch" :availablePieces="availablePieces" :cell-size="cellSize"/>
-        </div>
-        <GameTour v-if="game && hintbox" :hasHint="hintbox.hasHint" :hasPieces="availablePieces.length > 0"/>
-        <button @click="app.proxy.$tours['gameTour'].start()">Справка</button>
-    </template>
\ No newline at end of file
+    </div>
+    <GameTour v-if="game && hintbox" :hasHint="hintbox.hasHint" :hasPieces="availablePieces.length > 0"/>    
+</template>
\ No newline at end of file

From c7bbfd5a2382b04c7f6a46ffe1fa9e6b4e8587e8 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Sat, 17 Aug 2024 22:46:06 +0300
Subject: [PATCH 30/32] Improve styles

---
 frontend/src/assets/main.css    | 2 +-
 frontend/src/views/GameView.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index bca2e75..0f62abe 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -17,7 +17,7 @@ h1, h2 {
 header {
   background: hsla(160, 100%, 37%, 1);
   box-shadow: 0 0 .2rem #0000001a,0 .2rem .4rem #0003;
-  margin: auto auto 20px auto;
+  /* margin: auto auto 20px auto; */
 }
 
 header > h1 {
diff --git a/frontend/src/views/GameView.vue b/frontend/src/views/GameView.vue
index 2b10070..c7dd6f3 100644
--- a/frontend/src/views/GameView.vue
+++ b/frontend/src/views/GameView.vue
@@ -176,7 +176,7 @@
     .content {
         width: 90%;
         margin: auto;
-        padding: 2ch;
+        padding: 0.5rem;
     }
     .center{
         display: flex;
@@ -237,7 +237,7 @@
         <p>{{ error }}</p>
     </div>
     <div v-if="game" class="content flex-center-content one-column">
-        <button id="info" type="button" class="transparent-button align-right" @click="app.proxy.$tours['gameTour'].start()">ℹ️</button>
+        <button id="info" type="button" title="инструкции" class="transparent-button align-right" @click="app.proxy.$tours['gameTour'].start()">ℹ️</button>
         <h2>{{ game.title }}</h2>
         <div v-auto-animate>
             <div :key=1 v-if="gameComplete" class="card-green">

From 5db72246a07655cbecfad6e35e48273000ef990d Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Sat, 17 Aug 2024 22:49:14 +0300
Subject: [PATCH 31/32] Fix button alignment inside piece box in palette

---
 frontend/src/components/PieceItem.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/PieceItem.vue b/frontend/src/components/PieceItem.vue
index c32f085..0dd6ebb 100644
--- a/frontend/src/components/PieceItem.vue
+++ b/frontend/src/components/PieceItem.vue
@@ -166,6 +166,7 @@
   .container-row{
     display: flex;
     flex-direction: row;
+    align-items: center;
   }
   .piece-box{
     display: flex;

From aa7df4976ea1900123e80ddad3ca33776f893ea4 Mon Sep 17 00:00:00 2001
From: FinemechanicPub <93194456+FinemechanicPub@users.noreply.github.com>
Date: Sat, 17 Aug 2024 22:51:41 +0300
Subject: [PATCH 32/32] Edit tour message

---
 frontend/src/components/GameTour.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/GameTour.vue b/frontend/src/components/GameTour.vue
index d4e54d3..95a9ccf 100644
--- a/frontend/src/components/GameTour.vue
+++ b/frontend/src/components/GameTour.vue
@@ -57,7 +57,10 @@
     },
     {
       target: '#robotmove',
-      content: props.hasHint ? "Если нажать на эту кнопку, робот поставит подходящую фигуру на доску." : "Сейчас у робота нет подсказок, поэтому кнопка хода роботом 🆗 скрыта."
+      content: props.hasHint ? "Если нажать на эту кнопку, робот поставит подходящую фигуру на доску." : "Сейчас у робота нет подсказок, поэтому кнопка хода роботом 🆗 скрыта.",
+      params: {
+        highlight: props.hasHint
+      }
     },
     {
       target: '#robotswitch',
@@ -65,7 +68,7 @@
     },
     {
       target: '#info',
-      content: "Чтобы посмотреть инструкции снова, нажмите кнопку ℹ️ снова."
+      content: "Чтобы посмотреть инструкции ещё раз, нажмите кнопку ℹ️ снова."
     }
   ]
 )