Hugging Face's logo

Spaces:
HelloSun
/
empire-web
Running

App Files Community
empire-web
File size: 15,403 Bytes
4b04821
1c00bf3
 
 
 
31ac68f
 
1c00bf3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31ac68f
 
 
 
1c00bf3
 
31ac68f
1c00bf3
 
31ac68f
1c00bf3
31ac68f
1c00bf3
 
 
 
 
 
 
 
 
 
31ac68f
 
1c00bf3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31ac68f
1c00bf3
 
 
 
 
 
 
 
 
 
 
31ac68f
1c00bf3
 
 
 
31ac68f
1c00bf3
 
 
 
31ac68f
1c00bf3
 
 
 
 
 
31ac68f
1c00bf3
31ac68f
1c00bf3
 
 
 
31ac68f
1c00bf3
 
 
 
 
 
 
 
 
 
 
31ac68f
1c00bf3
 
 
 
 
 
 
 
31ac68f
1c00bf3
 
 
 
 
 
 
 
 
 
31ac68f
1c00bf3
 
 
 
 
 
 
31ac68f
 
1c00bf3
 
 
 
 
 
 
 
 
 
 
 
 
 
31ac68f
1c00bf3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4b04821
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>帝國征途 · 回合制戰略</title>
<meta name="description" content="回合制戰略傳奇。集結軍隊、締結同盟，征服世界。" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Cinzel+Decorative:wght@700;900&family=Inter:wght@300;400;500;600;700&family=Noto+Serif+TC:wght@400;500;600;700&family=Noto+Sans+TC:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />
</head>
<body>

