From 236e83694b26154e31191c95c67158a6a3bc2cd3 Mon Sep 17 00:00:00 2001
From: HF <hf@pixelplanet.fun>
Date: Mon, 22 Jan 2024 06:20:10 +0100
Subject: [PATCH] add buttons for pencil mode

---
 src/components/UI.jsx                       |   6 +-
 src/components/buttons/ExpandMenuButton.jsx |   2 +-
 src/components/buttons/MovementControls.jsx | 385 +++++++++-----------
 src/components/buttons/PalselButton.jsx     |   2 +-
 src/components/buttons/PencilButton.jsx     |  30 ++
 src/controls/PixelPainterControls.js        |  83 ++++-
 src/controls/VoxelPainterControls.js        | 149 +++-----
 src/store/actions/index.js                  |   6 +
 src/store/reducers/gui.js                   |  14 +
 src/styles/default.css                      |   8 +
 10 files changed, 378 insertions(+), 307 deletions(-)
 create mode 100644 src/components/buttons/PencilButton.jsx

diff --git a/src/components/UI.jsx b/src/components/UI.jsx
index 74258072..becf3b5a 100644
--- a/src/components/UI.jsx
+++ b/src/components/UI.jsx
@@ -9,6 +9,7 @@ import CoolDownBox from './CoolDownBox';
 import NotifyBox from './NotifyBox';
 import GlobeButton from './buttons/GlobeButton';
 import PalselButton from './buttons/PalselButton';
+import PencilButton from './buttons/PencilButton';
 import MovementControls from './buttons/MovementControls';
 import Palette from './Palette';
 import Alert from './Alert';
@@ -35,7 +36,10 @@ const UI = () => {
           <PalselButton />
           <Palette />
           {(!is3D) && <GlobeButton />}
-          {(isOnMobile) && <MovementControls />}
+          {// (isOnMobile) && <MovementControls />
+          }
+          <MovementControls />
+          {(!is3D) && <PencilButton />}
           <CoolDownBox />
         </>
       )}
