From 441f8f6a0917717085f23608fb23d90cd94ab897 Mon Sep 17 00:00:00 2001
From: ='fauz <='fauzgabriel@gmail.com>
Date: Thu, 23 Oct 2025 15:16:31 +0700
Subject: [PATCH] mobile bug

---
 src/pages/Wordspells.vue | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/pages/Wordspells.vue b/src/pages/Wordspells.vue
index 66d703d..5a407d1 100644
--- a/src/pages/Wordspells.vue
+++ b/src/pages/Wordspells.vue
@@ -40,6 +40,7 @@
         <div
           v-for="(letter, i) in letters"
           :key="i"
+          :data-index="i"
           class="absolute flex items-center justify-center bg-white text-indigo-700 rounded-full font-bold shadow-lg transition-all duration-200 active:scale-90 select-none"
           :style="letterPosition(i)"
           :class="[
@@ -85,7 +86,7 @@
     }
 </script>
 <script setup>
-    import { ref, onMounted, nextTick, computed } from "vue";
+    import { ref, onMounted,onUnmounted, nextTick, computed } from "vue";
 
     const allWords = [
     "TENANG", "SABAR", "SYUKUR", "CINTA", "GEMBIRA", "BANGGA",
@@ -164,6 +165,24 @@
         };
     }
 
+    // mobile
+    function handleTouchMove(event) {
+      if (!isSelecting.value) return;
+
+      const touch = event.touches[0];
+      const element = document.elementFromPoint(touch.clientX, touch.clientY);
+
+      if (!element) return;
+
+      // Cek apakah elemen yang disentuh adalah salah satu huruf
+      const indexAttr = element.getAttribute("data-index");
+      if (indexAttr !== null) {
+        const i = parseInt(indexAttr);
+        dragSelect(i);
+      }
+    }
+
+
     function startSelect(index) {
         isSelecting.value = true;
         selectedIndexes.value = [index];
@@ -251,6 +270,12 @@
         canvas.value.width = rect.width;
         canvas.value.height = rect.height;
         initGame();
+        
+        window.addEventListener("touchmove", handleTouchMove);
+    });
+
+    onUnmounted(() => {
+      window.removeEventListener("touchmove", handleTouchMove);
     });
 
 </script>