tile-editor/index.html at master · rokyed/tile-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
<!DOCTYPE html>
<html>
  <head>
    <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=Teko:wght@300..700&display=swap" rel="stylesheet">
    <script src="./main.js" type="module"></script>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <input type="file" id="file" style="display: none"/>
    <nav>
      <button id="save">Save Scenario</button>
      <button id="load">Load Scenario</button>
      <button id="save_local">Save to Local</button>
      <button id="load_local">Load from Local</button>
      <button id="export_tmx">Export TMX</button>
      <button id="import_tmx">Import TMX</button>
      <button id="export_csv">Export CSV</button>
      <button id="import_csv">Import CSV</button>
      <button id="new_scenario">New Scenario</button>
      <button id="load_palette">Load Palette</button>
      <button id="generate_palette">Generate Palette</button>
      <button id="scenario_options">Options</button>
      <button id="show_help">Help</button>
    </nav>
    <side>
      <layer-options></layer-options>
      <button id="toggle_stats">Show details</button>
      <button id="toggle_details">Show cell details</button>
      <button id="toggle_grid">Show grid</button>
      <div class="side_row">
        <button id="zoom_in">+</button>
        <button id="zoom_out">-</button>
        <button id="zoom_reset">Reset</button>
      </div>
      <details id="tools_wrapper">
        <summary>Tools</summary>
        <div id="tools_section" class="tools_section"></div>
      </details>
      <div>Current tool: <span id="current_tool">🚫 No tool</span></div>
      <div>Current tile: <span id="current_tile"></span></div>
      <span>Current brush:</span>
      <x-tile-element name="brush_preview"></x-tile-element >
      <tile-options></tile-options>
      <x-palette></x-palette>
    </side>
    <main name="viewport">
      <x-renderer></x-renderer>
    </main>
    <scenario-options-modal></scenario-options-modal>
    <save-scenario-modal></save-scenario-modal>
    <load-scenario-modal></load-scenario-modal>
    <help-modal></help-modal>
  </body>
</html>