-
-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
161 lines (154 loc) · 10.3 KB
/
index.html
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
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<canvas id="editor"></canvas>
<div class="right-panel">
<div id="info">
<span id="coord"> (x, y) </span> <span id="tile"> tile </span>
<div id="current">
</div>
</div>
<div id="palette">
<div id="brush" class="color">BRUSH</div>
<div id="palette-current" class="no-select">
<div id="background" class="color selectable" data-palette="background"> BKG </div>
<div id="color1" class="color selectable" data-palette="color1"> CL1
<div></div>
</div>
<div id="color2" class="color selectable" data-palette="color2"> CL2
<div></div>
</div>
<div id="color3" class="color selectable" data-palette="color3"> CL3
<div></div>
</div>
</div>
<table border="1" cellpadding="5">
<tbody class="palette-selection" class="selectable">
<tr>
<td>NES Colors</a></td>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>$0</td>
<td data-nes="0x00" class="selectable" style="color:white; background:rgb(124,124,124);"></td>
<td data-nes="0x01" class="selectable" style="color:white; background:rgb(0,0,252);"></td>
<td data-nes="0x02" class="selectable" style="color:white; background:rgb(0,0,188);"></td>
<td data-nes="0x03" class="selectable" style="color:white; background:rgb(68,40,188);"></td>
<td data-nes="0x04" class="selectable" style="color:white; background:rgb(148,0,132);"></td>
<td data-nes="0x05" class="selectable" style="color:white; background:rgb(168,0,32);"></td>
<td data-nes="0x06" class="selectable" style="color:white; background:rgb(168,16,0);"></td>
<td data-nes="0x07" class="selectable" style="color:white; background:rgb(136,20,0);"></td>
<td data-nes="0x08" class="selectable" style="color:white; background:rgb(80,48,0);"></td>
<td data-nes="0x09" class="selectable" style="color:white; background:rgb(0,120,0);"></td>
<td data-nes="0x0A" class="selectable" style="color:white; background:rgb(0,104,0);"></td>
<td data-nes="0x0B" class="selectable" style="color:white; background:rgb(0,88,0);"></td>
<td data-nes="0x0C" class="selectable" style="color:white; background:rgb(0,64,88);"></td>
<td data-nes="0x0D" class="selectable" style="color:white; background:rgb(0,0,0);"></td>
<td data-nes="0x0E" class="selectable" style="color:white; background:rgb(0,0,0);"></td>
<td data-nes="0x0F" class="selectable" style="color:white; background:rgb(0,0,0);"></td>
</tr>
<tr>
<td>$1</td>
<td data-nes="0x10" class="selectable" style="color:white; background:rgb(188,188,188);"></td>
<td data-nes="0x11" class="selectable" style="color:white; background:rgb(0,120,248);"></td>
<td data-nes="0x12" class="selectable" style="color:white; background:rgb(0,88,248);"></td>
<td data-nes="0x13" class="selectable" style="color:white; background:rgb(104,68,252);"></td>
<td data-nes="0x14" class="selectable" style="color:white; background:rgb(216,0,204);"></td>
<td data-nes="0x15" class="selectable" style="color:white; background:rgb(228,0,88);"></td>
<td data-nes="0x16" class="selectable" style="color:white; background:rgb(248,56,0);"></td>
<td data-nes="0x17" class="selectable" style="color:white; background:rgb(228,92,16);"></td>
<td data-nes="0x18" class="selectable" style="color:white; background:rgb(172,124,0);"></td>
<td data-nes="0x19" class="selectable" style="color:white; background:rgb(0,184,0);"></td>
<td data-nes="0x1A" class="selectable" style="color:white; background:rgb(0,168,0);"></td>
<td data-nes="0x1B" class="selectable" style="color:white; background:rgb(0,168,68);"></td>
<td data-nes="0x1C" class="selectable" style="color:white; background:rgb(0,136,136);"></td>
<td data-nes="0x1D" class="selectable" style="color:white; background:rgb(0,0,0);"></td>
<td data-nes="0x1E" class="selectable" style="color:white; background:rgb(0,0,0);"></td>
<td data-nes="0x1F" class="selectable" style="color:white; background:rgb(0,0,0);"></td>
</tr>
<tr>
<td>$2</td>
<td data-nes="0x20" class="selectable" style="color:white; background:rgb(248,248,248);"></td>
<td data-nes="0x21" class="selectable" style="color:white; background:rgb(60,188,252);"></td>
<td data-nes="0x22" class="selectable" style="color:white; background:rgb(104,136,252);"></td>
<td data-nes="0x23" class="selectable" style="color:white; background:rgb(152,120,248);"></td>
<td data-nes="0x24" class="selectable" style="color:white; background:rgb(248,120,248);"></td>
<td data-nes="0x25" class="selectable" style="color:white; background:rgb(248,88,152);"></td>
<td data-nes="0x26" class="selectable" style="color:white; background:rgb(248,120,88);"></td>
<td data-nes="0x27" class="selectable" style="color:white; background:rgb(252,160,68);"></td>
<td data-nes="0x28" class="selectable" style="color:white; background:rgb(248,184,0);"></td>
<td data-nes="0x29" class="selectable" style="color:white; background:rgb(184,248,24);"></td>
<td data-nes="0x2A" class="selectable" style="color:white; background:rgb(88,216,84);"></td>
<td data-nes="0x2B" class="selectable" style="color:white; background:rgb(88,248,152);"></td>
<td data-nes="0x2C" class="selectable" style="color:white; background:rgb(0,232,216);"></td>
<td data-nes="0x2D" class="selectable" style="color:white; background:rgb(120,120,120);"></td>
<td data-nes="0x2E" class="selectable" style="color:white; background:rgb(0,0,0);"></td>
<td data-nes="0x2F" class="selectable" style="color:white; background:rgb(0,0,0);"></td>
</tr>
<tr>
<td>$3</td>
<td data-nes="0x30" class="selectable" style="color:white; background:rgb(252,252,252);"></td>
<td data-nes="0x31" class="selectable" style="color:white; background:rgb(164,228,252);"></td>
<td data-nes="0x32" class="selectable" style="color:white; background:rgb(184,184,248);"></td>
<td data-nes="0x33" class="selectable" style="color:white; background:rgb(216,184,248);"></td>
<td data-nes="0x34" class="selectable" style="color:white; background:rgb(248,184,248);"></td>
<td data-nes="0x35" class="selectable" style="color:white; background:rgb(248,164,192);"></td>
<td data-nes="0x36" class="selectable" style="color:white; background:rgb(240,208,176);"></td>
<td data-nes="0x37" class="selectable" style="color:white; background:rgb(252,224,168);"></td>
<td data-nes="0x38" class="selectable" style="color:white; background:rgb(248,216,120);"></td>
<td data-nes="0x39" class="selectable" style="color:white; background:rgb(216,248,120);"></td>
<td data-nes="0x3A" class="selectable" style="color:white; background:rgb(184,248,184);"></td>
<td data-nes="0x3B" class="selectable" style="color:white; background:rgb(184,248,216);"></td>
<td data-nes="0x3C" class="selectable" style="color:white; background:rgb(0,252,252);"></td>
<td data-nes="0x3D" class="selectable" style="color:white; background:rgb(216,216,216);"></td>
<td data-nes="0x3E" class="selectable" style="color:white; background:rgb(0,0,0);"></td>
<td data-nes="0x3F" class="selectable" style="color:white; background:rgb(0,0,0);"></td>
</tr>
</tbody>
</table>
</div>
<input id="grid" type="checkbox" checked="checked">Show grid lines</input>
<hr>
<label for="nesfile">Upload</label>
<input type="file" id="nesfile" name="nesfile" />
<br>
<label for="nesfilename">NES Sprite Name</label>
<input id="nesfilename" type="text" />
<button id="nes">Save NES</button>
<br>
<button id="image">Save PNG</button>
<button id="new">New sprite sheet</button>
<hr>
<pre>
$3F00 Universal background color
$3F01-$3F03 Background palette 0
$3F05-$3F07 Background palette 1
$3F09-$3F0B Background palette 2
$3F0D-$3F0F Background palette 3
$3F11-$3F13 Sprite palette 0
$3F15-$3F17 Sprite palette 1
$3F19-$3F1B Sprite palette 2
$3F1D-$3F1F Sprite palette 3
</pre>
</div>
<script src="main.js"></script>
</body>
</html>