From 5b6f292361a6a6b92d6a3a192829938d8c86f5fc Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Wed, 5 Jun 2024 22:19:30 +0200
Subject: [PATCH] Made images undraggable

Fixes bug where dragging an image also drags tilemap when exiting the image container
---
 src/components/game/Chat.vue          | 2 +-
 src/components/game/Hud.vue           | 2 +-
 src/components/game/Menu.vue          | 8 ++++----
 src/components/screens/Characters.vue | 8 ++++----
 src/components/screens/Login.vue      | 2 +-
 src/components/utilities/Modal.vue    | 2 +-
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/game/Chat.vue b/src/components/game/Chat.vue
index 6cdf3a3..2c697ef 100644
--- a/src/components/game/Chat.vue
+++ b/src/components/game/Chat.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="chat-wrapper">
     <input placeholder="Type something..." />
-    <img src="/assets/icons/submit-icon.svg" />
+    <img draggable="false" src="/assets/icons/submit-icon.svg" />
   </div>
 </template>
 
diff --git a/src/components/game/Hud.vue b/src/components/game/Hud.vue
index 2b50ac7..a43c1d1 100644
--- a/src/components/game/Hud.vue
+++ b/src/components/game/Hud.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="hud-wrapper">
     <div class="profile">
-      <img src="/assets/avatar/default/head.png" />
+      <img draggable="false" src="/assets/avatar/default/head.png" />
     </div>
     <div class="hud">
       <div class="stats"></div>
diff --git a/src/components/game/Menu.vue b/src/components/game/Menu.vue
index f0f92dc..6946180 100644
--- a/src/components/game/Menu.vue
+++ b/src/components/game/Menu.vue
@@ -4,25 +4,25 @@
       <li class="menu-item">
         <p>Chat</p>
         <a>
-          <img src="/assets/icons/chat.png" />
+          <img draggable="false" src="/assets/icons/chat.png" />
         </a>
       </li>
       <li class="menu-item">
         <p>World</p>
         <a>
-          <img src="/assets/icons/world.png" />
+          <img draggable="false" src="/assets/icons/world.png" />
         </a>
       </li>
       <li class="menu-item">
         <p>Users</p>
         <a>
-          <img src="/assets/icons/users.png" />
+          <img draggable="false" src="/assets/icons/users.png" />
         </a>
       </li>
       <li class="menu-item">
         <p>Inventory</p>
         <a>
-          <img src="/assets/icons/treasure-chest.png" />
+          <img draggable="false" src="/assets/icons/treasure-chest.png" />
         </a>
       </li>
     </ul>
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index b263b40..7fbc5db 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -7,18 +7,18 @@
           <label :for="character.id">{{ character.name }}</label>
           <!-- @TODO : Add a confirmation dialog -->
           <button class="delete" @click="delete_character(character.id)">
-            <img src="/assets/icons/trashcan.svg">
+            <img draggable="false" src="/assets/icons/trashcan.svg">
           </button>
   
           <div class="sprite-container">
-            <img src="/assets/avatar/default/base_right_down.png" />
+            <img draggable="false" src="/assets/avatar/default/base_right_down.png" />
           </div>
           <span>Lvl. {{ character.level }}</span>
         </div>
 
         <div class="character new-character" v-if="characters.length < 4">
           <button @click="isModalOpen = true">
-            <img src="/assets/icons/plus-icon.svg" />
+            <img draggable="false" src="/assets/icons/plus-icon.svg" />
             <span>Create new</span>
           </button>
         </div>
@@ -27,7 +27,7 @@
       <div class="button-wrapper">
         <button class="btn-purple" :disabled="!selected_character" @click="select_character()">
           Play
-          <img src="/assets/icons/arrow.svg">
+          <img draggable="false" src="/assets/icons/arrow.svg">
         </button>
       </div>
     </div>
diff --git a/src/components/screens/Login.vue b/src/components/screens/Login.vue
index 50501e5..f2ef497 100644
--- a/src/components/screens/Login.vue
+++ b/src/components/screens/Login.vue
@@ -22,7 +22,7 @@
     </div>
   </div>
   <audio ref="bgm" id="bgm" src="/assets/music/bgm.mp3" loop autoplay></audio>
-  <img src="/assets/bglogin.png" id="bg-img" alt="New Quest login background" />
+  <img draggable="false" src="/assets/bglogin.png" id="bg-img" alt="New Quest login background" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 48e4ec1..ec29140 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -3,7 +3,7 @@
     <div class="modal-container" :style="{ top: y + 'px', left: x + 'px' }" v-if="isModalOpenRef">
       <div class="modal-header" @mousedown="startDrag">
         <slot name="modal-header" />
-        <button @click="close"><img src="/assets/icons/close-button-white.svg" /></button>
+        <button @click="close"><img draggable="false" src="/assets/icons/close-button-white.svg" /></button>
       </div>
       <div class="modal-body">
         <slot name="modal-body" />