~koehr/dig

f24c2cd191666dd67e6d6ff54cae20a9102a8b50 — Norman K√∂hring 1 year, 4 months ago cc2b787
item quick select
2 files changed, 83 insertions(+), 21 deletions(-)

M src/App.vue
M src/screens/inventory.vue
M src/App.vue => src/App.vue +0 -2
@@ 207,8 207,6 @@ function calcBrightness(level: number, row: number) {
}

function selectTool(item: InventoryItem) {
  // only tools and weapons can be selected
  // if (item.type !== 'tool' && item.type !== 'weapon') return
  inventorySelection.value = item
}


M src/screens/inventory.vue => src/screens/inventory.vue +83 -19
@@ 1,5 1,5 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ref, computed, onUnmounted } from 'vue'
import { getItemClass } from '../level/items'
import type { InventoryItem } from '../util/usePlayer'



@@ 23,13 23,44 @@ const inventory = computed(() => {
  return inventory
})

const quickSelect = ref([0, 1, 2, 3, 4, 5, 6, 7, 8])

function setSelection(i: number) {
  selectedIndex.value = i
  emit('selection', inventory.value[i])
}

function handleQuickSelect(event: KeyboardEvent) {
  switch (event.key) {
    case '1':
    case '2':
    case '3':
    case '4':
    case '5':
    case '6':
    case '7':
    case '8':
    case '9':
      setSelection(quickSelect.value[parseInt(event.key) - 1])
    break

    default:
      console.log('pressed key', event.key)
  }
}

document.addEventListener('keypress', handleQuickSelect)
onUnmounted(() => document.removeEventListener('keypress', handleQuickSelect))
</script>

<template>
  <section id="quick-select">
    <ol>
      <li class="item" :class="inventory[i] && getItemClass(inventory[i])" v-for="i in quickSelect">
        <span>&nbsp;{{ i + 1 }}&nbsp;</span>
      </li>
    </ol>
  </section>
  <section id="inventory" class="screen" :class="{ shown }">
    <header>
      <h1>Inventory</h1>


@@ 55,46 86,79 @@ function setSelection(i: number) {
        </li>
      </template>
    </ol>
    <footer>
      <p><i><small>Hover item and press a number to add to quick select.</small></i></p>
    </footer>
  </section>

</template>

<style scoped>
#inventory {
  width: 346px;
  transition: transform .3s ease-out;
  transform: translate(-50vw);
}
#inventory.shown {
  transform: translate(0px);
}
ol {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
  margin: 0;
  padding: 0;
}
li {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  border: 2px solid white;
  border-radius: 6px;
  background: transparent center no-repeat;
  background-size: contain;
  cursor: pointer;
}
li:not(.empty):hover, li.selected {
  background-color: #FFCA;
}
li.empty {
  cursor: not-allowed;
}
li > i, li > b {

#quick-select {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px;
  background: #0006;
  border-radius: 6px;
}
#quick-select ol {
  gap: 6px;
}
#quick-select li {
  width: 32px;
  height: 32px;
  background-color: #000;
  color: #CCC;
  text-align: right;
}
#quick-select li > span {
  display: inline-block;
  margin-top: 22px;
  background: #0008;
  border-radius: 2px;
  line-height: 1;
}
#inventory {
  width: 346px;
  transition: transform .3s ease-out;
  transform: translate(-50vw);
}
#inventory.shown {
  transform: translate(0px);
}
#inventory ol {
  gap: 1em;
}
#inventory li {
  width: 100px;
  height: 100px;
  border: 2px solid white;
  border-radius: 6px;
  text-align: center;
}
#inventory li:not(.empty):hover, li.selected {
  background-color: #FFCA;
}
#inventory li > i, li > b {
  position: absolute;
  bottom: 0;
  right: 1px;