From 3e35a25601a5af7e486eae988a483dba1f29e125 Mon Sep 17 00:00:00 2001 From: Alexander Andreev Date: Sun, 4 Jan 2026 00:03:03 +0300 Subject: [PATCH] =?UTF-8?q?=D0=BC=D0=B5=D0=BB=D0=BA=D0=B0=D1=8F=20=D0=BF?= =?UTF-8?q?=D1=80=D0=B0=D0=B2=D0=BA=D0=B0=20=D0=BF=D0=BE=20=D0=B0=D0=B4?= =?UTF-8?q?=D0=B0=D0=BF=D1=82=D0=B8=D0=B2=D1=83=20=D0=BF=D1=80=D0=B8=20?= =?UTF-8?q?=D0=BD=D0=B0=D0=B6=D0=B0=D1=82=D0=B8=D0=B8=20=D0=BD=D0=B0=20?= =?UTF-8?q?=D1=82=D0=B0=D0=B9=D0=BB.=20=D0=BF=D1=80=D0=B8=D0=BB=D0=BE?= =?UTF-8?q?=D0=B6=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=81=D1=82=D0=B0=D0=B1=D0=B8?= =?UTF-8?q?=D0=BB=D1=8C=D0=BD=D0=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/pages/village.vue | 163 +++++++++++++++++++++++++++----------- scripts/fix-migration.sql | 2 - 2 files changed, 116 insertions(+), 49 deletions(-) delete mode 100644 scripts/fix-migration.sql diff --git a/app/pages/village.vue b/app/pages/village.vue index 0ea7919..7bfba09 100644 --- a/app/pages/village.vue +++ b/app/pages/village.vue @@ -10,32 +10,41 @@
-
-
- {{ getTileEmoji(tile) }} +
+
+
+ {{ getTileEmoji(tile) }} +
-
-

Tile ({{ selectedTile.x }}, {{ selectedTile.y }})

-
-
- - {{ action.disabledReason }} + +
+
+

Tile ({{ selectedTile.x }}, {{ selectedTile.y }})

+

Terrain: {{ selectedTile.terrainType }}

+

Object: {{ selectedTile.object.type }}

+ +

Available Actions

+
+
+ + {{ action.disabledReason }} +
+
-
@@ -95,6 +104,8 @@ const handleActionClick = (action) => { align-items: center; padding: 20px; font-family: sans-serif; + min-height: calc(100vh - 120px); /* Adjust for top/bottom bars */ + box-sizing: border-box; /* Include padding in element's total width and height */ } .loading, .error-container { @@ -105,10 +116,14 @@ const handleActionClick = (action) => { .village-container { display: flex; - gap: 20px; - margin-top: 20px; + justify-content: center; /* Center grid */ width: 100%; - justify-content: center; + max-width: 350px; /* Adjust max-width for mobile view of grid (5*60px + 4*4px gap + 2*4px padding)*/ + margin-top: 20px; +} + +.village-grid-wrapper { + overflow-x: auto; /* In case grid ever exceeds viewport (though it shouldn't with max-width) */ } .village-grid { @@ -119,6 +134,8 @@ const handleActionClick = (action) => { border: 2px solid #333; padding: 4px; background-color: #f0f0f0; + width: fit-content; /* Ensure grid does not expand unnecessarily */ + margin: 0 auto; /* Center grid within its wrapper */ } .tile { @@ -146,52 +163,104 @@ const handleActionClick = (action) => { font-size: 2em; } -.action-panel { - width: 300px; - border: 1px solid #ccc; +/* Overlay Styles */ +.tile-overlay-backdrop { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: flex-end; /* Start from bottom for mobile-first feel */ + z-index: 1000; +} + +.tile-overlay-panel { + background-color: #fff; + width: 100%; + max-width: 500px; /* Limit width for larger screens */ padding: 20px; - background-color: #fafafa; -} - -.action-panel h2 { - margin-top: 0; - text-align: center; -} - -.actions-list { + border-top-left-radius: 15px; + border-top-right-radius: 15px; + box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); + transform: translateY(0); /* For potential slide-in animation */ + transition: transform 0.3s ease-out; display: flex; flex-direction: column; gap: 15px; } -.action-item { +@media (min-width: 768px) { /* Center for desktop, less "bottom sheet" */ + .tile-overlay-backdrop { + align-items: center; + } + .tile-overlay-panel { + border-radius: 15px; + max-height: 80vh; /* Don't cover entire screen */ + } +} + +.tile-overlay-panel h2 { + margin-top: 0; + text-align: center; + color: #333; +} + +.tile-overlay-panel p { + color: #666; + margin-bottom: 5px; +} + +.actions-list { display: flex; flex-direction: column; + gap: 10px; } .action-item button { - padding: 10px; - font-size: 1em; + width: 100%; + padding: 10px 15px; + border: 1px solid #007bff; + background-color: #007bff; + color: white; + border-radius: 5px; cursor: pointer; - border: 1px solid #ccc; - background-color: #fff; + font-size: 1em; + transition: background-color 0.2s, opacity 0.2s; +} + +.action-item button:hover:not(:disabled) { + background-color: #0056b3; } .action-item button:disabled { + background-color: #e9ecef; + color: #6c757d; cursor: not-allowed; - background-color: #eee; - color: #999; + border-color: #e9ecef; } .disabled-reason { font-size: 0.8em; - color: #d9534f; + color: #dc3545; margin-top: 5px; + text-align: center; } -.close-panel { - margin-top: 20px; +.close-overlay-button { width: 100%; - padding: 10px; + padding: 10px 15px; + margin-top: 15px; + background-color: #6c757d; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.close-overlay-button:hover { + background-color: #5a6268; } \ No newline at end of file diff --git a/scripts/fix-migration.sql b/scripts/fix-migration.sql deleted file mode 100644 index 6efb79e..0000000 --- a/scripts/fix-migration.sql +++ /dev/null @@ -1,2 +0,0 @@ -DELETE FROM _prisma_migrations -WHERE migration_name = '20260103181802_refactor_village_schema';