Spruce up the editor toolbar

Ditch the textured backgrounds (hard to read), add some icons for the
controls, and recolor the icons themselves to the new tentative palette.

index.html

@@ -115,6 +115,19 @@
             <path d="M1,6 a5,5 0 1,1 10,0 a5,5 0 1,1 -10,0 m2,0 a3,3 0 1,0 6,0 a3,3 0 1,0 -6,0"></path>
             <path d="M14,12 l-2,2 -4,-4 2,-2 4,4"></path>
         </g>
+        <g id="svg-icon-mouse1">
+            <path d="
+                M9,2 a3,3 0 0,1 3,3 v5 a4,4 0 0,1 -8,0 v-5 a3,3 0 0,1 3,-3 z
+                M9,3 v5 h-4 v-3 a2,2 0 0,1 2,-2 h1 z
+            "></path>
+                <!--M9,3 a2,2 0 0,0 -2,2 v3 h3 z-->
+        </g>
+        <g id="svg-icon-mouse2">
+            <path d="
+                M9,2 a3,3 0 0,1 3,3 v5 a4,4 0 0,1 -8,0 v-5 a3,3 0 0,1 3,-3 z
+                M7,3 h2 a2,2 0 0,1 2,2 v3 h-4 v-5 z
+            "></path>
+        </g>
     </defs>
     </svg>
     <header id="header-main">
@@ -203,8 +216,8 @@
             <div class="button-row">
                 <input id="splash-upload-file" type="file" accept=".dat,.ccl,.c2m,.ccs,.zip" multiple>
                 <input id="splash-upload-dir" type="file" webkitdirectory>
-                <button type="button" id="splash-upload-file-button" class="button-big">Load files</button>
+                <button type="button" id="splash-upload-file-button" class="button-big button-bright">Load files</button>
-                <button type="button" id="splash-upload-dir-button" class="button-big">Load directory</button>
+                <button type="button" id="splash-upload-dir-button" class="button-big button-bright">Load directory</button>
             </div>
             <ul class="played-pack-list" id="splash-other-pack-list">
                 <!-- populated by js -->
@@ -214,8 +227,8 @@
         <section id="splash-your-levels">
             <h2>Create</h2>
             <div class="button-row">
