From 7c9bc92627fdf1ddd9bd7663eb570a2c07e07915 Mon Sep 17 00:00:00 2001
From: "Eevee (Evelyn Woods)" <eevee.git@veekun.com>
Date: Thu, 10 Sep 2020 20:24:20 -0600
Subject: [PATCH] Start on editor UI; introduce some tools; implement adjust
 and force floors

---
 compat-lynx.png => icons/compat-lynx.png | Bin
 compat-ms.png => icons/compat-ms.png     | Bin
 icons/compat-notcc2.png                  | Bin 0 -> 716 bytes
 icons/help.png                           | Bin 0 -> 266 bytes
 icons/tool-adjust.png                    | Bin 0 -> 299 bytes
 icons/tool-bg-selected.png               | Bin 0 -> 115 bytes
 icons/tool-bg-unselected.png             | Bin 0 -> 158 bytes
 icons/tool-box.png                       | Bin 0 -> 155 bytes
 icons/tool-connect.png                   | Bin 0 -> 276 bytes
 icons/tool-fill.png                      | Bin 0 -> 207 bytes
 icons/tool-force-floors.png              | Bin 0 -> 226 bytes
 icons/tool-line.png                      | Bin 0 -> 154 bytes
 icons/tool-pencil.png                    | Bin 0 -> 184 bytes
 icons/tool-wire.png                      | Bin 0 -> 260 bytes
 index.html                               |  24 ++
 js/main.js                               | 297 ++++++++++++++++++++---
 style.css                                |  46 +++-
 17 files changed, 329 insertions(+), 38 deletions(-)
 rename compat-lynx.png => icons/compat-lynx.png (100%)
 rename compat-ms.png => icons/compat-ms.png (100%)
 create mode 100644 icons/compat-notcc2.png
 create mode 100644 icons/help.png
 create mode 100644 icons/tool-adjust.png
 create mode 100644 icons/tool-bg-selected.png
 create mode 100644 icons/tool-bg-unselected.png
 create mode 100644 icons/tool-box.png
 create mode 100644 icons/tool-connect.png
 create mode 100644 icons/tool-fill.png
 create mode 100644 icons/tool-force-floors.png
 create mode 100644 icons/tool-line.png
 create mode 100644 icons/tool-pencil.png
 create mode 100644 icons/tool-wire.png

