clickable quick select and quick-select reorder

src/screens/inventory.vue

@@ -24,12 +24,21 @@ const inventory = computed(() => {
 })
 
 const quickSelect = ref([0, 1, 2, 3, 4, 5, 6, 7, 8])
+const hoveredItem = ref<number | null>(null)
 
 function setSelection(i: number) {
   selectedIndex.value = i
   emit('selection', inventory.value[i])
 }
 
+function quickSelection(i: number) {
+  if (props.shown && hoveredItem.value !== null) {
+    quickSelect.value[i] = hoveredItem.value
+  } else {
+    setSelection(i)
+  }
+}
+
 function handleQuickSelect(event: KeyboardEvent) {
   switch (event.key) {
     case '1':
@@ -41,11 +50,8 @@ function handleQuickSelect(event: KeyboardEvent) {
     case '7':
     case '8':
     case '9':
-      setSelection(quickSelect.value[parseInt(event.key) - 1])
+      quickSelection(quickSelect.value[parseInt(event.key) - 1])
     break
-
-    default:
-      console.log('pressed key', event.key)
   }
 }
 
@@ -56,7 +62,11 @@ onUnmounted(() => document.removeEventListener('keypress', handleQuickSelect))
 <template>
   <section id="quick-select">
     <ol>
-      <li class="item" :class="inventory[i] && getItemClass(inventory[i])" v-for="i in quickSelect">
+      <li v-for="idx, i in quickSelect"
+        class="item"
+        :class="inventory[idx] && getItemClass(inventory[idx])"
+        @click="setSelection(idx)"
+      >
         <span>&nbsp;{{ i + 1 }}&nbsp;</span>
       </li>
     </ol>
@@ -76,12 +86,17 @@ onUnmounted(() => document.removeEventListener('keypress', handleQuickSelect))
             selected: selectedIndex === i
           }]"
           @click="setSelection(i)"
+          @mouseover="hoveredItem = i"
+          @mouseout="hoveredItem = null"
         >
           <b>
             {{ item.name }}
             <template v-if="item.amount > 1">
               (×{{ item.amount }})
             </template>
+            <template v-if="quickSelect.indexOf(i) >= 0">
+              [{{ quickSelect.indexOf(i) + 1 }}]
+            </template>
           </b>
         </li>
       </template>