-                <button type="button" id="splash-create-pack" class="button-big">New pack</button>
+                <button type="button" id="splash-create-pack" class="button-big button-bright">New pack</button>
-                <button type="button" id="splash-create-level" class="button-big">New scratch level<br>(won't be saved!)</button>
+                <button type="button" id="splash-create-level" class="button-big button-bright">New scratch level<br>(won't be saved!)</button>
             </div>
         </section>
     </main>

js/editor/editordefs.js

@@ -7,7 +7,7 @@ export const TOOLS = {
     pencil: {
         icon: 'icons/tool-pencil.png',
         name: "Pencil",
-        desc: "Place, erase, and select tiles.\nLeft click: draw\nCtrl: erase\nShift: replace all layers\nRight click: pick foreground tile\nCtrl-right click: pick background tile",
+        desc: "Place, erase, and select tiles.\n\n[mouse1] Draw\n[ctrl] [mouse1] Erase\n[shift] [mouse1] Draw, replacing everything\n\n[mouse2] Pick foreground tile\n[ctrl] [mouse2] Pick background tile",
         uses_palette: true,
         op1: mouseops.PencilOperation,
         op2: mouseops.EyedropOperation,
@@ -32,7 +32,7 @@ export const TOOLS = {
     fill: {
         icon: 'icons/tool-fill.png',
         name: "Fill",
-        desc: "Flood-fill an area with tiles",
+        desc: "Flood-fill an area with tiles.",
         uses_palette: true,
         op1: mouseops.FillOperation,
         op2: mouseops.EyedropOperation,
@@ -41,7 +41,7 @@ export const TOOLS = {
     select_box: {
         icon: 'icons/tool-select-box.png',
         name: "Box select",
-        desc: "Select and manipulate rectangles.",
+        desc: "Select and manipulate rectangles.\n\n[mouse1] Select rectangle\n[shift] [mouse1] Add to selection\n\n[mouse1] Move selection\n[ctrl] [mouse1] Clone selection",
         affects_selection: true,
         op1: mouseops.SelectOperation,
         shortcut: 'm',
@@ -55,14 +55,14 @@ export const TOOLS = {
     tracks: {
         icon: 'icons/tool-tracks.png',
         name: "Tracks",
-        desc: "Draw tracks following the cursor.\nLeft click: Lay tracks\nCtrl-click: Erase tracks\nRight click: Toggle track switch",
+        desc: "Draw tracks following the cursor.\n\n[mouse1] Lay tracks\n[ctrl] [mouse1] Erase tracks\n[mouse2] Toggle track switch",
         op1: mouseops.TrackOperation,
         op2: mouseops.TrackOperation,
     },
     adjust: {
         icon: 'icons/tool-adjust.png',
         name: "Adjust",
-        desc: "Edit existing tiles.\nLeft click: rotate actor or toggle terrain\nRight click: rotate or toggle in reverse\nShift: always target terrain\nCtrl-click: edit properties of complex tiles\n(wires, railroads, hints, etc.)",
+        desc: "Edit existing tiles.\n\n[mouse1] Rotate actor / toggle terrain\n[mouse2] Rotate/toggle in the other direction\n[shift] Affect terrain\n\n[ctrl] [mouse1] Edit properties of complex tiles\n(wires, railroads, hints, etc.)",
         op1: mouseops.AdjustOperation,
         op2: mouseops.AdjustOperation,
         shortcut: 'a',
@@ -78,7 +78,7 @@ export const TOOLS = {
         // shift-drag: create a new connection (arbitrary cells)
         // right drag: move a connection endpoint
         // ctrl-right drag: move the other endpoint (if a cell is both source and dest)
-        desc: "Set up CC1-style clone and trap connections.\n(WIP)\nNOTE: Not supported in CC2!\nRight click: auto link using Lynx rules",
+        desc: "Set up CC1-style clone and trap connections.\n(WIP)\nNOTE: Not supported in the real CC2!\n\n[mouse2] Auto link using Lynx/CC2 rules",
         //desc: "Set up CC1-style clone and trap connections.\nNOTE: Not supported in CC2!\nLeft drag: link button with valid target\nCtrl-click: erase link\nRight click: auto link using Lynx rules",
         op1: mouseops.ConnectOperation,
         op2: mouseops.ConnectOperation,
@@ -86,15 +86,14 @@ export const TOOLS = {
     wire: {
         icon: 'icons/tool-wire.png',
         name: "Wire",
-        desc: "Edit CC2 wiring.\nLeft click: draw wires\nCtrl-click: erase wires\nRight click: toggle tunnels (floor only)",
+        desc: "Edit CC2 wiring.\n\n[mouse1] Draw wire\n[ctrl] [mouse1] Erase wire\n\n[mouse2] Toggle tunnels (floor only)",
         op1: mouseops.WireOperation,
         op2: mouseops.WireOperation,
     },
     camera: {
         icon: 'icons/tool-camera.png',
         name: "Camera",
-        desc: "Draw and edit custom camera regions",
+        desc: "Draw and edit camera regions.\n(LL only.  When the player is within a camera region,\nthe camera stays locked inside it.)\n\n[mouse1] Create or edit a region\n[mouse2] Delete a region",
-        help: "Draw and edit camera regions.\n(LL only.  When the player is within a camera region,\nthe camera stays locked inside it.)\nLeft click: create or edit a region\nRight click: erase a region",
         op1: mouseops.CameraOperation,
         op2: mouseops.CameraEraseOperation,
     },

js/editor/main.js

@@ -134,8 +134,7 @@ export class Editor extends PrimaryView {
         this.statusbar_cursor = mk('div.-mouse', "—");
         statusbar.append(
             mk('div.-zoom',
-                mk_svg('svg.svg-icon', {viewBox: '0 0 16 16'},
+                this.svg_icon('svg-icon-zoom'),
-                    mk_svg('use', {href: `#svg-icon-zoom`})),
                 this.statusbar_zoom_input,
                 this.statusbar_zoom,
             ),
@@ -400,6 +399,7 @@ export class Editor extends PrimaryView {
                 }
                 header_text += ` (${shortcut})`;
             }
+            let tooltip = mk('div.-help.editor-big-tooltip', mk('h3', header_text));
             let button = mk(
                 'button', {
                     type: 'button',
@@ -409,8 +409,23 @@ export class Editor extends PrimaryView {
                     src: tooldef.icon,
                     alt: tooldef.name,
                 }),
-                mk('div.-help.editor-big-tooltip', mk('h3', header_text), tooldef.desc),
+                tooltip,
             );
+
+            // Replace the [key] elements in the tooltip
+            for (let [_, literal, key] of tooldef.desc.matchAll(/(.*?)(?:\[(.+?)\]|$)/gs)) {
+                tooltip.append(literal);
+                if (key === 'mouse1') {
+                    tooltip.append(this.svg_icon('svg-icon-mouse1'));
+                }
+                else if (key === 'mouse2') {
+                    tooltip.append(this.svg_icon('svg-icon-mouse2'));
+                }
+                else if (key) {
+                    tooltip.append(mk('kbd', key));
+                }
+            }
+
             this.tool_button_els[toolname] = button;
             toolbox.append(button);
         }
@@ -462,10 +477,7 @@ export class Editor extends PrimaryView {
         let edit_menu_button = _make_button("Edit ", ev => {
             this.edit_menu.open(ev.currentTarget);
         });
-        edit_menu_button.append(
+        edit_menu_button.append(this.svg_icon('svg-icon-menu-chevron'));
-            mk_svg('svg.svg-icon', {viewBox: '0 0 16 16'},
-                mk_svg('use', {href: `#svg-icon-menu-chevron`})),
-        );
         _make_button("Pack properties...", () => {
             new dialogs.EditorPackMetaOverlay(this.conductor, this.conductor.stored_game).open();
         });
@@ -563,10 +575,7 @@ export class Editor extends PrimaryView {
         let export_menu_button = _make_button("Export ", ev => {
             this.export_menu.open(ev.currentTarget);
         });
-        export_menu_button.append(
+        export_menu_button.append(this.svg_icon('svg-icon-menu-chevron'));
-            mk_svg('svg.svg-icon', {viewBox: '0 0 16 16'},
-                mk_svg('use', {href: `#svg-icon-menu-chevron`})),
-        );
         //_make_button("Toggle green objects");
 
         // Tile palette
@@ -1854,6 +1863,11 @@ export class Editor extends PrimaryView {
     // ------------------------------------------------------------------------------------------------
     // Misc UI stuff
 
+    svg_icon(id) {
+        return mk_svg('svg.svg-icon', {viewBox: '0 0 16 16'},
+            mk_svg('use', {href: `#${id}`}));
+    }
+
     open_tile_prop_overlay(tile, cell, rect) {
         this.cancel_mouse_drag();
         // FIXME keep these around, don't recreate them constantly

js/editor/mouseops.js

@@ -524,7 +524,8 @@ export class FillOperation extends MouseOperation {
 
 
 // TODO also, delete
-// TODO also, better marching ants, hard to see on gravel
+// FIXME i broke transforms
+// FIXME need to subtract from selection too
 export class SelectOperation extends MouseOperation {
     handle_press() {
         if (this.shift) {

style.css

@@ -2317,6 +2317,28 @@ svg.level-editor-overlay text.overlay-edit-tip {
     border-bottom: 1px solid currentColor;
     color: white;
 }
+.editor-big-tooltip kbd {
+    font-size: 0.75em;
+    display: inline-block;
+    margin-right: 0.25rem;
+    padding: 1px 2px;
+    border: 1px solid #d8d8d8;
+    border-bottom-width: 2px;
+    border-radius: 2px;
+    line-height: 1;
+    vertical-align: 0.25em;
+    background: #d8d8d8;
+    box-shadow: 0 2px #999;
+    color: hsl(var(--main-hue), 10%, 20%);
+    letter-spacing: -1px;
+    text-transform: lowercase;
+}
+.editor-big-tooltip svg {
+    width: 1.5em;
+    height: 1.5em;
+    margin: 0 -0.25em;  /* these are mouse buttons; shave off some of the extra space */
+    vertical-align: -0.375em;
+}
 #editor .controls {
     /* TODO with the hint area gone i don't think this needs to be a grid?  could just flex */
     grid-area: controls;
@@ -2359,6 +2381,10 @@ svg.level-editor-overlay text.overlay-edit-tip {
 .icon-button-set {
     display: flex;
     flex-wrap: wrap;
+    padding: 2px;
+    border-radius: 4px;
+    background: hsl(var(--selected-hue), 10%, 10%);
+    border: 1px solid hsl(var(--selected-hue), 10%, 20%);
 }
 .icon-button-set button {
     width: auto;
@@ -2366,13 +2392,13 @@ svg.level-editor-overlay text.overlay-edit-tip {
     padding: 0;
     margin: 0;
     line-height: 1;
-    background: url(icons/tool-bg-unselected.png) no-repeat;
+    background: none;
     border: none;
-    border-radius: 0;
+    border-radius: 2px;
     box-shadow: none;
 }
 .icon-button-set button.-selected {
-    background-image: url(icons/tool-bg-selected.png);
+    background: hsl(var(--selected-hue), 90%, 70%);
 }
 .icon-button-set button img {
     display: block;