<svg class="sprite" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
  <symbol id="i-crown" viewBox="0 0 24 24"><path d="M3 8l4 4 5-7 5 7 4-4-2 11H5L3 8z"/><path d="M5 19h14"/></symbol>
  <symbol id="i-gold" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.2"/><path d="M12 7.4l1.5 3 3.3.5-2.4 2.4.6 3.3-3-1.6-3 1.6.6-3.3-2.4-2.4 3.3-.5 1.5-3z"/></symbol>
  <symbol id="i-food" viewBox="0 0 24 24"><path d="M12 21V9"/><path d="M12 9c-2.6 0-4.2-1.6-4.2-4.2C10.4 4.8 12 6.4 12 9zM12 9c2.6 0 4.2-1.6 4.2-4.2C13.6 4.8 12 6.4 12 9zM12 13.2c-2.6 0-4.2-1.6-4.2-4.2 2.6 0 4.2 1.6 4.2 4.2zM12 13.2c2.6 0 4.2-1.6 4.2-4.2-2.6 0-4.2 1.6-4.2 4.2zM12 17.4c-2.6 0-4.2-1.6-4.2-4.2 2.6 0 4.2 1.6 4.2 4.2zM12 17.4c2.6 0 4.2-1.6 4.2-4.2-2.6 0-4.2 1.6-4.2 4.2z"/></symbol>
  <symbol id="i-wood" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="4.6" rx="2.3"/><rect x="3" y="13.4" width="18" height="4.6" rx="2.3"/><circle cx="7" cy="8.3" r="1.1"/><circle cx="7" cy="15.7" r="1.1"/></symbol>
  <symbol id="i-stone" viewBox="0 0 24 24"><path d="M3.5 19l3-8.2 5.2-2.2 4.2 3.1 4.6 1-1.9 6.3H3.5z"/><path d="M6.5 10.8l5.2 3.2 4.2-2M11.7 14v5"/></symbol>
  <symbol id="i-army" viewBox="0 0 24 24"><path d="M4 14.2a8 8 0 0116 0V16H4v-1.8z"/><path d="M3.4 16h17.2M12 6.2V4"/><path d="M12 6.2c2-2.2 4.2-1.2 5.4 1"/></symbol>
  <symbol id="i-sword" viewBox="0 0 24 24"><path d="M18.4 2.6l3 3-9.2 9.2-3-3 9.2-9.2z"/><path d="M6.4 14.2l3.4 3.4M4 20l3.5-3.5"/><path d="M14.5 6.5l3 3"/></symbol>
  <symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 2.8l7.5 3v5.5c0 4.6-3.1 7.8-7.5 9.4-4.4-1.6-7.5-4.8-7.5-9.4V5.8l7.5-3z"/><path d="M9 12l2.2 2.2L15.4 10"/></symbol>
  <symbol id="i-build" viewBox="0 0 24 24"><path d="M14.2 2.8l7 7-3 3-7-7 3-3z"/><path d="M11.2 8.8L3 17l4 4 8.2-8.2"/><path d="M6 19l-1 1"/></symbol>
  <symbol id="i-scroll" viewBox="0 0 24 24"><path d="M7 4h11v14H7z"/><path d="M7 4a2.2 2.2 0 00-2.2 2.2V8h2.2M18 18a2.2 2.2 0 002.2-2.2V14H18"/><path d="M10 8h5M10 11.5h5M10 15h3"/></symbol>
  <symbol id="i-dove" viewBox="0 0 24 24"><path d="M20.5 5.5c-3.2 0-5.4 1.1-7.2 3l-4 4.1c-1.9 2-2.8 3.1-3.2 5.2l4.2-1.9 3.1 3c4.3-1 7.6-5.2 7.6-10.4V5.5z"/><path d="M9.2 14.2L5 12.2"/></symbol>
  <symbol id="i-handshake" viewBox="0 0 24 24"><path d="M2.6 12.1l4.2-4.2 5 3 5-3 4.6 4.6-5.3 6.2-4.3-3.1-4.3 3.1-4.9-6.6z"/><path d="M9.2 9.6l3 2.1 3-2.1"/></symbol>
  <symbol id="i-trade" viewBox="0 0 24 24"><path d="M3.6 8h13.6l-3-3M20.4 16H6.8l3 3"/></symbol>
  <symbol id="i-close" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></symbol>
  <symbol id="i-map" viewBox="0 0 24 24"><path d="M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2V6z"/><path d="M9 4v14M15 6v14"/></symbol>
  <symbol id="i-save" viewBox="0 0 24 24"><path d="M5 3h11l3 3v15H5V3z"/><path d="M8 3v6h7V3M8 21v-7h8v7"/></symbol>
  <symbol id="i-help" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M9.6 9.2a2.5 2.5 0 114 2.1c-.9.7-1.6 1.2-1.6 2.4"/><circle cx="12" cy="17.3" r=".6" fill="currentColor" stroke="none"/></symbol>
  <symbol id="i-flag" viewBox="0 0 24 24"><path d="M5 21V4"/><path d="M5 4.5h12l-3 4 3 4H5"/></symbol>
  <symbol id="i-skull" viewBox="0 0 24 24"><path d="M12 2.8a8 8 0 00-5 14.2v3.2h10v-3.2a8 8 0 00-5-14.2z"/><circle cx="9" cy="11" r="1.5"/><circle cx="15" cy="11" r="1.5"/><path d="M10 17h4M9.4 21v-2M14.6 21v-2"/></symbol>
  <symbol id="i-spark" viewBox="0 0 24 24"><path d="M12 2l2.1 7.9L22 12l-7.9 2.1L12 22l-2.1-7.9L2 12l7.9-2.1L12 2z"/></symbol>
  <symbol id="i-back" viewBox="0 0 24 24"><path d="M15 4.5l-7.5 7.5L15 19.5"/></symbol>
  <symbol id="i-chevron" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></symbol>
  <symbol id="t-plains" viewBox="0 0 24 24"><path d="M2.5 19.5c3.2-4.6 6.3-4.6 9.5 0M12 19.5c3.2-5.2 6.3-5.2 9.5 0"/><path d="M8 11.5V4M8 6.2c-2.2 0-3.4-1.2-3.4-3.2 2.2 0 3.4 1.2 3.4 3.2zM8 6.2c2.2 0 3.4-1.2 3.4-3.2-2.2 0-3.4 1.2-3.4 3.2z"/></symbol>
  <symbol id="t-forest" viewBox="0 0 24 24"><path d="M12 2.5l5.4 7.4h-3l4.3 6.5H5.3l4.3-6.5h-3L12 2.5z"/><path d="M12 16.4V21.5"/></symbol>
  <symbol id="t-mountain" viewBox="0 0 24 24"><path d="M2.5 19.5L9 7.5l3.7 6.1 2.6-4 6.2 9.9H2.5z"/><path d="M7.4 12.5l1.6 2.4 2.4-2.4"/></symbol>
  <symbol id="t-city" viewBox="0 0 24 24"><path d="M3.5 21V8.5l3.2 2V6.2l3.2 2V3.5h4.2v4.7l3.2-2v4.3l3.2-2V21"/><path d="M3.5 21h17M9 21v-5.2h6V21"/></symbol>
  <symbol id="c-legion" viewBox="0 0 24 24"><path d="M12 1.8l8.2 3v7.1c0 5-3.4 8.8-8.2 10.3-4.8-1.5-8.2-5.3-8.2-10.3V4.8l8.2-3z"/><path d="M8.5 9h7v5.4h-7z"/><path d="M6.8 19.2v-3.4h10.4v3.4"/></symbol>
  <symbol id="c-leaf" viewBox="0 0 24 24"><path d="M20.5 3.5C10.5 3.5 5 8.5 5 15.6c0 2.3 1.2 4.9 1.2 4.9s1.8-7.4 12.3-11.5c-3.2 4.2-6.5 6.4-9.7 8.4"/></symbol>
  <symbol id="c-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4.2"/><path d="M12 1.5v3M12 19.5v3M1.5 12h3M19.5 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M19.4 4.6l-2.1 2.1M6.7 17.3l-2.1 2.1"/></symbol>
  <symbol id="c-eye" viewBox="0 0 24 24"><path d="M1.8 12S6 5.8 12 5.8 22.2 12 22.2 12 18 18.2 12 18.2 1.8 12 1.8 12z"/><circle cx="12" cy="12" r="3.2"/><circle cx="12" cy="12" r=".8" fill="currentColor" stroke="none"/></symbol>
  <symbol id="c-snow" viewBox="0 0 24 24"><path d="M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M9.2 4.5L12 7l2.8-2.5M9.2 19.5L12 17l2.8 2.5M4.4 10.2l3.6-.9-.9-3.6M19.6 13.8l-3.6.9.9 3.6M4.4 13.8l3.6.9-.9 3.6M19.6 10.2l-3.6-.9.9-3.6"/></symbol>
  <symbol id="c-fang" viewBox="0 0 24 24"><path d="M4.5 2.8c2.4 6.2 3.4 10.4 2 18 3.4-2.4 4.7-4.9 5.5-9 1 4.1 2.3 6.6 5.7 9-1.4-7.6-.4-11.8 2-18-5.4 2.4-9.8 2.4-15.2 0z"/></symbol>
  <symbol id="c-wave" viewBox="0 0 24 24"><path d="M2 8.5c2.5-2.5 4.5-2.5 7 0s4.5 2.5 7 0 4.5-2.5 6 0M2 13c2.5-2.5 4.5-2.5 7 0s4.5 2.5 7 0 4.5-2.5 6 0M2 17.5c2.5-2.5 4.5-2.5 7 0s4.5 2.5 7 0 4.5-2.5 6 0"/></symbol>
  <symbol id="c-bolt" viewBox="0 0 24 24"><path d="M13.5 1.8L3.8 13.5h6.1L8.5 22.2 19 10.2h-6.2l.7-8.4z"/></symbol>
  <symbol id="c-flame" viewBox="0 0 24 24"><path d="M12 2.2c.9 4.8 6 6.3 6 12.2a6 6 0 11-12 0c0-3 1.8-5.2 3.2-7.2.1 3 1 4.2 2.8 4.2-.9-4.1 0-7.1 0-9.2z"/></symbol>
  <symbol id="c-mist" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4"/><path d="M3 16.5c3-2.4 5.4-2.4 8.4 0s5.4 2.4 8.4 0M4.5 20c2.6-2 4.7-2 7.3 0s4.7 2 7.3 0"/></symbol>
  <symbol id="c-scale" viewBox="0 0 24 24"><path d="M12 2.2a6.3 6.3 0 016.3 6.3v8.8a6.3 6.3 0 01-12.6 0V8.5A6.3 6.3 0 0112 2.2z"/><path d="M5.7 10.5h12.6M5.7 14.2h12.6M7.4 7.6h9.2"/></symbol>
  <symbol id="c-skullcrest" viewBox="0 0 24 24"><path d="M12 2.3a7.8 7.8 0 00-4.9 13.9v3.1h9.8v-3.1A7.8 7.8 0 0012 2.3z"/><circle cx="9.2" cy="10.7" r="1.5"/><circle cx="14.8" cy="10.7" r="1.5"/><path d="M10 16h4M9.6 19.3v2.2M14.4 19.3v2.2"/></symbol>
