feat: add town map navigation system with clickable map UI

src/api.ts

@@ -45,7 +45,25 @@ export const api = {
   rpgReset: () => post('/api/web/rpg/reset'),
 }
 
+export interface MapLocation {
+  id: string
+  name: string
+  emoji: string
+  x: number
+  y: number
+  isCurrent: boolean
+  isConnected: boolean
+  description: string
+  hasAction: boolean
+}
+
 export interface RpgResult {
   text: string
-  choices: { text: string; [key: string]: unknown }[]
+  choices: { text: string; locationId?: string; isAction?: boolean; [key: string]: unknown }[]
+  mapData?: {
+    areaId: string
+    areaName: string
+    currentLocationId: string
+    locations: MapLocation[]
+  }
 }

src/views/GameView.vue

@@ -31,7 +31,7 @@
       <button class="log-close" @click="showLog = false">닫기</button>
     </div>
 
-    <div class="scene-area" v-if="!showLog && !showStatus">
+    <div class="scene-area" v-if="!mapData && !showLog && !showStatus">
       <div class="scene-portrait-area">
         <div class="speaker-portrait" v-if="speakerEmoji">
           <span class="portrait-icon">{{ speakerEmoji }}</span>
@@ -39,7 +39,57 @@
       </div>
     </div>
 
-    <div class="dialog-section" v-if="!showLog && !showStatus">
+    <div class="map-section" v-if="mapData && !showLog && !showStatus">
+      <div class="map-canvas">
+        <svg class="map-svg" xmlns="http://www.w3.org/2000/svg">
+          <line
+            v-for="conn in mapConnections" :key="conn.id"
+            :x1="`${conn.x1}%`" :y1="`${conn.y1}%`"
+            :x2="`${conn.x2}%`" :y2="`${conn.y2}%`"
+            class="map-line"
+          />
+        </svg>
+        <div
+          v-for="loc in mapData.locations" :key="loc.id"
+          class="map-node"
+          :class="{
+            'map-node--current': loc.isCurrent,
+            'map-node--connected': !loc.isCurrent && loc.isConnected,
+            'map-node--disabled': !loc.isCurrent && !loc.isConnected
+          }"
+          :style="{ left: loc.x + '%', top: loc.y + '%' }"
+          @click="onMapNodeClick(loc)"
+        >
+          <div class="map-node-circle">
+            <span class="map-node-icon">{{ loc.emoji }}</span>
+          </div>
+          <span class="map-node-label">{{ loc.name }}</span>
+        </div>
+      </div>
+      <div class="map-bottom">
+        <div class="map-header">
+          <span class="map-area-name">🗺️ {{ mapData.areaName }}</span>
+          <span class="map-loc-name">📍 {{ currentMapLoc?.name }}</span>
+        </div>
+        <div class="map-loc-desc">{{ currentMapLoc?.description }}</div>
+        <div class="map-choices" v-if="!loading">
+          <div
+            v-for="(ch, i) in choices" :key="i"
+            class="map-choice-row"
+            :class="{ 'map-choice--action': ch.isAction }"
+            @click="selectChoice(i + 1)"
+          >
+            <span class="map-choice-arrow">▶</span>
+            <span>{{ ch.text }}</span>
+          </div>
+        </div>
+        <div v-else class="loading-dots" style="padding: 8px 0">
+          <span></span><span></span><span></span>
+        </div>
+      </div>
+    </div>
+
+    <div class="dialog-section" v-if="!mapData && !showLog && !showStatus">
       <div class="dialog-box" v-if="currentText || loading">
         <div class="dialog-name-plate" v-if="speakerName && !loading">
           <span class="dialog-name">{{ speakerName }}</span>
