feat: add town map navigation system with clickable map UI
This commit is contained in:
hyoseung
parent
4c98358b87
commit
7fa4f499ab
20
src/api.ts
20
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[]
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user