formalize inventory, cute walking animation

src/App.vue

@@ -18,14 +18,16 @@ const level = createLevel(STAGE_WIDTH + 2, STAGE_HEIGHT + 2)
 let animationFrame = 0
 let lastTick = 0
 
-let x = ref(0)
-let y = ref(0)
+const x = ref(0)
+const y = ref(0)
 const floorX = computed(() => Math.floor(x.value))
 const floorY = computed(() => Math.floor(y.value))
 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 walking = ref(false)
+
 type Surroundings = {
   at: Block,
   left: Block,
@@ -101,6 +103,8 @@ const move = (thisTick: number): void => {
   const optimal = 16 // 16ms per tick => 60 FPS
   const movementMultiplier = (tickDelta / optimal) * 2
 
+  walking.value = !!dx_
+
   x.value += dx_ * movementMultiplier
   y.value += dy_ * movementMultiplier
   lastTick = thisTick
@@ -121,10 +125,10 @@ onMounted(() => {
       </template>
     </div>
 
-    <div id="player2" :class="direction">
+    <div id="player" :class="[direction, { walking }]">
       <div class="head"></div>
       <div class="body"></div>
-      <div class="feet">
+      <div class="legs">
         <div class="left"></div>
         <div class="right"></div>
       </div>

src/assets/field.css

@@ -34,7 +34,7 @@
 
 .night .block, .night #player { filter: brightness(0.3) saturate(30%); }
 
-#player2 {
+#player {
   --player-width: 64px;
   --player-height: 76px;
   position: absolute;
@@ -45,33 +45,45 @@
   width: var(--player-width);
   height: var(--player-height);
 }
-#player2 > div {
+#player > div {
   margin: auto;
   background: transparent center no-repeat;
   background-size: cover;
 }
-#player2.right > div {
+#player.right {
   transform: scaleX(-1);
 }
-#player2 > .head {
+#player > .head {
   width: 46px;
   height: 46px;
   background-image: url(/Characters/Alien/alien_head.png);
   z-index: 1;
 }
-#player2 > .body {
+#player > .body {
   width: 22px;
   height: 24px;
   margin-top: -8px;
   background-image: url(/Characters/Alien/alien_body.png);
 }
-#player2 > .feet {
+#player > .legs {
+  position: relative;
+  width: 14px;
+  height: 18px;
+}
+#player > .legs > div {
+  position: absolute;
   width: 14px;
   height: 18px;
-  margin-top: -8px;
   background-image: url(/Characters/Alien/alien_leg.png);
+  transform-origin: top center;
+}
+#player.walking > .legs > div.right {
+  animation: dangle .4s ease infinite both;
 }
-#player2 > .arms {
+#player.walking > .legs > div.left {
+  animation: dangle .4s ease infinite reverse both;
+}
+#player > .arms {
   position: absolute;
   width: 8px;
   height: 16px;
@@ -79,17 +91,7 @@
   left: 30px;
   background-image: url(/Characters/Alien/alien_arm.png);
 }
-#player {
-  position: absolute;
-  left: calc(var(--field-width) / 2);
-  top: calc(var(--field-height) / 2);
-  background-image: url(./dwarf_right.png);
-}
-#player.right { background-image: url(./dwarf_right.png); }
-#player.left  { background-image: url(./dwarf_left.png); }
-#player.up  { background-image: url(./dwarf_back.png); }
-#player.down  { background-image: url(./dwarf_back.png); }
-#player, .block {
+.block {
   flex: 0 0 auto;
   width: var(--block-size);
   height: var(--block-size);
@@ -107,3 +109,8 @@
   display: flex;
   flex-flow: row wrap;
 }
+
+@keyframes dangle {
+  from { transform: rotate(20deg); }
+  to { transform: rotate(-20deg); }
+}

src/screens/inventory.vue

@@ -9,9 +9,9 @@ defineProps<Props>();
 
 // inventory size is 12, and it is so empty
 const slots = ref([
-  { name: 'Spade', type: 'tool', icon: 'spade' },
-  { name: 'Sword', type: 'weapon', icon: 'sword' },
-  null,
+  { 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' },
   null,
   null,
   null,
@@ -22,7 +22,6 @@ const slots = ref([
   null,
   null,
 ])
-
 </script>
 
 <template>
@@ -33,7 +32,7 @@ const slots = ref([
 
     <ol>
       <li v-for="item in slots"
-        :class="[item?.type, item?.icon]"
+        :class="[item?.type, item?.icon, item?.quality]"
       >
         <i v-if="item === null">(empty)</i>
         <template v-else>
@@ -81,10 +80,13 @@ li > i, li > b {
   background: black;
   font-size: .8em;
 }
-.tool.spade {
-  background-image: url("../assets/tools/spade.svg");
+.tool.shovel.bronze {
+  background-image: url("/Items/shovel_bronze.png");
+}
+.weapon.sword.bronze {
+  background-image: url("/Items/sword_bronze.png");
 }
-.weapon.sword {
-  background-image: url("../assets/weapons/sword.svg");
+.tool.pick.bronze {
+  background-image: url("/Items/pick_bronze.png");
 }
 </style>

src/vite-env.d.ts

@@ -9,16 +9,20 @@ declare global {
     vy: number // velocity on the y-axis
   }
 
-  type Inventory = {
+  type InventoryItem = {
+    name: string
+    type: string
+    icon: string
+    quality?: 'bronze' | 'iron' | 'silver' | 'gold' | 'diamond'
   }
 
   interface Player extends Moveable {
-    inventory: Inventory
+    inventory: InventoryItem[]
   }
 
   interface Npc extends Moveable {
     hostile: boolean
-    inventory: Inventory
+    inventory: InventoryItem[]
   }
 }