leif/lexys-labyrinth
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add physical rotation buttons

Browse Source
This commit is contained in:
Eevee (Evelyn Woods) 2020-12-30 17:47:29 -07:00
parent fb2f79823c
commit 15a37457de
4 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
icons/rotate-left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 235 B

BIN
icons/rotate-right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 235 B

27
js/main-editor.js
View File

@ -2317,14 +2317,28 @@ export class Editor extends PrimaryView {
}); });
// Toolbox // Toolbox
// Selected tile // Selected tile and rotation buttons
this.selected_tile_el = this.root.querySelector('.controls #editor-tile'); this.selected_tile_el = mk('div');
this.selected_tile_el.id = 'editor-tile';
this.selected_tile_el.addEventListener('click', ev => { this.selected_tile_el.addEventListener('click', ev => {
if (this.palette_selection && TILES_WITH_PROPS[this.palette_selection.type.name]) { if (this.palette_selection && TILES_WITH_PROPS[this.palette_selection.type.name]) {
// FIXME use tile bounds // FIXME use tile bounds
this.open_tile_prop_overlay(this.palette_selection, ev.clientX, ev.clientY); 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 // Tools themselves
let toolbox = mk('div.icon-button-set', {id: 'editor-toolbar'}); let toolbox = mk('div.icon-button-set', {id: 'editor-toolbar'});
this.root.querySelector('.controls').append(toolbox); this.root.querySelector('.controls').append(toolbox);
@ -2355,15 +2369,6 @@ export class Editor extends PrimaryView {
this.select_tool(button.getAttribute('data-tool')); 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. // Toolbar buttons for saving, exporting, etc.
let button_container = mk('div.-buttons'); let button_container = mk('div.-buttons');
this.root.querySelector('.controls').append(button_container); this.root.querySelector('.controls').append(button_container);

14
style.css
View File

@ -84,6 +84,15 @@ button.--button-glow-ok {
button.--button-glow { button.--button-glow {
transition: background-color 0.5s ease-out; 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 { h1, h2, h3, h4, h5, h6 {
font-weight: normal; font-weight: normal;
margin: 0; margin: 0;
@ -1503,8 +1512,11 @@ body.--debug #player-debug {
align-items: center; align-items: center;
column-gap: 1em; column-gap: 1em;
} }
#editor .controls #editor-tile { #editor .controls .editor-tile-controls {
grid-area: tile; grid-area: tile;
display: flex;
align-items: center;
gap: 0.25em;
} }
#editor .controls #editor-tile canvas { #editor .controls #editor-tile canvas {
display: block; display: block;