mole-data-editor/index.html at main · moleworld-dev/mole-data-editor · GitHub

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
227
228
229
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MoleDataEditor</title>
    <link rel="stylesheet" href="./styles.css?v=20260614-edit-front" />
  </head>
  <body>
    <main class="app-shell">
      <section class="toolbar">
        <div>
          <h1>MoleDataEditor</h1>
          <p>本地存档编辑器，玩家数据和地图数据分开读取、修改和导出。</p>
        </div>
        <div class="toolbar-actions">
          <button id="sampleBtn" type="button">载入示例</button>
        </div>
      </section>

      <section id="editorShell" class="editor-shell">
        <aside class="sidebar">
          <div class="file-summary">
            <span id="fileName">浏览器内存</span>
            <strong id="saveTitle">-</strong>
            <small id="saveMeta">-</small>
          </div>
          <span id="importStatus" class="import-status">请选择玩家数据或地图数据标签页导入文件。</span>
          <nav class="tabs" aria-label="编辑区域">
            <button class="tab active" type="button" data-tab="player">玩家数据</button>
            <button class="tab" type="button" data-tab="map">地图数据</button>
          </nav>
          <div id="validationBox" class="validation-box"></div>
        </aside>

        <div class="workbench">
          <section id="tab-player" class="tab-panel active">
            <div class="panel-head">
              <div>
                <h2>玩家数据</h2>
                <p>导入 userinfo.dat，修改数值后可单独导出 DAT。</p>
              </div>
              <div class="panel-actions">
                <label class="file-button">
                  <input id="playerFileInput" type="file" accept=".dat,application/octet-stream" />
                  导入玩家数据
                </label>
                <button id="exportPlayerBtn" type="button">导出玩家数据</button>
              </div>
            </div>

            <form id="userForm" class="form-grid">
              <label>米米号<input name="user_id" type="number" step="1" /></label>
              <label>昵称<input name="name" maxlength="31" /></label>
              <label>等级<input name="cur_level" type="number" min="1" max="52" step="1" /></label>
              <label>经验<input name="xp" type="number" min="0" step="1" /></label>
              <label>摩尔豆<input name="gold" type="number" min="0" step="1" /></label>
              <label>贝壳<input name="vip_gold" type="number" min="0" step="1" /></label>
              <label>VIP 等级<input name="vip_level" type="number" min="0" step="1" /></label>
              <label>头像索引<input name="icon_index" type="number" min="0" max="61" step="1" /></label>
              <label>工人数<input name="total_workers" type="number" min="0" step="1" /></label>
              <label>房间数<input name="total_rooms" type="number" min="0" step="1" /></label>
            </form>

            <div class="json-block">
              <div class="panel-head compact">
                <div>
                  <h2>玩家 JSON</h2>
                  <p>这里显示当前玩家数据；也可以直接编辑后格式化。</p>
                </div>
                <button id="formatPlayerJsonBtn" type="button">格式化</button>
              </div>
              <textarea id="playerJsonEditor" spellcheck="false"></textarea>
            </div>
          </section>

          <section id="tab-map" class="tab-panel">
            <div class="panel-head">
              <div>
                <h2>地图数据</h2>
                <p>导入 map.dat、粘贴 map base64，或导出当前地图 DAT。</p>
              </div>
              <div class="panel-actions">
                <label class="file-button">
                  <input id="mapFileInput" type="file" accept=".dat,application/octet-stream" />
                  导入地图数据
                </label>
                <button id="openPasteMapBtn" type="button">粘贴地图</button>
                <button id="exportMapBtn" type="button">导出地图数据</button>
              </div>
            </div>

            <div class="stats-grid" id="mapStatsGrid"></div>

            <div class="map-panel">
              <div class="panel-head">
                <div>
                  <h2>庄园摆放预览</h2>
                  <p>按 `objects[].enc_mapdata_b64` 的 baseTile 坐标绘制导出贴图。</p>
                </div>
                <div class="preview-actions">
                  <button id="previewFitBtn" type="button">适配</button>
                  <button id="previewMapBtn" type="button" class="active">地图</button>
                  <button id="previewGridBtn" type="button">网格</button>
                  <button id="previewMissingBtn" type="button" class="active">缺图占位</button>
                  <div class="add-object-menu" id="addObjectMenu">
                    <button id="toggleAddObjectMenuBtn" type="button" aria-expanded="false" aria-controls="addObjectDropdown">添加</button>
                    <div id="addObjectDropdown" class="object-picker-popover" hidden>
                      <div class="object-picker-head">
                        <input id="objectSearchInput" type="search" placeholder="按名字或 ID 搜索" autocomplete="off" />
                      </div>
                      <div id="objectPickerViewport" class="object-picker-viewport">
                        <canvas id="objectPickerCanvas" aria-label="对象选择列表"></canvas>
                        <div id="objectPickerSpacer"></div>
                      </div>
                      <div id="objectPickerEmpty" class="object-picker-empty" hidden>未找到对象</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="map-edit-state" hidden>
                <section class="map-edit-group selected-object-card">
                  <div class="map-edit-title">
                    <strong>所选对象</strong>
                    <span id="selectedObjectLabel">未选择</span>
                  </div>
                  <div class="map-edit-fields">
                    <label>scene<input id="editSceneInput" type="number" step="1" /></label>
                    <label>obj<input id="editObjectIdInput" type="number" step="1" list="objectCatalogList" /></label>
                    <label>x<input id="editXInput" type="number" step="1" /></label>
                    <label>y<input id="editYInput" type="number" step="1" /></label>
                    <label class="check-label"><input id="editFlipInput" type="checkbox" />flip</label>
                  </div>
                  <div class="map-edit-actions">
                    <button id="rotateObjectBtn" type="button">旋转</button>
                    <button id="deleteObjectBtn" type="button" class="danger">删除</button>
                  </div>
                </section>

                <section class="map-edit-group add-object-card">
                  <div class="map-edit-title">
                    <strong>添加对象</strong>
                    <span id="addObjectHint">object-catalog</span>
                  </div>
                  <div class="map-edit-fields">
                    <label>scene<input id="addSceneInput" type="number" step="1" value="1" readonly /></label>
                    <label>obj<input id="addObjectIdInput" type="number" step="1" list="objectCatalogList" /></label>
                    <label>x<input id="addXInput" type="number" step="1" value="12" /></label>
                    <label>y<input id="addYInput" type="number" step="1" value="12" /></label>
                    <label class="check-label"><input id="addFlipInput" type="checkbox" />flip</label>
                  </div>
                  <div class="map-edit-actions">
                    <button id="addObjectBtn" type="button">添加</button>
                  </div>
                </section>
                <datalist id="objectCatalogList"></datalist>
              </div>
              <div class="map-canvas-wrap">
                <canvas id="objectMap" role="img" aria-label="庄园对象实际摆放预览"></canvas>
                <div id="previewTooltip" class="preview-tooltip" hidden></div>
                <div id="previewStatus" class="preview-status">正在读取导出的贴图资源...</div>
              </div>
            </div>

            <div class="map-data-grid">
              <section class="data-panel">
                <div class="panel-head compact">
                  <div>
                    <h2>对象数据</h2>
                    <p>当前只展示地图解析出的摆放对象。</p>
                  </div>
                </div>
                <div class="table-wrap">
                  <table>
                    <thead>
                      <tr>
                        <th>kind</th>
                        <th>scene</th>
                        <th>key</th>
                        <th>obj</th>
                        <th>seq</th>
                        <th>x</th>
                        <th>y</th>
                        <th>flip</th>
                        <th></th>
                      </tr>
                    </thead>
                    <tbody id="objectsTable"></tbody>
                  </table>
                </div>
              </section>

              <section class="data-panel">
                <div class="panel-head compact">
                  <div>
                    <h2>地图 JSON</h2>
                    <p>这里显示当前地图 blob 和对象列表。</p>
                  </div>
                  <button id="formatMapJsonBtn" type="button">格式化</button>
                </div>
                <textarea id="mapJsonEditor" spellcheck="false"></textarea>
              </section>
            </div>
          </section>
        </div>
      </section>
    </main>

    <dialog id="pasteMapDialog" class="paste-dialog">
      <form method="dialog">
        <div class="panel-head">
          <div>
            <h2>粘贴地图 base64</h2>
            <p>支持 map.dat base64 或已 gzip 的 map_blob_b64。</p>
          </div>
          <button id="closePasteMapBtn" type="submit" value="cancel">关闭</button>
        </div>
        <label>map base64<textarea id="mapBase64Input" spellcheck="false" placeholder="Paste map.dat or map_blob_b64 base64"></textarea></label>
        <div class="dialog-actions">
          <button id="loadMapBase64Btn" type="button">加载地图</button>
        </div>
      </form>
    </dialog>

    <script src="./dat-parser.js?v=20260615-userinfo-double-fields" charset="UTF-8"></script>
    <script src="./manor-preview.js?v=20260615-asprite-composite-draw" charset="UTF-8"></script>
    <script src="./app.js?v=20260615-builtin-map-type" charset="UTF-8"></script>
  </body>
</html>