From 367d6e282e00972f822043d4b07337fc1acc36b2 Mon Sep 17 00:00:00 2001
From: Grzegorz Kucmierz <gkucmierz@gmail.com>
Date: Wed, 11 Feb 2026 04:32:32 +0100
Subject: [PATCH] fix(CustomGameModal): improve difficulty map UX - resize and
 drag outside

---
 src/components/CustomGameModal.vue | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/CustomGameModal.vue b/src/components/CustomGameModal.vue
index 2ade85d..c7a522a 100644
--- a/src/components/CustomGameModal.vue
+++ b/src/components/CustomGameModal.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, watch, nextTick } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import { usePuzzleStore } from '@/stores/puzzle';
 import { useI18n } from '@/composables/useI18n';
 import { calculateDifficulty } from '@/utils/puzzleUtils';
@@ -140,6 +140,9 @@ const updateFromEvent = (e) => {
 const startDrag = (e) => {
     isDragging.value = true;
     updateFromEvent(e);
+    // Add global listeners for mouse to handle dragging outside canvas
+    window.addEventListener('mousemove', onDrag);
+    window.addEventListener('mouseup', stopDrag);
 };
 
 const onDrag = (e) => {
@@ -149,8 +152,15 @@ const onDrag = (e) => {
 
 const stopDrag = () => {
     isDragging.value = false;
+    window.removeEventListener('mousemove', onDrag);
+    window.removeEventListener('mouseup', stopDrag);
 };
 
+onUnmounted(() => {
+    window.removeEventListener('mousemove', onDrag);
+    window.removeEventListener('mouseup', stopDrag);
+});
+
 const showAdvanced = ref(false);
 
 const toggleAdvanced = () => {
@@ -271,12 +281,9 @@ const confirm = () => {
         <div class="map-section" v-if="showAdvanced">
             <canvas 
                 ref="difficultyCanvas" 
-                width="200" 
-                height="200"
+                width="400" 
+                height="400"
                 @mousedown="startDrag"
-                @mousemove="onDrag"
-                @mouseup="stopDrag"
-                @mouseleave="stopDrag"
                 @touchstart.prevent="startDrag"
                 @touchmove.prevent="onDrag"
                 @touchend="stopDrag"
@@ -371,6 +378,8 @@ const confirm = () => {
 }
 
 canvas {
+    width: 400px;
+    height: 400px;
     border: 2px solid var(--panel-border);
     border-radius: 8px;
     box-shadow: 0 0 20px rgba(0, 242, 255, 0.1);
@@ -378,6 +387,14 @@ canvas {
     background: #000;
 }
 
+@media (max-width: 600px) {
+    canvas {
+        width: 100%;
+        height: auto;
+        aspect-ratio: 1;
+    }
+}
+
 h2 {
   font-size: 2rem;
   color: var(--accent-cyan);