tilemap-editor/index.html at master · oneManDev-io/tilemap-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
<!DOCTYPE html>
<html lang="en" data-theme="custom">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <meta name="description" content="Create your tile map with this online Tile Map Editor" />

  <link rel="stylesheet" href="css/styles.css" />
  <link rel="stylesheet" href="css/output.css">
  <!-- <script src="js/init.js" defer></script>
  <script src="js/tools.js" defer></script>
  <script src="js/scripts.js" defer></script>
  <script src="js/tileSelect.js" defer></script>
  <script src="js/old.js" defer></script>
  <script src="js/data.js" defer></script> -->
  <script src="build/init.js" defer></script>
  <script src="build/tools.js" defer></script>
  <script src="build/scripts.js" defer></script>
  <script src="build/tileSelect.js" defer></script>
  <script src="build/old.js" defer></script>
  <script src="build/data.js" defer></script>
  <title>Tilemap Editor</title>
</head>

<body>
  <div class="container">
    <div class="card">
      <header>
        <h1>Tilemap Editor</h1>
        <div class="file-menu">
          <button class="button-as-link" onclick="clearCanvas()">Clear Canvas</button>
          <div class="inputContainer">
            <input class="inputfile" type="file" id="importJSON" name="importJSON">
          </div>
          <label for="file" class="inputLabel">Import JSON</label>
          <!-- <button class="primary-button" onclick="importImage()">Import Image</button> -->
          <button class="primary-button" onclick="exportImage()">Export Image</button>
          <button class="primary-button" onclick="exportJSON()">Export JSON</button>
        </div>
      </header>
      <div class="card_body">
        <!-- Tileset Selection Based on Image -->
        <aside>
          <label>Tiles</label><br>

          <div class="form-control w-full max-w-xs">
            <label class="label">
              <span class="label-text">Pick an Image</span>
            </label>
            <input type="file" id="imgUpload" class="file-input file-input-sm file-input-bordered w-full max-w-xs" />
          </div>

          <div class="tileset-container">
            <div class="selectionCanvas mt-4">
              <canvas id="tileset-canvas"></canvas>
            </div>
            <img draggable="false" id="tileset-source" crossorigin />
            <div class="tileset-container-selection"></div>
          </div>

        </aside>
        <main class="card_right-column">
          <canvas id="editor-canvas" width="480" height="480"></canvas>
          <p class="instructions">
            <strong>Click/Drag</strong> to paint. Hold <strong>CTRL+Z</strong> to undo,
            <!-- <strong>Ctrl+Shift+Z</strong> to redo. -->
          </p>

          <div>
            <label>Editing Layer:</label>
            <ul class="layers">
              <li>
                <button onclick="setLayer(2)" class="layer" tile-layer="2">Top Layer</button>
                <span class="padlock" onclick="setLayerIsBlock(2)" padlock-layer="2"></span>
              </li>
              <li>
                <button onclick="setLayer(1)" class="layer" tile-layer="1">Middle Layer</button>
                <span class="padlock" onclick="setLayerIsBlock(1)" padlock-layer="1"></span>
              </li>
              <li>
                <button onclick="setLayer(0)" class="layer" tile-layer="0">Bottom Layer</button>
                <span class="padlock" onclick="setLayerIsBlock(0)" padlock-layer="0"></span>
              </li>
            </ul>
            <div class="credits"></div>
          </div>

        </main>

        <aside>
          <label>Side Menu</label>
          <div class="side-menu">
            <div class="tools">
              <div class="btn-group brush-select">
                <div class="tooltip tooltip-bottom" data-tip="Brush | Shortcut: B">
                  <button name="options" data-title="" data-select="1" class="btn brush-option btn-active"></button>
                </div>
                <div class="tooltip tooltip-bottom" data-tip="Eraser | Shortcut: E">
                  <button name="options" data-title="" data-select="2" class="btn brush-option"></button>
                </div>
                <div class="tooltip tooltip-bottom" data-tip="Bucket Fill | Shortcut: G">
                  <button name="options" data-title="" data-select="3" class="btn brush-option"></button>
                </div>
                <div class="tooltip tooltip-bottom" data-tip="Eye Dropper | Shortcut: I">
                  <button name="options" data-title="" data-select="4" class="btn brush-option"></button>
                </div>
              </div>
            </div>

            <div class="form-control mt-1">
              <label class="input-group input-group-sm">
                <span>Width</span>
                <input type="text" value="480" class="inputWidth input input-bordered input-sm" />
              </label>
            </div>

            <div class="form-control mt-1">
              <label class="input-group input-group-sm">
                <span>Height</span>
                <input type="text" value="480" class="inputHeight input input-bordered input-sm" />
              </label>
            </div>

            <div class="form-control mt-1">
              <label class="input-group input-group-sm">
                <span>Size</span>
                <input type="text" value="32" class="pixelSize input input-bordered input-sm" />
              </label>
            </div>
          </div>
        </aside>

      </div>
    </div>
  </div>

</body>

</html>