diff --git a/src/App.vue b/src/App.vue index 20544ef..9306f83 100644 --- a/src/App.vue +++ b/src/App.vue @@ -16,9 +16,9 @@ const { inputX, inputY, running, digging, paused, help, inventory } = useInput() const level = createLevel(STAGE_WIDTH + 2, STAGE_HEIGHT + 2) player.inventory.push( - { 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' }, + { 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 }, ) 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 rows = computed(() => level.grid(floorX.value, floorY.value)) +const arriving = ref(true) const walking = ref(false) -const inventorySelection = ref(null) +const inventorySelection = ref(player.inventory[0]) type Surroundings = { at: Block, @@ -113,6 +114,10 @@ const move = (thisTick: number): void => { const optimal = 16 // 16ms per tick => 60 FPS const movementMultiplier = (tickDelta / optimal) * 2 + if (arriving.value && dy_ === 0) { + arriving.value = false + } + walking.value = !!dx_ x.value += dx_ * movementMultiplier @@ -148,6 +153,9 @@ onMounted(() => { > + +
+
x:{{ floorX }}, y:{{ floorY }} diff --git a/src/assets/player.css b/src/assets/player.css index e2f8acc..562bb6b 100644 --- a/src/assets/player.css +++ b/src/assets/player.css @@ -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-width: 64px; --player-height: 76px; @@ -78,3 +89,7 @@ from { transform: rotate(-20deg); } to { transform: rotate(20deg); } } +@keyframes pulse { + from { opacity: .3; } + to { opacity: 1.0; } +} diff --git a/src/screens/inventory.vue b/src/screens/inventory.vue index 1016f45..9e8c801 100644 --- a/src/screens/inventory.vue +++ b/src/screens/inventory.vue @@ -43,7 +43,12 @@ function setSelection(i: number) { }]" @click="setSelection(i)" > - {{ item.name }} + + {{ item.name }} + + @@ -91,7 +96,7 @@ li > i, li > b { bottom: 0; right: 1px; padding: .25em .5em; - background: black; + background: #0008; font-size: .8em; }