61 lines
1.9 KiB
Vue
61 lines
1.9 KiB
Vue
<script setup>
|
|
import { store } from '../store.js'
|
|
const costColors = ['#8a8f9d', '#4caf6e', '#4a90d9', '#b153d8', '#e5a531']
|
|
</script>
|
|
|
|
<template>
|
|
<div class="shopbar">
|
|
<div class="controls">
|
|
<button
|
|
:disabled="store.state.player.xp_needed === null || store.state.player.gold < store.state.xp_cost"
|
|
@click="store.buyXp()"
|
|
>
|
|
XP kaufen ({{ store.state.xp_cost }}g)
|
|
</button>
|
|
<button :disabled="store.state.player.gold < store.state.reroll_cost" @click="store.reroll()">
|
|
Reroll ({{ store.state.reroll_cost }}g)
|
|
</button>
|
|
</div>
|
|
<div class="slots">
|
|
<div
|
|
v-for="(s, i) in store.state.shop"
|
|
:key="i"
|
|
class="slot"
|
|
:class="{ empty: !s, unaffordable: s && s.cost > store.state.player.gold }"
|
|
:style="s ? { borderColor: costColors[s.cost - 1] } : {}"
|
|
@click="s && store.buy(i)"
|
|
>
|
|
<template v-if="s">
|
|
<img :src="s.icon" :alt="s.name" />
|
|
<div class="sname">{{ s.name }}</div>
|
|
<div class="straits">{{ s.traits.join(' · ') }}</div>
|
|
<div class="scost">{{ s.cost }}g</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.shopbar { display: flex; gap: 8px; }
|
|
.controls { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
|
|
.slots { display: flex; gap: 6px; flex: 1; }
|
|
.slot {
|
|
flex: 1;
|
|
border: 2px solid #2a3145;
|
|
border-radius: 8px;
|
|
background: #1a2030;
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
min-height: 96px;
|
|
}
|
|
.slot:hover:not(.empty) { filter: brightness(1.2); }
|
|
.slot.empty { cursor: default; background: #12141d; }
|
|
.slot.unaffordable { opacity: 0.5; }
|
|
.slot img { width: 100%; height: 52px; object-fit: cover; border-radius: 5px; }
|
|
.sname { font-size: 12px; font-weight: 600; }
|
|
.straits { font-size: 10px; color: #7d86a0; }
|
|
.scost { font-size: 11px; color: #ffd75e; }
|
|
</style>
|