diff --git a/icons/editor-icons.aseprite b/icons/editor-icons.aseprite index 320cf97..b783bbe 100644 Binary files a/icons/editor-icons.aseprite and b/icons/editor-icons.aseprite differ diff --git a/icons/tool-adjust.png b/icons/tool-adjust.png index 55e3551..df3bdac 100644 Binary files a/icons/tool-adjust.png and b/icons/tool-adjust.png differ diff --git a/icons/tool-connect.png b/icons/tool-connect.png index a124628..13c24f2 100644 Binary files a/icons/tool-connect.png and b/icons/tool-connect.png differ diff --git a/icons/tool-fill.png b/icons/tool-fill.png index 5ab1f3a..c33328c 100644 Binary files a/icons/tool-fill.png and b/icons/tool-fill.png differ diff --git a/icons/tool-force-floors.png b/icons/tool-force-floors.png index 5086060..e4ebe69 100644 Binary files a/icons/tool-force-floors.png and b/icons/tool-force-floors.png differ diff --git a/icons/tool-pencil.png b/icons/tool-pencil.png index d8f512e..a617abf 100644 Binary files a/icons/tool-pencil.png and b/icons/tool-pencil.png differ diff --git a/icons/tool-select-box.png b/icons/tool-select-box.png index 0d38632..b8bb192 100644 Binary files a/icons/tool-select-box.png and b/icons/tool-select-box.png differ diff --git a/icons/tool-tracks.png b/icons/tool-tracks.png index fa1be88..668cb8c 100644 Binary files a/icons/tool-tracks.png and b/icons/tool-tracks.png differ diff --git a/icons/tool-wire.png b/icons/tool-wire.png index d4361c9..b79d7d5 100644 Binary files a/icons/tool-wire.png and b/icons/tool-wire.png differ diff --git a/index.html b/index.html index 2a40e50..625620c 100644 --- a/index.html +++ b/index.html @@ -115,6 +115,19 @@ + + + + + + + @@ -203,8 +216,8 @@ - Load files - Load directory + Load files + Load directory @@ -214,8 +227,8 @@ Create - New pack - New scratch level(won't be saved!) + New pack + New scratch level(won't be saved!) diff --git a/js/editor/editordefs.js b/js/editor/editordefs.js index b78c6b4..cd6ac1e 100644 --- a/js/editor/editordefs.js +++ b/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", - 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", + 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", op1: mouseops.CameraOperation, op2: mouseops.CameraEraseOperation, }, diff --git a/js/editor/main.js b/js/editor/main.js index 35444c6..5a47e6a 100644 --- a/js/editor/main.js +++ b/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'}, - mk_svg('use', {href: `#svg-icon-zoom`})), + this.svg_icon('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( - mk_svg('svg.svg-icon', {viewBox: '0 0 16 16'}, - mk_svg('use', {href: `#svg-icon-menu-chevron`})), - ); + edit_menu_button.append(this.svg_icon('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( - mk_svg('svg.svg-icon', {viewBox: '0 0 16 16'}, - mk_svg('use', {href: `#svg-icon-menu-chevron`})), - ); + export_menu_button.append(this.svg_icon('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 diff --git a/js/editor/mouseops.js b/js/editor/mouseops.js index 27d93f8..09099b0 100644 --- a/js/editor/mouseops.js +++ b/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) { diff --git a/style.css b/style.css index 9546f5a..fa21a82 100644 --- a/style.css +++ b/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;