diff --git a/icons/rotate-left.png b/icons/rotate-left.png new file mode 100644 index 0000000..1531321 Binary files /dev/null and b/icons/rotate-left.png differ diff --git a/icons/rotate-right.png b/icons/rotate-right.png new file mode 100644 index 0000000..1c54b80 Binary files /dev/null and b/icons/rotate-right.png differ diff --git a/js/main-editor.js b/js/main-editor.js index 169dde7..efdb22d 100644 --- a/js/main-editor.js +++ b/js/main-editor.js @@ -2317,14 +2317,28 @@ export class Editor extends PrimaryView { }); // Toolbox - // Selected tile - this.selected_tile_el = this.root.querySelector('.controls #editor-tile'); + // Selected tile and rotation buttons + this.selected_tile_el = mk('div'); + this.selected_tile_el.id = 'editor-tile'; this.selected_tile_el.addEventListener('click', ev => { if (this.palette_selection && TILES_WITH_PROPS[this.palette_selection.type.name]) { // FIXME use tile bounds this.open_tile_prop_overlay(this.palette_selection, ev.clientX, ev.clientY); } }); + // TODO ones for the palette too?? + this.palette_rotation_index = 0; + this.palette_actor_direction = 'south'; + let rotate_right_button = mk('button.--image', {type: 'button'}, mk('img', {src: '/icons/rotate-right.png'})); + rotate_right_button.addEventListener('click', ev => { + this.rotate_tile_right(this.palette_selection); + }); + let rotate_left_button = mk('button.--image', {type: 'button'}, mk('img', {src: '/icons/rotate-left.png'})); + rotate_left_button.addEventListener('click', ev => { + this.rotate_tile_left(this.palette_selection); + }); + this.root.querySelector('.controls').append( + mk('div.editor-tile-controls', rotate_right_button, this.selected_tile_el, rotate_left_button)); // Tools themselves let toolbox = mk('div.icon-button-set', {id: 'editor-toolbar'}); this.root.querySelector('.controls').append(toolbox); @@ -2355,15 +2369,6 @@ export class Editor extends PrimaryView { this.select_tool(button.getAttribute('data-tool')); }); - // Rotation buttons, which affect both the palette tile and the entire palette - this.palette_rotation_index = 0; - this.palette_actor_direction = 'south'; - let rotate_left_button = mk('button.--image', {type: 'button'}, mk('img', {src: '/icons/rotate-left.png'})); - rotate_left_button.addEventListener('click', ev => { - this.rotate_palette_left(); - }); - // TODO finish this up: this.root.querySelector('.controls').append(rotate_left_button); - // Toolbar buttons for saving, exporting, etc. let button_container = mk('div.-buttons'); this.root.querySelector('.controls').append(button_container); diff --git a/style.css b/style.css index 4f07929..c504897 100644 --- a/style.css +++ b/style.css @@ -84,6 +84,15 @@ button.--button-glow-ok { button.--button-glow { transition: background-color 0.5s ease-out; } +button.--image { + padding: 0; + border: none; + background: none; + box-shadow: none; +} +button.--image img { + display: block; +} h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; @@ -1503,8 +1512,11 @@ body.--debug #player-debug { align-items: center; column-gap: 1em; } -#editor .controls #editor-tile { +#editor .controls .editor-tile-controls { grid-area: tile; + display: flex; + align-items: center; + gap: 0.25em; } #editor .controls #editor-tile canvas { display: block;