-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
111 lines (111 loc) · 5.48 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
<head>
<title>Palette Editor</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;900&display=swap" rel="stylesheet">
<script src="./app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/brs-js/dist/dist.js"></script>
</head>
<body>
<h1>Palette Editor</h1>
<p>Keybinds and Usage are at the bottom of the page.</p>
<div class="picker">
<div class="eyedrop-container">
<div class="eyedrop">
<div class="instructions">
<ol>
<li><b>Paste an image</b> from your clipboard.</li>
<li><b>Hover</b> over the colors to preview.</li>
<li><b>Click</b> on color to add to palette.</li>
<li>Click, drag, and scroll to add multiple.</li>
<li>Right click mid-drag for grid selection.</li>
</ol>
</div>
<canvas id="selector"></canvas>
<canvas id="overlay"></canvas>
<div id="dropper"></div>
</div>
</div>
</div>
<h1 class="palette-title">Palette <div id="downloadButton" class="button">download preset</div>
</h1>
<input type="color" id="colorPicker" value="#ffffff">
<div id="palette"></div>
<div class="preview">
<!-- parrot color test image, you can hover over this to see the original -->
<canvas id="testImg"></canvas>
<img id="parrot" crossorigin="anonymous" src="https://i.imgur.com/zvWTirj.png">
</div>
<div class="info" id="noinfo">
<a id="download" style="display: none"></a>
<h1>Info</h1>
<div class="info-container">
<div class="info-split">
<h2>Usage</h2>
<ul>
<li>Click + buttons to <b>add groups/colors</b> to the palette.</li>
<li>Click the group stub or a color to <b>select a color</b>.</li>
<li>Clicking on the color selector image will <b>modify the selected color</b> or <b>add a new color</b> to the group.</li>
<li>Left click, drag, and scroll on the color selector image to <b>add multiple colors</b>.</li>
<li>Right click while dragging to toggle between <b>2d grid of colors</b> selection.</li>
<li>Selected groups/colors can be <b>re-arranged</b> with the below keybinds.</li>
<li>Paste or drag an image to <b>upload to the color selector</b>.</li>
<li>Click parrot image to <b>copy preview image</b>.</li>
<li>Shift+Click parrot image to <b>download preview save</b>.</li>
<li>
The following formats can be <b>dragged in or pasted</b> to replace the palette:
<ul>
<li><b>Brickadia preset</b> (.bp)</li>
<li><b>Blockland colorset</b> (colorSet.txt)</li>
<li><b>PAL file</b> (.pal)</li>
<li><b>Paint.net palette</b></li>
<li><b>GIMP palette</b> (.gpl)</li>
<li><b>palette.brickadia.dev preview</b> (.png)</li>
</ul>
</li>
<li><u>Brickadia will not load any palettes larger than 16x16</u>.</li>
<li>
<u>Image URLs cannot be pasted in</u> for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image" target="_blank" rel="noopener noreferrer">security reasons</a>.
Copy the image itself before pasting.
</li>
<li>Click <a href="#noinfo">here</a> to hide info.</li>
</ul>
</div>
<div class="info-split">
<h2>Keybinds</h2>
<table class="keybinds">
<thead><tr><th>Key</th><th>Description</th></tr></thead>
<tbody>
<tr><td>Ctrl+Z</td><td><b>Undo</b></td></tr>
<tr><td>Ctrl+Shift+Z</td><td><b>Redo</b></td></tr>
<tr><td>Ctrl+Shift+S</td><td><b>Download</b> as Brickadia preset</td></tr>
<tr><td>Enter, Shift+E</td><td>Next group, new if last group/no other groups</td></tr>
<tr><td>Space</td><td><b>Unselect</b> selected</td></tr>
<tr><td>R</td><td><b>Rename</b> selected group</td></tr>
<tr><td>Shift+R</td><td>Change palette <b>description</b></td></tr>
<tr><td>C</td><td>Show a <b>color picker</b> to edit a single color</td></tr>
<tr><td>E</td><td>Insert <b>new color</b> after selected color</td></tr>
<tr><td>W/S</td><td><b>Move selector</b> up/down in group</td></tr>
<tr><td>A/D</td><td><b>Move selector</b> left/Right among groups</td></tr>
<tr><td>Shift+W/S</td><td><b>Swap color</b> up/down in group</td></tr>
<tr><td>Shift+A/D</td><td><b>Swap color</b> to group left/right or move group</td></tr>
<tr><td>Ctrl+A/D</td><td><b>Move color</b> to group left/right</td></tr>
<tr><td>Delete, Shift+X</td><td><b>Remove color</b>, will remove group if group is empty</td></tr>
<tr><td>Ctrl+Shift+Delete</td><td><b>Reset</b> palette</td></tr>
<tr><td>Shift+Drag</td><td>Snap drag selections to <b>45 deg angles</b></td></tr>
<tr><td>Alt+Drag</td><td>Fit drag to <b>2d grid</b></td></tr>
<tr><td>Alt+Shift+Drag</td><td>Fit drag to <b>square 2d grid</b></td></tr>
</tbody>
</table>
</div>
</div>
<div style="padding-left: 14px;">
<h2>Example images (Click to demo)</h2>
<div class="images">
<img src="https://i.imgur.com/qzF7dNY.png" crossorigin="anonymous">
<img src="https://i.imgur.com/wdUUC5I.png" crossorigin="anonymous">
</div>
</div>
</div>
</body>
</html>