text-adventure-game/components/common/MiniMap.vue

<template>
  <view class="mini-map">
    <!-- 地图容器 -->
    <view class="mini-map__container">
      <scroll-view
        class="mini-map__scroll"
        scroll-x
        scroll-y
        :scroll-left="scrollLeft"
        :scroll-top="scrollTop"
        @scroll="onScroll"
      >
        <view
          class="mini-map__content"
          :style="contentStyle"
        >
          <!-- 连接线层 -->
          <view class="mini-map__connections">
            <view
              v-for="edge in mapData.edges"
              :key="`${edge.from}-${edge.to}`"
              class="connection-line"
              :class="{ 'connection-line--path': isInPath(edge) }"
              :style="getLineStyle(edge)"
            ></view>
          </view>

          <!-- 节点层 -->
          <view
            v-for="node in mapData.nodes"
            :key="node.id"
            class="map-node"
            :class="getNodeClass(node)"
            :style="getNodeStyle(node)"
            @click="handleNodeClick(node)"
            @touchstart="onTouchStart"
            @touchmove="onTouchMove"
            @touchend="onTouchEnd"
          >
            <!-- 节点圆点 -->
            <view class="node__dot"></view>

            <!-- 当前位置脉冲效果 -->
            <view v-if="node.id === currentLocation" class="node__pulse"></view>

            <!-- 节点名称 -->
            <text class="node__name">{{ node.name }}</text>

            <!-- 锁定图标 -->
            <text v-if="isLocked(node)" class="node__lock">🔒</text>

            <!-- 距离标记 -->
            <text v-else-if="getDistance(node) > 0" class="node__distance">{{ getDistance(node) }}</text>
          </view>
        </view>
      </scroll-view>

      <!-- 缩放控制 -->
      <view class="mini-map__zoom-controls">
        <view class="zoom-btn" @click="zoomIn">
          <text class="zoom-icon">+</text>
        </view>
        <view class="zoom-btn" @click="resetZoom">
          <text class="zoom-icon">⟲</text>
        </view>
        <view class="zoom-btn" @click="zoomOut">
          <text class="zoom-icon">−</text>
        </view>
      </view>
    </view>

    <!-- 图例 -->
    <view class="mini-map__legend">
      <view class="legend-item">
        <view class="legend-dot legend-dot--current"></view>
        <text class="legend-text">当前位置</text>
      </view>
      <view class="legend-item">
        <view class="legend-dot legend-dot--safe"></view>
        <text class="legend-text">安全</text>
      </view>
      <view class="legend-item">
        <view class="legend-dot legend-dot--danger"></view>
        <text class="legend-text">危险</text>
      </view>
      <view class="legend-item">
        <view class="legend-dot legend-dot--dungeon"></view>
        <text class="legend-text">副本</text>
      </view>
    </view>

    <!-- 路径提示 -->
    <view v-if="selectedPath.length > 1" class="mini-map__path">
      <text class="path-text">前往路径: {{ selectedPath.map(id => getLocationName(id)).join(' → ') }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useGameStore } from '@/store/game'
import { usePlayerStore } from '@/store/player'
import { LOCATION_CONFIG } from '@/config/locations'
import { getMapData, getPath } from '@/utils/mapLayout.js'

const game = useGameStore()
const player = usePlayerStore()

const mapData = ref({ nodes: [], edges: [], width: 300, height: 400 })
const selectedPath = ref([])

// 缩放和平移状态
const zoom = ref(1)
const scrollLeft = ref(0)
const scrollTop = ref(0)
const currentLocationNode = ref(null)

// 容器尺寸
const containerWidth = 280
const containerHeight = 300

// 触摸拖动状态
const touchStartX = ref(0)
const touchStartY = ref(0)
const isDragging = ref(false)

const currentLocation = computed(() => player.currentLocation)

// 内容样式
const contentStyle = computed(() => {
  return {
    width: (containerWidth * zoom.value) + 'px',
    height: (containerHeight * zoom.value) + 'px',
    transformOrigin: 'center center'
  }
})

// 初始化地图
function initMap() {
  const data = getMapData(player.currentLocation)

  // 不再缩放以适应容器，使用原始坐标
  // 但确保地图足够大
  const padding = 40

  mapData.value = {
    nodes: data.nodes.map(n => ({
      ...n,
      x: n.x,
      y: n.y
    })),
    edges: data.edges,
    width: data.width,
    height: data.height,
    reachable: data.reachable
  }

  // 找到当前节点并居中
  centerOnLocation()
  selectedPath.value = []
}

