From 15a37457de4e441c10c45c4597bfca479c53d5a2 Mon Sep 17 00:00:00 2001
From: "Eevee (Evelyn Woods)" <eevee.git@veekun.com>
Date: Wed, 30 Dec 2020 17:47:29 -0700
Subject: [PATCH] Add physical rotation buttons

---
 icons/rotate-left.png  | Bin 0 -> 235 bytes
 icons/rotate-right.png | Bin 0 -> 235 bytes
 js/main-editor.js      |  27 ++++++++++++++++-----------
 style.css              |  14 +++++++++++++-
 4 files changed, 29 insertions(+), 12 deletions(-)
 create mode 100644 icons/rotate-left.png
 create mode 100644 icons/rotate-right.png

diff --git a/icons/rotate-left.png b/icons/rotate-left.png
new file mode 100644
index 0000000000000000000000000000000000000000..15313213a0a85628e9193286244e9ae046d03fce
GIT binary patch
literal 235
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaN3?zjj6;1;w#^NA%Cx&(BWL^R}`~f~8u0UE!
z)k4=X*t4)MXVLOt!xLXX>PmwAf*Bm1-ADs+YCT;XLnI_w4>BemcHm(#cq)*hxZ(Zh
z<5$=m-}E)8v!*mQ@Um=bI53UXaaye|i}dwYhM4XLjI$Ty<@c%1I9?;e@@n2Ap_|!q
zrPfFD|E`qdn89|CQ=m>~)0Q7XaZ@t-_Qt0jDVR4q)3CO|pPO}_l8>pssblE=)dD`D
bp^xQP^jfB5sg!a89m3%0>gTe~DWM4f_G(QQ

literal 0
HcmV?d00001

diff --git a/icons/rotate-right.png b/icons/rotate-right.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c54b80bec0e11fcc1a8af37e1e464c8bb3fb93b
GIT binary patch
literal 235
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaN3?zjj6;1;w#^NA%Cx&(BWL^R}`~f~8u0UE!
z)k4=X*t4)MXVLOt!xLXX>PmwAf*Bm1-ADs+YCT;XLnI_w4>Fb>cHm((cq$wb#<W|e
z-iNpO)_R6Vo{W(S2iO=lDNIOpo{)XosUY?S$4-VrZ01Vp`TmM??B3=bas3)B(7yc6
z+`TMSr{Zf_eVQ3$IwrdQ5jxs^wExAoTfb9|nEbZLFqALw<1TGh^116{>Ugz!m4HuZ
b=wo@WQj3)ThqpWdI)uT~)z4*}Q$iB}S5Z#=

literal 0
HcmV?d00001

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;