diff --git a/compat-lynx.png b/icons/compat-lynx.png
similarity index 100%
rename from compat-lynx.png
rename to icons/compat-lynx.png
diff --git a/compat-ms.png b/icons/compat-ms.png
similarity index 100%
rename from compat-ms.png
rename to icons/compat-ms.png
diff --git a/icons/compat-notcc2.png b/icons/compat-notcc2.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf0772c903c80e94bf5852e017c0201cf07d943a
GIT binary patch
literal 716
zcmWkrUq}>T5TENbR?Ap?=@coq0y}%K^}*WUpj%J$uCQY@qBZGg^JyWWtB2Yk%~i3k
zd~m6d1^?jo)LlLJi9y#x4_i=dlC%=l*^4bga2Fa&C{158%r^rw-^~1eGnVXZud1xA
z1c0h|M@*u={=YFn`o`w&+SCQoQo9H_r*56bbIH@)ZIYwX5RuU|4GW^Dv4+6NJYyK>
z`^YF6$8iJ&IgXPO2?RjHU;wF_Xz(0^qF~a#kU<o59V8S%1}Feg7_b0%)MzrSnzTp<
zkWnHQAp~5c;uH`J)NS-MK$Ere;3I^jf@zwV0iNeUL>3a+Y!<glh^A|SqJT<=aNx*b
z>LHZurj`$3CR22E$B;1Vp-f~MflufX*q|0Y(s8>BL_kGJ=OvG5Hkd2}emIPw5a#o!
zX%>Xh1tbicMw?{qtm)=SA#WAzEFkKd=G&HI=}1(mpxIX1HWk-YFe^J5!AWzT!BLR5
zL?MLH5{b)O3GfX-optG4+CzaNr9@zXrTqDM4v-e)!#<JdjXV)t7SaWo2Pkrkrh@AN
zT^+$^!H`t?#T|@YNl_Zzcr4m|{N4TKX!TJ2?($^K-kNhSqK`78zfL^G*;7ruI}Q!Z
zZjO_o8?D15ecJfN7Mvu(3(Y&fuI+g|`ugNermUiNralrF-Z1W^W(S&|q*vDt^rtUR
z9}NDER6qZ-*)VzR?Dt(AVG>}Y^0VpB4;LRKR}Qa6U}!S37+8GS_VZ|2%DeiF-v?&^
zD@rh5xAHOAzjdh#{w_?&@rrBZ!kY$<UD`h1_;%pamyxm7z<O8Dv?>JJU-kCn-p{0#
m<~J6m_M7glDd$J2l$+RwzQ(}`@5uFKiV)&$ow1yly7LeB&q1UB

literal 0
HcmV?d00001

diff --git a/icons/help.png b/icons/help.png
new file mode 100644
index 0000000000000000000000000000000000000000..da96b5b5a19285faaf1188aa63fa631d26519845
GIT binary patch
literal 266
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfv#^NA%Cx&(BWL^R}(g8jpu01_H
zn|<>(Z`*$N{{1g4;onv#e7jNi`^Vb<|Nr}1ALa%so9pS~7@~20>&1<{%?1Lj0Vx|B
zW?QIkGH2jV;ItNw_~LPL`L-!f(wU9Qq?p)k_gn3K^yU1znC<>c-{`&b$yk*dv0!B~
zkC(&T12Sd>oGP264)P2CtZe0VSiAo-m)^pR+SIW69Sdh9{Sa|@#Vq1`kJaa>hX=#S
z@4K#4C786lFihC<Krp40VbQLyoG13~xb{=xcbMIT*So&`$rmW-_{AvpI>a+aVS7E$
Op$wj`elF{r5}E+Hm~N^7

literal 0
HcmV?d00001

diff --git a/icons/tool-adjust.png b/icons/tool-adjust.png
new file mode 100644
index 0000000000000000000000000000000000000000..55e355141e89f602062274502ebcd8c6f4d6e13c
GIT binary patch
literal 299
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfv#^NA%Cx&(BWL^R}5&=FTu0UE!
zN=mIo-p6K(?_s63XU3fgk2cTz`lrmm5~QId$S;_|;n|HeAZLrGi(`n!`K=cX`I-%Q
zSTDSne&Xz$E+FnO?S|t^MkP~r2M>etgV*0*m{s=rN>1G--P?@+zI(8FSR@BtRgAf>
zptAC@#T&k*Q`YRt<J+-h(#;<E2_>fm@}31Oozj?QUgcSTQowk1oaUvoX9Omxe`#b0
zDCK**`#S%EGkm%y8&3RVG3M^LZ1eM7nT~_c%C8r5lO6UfFP@$pEq-j$GX9=b8>c*C
sw|o^kRYg`VX!Wb>uFNe@<o|!*<Y7}(xBgdn0_c7QPgg&ebxsLQ05|J&l>h($

literal 0
HcmV?d00001

diff --git a/icons/tool-bg-selected.png b/icons/tool-bg-selected.png
new file mode 100644
index 0000000000000000000000000000000000000000..f40b2a8c99172e7c09ea3c28ad80516f427dbf44
GIT binary patch
literal 115
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnH3?%tPCZz)@#^NA%Cx&(BWL^R}oB=)|u01_H
zo40Mhd;fmi!2lzmpoFK3V~E7%<P%Y>j691LCJ30FVlZ6LAjqJf<eP9pbOlHagQu&X
J%Q~loCIAi>9|QmZ

literal 0
HcmV?d00001

diff --git a/icons/tool-bg-unselected.png b/icons/tool-bg-unselected.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2e83b79bc2c78d801aa76132e7304a15cc314a2
GIT binary patch
literal 158
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfv#^NA%Cx&(BWL^R}`~f~8u4ZOt
zUS3{lX=yz@J)5^}uVi}o8YpG!>EaloasKToLs13=9_EV=8bX++POw^0@4u#(nJw?n
z`w5%49$r|Wt9oIY*a_oH?coW<Q<$!|2;?XTpH|dkEp|Q{=+6)bG>E~|)z4*}Q$iB}
Dv4Jv$

literal 0
HcmV?d00001

diff --git a/icons/tool-box.png b/icons/tool-box.png
new file mode 100644
index 0000000000000000000000000000000000000000..1d705b72676eb6d9a60fbf6e91bccf96939143b2
GIT binary patch
literal 155
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnH3?%tPCZz)@#^NA%Cx&(BWL^R}JOMr-u0UE!
zO6p5X__rH%A1lg*K#EF&{DK)Ap4~_Tatu6O977~7Cnqcrv2e&d#vQ=+`}&0o0UJ)N
w4P719)Ve9-WCULs<Ark-JGdX@ExJ+8@bsfH8=pY^9iUzYPgg&ebxsLQ01`$pxBvhE

literal 0
HcmV?d00001

diff --git a/icons/tool-connect.png b/icons/tool-connect.png
new file mode 100644
index 0000000000000000000000000000000000000000..a1246286e252a418705656ba9f29ca9dbee3942d
GIT binary patch
literal 276
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfv#^NA%Cx&(BWL^R}Dgizru0UE!
zO3KU2D=jUpP}gC)r|0^p(9PSnA8XFJd;k8uO>_SL|KC+;yBVapB*-tA!Qt7BG$3c9
zr;B5V#`)xg1)>5XE>Dfq)(ANW3V5H+a0v{UHBGE<P0L0VovX0{0*Xg0?jBtl)X*rn
z(52|vnN9~TPfnM;46~9YF3PGmoL}3M;m0n0{KSclB$>rqwro+@)Uc(ZvT`fKB(aZ9
ziq0RMRHln^aY!0<DO+wUSUh3jgEE!v9pZVncI*|nsp;U%%^D!9u5rM@oPps=jOdx?
TecC=i$1!-i`njxgN@xNAHpgPx

literal 0
HcmV?d00001

diff --git a/icons/tool-fill.png b/icons/tool-fill.png
new file mode 100644
index 0000000000000000000000000000000000000000..5ab1f3a5ff695fae089e84b89f5641cc132776d2
GIT binary patch
literal 207
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfv#^NA%Cx&(BWL^R}LIFM@u0UE!
zO6p-){Fj#SZ>tl&-Kg8KQgaGOX-SY@FoVOh8)-mJoTrOph{pN77Z36_D2OyC-ecns
zj!<j3&)Xxs;`jPTQ=d1saNE{-^7}eRNOs$wC>7&*q>{42dBdT{R-E@XSM7Mm=TmS;
y*NTCiHGseAnxn_0E$xgElgiAGZPQ&>^M=_sn)fz?@P=@pO$?r{elF{r5}E)k9Yxas

literal 0
HcmV?d00001

diff --git a/icons/tool-force-floors.png b/icons/tool-force-floors.png
new file mode 100644
index 0000000000000000000000000000000000000000..50860608284e70260233ddd9f9566a24a57ff19b
GIT binary patch
literal 226
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfv#^NA%Cx&(BWL^R}`~f~8u0UE!
zN=mIozU`Uu|NsBrFLmDzQdbh>7tG-B>_!@pQ{w637@~20>x7G(4F)_evw5r5a?kKv
z@RI518~e%fOQ$kBvg|#7T(wfAWxi4ek5HK2o2V5^%Z@$RaO%KWNu7HV2Y#+w<H69-
zxb(_2uUxAVm$M6>1-l2W_nFJM?3~2TlA`#kmmc<2%MUv&{CGFoY1`X}*Y7`NIkHxm
U`EQYyH_(0tPgg&ebxsLQ00V(ln*aa+

literal 0
HcmV?d00001

diff --git a/icons/tool-line.png b/icons/tool-line.png
new file mode 100644
index 0000000000000000000000000000000000000000..01a9650fc47ac54ffdaef1d6f5d14d0139445bc9
GIT binary patch
literal 154
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnH3?%tPCZz)@#^NA%Cx&(BWL^R}oB=)|u0UE!
zO6uE<y6W?9R)bWO1o;IsI6S+N2ILrdx;TbNTux3{pqtQQctd6Z&q~e!H;IrI(Pe53
vUYngV*;g<;4w)h8ov`fCnS_D`8-FwA3bC|&c(U#+P&b38tDnm{r-UW|POB}m

literal 0
HcmV?d00001

diff --git a/icons/tool-pencil.png b/icons/tool-pencil.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8f512e61967201ddb7d3fd0f7320342f56f43e8
GIT binary patch
literal 184
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfv#^NA%Cx&(BWL^R}LIFM@u0UE!
zO3KX4?B1q155wZWw1lgjKDrR3v?Rzcn8D%MjWi&~-P6S}MB{vN!U9bJ5r?P7QqqgK
zIwUj~YYB3ixd|qe@Rp_=&{hzVQfdfKm>`kZmDjRSa~H#^>yi>vFFJJxa@yLkW=hxd
ZFw}bRsegPM`WR>=gQu&X%Q~loCIIYoG@1Ya

literal 0
HcmV?d00001

diff --git a/icons/tool-wire.png b/icons/tool-wire.png
new file mode 100644
index 0000000000000000000000000000000000000000..2eceeb6ea8dafd95fc8fb30ec2c0f4aecf8d8861
GIT binary patch
literal 260
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfv#^NA%Cx&(BWL^R}q5(c3u0UE!
zN-8Zat*57Fo#(0ZMgQ*JzrQs0<#~|mk|4ie28U-i(tw-^o-U3d8t1o8FyuR|z~lOn
z*P*wn<(;TdwW@WsiiN}M7x({jv|dU`KY8WfS^x9Lj_us9dPOGdiiDFx6r=rt(p<MH
zErvLAhl8x4o;zOm+=yCqPNB~<=b(DOqsI2AiksnzD_uUR9DUz5Ws<7TBmTDK7ccRC
zK6U-V)!m7CFWVTSjnk^{9J84(``pP|Z%*x}^`F_q{%I9+8cpv7x{blp)z4*}Q$iB}
Dr4MEl

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index f06ca34..ffdab55 100644
--- a/index.html
+++ b/index.html
@@ -106,6 +106,30 @@
         </header>
         <div class="level"><!-- level canvas and any overlays go here --></div>
         <div class="controls">
+            <!--
+            <p style>
+                Tip: Right click to color drop.<br>
+                Tip: Ctrl-click with terrain to replace only the current tile's terrain, rather than overwriting the whole tile.
+            </p>
+
+            <p>Layer: [all/auto] [terrain] [item] [actor] [overlay]</p>
+
+            <p>Actor direction: [north] [south] [east] [west]</p>
+
+            <p>[ ] Show connections</p>
+            <p>[ ] Toggle green objects</p>
+            <p>[ ] Show monster pathing</p>
+            <p>[ ] Show circuits???</p>
+
+            <pre>
+            Metadata: 
+            xxx / yyy chips required
+            Time limit: [____]
+            Title: [__________]
+            Author: [__________]
+            map size
+            </pre>
+            -->
         </div>
         <div class="palette"></div>
         <!-- TODO:
diff --git a/js/main.js b/js/main.js
index f3511f8..11cb184 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,6 +1,6 @@
 // TODO bugs and quirks i'm aware of:
 // - steam: if a player character starts on a force floor they won't be able to make any voluntary movements until they are no longer on a force floor
-import { TICS_PER_SECOND } from './defs.js';
+import { DIRECTIONS, TICS_PER_SECOND } from './defs.js';
 import * as c2m from './format-c2m.js';
 import * as dat from './format-dat.js';
 import * as format_util from './format-util.js';
@@ -639,6 +639,119 @@ class Player extends PrimaryView {
 }
 
 
+const EDITOR_TOOLS = [{
+    mode: 'pencil',
+    icon: 'icons/tool-pencil.png',
+    name: "Pencil",
+    desc: "Draw individual tiles",
+}, {
+    mode: 'line',
+    icon: 'icons/tool-line.png',
+    name: "Line",
+    desc: "Draw straight lines",
+}, {
+    mode: 'box',
+    icon: 'icons/tool-box.png',
+    name: "Box",
+    desc: "Fill a rectangular area with tiles",
+}, {
+    mode: 'fill',
+    icon: 'icons/tool-fill.png',
+    name: "Fill",
+    desc: "Flood-fill an area with tiles",
+}, {
+    mode: 'force-floors',
+    icon: 'icons/tool-force-floors.png',
+    name: "Force floors",
+    desc: "Draw force floors in the direction you draw",
+}, {
+    mode: 'adjust',
+    icon: 'icons/tool-adjust.png',
+    name: "Adjust",
+    desc: "Toggle blocks and rotate actors",
+}, {
+    mode: 'connect',
+    icon: 'icons/tool-connect.png',
+    name: "Connect",
+    desc: "Set up CC1 clone and trap connections",
+}, {
+    mode: 'wire',
+    icon: 'icons/tool-wire.png',
+    name: "Wire",
+    desc: "Draw CC2 wiring",
+    // TODO text tool; thin walls tool; map generator?; subtools for select tool (copy, paste, crop)
+}];
+// Tiles the "adjust" tool will turn into each other
+const EDITOR_ADJUST_TOGGLES = {
+    floor: 'wall',
+    wall: 'floor',
+    floor_custom_green: 'wall_custom_green',
+    floor_custom_pink: 'wall_custom_pink',
+    floor_custom_yellow: 'wall_custom_yellow',
+    floor_custom_blue: 'wall_custom_blue',
+    wall_custom_green: 'floor_custom_green',
+    wall_custom_pink: 'floor_custom_pink',
+    wall_custom_yellow: 'floor_custom_yellow',
+    wall_custom_blue: 'floor_custom_blue',
+    fake_floor: 'fake_wall',
+    fake_wall: 'fake_floor',
+    wall_invisible: 'wall_appearing',
+    wall_appearing: 'wall_invisible',
+    green_floor: 'green_wall',
+    green_wall: 'green_floor',
+    green_bomb: 'green_chip',
+    green_chip: 'green_bomb',
+    purple_floor: 'purple_wall',
+    purple_wall: 'purple_floor',
+    thief_keys: 'thief_tools',
+    thief_tools: 'thief_keys',
+};
+// TODO this MUST use a cc2 tileset!
+const EDITOR_PALETTE = [{
+    title: "Our hero",
+    tiles: ['player'],
+}, {
+    title: "Terrain",
+    tiles: [
+        'floor', 'wall', 'hint', 'socket', 'exit',
+        'popwall',
+        'fake_floor', 'fake_wall',
+        'gravel',
+        'dirt',
+        'water', 'turtle', 'fire',
+        'ice', 'ice_nw', 'ice_ne', 'ice_sw', 'ice_se',
+        'force_floor_n', 'force_floor_s', 'force_floor_w', 'force_floor_e', 'force_floor_all',
+    ],
+}, {
+    title: "Items",
+    tiles: [
+        'chip', 'chip_extra',
+        'key_blue', 'key_red', 'key_yellow', 'key_green',
+        'flippers', 'fire_boots', 'cleats', 'suction_boots',
+    ],
+}, {
+    title: "Creatures",
+    tiles: [
+        'tank_blue',
+        'ball',
+        'fireball',
+        'glider',
+        'bug',
+        'paramecium',
+        'walker',
+        'teeth',
+        'blob',
+    ],
+}, {
+    title: "Mechanisms",
+    tiles: [
+        'bomb',
+        'dirt_block',
+        'button_red',
+        'cloner',
+        'trap',
+    ],
+}];
 class Editor extends PrimaryView {
     constructor(conductor) {
         super(conductor, document.body.querySelector('main#editor'));
@@ -655,12 +768,38 @@ class Editor extends PrimaryView {
             let [x, y] = this.renderer.cell_coords_from_event(ev);
             this.mouse_cell = [x, y];
 
-            this.place_in_cell(x, y, this.palette_selection);
+            if (this.current_tool === 'pencil') {
+                this.place_in_cell(x, y, this.palette_selection);
+            }
+            else if (this.current_tool === 'force-floors') {
+                // Begin by placing an all-way force floor under the mouse
+                this.place_in_cell(x, y, 'force_floor_all');
+            }
+            else if (this.current_tool === 'adjust') {
+                let cell = this.stored_level.cells[y][x];
+                for (let tile of cell) {
+                    // Toggle tiles that go in obvious pairs
+                    let other = EDITOR_ADJUST_TOGGLES[tile.name];
+                    if (other) {
+                        tile.name = other;
+                    }
+
+                    // Rotate actors
+                    if (TILE_TYPES[tile.name].is_actor) {
+                        tile.direction = DIRECTIONS[tile.direction].right;
+                    }
+                }
+            }
             this.renderer.draw();
         });
         this.renderer.canvas.addEventListener('mousemove', ev => {
             if (this.mouse_mode === null)
                 return;
+            // TODO check for the specific button we're holding
+            if (ev.buttons === 0) {
+                this.mouse_mode = null;
+                return;
+            }
 
             if (this.mouse_mode === 'draw') {
                 // FIXME also fill in a trail between previous cell and here, mousemove is not fired continuously
@@ -669,8 +808,64 @@ class Editor extends PrimaryView {
                     return;
 
                 // TODO do a pixel-perfect draw too
-                for (let [cx, cy] of walk_grid(this.mouse_cell[0], this.mouse_cell[1], x, y)) {
-                    this.place_in_cell(cx, cy, this.palette_selection);
+                if (this.current_tool === 'pencil') {
+                    for (let [cx, cy] of walk_grid(this.mouse_cell[0], this.mouse_cell[1], x, y)) {
+                        this.place_in_cell(cx, cy, this.palette_selection);
+                    }
+                }
+                else if (this.current_tool === 'force-floors') {
+                    // Walk the mouse movement and change each we touch to match the direction we
+                    // crossed the border
+                    let i = 0;
+                    let prevx, prevy;
+                    for (let [cx, cy] of walk_grid(this.mouse_cell[0], this.mouse_cell[1], x, y)) {
+                        i++;
+                        // The very first cell is the one the mouse was already in, and we don't
+                        // have a movement direction yet, so leave that alone
+                        if (i === 1) {
+                            prevx = cx;
+                            prevy = cy;
+                            continue;
+                        }
+                        let name;
+                        let cell = this.stored_level.cells[cy][cx];
+                        if (cell[0].name.startsWith('force_floor_')) {
+                            // Drawing a loop with force floors creates ice
+                            name = 'ice';
+                        }
+                        else if (cx === prevx) {
+                            if (cy > prevy) {
+                                name = 'force_floor_s';
+                            }
+                            else {
+                                name = 'force_floor_n';
+                            }
+                        }
+                        else {
+                            if (cx > prevx) {
+                                name = 'force_floor_e';
+                            }
+                            else {
+                                name = 'force_floor_w';
+                            }
+                        }
+                        this.place_in_cell(cx, cy, name);
+
+                        // The second cell tells us the direction to use for the first, assuming it
+                        // had an RFF marking it
+                        if (i === 2) {
+                            let prevcell = this.stored_level.cells[prevy][prevx];
+                            if (prevcell[0].name === 'force_floor_all') {
+                                prevcell[0].name = name;
+                            }
+                        }
+                        prevx = cx;
+                        prevy = cy;
+                    }
+                }
+                else if (this.current_tool === 'adjust') {
+                    // Adjust tool doesn't support dragging
+                    // TODO should it
                 }
                 this.renderer.draw();
 
@@ -685,39 +880,52 @@ class Editor extends PrimaryView {
             this.mouse_mode = null;
         });
 
+        // Toolbox
+        let toolbox = mk('div.icon-button-set')
+        this.root.querySelector('.controls').append(toolbox);
+        this.tool_button_els = {};
+        for (let tooldef of EDITOR_TOOLS) {
+            let button = mk(
+                'button', {
+                    type: 'button',
+                    'data-tool': tooldef.mode,
+                },
+                mk('img', {
+                    src: tooldef.icon,
+                    alt: tooldef.name,
+                    title: `${tooldef.name}: ${tooldef.desc}`,
+                }),
+            );
+            this.tool_button_els[tooldef.mode] = button;
+            toolbox.append(button);
+        }
+        this.current_tool = 'pencil';
+        this.tool_button_els['pencil'].classList.add('-selected');
+        toolbox.addEventListener('click', ev => {
+            let button = ev.target.closest('.icon-button-set button');
+            if (! button)
+                return;
+
+            this.select_tool(button.getAttribute('data-tool'));
+        });
+
         // Tile palette
         let palette_el = this.root.querySelector('.palette');
         this.palette = {};  // name => element
-        for (let name of [
-            // Terrain
-            'floor', 'wall', 'hint', 'socket', 'exit',
-            'popwall',
-            'fake_floor', 'fake_wall',
-            'water', 'fire', 'ice', 'force_floor_all',
-            // TODO ice curves
-            // Items
-            'chip', // 'chip_extra', -- XXX doesn't exist in TW tileset!
-            'key_blue', 'key_red', 'key_yellow', 'key_green',
-            // Creatures
-            'ball', 'player',
-            'dirt_block',
-            'clone_block',
-            'cloner',
-            'bomb',
-            'button_red',
-            'tank_blue',
-            'turtle',
-        ])
-        {
-            let entry = mk('canvas.palette-entry', {
-                width: this.conductor.tileset.size_x,
-                height: this.conductor.tileset.size_y,
-                'data-tile-name': name,
-            });
-            let ctx = entry.getContext('2d');
-            this.conductor.tileset.draw_type(name, null, null, ctx, 0, 0);
-            this.palette[name] = entry;
-            palette_el.append(entry);
+        for (let sectiondef of EDITOR_PALETTE) {
+            let section_el = mk('section');
+            palette_el.append(mk('h2', sectiondef.title), section_el);
+            for (let name of sectiondef.tiles) {
+                let entry = mk('canvas.palette-entry', {
+                    width: this.conductor.tileset.size_x,
+                    height: this.conductor.tileset.size_y,
+                    'data-tile-name': name,
+                });
+                let ctx = entry.getContext('2d');
+                this.conductor.tileset.draw_type(name, null, null, ctx, 0, 0);
+                this.palette[name] = entry;
+                section_el.append(entry);
+            }
         }
         palette_el.addEventListener('click', ev => {
             let entry = ev.target.closest('canvas.palette-entry');
@@ -759,6 +967,17 @@ class Editor extends PrimaryView {
         }
     }
 
+    select_tool(tool) {
+        if (tool === this.current_tool)
+            return;
+        if (! this.tool_button_els[tool])
+            return;
+
+        this.tool_button_els[this.current_tool].classList.remove('-selected');
+        this.current_tool = tool;
+        this.tool_button_els[this.current_tool].classList.add('-selected');
+    }
+
     select_palette(name) {
         if (name === this.palette_selection)
             return;
@@ -770,6 +989,12 @@ class Editor extends PrimaryView {
         if (this.palette_selection) {
             this.palette[this.palette_selection].classList.add('--selected');
         }
+
+        // Some tools obviously don't work with a palette selection, in which case changing tiles
+        // should default you back to the pencil
+        if (this.current_tool === 'adjust') {
+            this.select_tool('pencil');
+        }
     }
 
     place_in_cell(x, y, name) {
@@ -1012,11 +1237,11 @@ class OptionsOverlay extends DialogOverlay {
             label.append(mk('input', {type: 'checkbox', name: optdef.key}));
             if (optdef.impls) {
                 for (let impl of optdef.impls) {
-                    label.append(mk('img.compat-icon', {src: `compat-${impl}.png`}));
+                    label.append(mk('img.compat-icon', {src: `icons/compat-${impl}.png`}));
                 }
             }
             label.append(mk('span.option-label', optdef.label));
-            let help_icon = mk('img.-help', {src: 'help.png'});
+            let help_icon = mk('img.-help', {src: 'icons/help.png'});
             label.append(help_icon);
             let help_text = mk('p.option-help', optdef.note);
             li.append(label);
diff --git a/style.css b/style.css
index fc677e2..e0fb544 100644
--- a/style.css
+++ b/style.css
@@ -469,7 +469,7 @@ dl.score-chart .-sum {
 .inventory img {
     width: calc(var(--tile-width) * var(--scale));
 }
-.controls {
+#player .controls {
     grid-area: controls;
     display: flex;
 }
@@ -528,8 +528,11 @@ main.--has-demo .demo-controls {
     flex: 1 1 auto;
     display: grid;
     grid:
-        "level  palette"
+        "controls   level"
+        "palette    level"
+        / minmax(20%, 1fr) auto
     ;
+    gap: 1em;
 
     min-height: 0;
     margin: auto;
@@ -541,9 +544,48 @@ main.--has-demo .demo-controls {
     overflow: auto;
 }
 
+#editor .controls {
+    grid-area: controls;
+}
+#editor .controls p img {
+    background: url(icons/tool-bg-unselected.png);
+}
+.icon-button-set {
+    display: flex;
+    flex-wrap: wrap;
+}
+.icon-button-set button {
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    line-height: 1;
+    background: url(icons/tool-bg-unselected.png) no-repeat;
+    border: none;
+}
+.icon-button-set button.-selected {
+    background-image: url(icons/tool-bg-selected.png);
+}
+.icon-button-set button img {
+    display: block;
+}
 #editor .palette {
     grid-area: palette;
 }
+#editor .palette h2 {
+    font-size: 1em;
+    margin-top: 1em;
+    border-bottom: 1px solid currentColor;
+    color: #909090;
+}
+#editor .palette h2:first-child {
+    margin-top: 0;
+}
+#editor .palette section {
+    display: grid;
+    grid: auto-flow 32px / repeat(auto-fit, 32px);
+    gap: 3px;
+}
 .palette-entry {
     margin: 0.25em;
 }