// 居中到当前位置
function centerOnLocation() {
  const currentNode = mapData.value.nodes.find(n => n.id === currentLocation.value)
  if (!currentNode) return

  currentLocationNode.value = currentNode

  // 计算需要滚动的位置以居中当前节点
  // 考虑缩放比例
  const targetLeft = currentNode.x * zoom.value - containerWidth / 2
  const targetTop = currentNode.y * zoom.value - containerHeight / 2

  scrollLeft.value = Math.max(0, targetLeft)
  scrollTop.value = Math.max(0, targetTop)
}

// 缩放控制
function zoomIn() {
  zoom.value = Math.min(2, zoom.value + 0.2)
  centerOnLocation()
}

function zoomOut() {
  zoom.value = Math.max(0.5, zoom.value - 0.2)
  centerOnLocation()
}

function resetZoom() {
  zoom.value = 1
  centerOnLocation()
}

// 触摸事件处理（用于拖动）
function onTouchStart(e) {
  touchStartX.value = e.touches[0].clientX
  touchStartY.value = e.touches[0].clientY
  isDragging.value = false
}

function onTouchMove(e) {
  const deltaX = e.touches[0].clientX - touchStartX.value
  const deltaY = e.touches[0].clientY - touchStartY.value

  if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
    isDragging.value = true
  }
}

function onTouchEnd(e) {
  // 如果不是拖动，则视为点击
  // 这里的处理在 handleNodeClick 中完成
}

// 滚动事件
function onScroll(e) {
  // 可以在这里记录滚动位置
}

// 获取节点样式
function getNodeStyle(node) {
  return {
    left: (node.x * zoom.value) + 'px',
    top: (node.y * zoom.value) + 'px'
  }
}

// 获取节点样式类
function getNodeClass(node) {
  const classes = []

  if (node.id === currentLocation.value) {
    classes.push('map-node--current')
  }

  if (isLocked(node)) {
    classes.push('map-node--locked')
  } else {
    if (node.type === 'safe') classes.push('map-node--safe')
    else if (node.type === 'danger') classes.push('map-node--danger')
    else if (node.type === 'dungeon') classes.push('map-node--dungeon')

    const dist = getDistance(node)
    if (dist === 1) classes.push('map-node--adjacent')
  }

  return classes.join(' ')
}

// 检查区域是否锁定
function isLocked(node) {
  const loc = LOCATION_CONFIG[node.id]
  if (!loc?.unlockCondition) return false

  if (loc.unlockCondition.type === 'kill') {
    const killCount = (player.killCount && player.killCount[loc.unlockCondition.target]) || 0
    return killCount < loc.unlockCondition.count
  } else if (loc.unlockCondition.type === 'item') {
    return !player.inventory.some(i => i.id === loc.unlockCondition.item)
  }

  return false
}

// 获取距离（步数）
function getDistance(node) {
  return mapData.value.reachable?.[node.id] ?? 99
}

// 获取位置名称
function getLocationName(id) {
  return LOCATION_CONFIG[id]?.name || id
}

// 获取连接线样式
function getLineStyle(edge) {
  const fromNode = mapData.value.nodes.find(n => n.id === edge.from)
  const toNode = mapData.value.nodes.find(n => n.id === edge.to)

  if (!fromNode || !toNode) return {}

  const dx = (toNode.x - fromNode.x) * zoom.value
  const dy = (toNode.y - fromNode.y) * zoom.value
  const length = Math.sqrt(dx * dx + dy * dy)
  const angle = Math.atan2(dy, dx) * 180 / Math.PI

  return {
    left: (fromNode.x * zoom.value) + 'px',
    top: (fromNode.y * zoom.value) + 'px',
    width: length + 'px',
    transform: `rotate(${angle}deg)`
  }
}

// 检查边是否在选中路径上
function isInPath(edge) {
  if (selectedPath.value.length < 2) return false

  for (let i = 0; i < selectedPath.value.length - 1; i++) {
    const from = selectedPath.value[i]
    const to = selectedPath.value[i + 1]
    if ((edge.from === from && edge.to === to) ||
        (edge.from === to && edge.to === from)) {
      return true
    }
  }
  return false
}

