From b18cc37b7795a724527f6e2963134c0dd7ba4bd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Norman=20K=C3=B6hring?= Date: Mon, 13 Feb 2023 14:32:09 +0100 Subject: [PATCH] add inventory screen and cleanup assets --- index.html | 8 +- src/App.vue | 40 ++-------- src/assets/monsterboy_assets.png | Bin 159630 -> 0 bytes src/assets/npcs/bossbeetle.png | Bin 0 -> 2543 bytes src/assets/npcs/bosswasp.png | Bin 0 -> 13510 bytes src/assets/npcs/centipede_0.png | Bin 0 -> 16699 bytes src/assets/npcs/crawler_0.png | Bin 0 -> 16021 bytes src/assets/{ => npcs}/demon_left.png | Bin src/assets/{ => npcs}/demon_right.png | Bin src/assets/npcs/flyer_0.png | Bin 0 -> 17226 bytes src/assets/{ => npcs}/ghost_left.png | Bin src/assets/{ => npcs}/ghost_right.png | Bin src/assets/{ => npcs}/knight_left.png | Bin src/assets/{ => npcs}/knight_right.png | Bin src/assets/{ => npcs}/shrooman_left.png | Bin src/assets/{ => npcs}/shrooman_right.png | Bin src/assets/{ => npcs}/shroomy_left.png | Bin src/assets/{ => npcs}/shroomy_right.png | Bin src/assets/{ => npcs}/skeleton_left.png | Bin src/assets/{ => npcs}/skeleton_right.png | Bin src/assets/tools/spade.svg | 1 + src/assets/weapons/sword.svg | 1 + src/screens/help.vue | 45 ++++++++++++ src/screens/inventory.vue | 90 +++++++++++++++++++++++ src/util/useInput.ts | 7 ++ src/util/usePlayer.ts | 11 +-- src/vite-env.d.ts | 24 ++++++ 27 files changed, 177 insertions(+), 50 deletions(-) delete mode 100644 src/assets/monsterboy_assets.png create mode 100644 src/assets/npcs/bossbeetle.png create mode 100644 src/assets/npcs/bosswasp.png create mode 100644 src/assets/npcs/centipede_0.png create mode 100644 src/assets/npcs/crawler_0.png rename src/assets/{ => npcs}/demon_left.png (100%) rename src/assets/{ => npcs}/demon_right.png (100%) create mode 100644 src/assets/npcs/flyer_0.png rename src/assets/{ => npcs}/ghost_left.png (100%) rename src/assets/{ => npcs}/ghost_right.png (100%) rename src/assets/{ => npcs}/knight_left.png (100%) rename src/assets/{ => npcs}/knight_right.png (100%) rename src/assets/{ => npcs}/shrooman_left.png (100%) rename src/assets/{ => npcs}/shrooman_right.png (100%) rename src/assets/{ => npcs}/shroomy_left.png (100%) rename src/assets/{ => npcs}/shroomy_right.png (100%) rename src/assets/{ => npcs}/skeleton_left.png (100%) rename src/assets/{ => npcs}/skeleton_right.png (100%) create mode 100644 src/assets/tools/spade.svg create mode 100644 src/assets/weapons/sword.svg create mode 100644 src/screens/help.vue create mode 100644 src/screens/inventory.vue diff --git a/index.html b/index.html index 626aabf..d55d713 100644 --- a/index.html +++ b/index.html @@ -49,7 +49,7 @@ right: 0; color: white; } - #help { + .screen { position: absolute; top: 0; left: 0; @@ -57,14 +57,8 @@ padding: 1em; background: transparent; color: white; - column-count: 2; - column-gap: 40px; - column-rule: 1px dotted gray; backdrop-filter: blur(5px) sepia(.8) brightness(0.4); } - header { - column-span: all; - } h2 { font-size: 1rem; font-weight: bold; diff --git a/src/App.vue b/src/App.vue index 0961637..4381053 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,8 @@ + + + + diff --git a/src/util/useInput.ts b/src/util/useInput.ts index 61ca1d3..85a54c6 100644 --- a/src/util/useInput.ts +++ b/src/util/useInput.ts @@ -7,6 +7,7 @@ export default function useInput() { let digging = ref(false) let paused = ref(false) let help = ref(false) + let inventory = ref(false) let wasPaused = false @@ -39,6 +40,11 @@ export default function useInput() { help.value = !help.value paused.value = help.value || wasPaused break + case 'i': + if (paused.value && !inventory.value) wasPaused = true + inventory.value = !inventory.value + paused.value = inventory.value || wasPaused + break } } @@ -77,5 +83,6 @@ export default function useInput() { digging, paused, help, + inventory, } } diff --git a/src/util/usePlayer.ts b/src/util/usePlayer.ts index fd7a0cc..f5327ae 100644 --- a/src/util/usePlayer.ts +++ b/src/util/usePlayer.ts @@ -1,20 +1,13 @@ import { computed, reactive } from 'vue' import { RECIPROCAL, STAGE_WIDTH, STAGE_HEIGHT } from '../level/def' -export interface Moveable { - x: number, // position on x-axis (fixed for the player) - y: number, // position on y-axis (fixed for the player) - lastDir: number, // store last face direction - vx: number, // velocity on the x-axis - vy: number, // velocity on the y-axis -} - -const player = reactive({ +const player: Player = reactive({ x: (STAGE_WIDTH + 2) / 2, y: (STAGE_HEIGHT + 2) / 2, lastDir: 0, vx: 0, vy: 1, // always falling, because of gravity + inventory: {}, // not yet in use }) export default function usePlayer() { diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 11f02fe..832495d 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1 +1,25 @@ /// + +declare global { + interface Moveable { + x: number // position on x-axis (fixed for the player) + y: number // position on y-axis (fixed for the player) + lastDir: number // store last face direction + vx: number // velocity on the x-axis + vy: number // velocity on the y-axis + } + + type Inventory = { + } + + interface Player extends Moveable { + inventory: Inventory + } + + interface Npc extends Moveable { + hostile: boolean + inventory: Inventory + } +} + +export {}