SkinEditor/index.html at master · SomeKitten/SkinEditor · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/ico" href="pitou-icon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Some Kitten's Skin Editor</title>
</head>

<body>
  <script type="module" src="/src/main.ts"></script>
  <!-- TODO cache current state of layers for when returning to page -->
  <!-- TODO add new skin button / option -->
  <!-- TODO option to change background colour -->
  <!-- TODO create more todos based on https://www.planetminecraft.com/pmcskin3d/ features -->
  <!-- TODO create a basic colour picker alternative -->
  <!-- TODO make colour picker appear above hotbar selection when hovering -->
  <div id="color-picker">
    <div class="color-value">
      <p class="color-label">HUE</p>
      <canvas id="color-h" class="color-canvas" width="256" height="32"></canvas>
      <input type="text" id="input-h" />
      <div class="arrow-div">
        <img src="res/icons/up_arrow.png" alt="" class="up arrow-h" draggable="false" />
        <img src="res/icons/down_arrow.png" alt="" class="down arrow-h" draggable="false" />
      </div>
    </div>
    <div class="color-value">
      <p class="color-label">SATURATION</p>
      <canvas id="color-s" class="color-canvas" width="256" height="32"></canvas>
      <input type="text" id="input-s" />
      <div class="arrow-div">
        <img src="res/icons/up_arrow.png" alt="" class="up arrow-s" draggable="false" />
        <img src="res/icons/down_arrow.png" alt="" class="down arrow-s" draggable="false" />
      </div>
    </div>
    <div class="color-value">
      <p class="color-label">LIGHTNESS</p>
      <canvas id="color-l" class="color-canvas" width="256" height="32"></canvas>
      <input type="text" id="input-l" />
      <div class="arrow-div">
        <img src="res/icons/up_arrow.png" alt="" class="up arrow-l" draggable="false" />
        <img src="res/icons/down_arrow.png" alt="" class="down arrow-l" draggable="false" />
      </div>
    </div>
    <div class="color-value">
      <p class="color-label">RED</p>
      <canvas id="color-r" class="color-canvas" width="256" height="32"></canvas>
      <input type="text" id="input-r" />
      <div class="arrow-div">
        <img src="res/icons/up_arrow.png" alt="" class="up arrow-r" draggable="false" />
        <img src="res/icons/down_arrow.png" alt="" class="down arrow-r" draggable="false" />
      </div>
    </div>
    <div class="color-value">
      <p class="color-label">GREEN</p>
      <canvas id="color-g" class="color-canvas" width="256" height="32"></canvas>
      <input type="text" id="input-g" />
      <div class="arrow-div">
        <img src="res/icons/up_arrow.png" alt="" class="up arrow-g" draggable="false" />
        <img src="res/icons/down_arrow.png" alt="" class="down arrow-g" draggable="false" />
      </div>
    </div>
    <div class="color-value">
      <p class="color-label">BLUE</p>
      <canvas id="color-b" class="color-canvas" width="256" height="32"></canvas>
      <input type="text" id="input-b" />
      <div class="arrow-div">
        <img src="res/icons/up_arrow.png" alt="" class="up arrow-b" draggable="false" />
        <img src="res/icons/down_arrow.png" alt="" class="down arrow-b" draggable="false" />
      </div>
    </div>
    <div class="color-value">
      <p class="color-label">ALPHA</p>
      <canvas id="color-a" class="color-canvas" width="256" height="32"></canvas>
      <input type="text" id="input-a" />
      <div class="arrow-div">
        <img src="res/icons/up_arrow.png" alt="" class="up arrow-a" draggable="false" />
        <img src="res/icons/down_arrow.png" alt="" class="down arrow-a" draggable="false" />
      </div>
    </div>
    <div class="color-value">
      <canvas id="color-result" class="color-canvas" width="256" height="32"></canvas>
      <input type="text" id="input-result" />
    </div>
  </div>
  <div id="top-bar">
    <div id="top-bar-undo" class="top-bar-element"><img class="top-bar-icon" src="res/icons/undo.png" alt=""></div>
    <div id="top-bar-redo" class="top-bar-element"><img class="top-bar-icon" src="res/icons/redo.png" alt=""></div>
    <div id="top-bar-toggle-outer" class="top-bar-element"><img class="top-bar-icon"
        src="res/icons/toggle_skin_outer2.png" alt=""></div>
    <div id="top-bar-toggle-animate" class="top-bar-element"><img class="top-bar-icon" src="res/icons/play.png" alt="">
    </div>
    <div class="top-bar-divider"></div>
    <div id="top-bar-save" class="top-bar-element"><img class="top-bar-icon" src="res/icons/save.png" alt=""></div>
  </div>
  <div id="controls">
    <table>
      <tr>
        <td colspan="2">Drag a skin in to start working on it!</td>
      </tr>
      <tr>
        <td colspan="2">Hover for keybind list!</td>
      </tr>
      <tr>
        <td colspan="2">Please give feedback! <a href="https://github.com/SomeKitten/SkinEditor" target="_blank"
            draggable="false">GitHub
            Page</a></td>
      </tr>
      <tr>
        <td class="controls-left">Left Click</td>
        <td class="controls-right">Paint / orbit camera</td>
      </tr>
      <tr>
        <td class="controls-left">Right Click</td>
        <td class="controls-right">Erase</td>
      </tr>
      <tr>
        <td class="controls-left">Middle Click</td>
        <td class="controls-right">Get colour under cursor</td>
      </tr>
      <tr>
        <td class="controls-left">Scroll</td>
        <td class="controls-right">Select hotbar colour</td>
      </tr>
      <tr>
        <td class="controls-left">Control</td>
        <td class="controls-right">Paint under outer layer</td>
      </tr>
      <tr>
        <td class="controls-left">Alt</td>
        <td class="controls-right">Click to enable/disable body parts</td>
      </tr>
      <tr>
        <td class="controls-left">Shift + Scroll or<br>Control + Scroll</td>
        <td class="controls-right">Zoom in and out in 2D and 3D</td>
      </tr>
      <tr>
        <td class="controls-left">Shift + Click</td>
        <td class="controls-right">Force camera to orbit</td>
      </tr>
    </table>
  </div>
  <canvas id="hotbar" height="24px" width="184px"></canvas>
  <img src="res/checkerboard.png" alt="" id="alpha-checker" />
  <img src="res/checkerboard.png" alt="" id="result-checker" />
  <div id="texture-area">
    <div id="toggle-parts-container">
      <img id="toggle-part-head" class="toggle-part" src="res/icons/parts/head.png" alt="">
      <img id="toggle-part-right-arm" class="toggle-part" src="res/icons/parts/right_arm.png" alt="">
      <img id="toggle-part-body" class="toggle-part" src="res/icons/parts/body.png" alt="">
      <img id="toggle-part-left-arm" class="toggle-part" src="res/icons/parts/left_arm.png" alt="">
      <img id="toggle-part-right-leg" class="toggle-part" src="res/icons/parts/right_leg.png" alt="">
      <img id="toggle-part-left-leg" class="toggle-part" src="res/icons/parts/left_leg.png" alt="">
    </div>

    <!-- TODO skin toggle hover will make outlines appear on 2D canvas -->
    <!-- TODO don't allow show-canvas to be smaller than right side -->
    <div id="texture-skin-type-container">
      <div id="texture-skin-type-classic" class="texture-skin-type"><img class="icon" src="res/icons/classic.png"
          alt="">Classic Skin</div>
      <div id="texture-skin-type-slim" class="texture-skin-type"><img class="icon" src="res/icons/slim.png" alt="">Slim
        Skin
      </div>
    </div>

    <img src="res/skin_checkerboard.png" alt="" id="texture-checker" />
    <canvas id="show-canvas"></canvas>

    <div id="layer-options">
      <div id="add-layer" class="layer-option"><img class="icon" src="res/icons/plus.png" alt=""></div>
      <div id="remove-layer" class="layer-option"><img class="icon" src="res/icons/minus.png" alt=""></div>
    </div>
    <!-- TODO allow scrolling if layers go below screen -->
    <!-- TODO allow toggling layer visibility -->
    <div id="layers"></div>
  </div>
  <!-- TODO pan for 2d view -->
  <!-- TODO tools such as rectangle fill and rectangle clear (test with double left/right click) -->
  <div id="save-div" hidden>
    <div id="save-inner-div">
      <p>Right-click on the skin texture,<br>then select "save as" to save!</p>
      <img id="texture-image" width="256" height="256" src="" alt="">
      <p>Left-click anywhere to go back!</p>
    </div>
  </div>
  <div id="drag-overlay" hidden>DRAG AND DROP TO LOAD IMAGE TO NEW LAYER</div>
  <div id="skin-type-select">
    <p id="skin-type-select-info">Please Select a Skin Type</p>
    <div id="skin-type-classic" class="skin-type">
      <div id="type-classic-inner">
        <p>CLASSIC</p>
        <img src="res/steve_render.png" alt="">
      </div>
    </div>
    <div id="skin-type-slim" class="skin-type">
      <div id="type-slim-inner">
        <p>SLIM</p>
        <img src="res/alex_render.png" alt="">
      </div>
    </div>
  </div>
</body>

</html>