// 处理节点点击
function handleNodeClick(node) {
  if (node.id === currentLocation.value) {
    selectedPath.value = []
    return
  }

  const path = getPath(currentLocation.value, node.id)
  if (path) {
    selectedPath.value = path

    // 如果相邻且未锁定，提示可前往
    if (path.length === 2 && !isLocked(node)) {
      game.addLog(`可以前往 ${node.name}`, 'info')
    }
  }
}

// 监听当前位置变化
watch(() => player.currentLocation, () => {
  initMap()
})

onMounted(() => {
  initMap()
})
</script>

<style lang="scss" scoped>
.mini-map {
  display: flex;
  flex-direction: column;
  gap: 12rpx;

  &__container {
    position: relative;
    width: 100%;
    height: 360rpx;
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    border-radius: 12rpx;
    overflow: hidden;
    border: 2rpx solid #4a5568;
  }

  &__scroll {
    width: 100%;
    height: 300rpx;
  }

  &__content {
    position: relative;
    min-width: 100%;
    min-height: 100%;
  }

  &__connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  &__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    padding: 12rpx;
    background-color: $bg-secondary;
    border-radius: 8rpx;
  }

  &__path {
    padding: 10rpx 12rpx;
    background-color: rgba($accent, 0.15);
    border: 1rpx solid $accent;
    border-radius: 8rpx;
  }

  &__zoom-controls {
    position: absolute;
    bottom: 12rpx;
    right: 12rpx;
    display: flex;
    flex-direction: column;
    gap: 8rpx;
    z-index: 20;
  }
}

.zoom-btn {
  width: 56rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba($bg-primary, 0.8);
  border: 1rpx solid rgba($accent, 0.5);
  border-radius: 8rpx;
  backdrop-filter: blur(4rpx);

  &:active {
    background-color: rgba($accent, 0.3);
  }
}

.zoom-icon {
  font-size: 32rpx;
  color: $accent;
  font-weight: bold;
}

.connection-line {
  position: absolute;
  height: 2rpx;
  background-color: rgba(74, 85, 104, 0.5);
  transform-origin: left center;

  &--path {
    background-color: rgba($warning, 0.8);
    height: 3rpx;
    box-shadow: 0 0 6rpx rgba($warning, 0.5);
  }
}

.map-node {
  position: absolute;
  width: 64rpx;
  height: 64rpx;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: all 0.2s;

  &:active {
    transform: translate(-50%, -50%) scale(1.15);
  }

  &--current {
    z-index: 10;
  }

  &--locked {
    opacity: 0.5;
    filter: grayscale(0.5);
  }
}

.node__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 2rpx solid;

  .map-node--safe & {
    background-color: rgba($success, 0.3);
    border-color: $success;
  }

  .map-node--danger & {
    background-color: rgba($danger, 0.3);
    border-color: $danger;
  }

  .map-node--dungeon & {
    background-color: rgba($accent, 0.3);
    border-color: $accent;
  }

  .map-node--current & {
    background-color: $warning;
    border-color: #fff;
    box-shadow: 0 0 12rpx rgba($warning, 0.8);
  }

  .map-node--locked & {
    background-color: rgba($text-muted, 0.3);
    border-color: $text-muted;
  }
}

.node__pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background-color: rgba($warning, 0.4);
  animation: pulse 1.5s ease-out infinite;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
}

.map-node--adjacent .node__dot::after {
  content: '';
  position: absolute;
  top: -8rpx;
  left: -8rpx;
  right: -8rpx;
  bottom: -8rpx;
  border-radius: 50%;
  border: 1rpx dashed rgba($warning, 0.6);
}

.node__name {
  position: absolute;
  top: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20rpx;
  color: #e2e8f0;
  white-space: nowrap;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.node__lock {
  position: absolute;
  top: -12rpx;
  right: -12rpx;
  font-size: 20rpx;
}

.node__distance {
  position: absolute;
  bottom: -12rpx;
  right: -12rpx;
  font-size: 18rpx;
  color: rgba($text-secondary, 0.8);
  background-color: rgba(0, 0, 0, 0.6);
  padding: 2rpx 6rpx;
  border-radius: 6rpx;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6rpx;
}

.legend-dot {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;

  &--current {
    background-color: $warning;
  }

  &--safe {
    background-color: $success;
  }

  &--danger {
    background-color: $danger;
  }

  &--dungeon {
    background-color: $accent;
  }
}

.legend-text {
  font-size: 20rpx;
  color: $text-secondary;
}

.path-text {
  font-size: 22rpx;
  color: $accent;
}
</style>