n/vue-shovel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

stacked inventory items and arrival animation

Browse source
This commit is contained in:
Norman Köhring 2023-02-14 13:04:14 +01:00
parent 43e8242619
commit 5b87e3bae0
3 changed files with 34 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/App.vue
View file

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

15
src/assets/player.css
View file

@ -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 {
--player-width: 64px; --player-width: 64px;
--player-height: 76px; --player-height: 76px;
@ -78,3 +89,7 @@
from { transform: rotate(-20deg); } from { transform: rotate(-20deg); }
to { transform: rotate(20deg); } to { transform: rotate(20deg); }
} }
@keyframes pulse {
from { opacity: .3; }
to { opacity: 1.0; }
}

9
src/screens/inventory.vue
View file

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