100 lines
4.3 KiB
Vue
100 lines
4.3 KiB
Vue
<template>
|
|
<div class="flex flex-col h-full bg-black text-[#99e550] relative">
|
|
<!-- Header -->
|
|
<div class="flex items-center gap-2 text-xl font-bold p-2 border-b-2 border-[#99e550]">
|
|
<Map class="text-[#e0d8f0]" />
|
|
<span class="tracking-widest">選擇冒險區域 (SELECT ZONE)</span>
|
|
<button @click="$emit('close')" class="ml-auto text-white hover:text-red-500"><X /></button>
|
|
</div>
|
|
|
|
<!-- 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 text-center">
|
|
{{ 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 Button -->
|
|
<button
|
|
@click="!isLocked(loc) && canAfford(loc) && $emit('selectLocation', loc)"
|
|
:disabled="!canAfford(loc) || isLocked(loc)"
|
|
class="w-full py-2 text-lg tracking-[0.2em] border"
|
|
:class="(!canAfford(loc) || isLocked(loc))
|
|
? 'border-gray-600 text-gray-500 cursor-not-allowed'
|
|
: 'border-[#d95763] text-[#d95763] hover:bg-[#d95763] hover:text-black'"
|
|
>
|
|
{{ isLocked(loc) ? "能力不足" : !canAfford(loc) ? "資源不足" : "出發 !" }}
|
|
</button>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- Footer / Close Button -->
|
|
<div class="p-4 border-t border-[#99e550]">
|
|
<button
|
|
@click="$emit('close')"
|
|
class="border border-[#99e550] text-[#99e550] px-4 py-2 hover:bg-[#99e550] hover:text-black"
|
|
>
|
|
關閉
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Map, Drumstick, Coins, X, Swords } 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>
|