|
|
|
@ -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<HTMLCanvasElement | undefined>(undefined)
|
|
|
|
|
let updateLightMap: ReturnType<typeof useLightMap>
|
|
|
|
|
|
|
|
|
|
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(() => {
|
|
|
|
|
<template v-for="(row, y) in rows">
|
|
|
|
|
<div v-for="(block, x) in row"
|
|
|
|
|
:class="['block', block.type]"
|
|
|
|
|
@click="dig(x, y, block.type)"
|
|
|
|
|
@click="dig(x, y, block)"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
@ -198,7 +208,7 @@ onMounted(() => {
|
|
|
|
|
</div>
|
|
|
|
|
<div class="arms">
|
|
|
|
|
<div v-if="inventorySelection"
|
|
|
|
|
:class="['item', `${inventorySelection.type}-${inventorySelection.icon}-${inventorySelection.quality}`]"
|
|
|
|
|
:class="['item', getItemClass(inventorySelection)]"
|
|
|
|
|
></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -213,7 +223,7 @@ onMounted(() => {
|
|
|
|
|
|
|
|
|
|
<Inventory :shown="inventory"
|
|
|
|
|
:items="player.inventory"
|
|
|
|
|
@selection="inventorySelection = $event"
|
|
|
|
|
@selection="selectTool($event)"
|
|
|
|
|
/>
|
|
|
|
|
<Help v-show="help" />
|
|
|
|
|
</div>
|
|
|
|
|