@@ -90,12 +140,12 @@
 <script setup lang="ts">
 import { ref, onMounted, nextTick, watch, computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { api, type RpgResult } from '../api'
+import { api, type RpgResult, type MapLocation } from '../api'
 
 const router = useRouter()
 const username = ref(localStorage.getItem('rpg_username') || '')
 const history = ref<{ text: string; type: 'story' | 'choice' }[]>([])
-const choices = ref<{ text: string }[]>([])
+const choices = ref<RpgResult['choices']>([])
 const loading = ref(false)
 const showStatus = ref(false)
 const showLog = ref(false)
@@ -103,6 +153,7 @@ const statusText = ref('')
 const resetConfirm = ref(false)
 const logRef = ref<HTMLElement>()
 const hoveredChoice = ref(-1)
+const mapData = ref<RpgResult['mapData'] | null>(null)
 
 const HISTORY_KEY = `rpg_history_${username.value}`
 
@@ -170,6 +221,7 @@ const displayText = computed(() => {
 })
 
 const sceneBgClass = computed(() => {
+  if (mapData.value) return 'scene-map'
   const text = currentText.value.toLowerCase()
   if (text.includes('전투') || text.includes('공격') || text.includes('몬스터')) return 'scene-battle'
   if (text.includes('마을') || text.includes('광장') || text.includes('성문')) return 'scene-town'
@@ -179,6 +231,28 @@ const sceneBgClass = computed(() => {
   return 'scene-default'
 })
 
+const currentMapLoc = computed(() => {
+  if (!mapData.value) return null
+  return mapData.value.locations.find(l => l.isCurrent) || null
+})
+
+const mapConnections = computed(() => {
+  if (!mapData.value) return []
+  const locs = mapData.value.locations
+  const current = locs.find(l => l.isCurrent)
+  if (!current) return []
+  return locs
+    .filter(l => l.isConnected)
+    .map(l => ({ id: `${current.id}-${l.id}`, x1: current.x, y1: current.y, x2: l.x, y2: l.y }))
+})
+
+function onMapNodeClick(loc: MapLocation) {
+  if (loc.isCurrent || loading.value) return
+  if (!loc.isConnected) return
+  const idx = choices.value.findIndex(c => c.locationId === loc.id)
+  if (idx !== -1) selectChoice(idx + 1)
+}
+
 function scrollLog() {
   nextTick(() => {
     if (logRef.value) logRef.value.scrollTop = logRef.value.scrollHeight
@@ -186,6 +260,7 @@ function scrollLog() {
 }
 
 function applyResult(result: RpgResult, skipDuplicate = false) {
+  mapData.value = result.mapData || null
   if (skipDuplicate && history.value.length > 0) {
     const last = history.value[history.value.length - 1]!
     if (last.type === 'story' && last.text === result.text) {
@@ -777,4 +852,199 @@ onMounted(resumeGame)
 .jrpg-btn.danger:hover {
   background: rgba(180,60,60,0.25);
 }
+
+/* ─── Map scene bg ─── */
+.scene-map {
+  background: radial-gradient(ellipse at 50% 30%, #1a1408 0%, #0d0a04 60%, #050401 100%);
+}
+
+/* ─── Map Section ─── */
+.map-section {
+  position: relative;
+  z-index: 10;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.map-canvas {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  background: radial-gradient(ellipse at 50% 40%, rgba(60,40,10,0.3) 0%, rgba(10,8,3,0.4) 100%);
+}
+
+.map-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.map-line {
+  stroke: rgba(180,140,60,0.35);
+  stroke-width: 2;
+  stroke-dasharray: 8 5;
+}
+
+.map-node {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  cursor: default;
+  z-index: 2;
+}
+
+.map-node--connected,
+.map-node--current {
+  cursor: pointer;
+}
+
+.map-node-circle {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: rgba(10,8,20,0.88);
+  border: 2px solid rgba(100,80,30,0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 10px rgba(0,0,0,0.6);
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.map-node--current .map-node-circle {
+  border-color: rgba(220,175,60,0.95);
+  box-shadow: 0 0 0 3px rgba(180,140,60,0.2), 0 0 18px rgba(180,140,60,0.45);
+  animation: map-pulse 2.2s ease-in-out infinite;
+}
+
+.map-node--connected .map-node-circle {
+  border-color: rgba(180,140,60,0.55);
+}
+
+.map-node--connected:hover .map-node-circle {
+  border-color: rgba(220,180,80,0.95);
+  box-shadow: 0 0 14px rgba(180,140,60,0.45);
+}
+
+.map-node--disabled .map-node-circle {
+  opacity: 0.35;
+  filter: grayscale(0.6);
+}
+
+@keyframes map-pulse {
+  0%, 100% { box-shadow: 0 0 0 3px rgba(180,140,60,0.2), 0 0 18px rgba(180,140,60,0.45); }
+  50% { box-shadow: 0 0 0 6px rgba(180,140,60,0.1), 0 0 28px rgba(180,140,60,0.55); }
+}
+
+.map-node-icon {
+  font-size: 22px;
+}
+
+.map-node-label {
+  font-size: 11px;
+  color: #c0a060;
+  text-align: center;
+  white-space: nowrap;
+  text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.8);
+  max-width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+
+.map-node--current .map-node-label {
+  color: #ffd870;
+  font-weight: 700;
+}
+
+/* ─── Map Bottom Panel ─── */
+.map-bottom {
+  flex-shrink: 0;
+  background: linear-gradient(180deg, rgba(10,8,20,0.97) 0%, rgba(6,4,14,0.99) 100%);
+  border-top: 1px solid rgba(180,140,60,0.3);
+  padding: 10px 16px;
+  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
+  max-width: 760px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.map-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.map-area-name {
+  font-size: 11px;
+  color: rgba(180,140,60,0.6);
+  letter-spacing: 2px;
+}
+
+.map-loc-name {
+  font-size: 12px;
+  color: #d4a830;
+  font-weight: 700;
+}
+
+.map-loc-desc {
+  font-size: 13px;
+  color: #a09060;
+  line-height: 1.5;
+  margin-bottom: 10px;
+}
+
+.map-choices {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.map-choice-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 14px;
+  background: rgba(180,140,60,0.05);
+  border: 1px solid rgba(180,140,60,0.18);
+  border-radius: 2px;
+  color: #e0d4b0;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s;
+  min-height: 40px;
+}
+
+.map-choice-row:hover {
+  background: rgba(180,140,60,0.13);
+  border-color: rgba(180,140,60,0.5);
+  color: #ffd870;
+}
+
+.map-choice-row.map-choice--action {
+  background: rgba(80,60,180,0.07);
+  border-color: rgba(120,100,220,0.28);
+  color: #c0b0ff;
+}
+
+.map-choice-row.map-choice--action:hover {
+  background: rgba(80,60,180,0.18);
+  border-color: rgba(140,120,240,0.6);
+}
+
+.map-choice-arrow {
+  font-size: 12px;
+  color: #d4a830;
+  flex-shrink: 0;
+}
 </style>