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,11 +86,57 @@ 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>
+ol {
+  list-style: none;
+  display: flex;
+  flex-flow: row wrap;
+  margin: 0;
+  padding: 0;
+}
+li {
+  position: relative;
+  display: inline-block;
+  background: transparent center no-repeat;
+  background-size: contain;
+  cursor: pointer;
+}
+li.empty {
+  cursor: not-allowed;
+}
+
+#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;
@@ -68,33 +145,20 @@ function setSelection(i: number) {
 #inventory.shown {
   transform: translate(0px);
 }
-ol {
+#inventory ol {
-  list-style: none;
-  display: flex;
-  flex-flow: row wrap;
   gap: 1em;
-  margin: 0;
-  padding: 0;
 }
-li {
+#inventory 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;
+  text-align: center;
-  background-size: contain;
-  cursor: pointer;
 }
-li:not(.empty):hover, li.selected {
+#inventory li:not(.empty):hover, li.selected {
   background-color: #FFCA;
 }
-li.empty {
+#inventory li > i, li > b {
-  cursor: not-allowed;
-}
-li > i, li > b {
   position: absolute;
   bottom: 0;
   right: 1px;