stacked inventory items and arrival animation

src/App.vue

@@ -16,9 +16,9 @@ const { inputX, inputY, running, digging, paused, help, inventory } = useInput()
 const level = createLevel(STAGE_WIDTH + 2, STAGE_HEIGHT + 2)
 
 player.inventory.push(
-  { name: 'Shovel', type: 'tool', icon: 'shovel', quality: 'bronze' },
-  { name: 'Sword', type: 'weapon', icon: 'sword', quality: 'bronze' },
-  { name: 'Pick Axe', type: 'tool', icon: 'pick', quality: 'bronze' },
+  { name: 'Shovel', type: 'tool', icon: 'shovel', quality: 'bronze', amount: 1 },
+  { name: 'Sword', type: 'weapon', icon: 'sword', quality: 'bronze', amount: 2 },
+  { name: 'Pick Axe', type: 'tool', icon: 'pick', quality: 'bronze', amount: 1 },
 )
 
 let animationFrame = 0
@@ -32,8 +32,9 @@ const tx = computed(() => (x.value - floorX.value) * -BLOCK_SIZE)
 const ty = computed(() => (y.value - floorY.value) * -BLOCK_SIZE)
 const rows = computed(() => level.grid(floorX.value, floorY.value))
 
+const arriving = ref(true)
 const walking = ref(false)
-const inventorySelection = ref<InventoryItem | null>(null)
+const inventorySelection = ref<InventoryItem>(player.inventory[0])
 
 type Surroundings = {
   at: Block,
@@ -113,6 +114,10 @@ const move = (thisTick: number): void => {
   const optimal = 16 // 16ms per tick => 60 FPS
   const movementMultiplier = (tickDelta / optimal) * 2
 
+  if (arriving.value && dy_ === 0) {
+    arriving.value = false
+  }
+
   walking.value = !!dx_
 
   x.value += dx_ * movementMultiplier
@@ -148,6 +153,9 @@ onMounted(() => {
         ></div>
       </div>
     </div>
+
+    <div id="beam" v-if="arriving"></div>
+
     <div id="level-indicator">
       x:{{ floorX }}, y:{{ floorY }}
       <template v-if="paused">(PAUSED)</template>

src/assets/player.css

@@ -1,3 +1,14 @@
+#beam {
+  --beam-width: 64px;
+  position: absolute;
+  left: calc(var(--field-width) / 2);
+  top: 0;
+  width: var(--beam-width);
+  height: var(--field-height);
+  background: #FFF8;
+  background: linear-gradient(90deg, rgba(255,254,0,0.1) 0%, rgba(150,0,255,1) 20%, rgba(150,0,255,.7) 50%, rgba(150,0,255,1) 80%, rgba(255,254,0,0.1) 100%);
+  animation: pulse .8s ease infinite alternate;
+}
 #player {
   --player-width: 64px;
   --player-height: 76px;
@@ -78,3 +89,7 @@
   from { transform: rotate(-20deg); }
   to { transform: rotate(20deg); }
 }
+@keyframes pulse {
+  from { opacity: .3; }
+  to { opacity: 1.0; }
+}

src/screens/inventory.vue

@@ -43,7 +43,12 @@ function setSelection(i: number) {
           }]"
           @click="setSelection(i)"
         >
-          <b>{{ item.name }}</b>
+          <b>
+            {{ item.name }}
+            <template v-if="item.amount > 1">
+              (×{{ item.amount }})
+            </template>
+          </b>
         </li>
       </template>
     </ol>
@@ -91,7 +96,7 @@ li > i, li > b {
   bottom: 0;
   right: 1px;
   padding: .25em .5em;
-  background: black;
+  background: #0008;
   font-size: .8em;
 }
 </style>