94 lines
4.3 KiB
Vue
94 lines
4.3 KiB
Vue
<template>
|
|
<div class="flex flex-col h-full bg-black text-[#99e550] relative">
|
|
<!-- Content -->
|
|
<div class="flex-grow overflow-y-auto p-4 custom-scrollbar flex flex-col gap-4">
|
|
<div
|
|
v-for="loc in locations"
|
|
:key="loc.id"
|
|
class="border-2 p-4 relative transition-all"
|
|
:class="isLocked(loc) ? 'border-gray-600 opacity-70' : 'border-[#99e550] hover:bg-[#0f2a0f]'"
|
|
>
|
|
<!-- Title -->
|
|
<div class="text-xl font-bold tracking-widest mb-2 text-[#99e550]">
|
|
{{ loc.name }}
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<p class="text-xs text-white mb-4">
|
|
{{ loc.description }}
|
|
</p>
|
|
|
|
<!-- Costs & Reqs -->
|
|
<div class="flex flex-wrap gap-4 mb-4 text-sm font-mono">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-[#99e550]">消耗:</span>
|
|
<div class="flex items-center gap-1" :class="canAffordHunger(loc) ? 'text-[#9fd75b]' : 'text-red-500'">
|
|
<Drumstick :size="14" /> {{ loc.costHunger }}
|
|
</div>
|
|
<div class="flex items-center gap-1" :class="canAffordGold(loc) ? 'text-[#f6b26b]' : 'text-red-500'">
|
|
<Coins :size="14" /> {{ loc.costGold }}
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="loc.reqStats" class="flex items-center gap-2">
|
|
<span class="text-[#99e550]">要求:</span>
|
|
<span v-if="loc.reqStats.str" :class="meetsStr(loc) ? 'text-[#9fd75b]' : 'text-red-500'">STR {{ loc.reqStats.str }}</span>
|
|
<span v-if="loc.reqStats.int" :class="meetsInt(loc) ? 'text-[#9fd75b]' : 'text-red-500'">INT {{ loc.reqStats.int }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex gap-2 mt-auto">
|
|
<!-- Battle Button: Requires Stats & Costs -->
|
|
<button
|
|
@click="!isLocked(loc) && canAfford(loc) && $emit('selectLocation', { location: loc, mode: 'battle' })"
|
|
:disabled="!canAfford(loc) || isLocked(loc)"
|
|
class="flex-1 py-2 text-sm tracking-[0.1em] border transition-colors"
|
|
:class="(!canAfford(loc) || isLocked(loc))
|
|
? 'border-gray-600 text-gray-500 cursor-not-allowed'
|
|
: 'border-[#d95763] text-[#d95763] hover:bg-[#d95763] hover:text-black'"
|
|
>
|
|
<Swords :size="16" class="inline mr-1" /> 戰鬥
|
|
</button>
|
|
|
|
<!-- View Button: No Restrictions -->
|
|
<button
|
|
@click="$emit('selectLocation', { location: loc, mode: 'view' })"
|
|
class="flex-1 py-2 text-sm tracking-[0.1em] border transition-colors border-[#2ce8f4] text-[#2ce8f4] hover:bg-[#2ce8f4] hover:text-black"
|
|
>
|
|
<Eye :size="16" class="inline mr-1" /> 參觀
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Side Decoration Bar -->
|
|
<div class="absolute top-2 bottom-2 right-2 w-2" :class="isLocked(loc) ? 'bg-gray-600' : 'bg-[#99e550]'"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Map, Drumstick, Coins, X, Swords, Eye } from 'lucide-vue-next';
|
|
import PixelFrame from './PixelFrame.vue';
|
|
import PixelButton from './PixelButton.vue';
|
|
|
|
type AdventureLocation = any;
|
|
type EntityStats = any;
|
|
|
|
interface Props {
|
|
locations: AdventureLocation[];
|
|
playerStats: EntityStats;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
defineEmits(['selectLocation', 'close']);
|
|
|
|
const canAffordHunger = (loc: AdventureLocation) => (props.playerStats.hunger || 0) >= loc.costHunger;
|
|
const canAffordGold = (loc: AdventureLocation) => (props.playerStats.gold || 0) >= loc.costGold;
|
|
const meetsStr = (loc: AdventureLocation) => !loc.reqStats?.str || (props.playerStats.str || 0) >= loc.reqStats.str;
|
|
const meetsInt = (loc: AdventureLocation) => !loc.reqStats?.int || (props.playerStats.int || 0) >= loc.reqStats.int;
|
|
|
|
const isLocked = (loc: AdventureLocation) => !meetsStr(loc) || !meetsInt(loc);
|
|
const canAfford = (loc: AdventureLocation) => canAffordHunger(loc) && canAffordGold(loc);
|
|
</script>
|