From eee378bb7b39d491f5da2ec3939faab065021df7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Norman=20K=C3=B6hring?= Date: Sat, 4 Mar 2023 00:05:29 +0100 Subject: [PATCH] block drops into inventory --- src/App.vue | 36 +++++++++++++++++++++++------------- src/assets/items.css | 14 +++++--------- src/level/def.ts | 35 ++++++++++++++++++----------------- src/level/items.ts | 21 +++++++++++++++++++-- src/screens/inventory.vue | 4 +++- src/util/usePlayer.ts | 13 ++++++++++++- 6 files changed, 80 insertions(+), 43 deletions(-) diff --git a/src/App.vue b/src/App.vue index 5730b00..22191ac 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,6 +4,7 @@ import Help from './screens/help.vue' import Inventory from './screens/inventory.vue' import { BLOCK_SIZE, STAGE_WIDTH, STAGE_HEIGHT, type Block, blockTypes } from './level/def' +import { getItem, getItemClass } from './level/items' import createLevel from './level' import useTime from './util/useTime' @@ -12,18 +13,16 @@ import usePlayer from './util/usePlayer' import useLightMap from './util/useLightMap' const { updateTime, time, timeOfDay, clock } = useTime() -const { player, direction, dx, dy } = usePlayer() +const { player, direction, dx, dy, pocket } = usePlayer() const { inputX, inputY, running, paused, help, inventory } = useInput() const level = createLevel(STAGE_WIDTH + 2, STAGE_HEIGHT + 2) const lightMapEl = ref(undefined) let updateLightMap: ReturnType -player.inventory.push( - { 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 }, -) +pocket({ name: 'Shovel', type: 'tool', icon: 'shovel', quality: 'bronze' }) +pocket({ name: 'Sword', type: 'weapon', icon: 'sword', quality: 'bronze' }) +pocket({ name: 'Pick Axe', type: 'tool', icon: 'pick', quality: 'bronze' }) let animationFrame = 0 let lastTick = 0 @@ -74,15 +73,20 @@ const blocked = computed(() => { // TODO const damagedBlocks = ref([]) -function dig(blockX: number, blockY: number, oldBlockType: BlockType) { +function dig(blockX: number, blockY: number, block: Block) { // ยง 4 ArbZG if (paused.value) return - // TODO: temporary filter - if (oldBlockType === 'air' || oldBlockType === 'cave') return - // when we finally dig that block + // air cannot be digged, I guess + if (block.type === 'air' || block.type === 'cave') return + // can only dig in player proximity + if (Math.abs(player.x - blockX) > 2 || Math.abs(player.y - blockY) > 2) return + // finally dig that block + // TODO: damage blocks first level.change({ type: 'exchange', x: floorX.value + blockX, y: floorY.value + blockY, newType: 'air' }) + if (block.drops) pocket(getItem(block.drops)) + // This feels like cheating, but it makes Vue recalculate floorX // which then recalculates the blocks, so that the changes are // applied. Otherwise, they wouldn't be visible before moving @@ -165,6 +169,12 @@ function calcBrightness(level: number, row: number) { return `sun-${delta}` } +function selectTool(item: InventoryItem) { + // only tools and weapons can be selected + // if (item.type !== 'tool' && item.type !== 'weapon') return + inventorySelection.value = item +} + onMounted(() => { const canvas = lightMapEl.value! canvas.height = (BLOCK_SIZE + 2) * STAGE_HEIGHT @@ -184,7 +194,7 @@ onMounted(() => { @@ -198,7 +208,7 @@ onMounted(() => {
@@ -213,7 +223,7 @@ onMounted(() => { diff --git a/src/assets/items.css b/src/assets/items.css index c00d649..12674d3 100644 --- a/src/assets/items.css +++ b/src/assets/items.css @@ -1,9 +1,5 @@ -.item.tool-shovel-bronze { - background-image: url("/Items/shovel_bronze.png"); -} -.item.weapon-sword-bronze { - background-image: url("/Items/sword_bronze.png"); -} -.item.tool-pick-bronze { - background-image: url("/Items/pick_bronze.png"); -} +.item.tool-shovel-bronze { background-image: url("/Items/shovel_bronze.png"); } +.item.weapon-sword-bronze { background-image: url("/Items/sword_bronze.png"); } +.item.tool-pick-bronze { background-image: url("/Items/pick_bronze.png"); } + +.item.block-dirt { background-image: url("/Tiles/dirt.png"); } diff --git a/src/level/def.ts b/src/level/def.ts index debad97..4da685c 100644 --- a/src/level/def.ts +++ b/src/level/def.ts @@ -8,12 +8,13 @@ export const STAGE_HEIGHT = 12 // 12*64 = 768 pixel high stage export const GRAVITY = 10 // blocks per second export type Block = { - type: string, - hp: number, - walkable: boolean, - climbable?: boolean, - transparent?: boolean, - illuminated?: boolean, + type: string, // what is it? + hp: number, // how long do I need to hit it? + walkable: boolean, // can I walk through it? + climbable?: boolean, // can I climb it? + transparent?: boolean, // can I see through it? + illuminated?: boolean, // is it glowing? + drops?: string, // what do I get, when loot it? } export type BlockType = @@ -23,19 +24,19 @@ export type BlockType = | 'bedrock' | 'cave' export const blockTypes: Record = { - air: { type: 'air', hp: Infinity, walkable: true, transparent: true, illuminated: true }, - grass: { type: 'grass', hp: 5, walkable: false }, + air: { type: 'air', hp: Infinity, walkable: true, transparent: true }, + grass: { type: 'grass', hp: 5, walkable: false, drops: 'dirt' }, - treeCrown: { type: 'treeCrown', hp: 1, walkable: true, transparent: true }, - treeLeaves: { type: 'treeLeaves', hp: 1, walkable: true, transparent: true }, - treeTrunk: { type: 'treeTrunk', hp: 10, walkable: true, climbable: true, transparent: true }, - treeRoot: { type: 'treeRoot', hp: 10, walkable: true, climbable: true }, + treeCrown: { type: 'treeCrown', hp: 1, walkable: true, transparent: true, drops: 'leaves' }, + treeLeaves: { type: 'treeLeaves', hp: 1, walkable: true, transparent: true, drops: 'leaves' }, + treeTrunk: { type: 'treeTrunk', hp: 10, walkable: true, climbable: true, transparent: true, drops: 'wood' }, + treeRoot: { type: 'treeRoot', hp: 10, walkable: true, climbable: true, drops: 'wood' }, - soil: { type: 'soil', hp: 5, walkable: false }, - soilGravel: { type: 'soilGravel', hp: 5, walkable: false }, - stoneGravel: { type: 'stoneGravel', hp: 10, walkable: false }, - stone: { type: 'stone', hp: 10, walkable: false }, - bedrock: { type: 'bedrock', hp: 25, walkable: false }, + soil: { type: 'soil', hp: 5, walkable: false, drops: 'dirt' }, + soilGravel: { type: 'soilGravel', hp: 5, walkable: false, drops: 'gravel' }, + stoneGravel: { type: 'stoneGravel', hp: 10, walkable: false, drops: 'gravel' }, + stone: { type: 'stone', hp: 10, walkable: false, drops: 'stone' }, + bedrock: { type: 'bedrock', hp: 25, walkable: false, drops: 'stone' }, cave: { type: 'cave', hp: Infinity, walkable: true, transparent: true }, } diff --git a/src/level/items.ts b/src/level/items.ts index b8bcc85..575631e 100644 --- a/src/level/items.ts +++ b/src/level/items.ts @@ -1,9 +1,10 @@ import type { BlockType } from './def' +import type { InventoryItem } from '../util/usePlayer' export type ItemQuality = 'wood' | 'iron' | 'silver' | 'gold' | 'diamond' -export type ItemType = 'tool' | 'weapon' +export type ItemType = 'tool' | 'weapon' | 'block' | 'ore' -export interface Item = { +export interface Item { name: string type: ItemType icon: string @@ -19,6 +20,7 @@ export const items: Item[] = [ { name: 'dirt', type: 'block', icon: 'dirt', hasQuality: false }, { name: 'wood', type: 'block', icon: 'wood', hasQuality: false }, { name: 'stone', type: 'block', icon: 'stone', hasQuality: false }, + { name: 'gravel', type: 'block', icon: 'stone', hasQuality: false }, // TODO { name: 'coal', type: 'ore', icon: 'ore_coal', hasQuality: false }, { name: 'iron', type: 'ore', icon: 'ore_iron', hasQuality: false }, @@ -36,3 +38,18 @@ export const damage: Record = { gold: 5, diamond: 8, } + +export function getItem(name: string, quality = null) { + const item = items.find(i => i.name === name) + if (item) { + return { + ...item, + quality, + } + } +} + +export function getItemClass(item: InventoryItem) { + if (item.quality) return `${item.type}-${item.icon}-${item.quality}` + return `${item.type}-${item.icon}` +} diff --git a/src/screens/inventory.vue b/src/screens/inventory.vue index 6020831..165b95a 100644 --- a/src/screens/inventory.vue +++ b/src/screens/inventory.vue @@ -1,5 +1,7 @@