地图组件

一个有趣的地图组件

一个有趣的地图组件，可以用于展示当前剧情发展的位置，用作地图展示。

原理：

• 当前地址采用一个地点名称传入代码

• 代码接收到地点名称后，当前位置作为高亮显示

目标字符

<FantasyMap>
    <CurrentLocation>血色修道院</CurrentLocation>
    <EnvironmentDesc>不速之客的出现，打破了此地的死寂。</EnvironmentDesc>
</FantasyMap>

替换字符串

代码过长，点击展开/收起

```html
<div class="grim-container" data-location="$1">
    <div class="grim-header">
        <div class="grim-title">REALM OF DESPAIR</div>
        <div class="grim-subtitle">Location Tracking System</div>
    </div>

    <div class="map-viewport">
        <div class="map-block block-1" data-name="血色修道院">
            <span class="label">血色修道院</span>
        </div>
        <div class="map-block block-2" data-name="灰烬荒原">
            <span class="label">灰烬荒原</span>
        </div>
        <div class="map-block block-3" data-name="沉沦之城">
            <span class="label">沉沦之城</span>
        </div>
        <div class="map-block block-4" data-name="黑石深渊">
            <span class="label">黑石深渊</span>
        </div>
        <div class="map-block block-5" data-name="叹息之门">
            <span class="label">叹息之门</span>
        </div>
    </div>

    <div class="grim-footer">
        <div class="loc-indicator">▶ CURRENT LOCATION: $1</div>
        <div class="loc-desc">$2</div>
    </div>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap');

        .grim-container {
            width: 100%;
            background: #0a0a0a;
            color: #d1d1d1;
            padding: 20px;
            box-sizing: border-box;
            font-family: 'Cinzel', serif; /* 使用更具西幻感的字体 */
            border: 3px solid #4a0000;
            position: relative;
            box-shadow: inset 0 0 50px #000, 0 5px 15px rgba(0,0,0,0.5);
        }

        .grim-header {
            border-bottom: 2px solid #8b0000;
            margin-bottom: 15px;
            padding-bottom: 8px;
            text-align: center;
        }

        .grim-title {
            font-size: 22px; /* 增大标题 */
            letter-spacing: 5px;
            color: #ff0000;
            text-shadow: 2px 2px 4px #000, 0 0 10px #8b0000;
        }

        .grim-subtitle {
            font-size: 10px;
            color: #666;
            letter-spacing: 2px;
        }

        .map-viewport {
            width: 100%;
            height: 320px; /* 稍微增加高度 */
            background: #050505;
            position: relative;
            border: 1px solid #333;
            overflow: hidden;
            background-image: radial-gradient(circle, #1a0000 0%, #050505 100%);
        }

        /* 块状地址优化 */
        .map-block {
            position: absolute;
            background: linear-gradient(145deg, #1a1a1a, #262626);
            border: 1px solid #444;
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            filter: brightness(0.6);
        }

        .map-block .label {
            font-size: 16px; /* 增大地点名字体 */
            color: #888;
            font-weight: bold;
            text-shadow: 1px 1px 2px #000;
            padding: 5px;
            text-align: center;
        }

        /* 不规则形状定义 */
        .block-1 { top: 5%; left: 5%; width: 45%; height: 35%; clip-path: polygon(0 0, 100% 0, 80% 90%, 5% 100%); }
        .block-2 { top: 8%; left: 52%; width: 43%; height: 38%; clip-path: polygon(15% 0, 100% 10%, 90% 95%, 0 80%); }
        .block-3 { top: 45%; left: 8%; width: 42%; height: 50%; clip-path: polygon(10% 5%, 95% 0, 100% 90%, 5% 100%); }
        .block-4 { top: 50%; left: 55%; width: 40%; height: 45%; clip-path: polygon(5% 10%, 95% 5%, 90% 100%, 0 90%); }
        .block-5 { top: 32%; left: 35%; width: 30%; height: 32%; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); z-index: 2; }

        /* 核心高亮逻辑 */
        .grim-container[data-location="血色修道院"] [data-name="血色修道院"],
        .grim-container[data-location="灰烬荒原"] [data-name="灰烬荒原"],
        .grim-container[data-location="沉沦之城"] [data-name="沉沦之城"],
        .grim-container[data-location="黑石深渊"] [data-name="黑石深渊"],
        .grim-container[data-location="叹息之门"] [data-name="叹息之门"] {
            background: linear-gradient(145deg, #4a0000, #8b0000);
            border-color: #ff4d4d;
            filter: brightness(1.1);
            z-index: 10;
            box-shadow: 0 0 20px #ff0000;
            animation: pulse-glow 2s infinite alternate;
        }

        .grim-container[data-location="$1"] .map-block:hover { filter: brightness(1); } /* 简单的悬停交互 */

        .grim-container[data-location="血色修道院"] [data-name="血色修道院"] .label,
        .grim-container[data-location="灰烬荒原"] [data-name="灰烬荒原"] .label,
        .grim-container[data-location="沉沦之城"] [data-name="沉沦之城"] .label,
        .grim-container[data-location="黑石深渊"] [data-name="黑石深渊"] .label,
        .grim-container[data-location="叹息之门"] [data-name="叹息之门"] .label {
            color: #fff;
            text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
            transform: scale(1.1);
        }

        @keyframes pulse-glow {
            from { box-shadow: 0 0 10px #8b0000, inset 0 0 10px #ff0000; }
            to { box-shadow: 0 0 25px #ff0000, inset 0 0 15px #ff0000; }
        }

        /* 底部信息优化 */
        .grim-footer {
            margin-top: 20px;
            padding: 15px;
            background: rgba(139, 0, 0, 0.05);
            border: 1px solid #4a0000;
        }

        .loc-indicator {
            font-size: 14px; /* 增大 */
            color: #ff4d4d;
            margin-bottom: 8px;
            font-weight: bold;
            border-bottom: 1px solid #4a0000;
            display: inline-block;
        }

        .loc-desc {
            font-size: 16px; /* 增大描述字体 */
            line-height: 1.6;
            color: #aaa;
            font-family: 'Georgia', serif;
            font-style: italic;
        }
    </style>
</div>
```

输出设定

### 地图导航设定
当玩家抵达新地点、探索环境或查看地图时，请在回复末尾严格输出以下XML：

<FantasyMap>
    <CurrentLocation>此处必须从以下列表中选择其一：血色修道院、灰烬荒原、沉沦之城、黑石深渊、叹息之门</CurrentLocation>
    <EnvironmentDesc>用富有诗意的西幻笔触描述该地点的细节</EnvironmentDesc>
</FantasyMap>

【重要提示】
- <CurrentLocation> 必须与列表中的字词完全一致，否则地图无法正确定位高亮。
- 不要输出任何XML以外的辅助文字。