~koehr/dig

1b3360862f0eb65ddf661c0b2a87150f08514e78 — Norman Köhring 1 year, 4 months ago f24c2cd
clickable quick select and quick-select reorder
1 files changed, 20 insertions(+), 5 deletions(-)

M src/screens/inventory.vue
M src/screens/inventory.vue => src/screens/inventory.vue +20 -5
@@ 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>