|
|
|
@ -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> {{ i + 1 }} </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>
|
|
|
|
|