</svg>

<div id="app">

  <!-- ═══════════════ MENU ═══════════════ -->
  <section id="screen-menu" class="screen active">
    <div class="menu-bg" aria-hidden="true"></div>
    <div class="menu-veil" aria-hidden="true"></div>
    <div class="menu-embers" aria-hidden="true"></div>
    <div class="menu-grid">
      <div class="menu-copy">
        <div class="crest-mark">
          <svg class="ico"><use href="#i-crown"/></svg>
        </div>
        <p class="eyebrow">回合制戰略傳奇</p>
        <h1 class="wordmark">帝國</h1>
        <p class="wordmark-cn">征 途 無 疆</p>
        <p class="tagline">集結軍隊，締結同盟。<br><em>征服世界。</em></p>
        <div class="menu-actions">
          <button id="btn-new" class="btn btn-primary btn-lg">
            <svg class="ico"><use href="#i-sword"/></svg><span>新的征程<small>開啟新王朝</small></span>
          </button>
          <button id="btn-continue" class="btn btn-ghost btn-lg hidden">
            <svg class="ico"><use href="#i-crown"/></svg><span>繼續王朝<small>重返王座</small></span>
          </button>
          <button id="btn-help" class="btn btn-quiet">遊戲指南</button>
        </div>
        <div class="menu-facts">
          <span><b>2</b> 世界地圖</span><i></i><span><b>6</b> 勢力</span><i></i><span><b>3</b> 每回合行動</span>
        </div>
      </div>
      <div class="menu-portrait">
        <div class="portrait-frame">
          <div class="portrait-img" style="background-image:url('assets/images/emperor.png')"></div>
          <div class="portrait-vignette"></div>
          <div class="portrait-plaque">
            <span class="plaque-kicker">王 座 靜 候</span>
            <span class="plaque-name">登 上 王 座</span>
          </div>
          <i class="corner tl"></i><i class="corner tr"></i><i class="corner bl"></i><i class="corner br"></i>
        </div>
      </div>
    </div>
    <footer class="menu-foot">
      <span class="foot-line"></span>
      <span>「權力不會自己走上王座」</span>
      <span class="foot-line"></span>
    </footer>
  </section>

  <!-- ═══════════════ SETUP ═══════════════ -->
  <section id="screen-setup" class="screen">
    <div class="setup-bg" aria-hidden="true"></div>
    <header class="setup-head">
      <button id="btn-setup-back" class="btn btn-icon" aria-label="返回"><svg class="ico"><use href="#i-back"/></svg></button>
      <div class="setup-title">
        <p class="eyebrow">開創你的帝國</p>
        <h2>書寫你的王朝</h2>
      </div>
      <div class="steps">
        <span class="step active"><b>I</b>世界</span><span class="step-line"></span>
        <span class="step active"><b>II</b>勢力</span><span class="step-line"></span>
        <span class="step active"><b>III</b>稱號</span>
      </div>
    </header>

    <div class="setup-body">
      <div class="setup-col setup-worlds">
        <div class="section-label"><span>01</span> 選擇世界</div>
        <div id="map-options" class="map-options"></div>
      </div>

      <div class="setup-col setup-factions">
        <div class="section-label"><span>02</span> 選擇勢力</div>
        <div id="faction-options" class="faction-options"></div>
      </div>

      <aside class="setup-col setup-identity">
        <div class="section-label"><span>03</span> 你的傳奇</div>
        <div class="identity-card">
          <div class="identity-portrait">
            <div class="identity-img"></div>
            <div class="identity-badge" id="identity-crest"><svg class="ico"><use href="#c-legion"/></svg></div>
          </div>
          <div class="identity-fields">
            <label>君主之名 <input id="in-leader" maxlength="20" placeholder="你的名字" autocomplete="off" /></label>
            <label>國號 <input id="in-nation" maxlength="24" placeholder="你的帝國" autocomplete="off" /></label>
            <label>格言 <input id="in-slogan" maxlength="40" placeholder="榮耀就在前方！" autocomplete="off" /></label>
          </div>
        </div>
        <div id="setup-summary" class="setup-summary"></div>
        <button id="btn-begin" class="btn btn-primary btn-block btn-lg" disabled>
          <svg class="ico"><use href="#i-crown"/></svg><span>登基稱帝</span>
        </button>
        <p class="setup-hint">每回合有 3 個行動。征服所有疆域即可統治世界。</p>
      </aside>
    </div>
  </section>

  <!-- ═══════════════ GAME ═══════════════ -->
  <section id="screen-game" class="screen">
    <header class="topbar">
      <button id="btn-game-menu" class="brand" title="返回主選單">
        <svg class="ico crown"><use href="#i-crown"/></svg>
        <span class="brand-word">帝國</span>
      </button>
      <div class="resources" id="resource-bar"></div>
      <div class="turn-cluster">
        <div class="turn-info">
          <span class="turn-label">回合 <b id="turn-num">1</b></span>
          <span class="action-pips" id="action-pips"></span>
        </div>
        <button id="btn-end-turn" class="btn btn-primary btn-end">
          <span>結束回合</span><svg class="ico"><use href="#i-chevron"/></svg>
        </button>
      </div>
    </header>

    <div class="game-grid">
      <aside class="side-left">
        <div class="sovereign-card" id="sovereign-card"></div>
        <div class="panel stats-panel" id="stats-panel"></div>
        <div class="panel objective-panel" id="objective-panel"></div>
        <div class="panel relations-panel">
          <div class="panel-head"><h3>列強</h3><button class="mini-link" data-open="diplomacy">外交</button></div>
          <div id="relations-list" class="relations-list"></div>
        </div>
      </aside>

      <main class="map-panel">
        <div class="map-head">
          <div class="map-title">
            <p class="eyebrow">戰爭地圖</p>
            <h2 id="map-name">大陸王座</h2>
          </div>
          <div class="map-tools">
            <div class="legend" id="map-legend"></div>
            <button class="btn btn-icon" data-open="chronicle" title="編年史"><svg class="ico"><use href="#i-scroll"/></svg></button>
            <button class="btn btn-icon" id="btn-save" title="存檔"><svg class="ico"><use href="#i-save"/></svg></button>
            <button class="btn btn-icon" data-open="help" title="指南"><svg class="ico"><use href="#i-help"/></svg></button>
          </div>
        </div>
        <div class="map-stage" id="map-stage">
          <div class="map-parchment" aria-hidden="true"></div>
          <div class="map-compass" aria-hidden="true">
            <svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="34"/><path d="M50 8l6 34-6 8-6-8 6-34z"/><path d="M50 92l-6-34 6-8 6 8-6 34z"/><path d="M8 50l34-6 8 6-8 6-34-6z" opacity=".55"/><path d="M92 50l-34 6-8-6 8-6 34 6z" opacity=".55"/></svg>
            <span>N</span>
          </div>
          <svg id="map-svg" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="世界地圖"></svg>
          <div class="map-hint" id="map-hint">點選疆域以查看詳情</div>
          <div class="map-tooltip" id="map-tooltip"></div>
        </div>
        <div class="map-foot">
          <div class="turn-status" id="turn-status"></div>
          <button class="chronicle-peek" data-open="chronicle">
            <svg class="ico"><use href="#i-scroll"/></svg>
            <span id="latest-log">你的故事從這裡開始……</span>
          </button>
        </div>
      </main>

      <aside class="side-right" id="council-panel"></aside>
    </div>
  </section>

  <div id="modal-root" class="modal-root" aria-live="polite"></div>
  <div id="toast-root" class="toast-root"></div>
</div>

<script type="module" src="js/main.js"></script>
</body>
</html>