diff --git a/src/components/buttons/ExpandMenuButton.jsx b/src/components/buttons/ExpandMenuButton.jsx
index eaf7f211..5608920f 100644
--- a/src/components/buttons/ExpandMenuButton.jsx
+++ b/src/components/buttons/ExpandMenuButton.jsx
@@ -17,7 +17,7 @@ const ExpandMenuButton = () => {
   return (
     <div
       id="menubutton"
-      className="actionbuttons"
+      className={`actionbuttons${menuOpen ? ' pressed' : ''}`}
       role="button"
       title={(menuOpen) ? t`Close Menu` : t`Open Menu`}
       tabIndex={-1}
diff --git a/src/components/buttons/MovementControls.jsx b/src/components/buttons/MovementControls.jsx
index ced438be..93f0348b 100644
--- a/src/components/buttons/MovementControls.jsx
+++ b/src/components/buttons/MovementControls.jsx
@@ -4,6 +4,7 @@
  */
 
 import React from 'react';
+import { useSelector, shallowEqual } from 'react-redux';
 
 import { getRenderer } from '../../ui/rendererFactory';
 
@@ -11,213 +12,189 @@ const btnStyle = {
   fontSize: 34,
 };
 
-function move(action, bool) {
-  const renderer = getRenderer();
-  switch (action) {
-    case 'FORWARD': {
-      renderer.controls.moveForward = bool;
-      break;
-    }
-    case 'BACKWARD': {
-      renderer.controls.moveBackward = bool;
-      break;
-    }
-    case 'LEFT': {
-      renderer.controls.moveLeft = bool;
-      break;
-    }
-    case 'RIGHT': {
-      renderer.controls.moveRight = bool;
-      break;
-    }
-    case 'UP': {
-      renderer.controls.moveUp = bool;
-      break;
-    }
-    case 'DOWN': {
-      renderer.controls.moveDown = bool;
-      break;
-    }
-    default:
-      break;
-  }
-}
-
 function cancelMovement() {
   const renderer = getRenderer();
-  renderer.controls.moveForward = false;
-  renderer.controls.moveBackward = false;
-  renderer.controls.moveLeft = false;
-  renderer.controls.moveRight = false;
-  renderer.controls.moveUp = false;
-  renderer.controls.moveDown = false;
+  renderer.controls.moveU = 0;
+  renderer.controls.moveV = 0;
+  renderer.controls.moveW = 0;
 }
 
-const MovementControls = () => (
-  <div>
-    <div
-      className="actionbuttons"
-      role="button"
-      tabIndex={0}
-      style={{
-        ...btnStyle,
-        // left: 46,
-        left: 57,
-        // bottom: 128,
-        bottom: 139,
-      }}
-      onMouseDown={() => {
-        move('FORWARD', true);
-      }}
-      onMouseUp={() => {
-        move('FORWARD', false);
-      }}
-      onTouchStart={() => {
-        move('FORWARD', true);
-      }}
-      onTouchEnd={() => {
-        move('FORWARD', false);
-      }}
-      onTouchCancel={cancelMovement}
-      onMouseLeave={cancelMovement}
-    >
-      ↑
-    </div>
-    <div
-      className="actionbuttons"
-      role="button"
-      tabIndex={0}
-      style={{
-        ...btnStyle,
-        // left: 46,
-        left: 57,
-        bottom: 98,
-      }}
-      onMouseDown={() => {
-        move('BACKWARD', true);
-      }}
-      onMouseUp={() => {
-        move('BACKWARD', false);
-      }}
-      onTouchStart={() => {
-        move('BACKWARD', true);
-      }}
-      onTouchEnd={() => {
-        move('BACKWARD', false);
-      }}
-      onTouchCancel={cancelMovement}
-      onMouseLeave={cancelMovement}
-    >
-      ↓
-    </div>
-    <div
-      className="actionbuttons"
-      role="button"
-      tabIndex={0}
-      style={{
-        ...btnStyle,
-        left: 16,
-        bottom: 98,
-      }}
-      onMouseDown={() => {
-        move('LEFT', true);
-      }}
-      onMouseUp={() => {
-        move('LEFT', false);
-      }}
-      onTouchStart={() => {
-        move('LEFT', true);
-      }}
-      onTouchEnd={() => {
-        move('LEFT', false);
-      }}
-      onTouchCancel={cancelMovement}
-      onMouseLeave={cancelMovement}
-    >
-      ←
-    </div>
-    <div
-      className="actionbuttons"
-      role="button"
-      tabIndex={0}
-      style={{
-        ...btnStyle,
-        // left: 76,
-        left: 98,
-        bottom: 98,
-      }}
-      onMouseDown={() => {
-        move('RIGHT', true);
-      }}
-      onMouseUp={() => {
-        move('RIGHT', false);
-      }}
-      onTouchStart={() => {
-        move('RIGHT', true);
-      }}
-      onTouchEnd={() => {
-        move('RIGHT', false);
-      }}
-      onTouchCancel={cancelMovement}
-      onMouseLeave={cancelMovement}
-    >
-      →
-    </div>
-    <div
-      className="actionbuttons"
-      role="button"
-      tabIndex={0}
-      style={{
-        ...btnStyle,
-        // left: 76,
-        left: 16,
-        bottom: 139,
-      }}
-      onMouseDown={() => {
-        move('UP', true);
-      }}
-      onMouseUp={() => {
-        move('UP', false);
-      }}
-      onTouchStart={() => {
-        move('UP', true);
-      }}
-      onTouchEnd={() => {
-        move('UP', false);
-      }}
-      onTouchCancel={cancelMovement}
-      onMouseLeave={cancelMovement}
-    >
-      ↖
-    </div>
-    <div
-      className="actionbuttons"
-      role="button"
-      tabIndex={0}
-      style={{
-        ...btnStyle,
-        // left: 76,
-        left: 98,
-        bottom: 139,
-      }}
-      onMouseDown={() => {
-        move('DOWN', true);
-      }}
-      onMouseUp={() => {
-        move('DOWN', false);
-      }}
-      onTouchStart={() => {
-        move('DOWN', true);
-      }}
-      onTouchEnd={() => {
-        move('DOWN', false);
-      }}
-      onTouchCancel={cancelMovement}
-      onMouseLeave={cancelMovement}
-    >
-      ↘
-    </div>
-  </div>
-);
+const MovementControls = () => {
+  const [pencilEnabled, is3D] = useSelector((state) => [
+    state.gui.pencilEnabled,
+    state.canvas.is3D,
+  ], shallowEqual);
+
+  if (!pencilEnabled && !is3D) {
+    return null;
+  }
+
+  return (
+    <>
+      <div
+        className="actionbuttons"
+        role="button"
+        tabIndex={0}
+        style={{
+          ...btnStyle,
+          // left: 46,
+          left: 57,
+          // bottom: 128,
+          bottom: 139,
+        }}
+        onMouseDown={() => {
+          getRenderer().controls.moveV = -1;
+        }}
+        onMouseUp={() => {
+          getRenderer().controls.moveV = 0;
+        }}
+        onTouchStart={() => {
+          getRenderer().controls.moveV = -1;
+        }}
+        onTouchEnd={() => {
+          getRenderer().controls.moveV = 0;
+        }}
+        onTouchCancel={cancelMovement}
+        onMouseLeave={cancelMovement}
+      >
+        ↑
+      </div>
+      <div
+        className="actionbuttons"
+        role="button"
+        tabIndex={0}
+        style={{
+          ...btnStyle,
+          // left: 46,
+          left: 57,
+          bottom: 98,
+        }}
+        onMouseDown={() => {
+          getRenderer().controls.moveV = 1;
+        }}
+        onMouseUp={() => {
+          getRenderer().controls.moveV = 0;
+        }}
+        onTouchStart={() => {
+          getRenderer().controls.moveV = 1;
+        }}
+        onTouchEnd={() => {
+          getRenderer().controls.moveV = 0;
+        }}
+        onTouchCancel={cancelMovement}
+        onMouseLeave={cancelMovement}
+      >
+        ↓
+      </div>
+      <div
+        className="actionbuttons"
+        role="button"
+        tabIndex={0}
+        style={{
+          ...btnStyle,
+          left: 16,
+          bottom: 98,
+        }}
+        onMouseDown={() => {
+          getRenderer().controls.moveU = -1;
+        }}
+        onMouseUp={() => {
+          getRenderer().controls.moveU = 0;
+        }}
+        onTouchStart={() => {
+          getRenderer().controls.moveU = -1;
+        }}
+        onTouchEnd={() => {
+          getRenderer().controls.moveU = 0;
+        }}
+        onTouchCancel={cancelMovement}
+        onMouseLeave={cancelMovement}
+      >
+        ←
+      </div>
+      <div
+        className="actionbuttons"
+        role="button"
+        tabIndex={0}
+        style={{
+          ...btnStyle,
+          // left: 76,
+          left: 98,
+          bottom: 98,
+        }}
+        onMouseDown={() => {
+          getRenderer().controls.moveU = 1;
+        }}
+        onMouseUp={() => {
+          getRenderer().controls.moveU = 0;
+        }}
+        onTouchStart={() => {
+          getRenderer().controls.moveU = 1;
+        }}
+        onTouchEnd={() => {
+          getRenderer().controls.moveU = 0;
+        }}
+        onTouchCancel={cancelMovement}
+        onMouseLeave={cancelMovement}
+      >
+        →
+      </div>
+      <div
+        className="actionbuttons"
+        role="button"
+        tabIndex={0}
+        style={{
+          ...btnStyle,
+          // left: 76,
+          left: 16,
+          bottom: 139,
+        }}
+        onMouseDown={() => {
+          getRenderer().controls.moveW = -1;
+        }}
+        onMouseUp={() => {
+          getRenderer().controls.moveW = 0;
+        }}
+        onTouchStart={() => {
+          getRenderer().controls.moveW = -1;
+        }}
+        onTouchEnd={() => {
+          getRenderer().controls.moveW = 0;
+        }}
+        onTouchCancel={cancelMovement}
+        onMouseLeave={cancelMovement}
+      >
+        ↖
+      </div>
+      <div
+        className="actionbuttons"
+        role="button"
+        tabIndex={0}
+        style={{
+          ...btnStyle,
+          // left: 76,
+          left: 98,
+          bottom: 139,
+        }}
+        onMouseDown={() => {
+          getRenderer().controls.moveW = 1;
+        }}
+        onMouseUp={() => {
+          getRenderer().controls.moveW = 0;
+        }}
+        onTouchStart={() => {
+          getRenderer().controls.moveW = 1;
+        }}
+        onTouchEnd={() => {
+          getRenderer().controls.moveW = 0;
+        }}
+        onTouchCancel={cancelMovement}
+        onMouseLeave={cancelMovement}
+      >
+        ↘
+      </div>
+    </>
+  );
+};
 
 export default MovementControls;
diff --git a/src/components/buttons/PalselButton.jsx b/src/components/buttons/PalselButton.jsx
index 40b53766..a1c34010 100644
--- a/src/components/buttons/PalselButton.jsx
+++ b/src/components/buttons/PalselButton.jsx
@@ -21,7 +21,7 @@ const PalselButton = () => {
   return (
     <div
       id="palselbutton"
-      className={`actionbuttons ${(paletteOpen) ? '' : 'pressed'}`}
+      className={`actionbuttons${(paletteOpen) ? ' pressed' : ''}`}
       style={{
         color: palette.isDark(selectedColor) ? 'white' : 'black',
         backgroundColor: palette.colors[selectedColor],
diff --git a/src/components/buttons/PencilButton.jsx b/src/components/buttons/PencilButton.jsx
new file mode 100644
index 00000000..085e51e8
--- /dev/null
+++ b/src/components/buttons/PencilButton.jsx
@@ -0,0 +1,30 @@
+/**
+ *
+ */
+
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { TbPencil, TbPencilMinus } from 'react-icons/tb';
+import { t } from 'ttag';
+
+import { togglePencil } from '../../store/actions';
+
+const PencilButton = () => {
+  const pencilEnabled = useSelector((state) => state.gui.pencilEnabled);
+  const dispatch = useDispatch();
+
+  return (
+    <div
+      id="pencilbutton"
+      className={`actionbuttons${pencilEnabled ? ' pressed' : ''}`}
+      role="button"
+      title={(pencilEnabled) ? t`Disable Pencil` : t`Enable Pencil`}
+      tabIndex={-1}
+      onClick={() => dispatch(togglePencil())}
+    >
+      {pencilEnabled ? <TbPencilMinus /> : <TbPencil />}
+    </div>
+  );
+};
+
+export default React.memo(PencilButton);
diff --git a/src/controls/PixelPainterControls.js b/src/controls/PixelPainterControls.js
index 9aa0886b..a4b0ad51 100644
--- a/src/controls/PixelPainterControls.js
+++ b/src/controls/PixelPainterControls.js
@@ -43,6 +43,11 @@ class PixelPainterControls {
    * 2: right shift
    */
   holdPainting = 0;
+  // if we are moving
+  moveU = 0;
+  moveV = 0;
+  moveW = 0;
+  prevTime = Date.now();
   // if we are waiting before placing pixel via holdPainting again
   coolDownDelta = false;
 
@@ -82,9 +87,6 @@ class PixelPainterControls {
     document.removeEventListener('keyup', this.onKeyUp, false);
   }
 
-  // eslint-disable-next-line class-methods-use-this
-  update() {}
-
   gotCoolDownDelta(delta) {
     this.coolDownDelta = true;
     setTimeout(() => {
@@ -367,7 +369,7 @@ class PixelPainterControls {
     this.renderer.storeViewInState();
   }
 
-  move(direction) {
+  step(direction) {
     const [x, y, scale] = this.renderer.view;
     const [dx, dy] = direction.map((z) => z * 100.0 / scale);
     this.renderer.updateView([x + dx, y + dy]);
@@ -511,6 +513,38 @@ class PixelPainterControls {
   }
 
   onKeyUp(event) {
+    /*
+     * key locations
+     */
+    switch (event.code) {
+      case 'ArrowUp':
+      case 'KeyW':
+        this.moveV = 0;
+        return;
+      case 'ArrowLeft':
+      case 'KeyA':
+        this.moveU = 0;
+        return;
+      case 'ArrowDown':
+      case 'KeyS':
+        this.moveV = 0;
+        return;
+      case 'ArrowRight':
+      case 'KeyD':
+        this.moveU = 0;
+        return;
+      case 'KeyE':
+        this.moveW = 0;
+        return;
+      case 'KeyQ':
+        this.moveW = 0;
+        return;
+      default:
+    }
+
+    /*
+     * key char
+     */
     switch (event.key) {
       case 'Shift':
       case 'CapsLock':
@@ -527,7 +561,6 @@ class PixelPainterControls {
     ) {
       return;
     }
-    const { store } = this;
 
     /*
      * key location
@@ -535,25 +568,25 @@ class PixelPainterControls {
     switch (event.code) {
       case 'ArrowUp':
       case 'KeyW':
-        this.move([0, -1]);
+        this.moveV = -1;
         return;
       case 'ArrowLeft':
       case 'KeyA':
-        this.move([-1, 0]);
+        this.moveU = -1;
         return;
       case 'ArrowDown':
       case 'KeyS':
-        this.move([0, 1]);
+        this.moveV = 1;
         return;
       case 'ArrowRight':
       case 'KeyD':
-        this.move([1, 0]);
+        this.moveU = 1;
         return;
       case 'KeyE':
-        this.zoom(1);
+        this.moveW = 1;
         return;
       case 'KeyQ':
-        this.zoom(-1);
+        this.moveW = -1;
         return;
       default:
     }
@@ -570,6 +603,7 @@ class PixelPainterControls {
         return;
       case 'Control':
       case 'Shift': {
+        const { store } = this;
         const state = store.getState();
         const { hover } = state.canvas;
         if (hover) {
@@ -605,6 +639,33 @@ class PixelPainterControls {
       default:
     }
   }
+
+  update() {
+    let time = Date.now();
+    const { moveU, moveV, moveW } = this;
+
+    if (!(moveU || moveV || moveW)) {
+      this.prevTime = time;
+      return false;
+    }
+    // set to time since last tick
+    time -= this.prevTime;
+    this.prevTime += time;
+
+    const [x, y, scale] = this.renderer.view;
+
+    const directionalStep = time * 0.4 / scale;
+    let scaleFactor = scale >= 1.0 ? 1.0005 : 1.0003;
+    scaleFactor **= moveW;
+
+    this.renderer.updateView([
+      x + directionalStep * moveU,
+      y + directionalStep * moveV,
+      scale * scaleFactor ** time,
+    ]);
+
+    return true;
+  }
 }
 
 export default PixelPainterControls;
diff --git a/src/controls/VoxelPainterControls.js b/src/controls/VoxelPainterControls.js
index 0dabc866..5c55e82d 100644
--- a/src/controls/VoxelPainterControls.js
+++ b/src/controls/VoxelPainterControls.js
@@ -103,12 +103,9 @@ class VoxelPainterControls {
   spherical = new Spherical();
   sphericalDelta = new Spherical();
   //
-  moveLeft = false;
-  moveRight = false;
-  moveForward = false;
-  moveBackward = false;
-  moveUp = false;
-  moveDown = false;
+  moveU = 0;
+  moveV = 0;
+  moveW = 0;
   //
   scale = 1;
   panOffset = new Vector3();
@@ -421,67 +418,58 @@ class VoxelPainterControls {
       return;
     }
 
-    switch (event.keyCode) {
-      case 38: // up
-      case 87: // w
-        this.moveForward = true;
-        break;
-      case 37: // left
-      case 65: // a
-        this.moveLeft = true;
-        break;
-      case 40: // down
-      case 83: // s
-        this.moveBackward = true;
-        break;
-      case 39: // right
-      case 68: // d
-        this.moveRight = true;
-        break;
-      case 69: // E
-        this.moveUp = true;
-        break;
-      case 67: // C
-        this.moveDown = true;
-        break;
+    switch (event.code) {
+      case 'ArrowUp':
+      case 'KeyW':
+        this.moveV = -1;
+        return;
+      case 'ArrowLeft':
+      case 'KeyA':
+        this.moveU = -1;
+        return;
+      case 'ArrowDown':
+      case 'KeyS':
+        this.moveV = 1;
+        return;
+      case 'ArrowRight':
+      case 'KeyD':
+        this.moveU = 1;
+        return;
+      case 'KeyE':
+        this.moveW = 1;
+        return;
+      case 'KeyQ':
+        this.moveW = -1;
+        return;
       default:
-        break;
     }
   }
 
   onDocumentKeyUp(event) {
-    // ignore key presses if modal is open or chat is used
-    if (event.target.nodeName === 'INPUT'
-      || event.target.nodeName === 'TEXTAREA'
-    ) {
-      return;
-    }
-
-    switch (event.keyCode) {
-      case 38: // up
-      case 87: // w
-        this.moveForward = false;
-        break;
-      case 37: // left
-      case 65: // a
-        this.moveLeft = false;
-        break;
-      case 40: // down
-      case 83: // s
-        this.moveBackward = false;
-        break;
-      case 39: // right
-      case 68: // d
-        this.moveRight = false;
-        break;
-      case 69: // E
-        this.moveUp = false;
-        break;
-      case 67: // C
-        this.moveDown = false;
-        break;
+    switch (event.code) {
+      case 'ArrowUp':
+      case 'KeyW':
+        this.moveV = 0;
+        return;
+      case 'ArrowLeft':
+      case 'KeyA':
+        this.moveU = 0;
+        return;
+      case 'ArrowDown':
+      case 'KeyS':
+        this.moveV = 0;
+        return;
+      case 'ArrowRight':
+      case 'KeyD':
+        this.moveU = 0;
+        return;
+      case 'KeyE':
+        this.moveW = 0;
+        return;
+      case 'KeyQ':
+        this.moveW = 0;
+        return;
       default:
-        break;
     }
   }
 
@@ -688,27 +676,22 @@ class VoxelPainterControls {
   }
 
   update(force) {
-    const {
-      moveRight,
-      moveLeft,
-      moveUp,
-      moveDown,
-      moveForward,
-      moveBackward,
-    } = this;
+    const time = Date.now();
+    const { moveU, moveV, moveW } = this;
 
     if (!(force
       || this.state !== STATE.NONE
       || this.forceNextUpdate
-      || moveRight || moveLeft
-      || moveUp || moveDown
-      || moveForward || moveBackward
+      || moveU || moveV || moveW
     )) {
-      this.prevTime = Date.now();
+      this.prevTime = time;
       return false;
     }
     this.forceNextUpdate = false;
 
+    const delta = (time - this.prevTime) / 1000.0;
+    this.prevTime = time;
+
     const {
       camera,
       target,
@@ -720,9 +703,7 @@ class VoxelPainterControls {
       panOffset,
       sphericalDelta,
     } = this;
-    const time = Date.now();
 
-    const delta = (time - this.prevTime) / 1000.0;
     velocity.x -= velocity.x * 40.0 * delta;
     velocity.y -= velocity.y * 40.0 * delta;
     velocity.z -= velocity.z * 40.0 * delta;
@@ -731,20 +712,12 @@ class VoxelPainterControls {
       velocity.set(0, 0, 0);
     }
 
-    direction.x = Number(moveRight) - Number(moveLeft);
-    direction.y = Number(moveUp) - Number(moveDown);
-    direction.z = Number(moveForward) - Number(moveBackward);
+    direction.set(moveU, -moveW, -moveV);
     direction.normalize();
 
-    if (moveLeft || moveRight) {
-      velocity.x -= direction.x * 1000.0 * delta;
-    }
-    if (moveUp || moveDown) {
-      velocity.y -= direction.y * 1000.0 * delta;
-    }
-    if (moveForward || moveBackward) {
-      velocity.z -= direction.z * 1000.0 * delta;
-    }
+    if (moveU) velocity.x -= direction.x * 1000.0 * delta;
+    if (moveW) velocity.y -= direction.y * 1000.0 * delta;
+    if (moveV) velocity.z -= direction.z * 1000.0 * delta;
 
     vec.setFromMatrixColumn(camera.matrix, 0);
     vec.crossVectors(camera.up, vec);
@@ -755,8 +728,6 @@ class VoxelPainterControls {
     vec.multiplyScalar(-velocity.x * delta);
     panOffset.add(vec);
 
-    this.prevTime = time;
-
     offset.copy(camera.position).sub(target);
 
     // rotate offset to "y-axis-is-up" space
diff --git a/src/store/actions/index.js b/src/store/actions/index.js
index 7c336729..11293518 100644
--- a/src/store/actions/index.js
+++ b/src/store/actions/index.js
@@ -93,6 +93,12 @@ export function toggleOpenPalette() {
   };
 }
 
+export function togglePencil() {
+  return {
+    type: 's/TGL_PENCIL',
+  };
+}
+
 export function selectStyle(style) {
   return {
     type: 's/SELECT_STYLE',
diff --git a/src/store/reducers/gui.js b/src/store/reducers/gui.js
index 88b33c99..78fb5963 100644
--- a/src/store/reducers/gui.js
+++ b/src/store/reducers/gui.js
@@ -6,6 +6,7 @@ const initialState = {
   isLightGrid: false,
   compactPalette: false,
   paletteOpen: true,
+  pencilEnabled: false,
   mute: false,
   chatNotify: true,
   // top-left button menu
@@ -78,6 +79,13 @@ export default function gui(
       };
     }
 
+    case 's/TGL_PENCIL': {
+      return {
+        ...state,
+        pencilEnabled: !state.pencilEnabled,
+      };
+    }
+
     case 's/TGL_OPEN_MENU': {
       return {
         ...state,
@@ -121,6 +129,12 @@ export default function gui(
         chatNotify: !state.chatNotify,
       };
 
+    case 'persist/REHYDRATE':
+      return {
+        ...state,
+        pencilEnabled: false,
+      };
+
     default:
       return state;
   }
diff --git a/src/styles/default.css b/src/styles/default.css
index 46db0c38..be67381f 100644
--- a/src/styles/default.css
+++ b/src/styles/default.css
@@ -460,6 +460,14 @@ tr:nth-child(even) {
   bottom: 16px;
   right: 57px;
 }
+#pencilbutton {
+  bottom: 98px;
+  left: 16px;
+  transition: bottom 300ms ease-in-out;
+}
+#pencilbutton.pressed {
+  bottom: 180px;
+}
 
 #historyselect {
   position: fixed;