item quick select

src/App.vue

@@ -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
 }
 

src/screens/inventory.vue

@@ -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;