make auto-color accessible from settings

src/components/TemplateSettings.jsx

@@ -16,6 +16,7 @@ import templateLoader from '../ui/templateLoader';
 import {
   toggleOVEnabled,
   toggleSmallPxls,
+  toggleRightShift,
   setOvOpacity,
 } from '../store/actions/templates';
 
@@ -27,11 +28,15 @@ const TemplateSettings = () => {
     oVEnabled,
     oSmallPxls,
     oOpacity,
+    oRightShift,
+    isOnMobile,
   ] = useSelector((state) => [
     state.templates.list,
     state.templates.ovEnabled,
     state.templates.oSmallPxls,
     state.templates.oOpacity,
+    state.templates.oRightShift,
+    state.user.isOnMobile,
   ], shallowEqual);
   const [editingIndices, setEditingIndices] = useState([]);
   const close = useCallback(() => setShowAdd(false), []);
@@ -95,6 +100,18 @@ const TemplateSettings = () => {
         <div className="modaldivider" />
       </div>
 
+      {(!isOnMobile) && (
+      <SettingsItem
+        title={t`Right-Shift Auto-Color`}
+        value={oRightShift}
+        onToggle={() => dispatch(toggleRightShift())}
+      >
+        {
+          t`Place pixels from overlay on right-shift, instead of history.`
+        }
+      </SettingsItem>
+      )}
+
       {list.map(({
         enabled, imageId, canvasId, title, x, y, width, height,
       }, index) => (editingIndices.includes(index) ? (

src/components/buttons/PencilButton.jsx

@@ -16,11 +16,9 @@ const PencilButton = () => {
   const [
     holdPaint,
     showMvmCtrls,
-    easterEgg,
   ] = useSelector((state) => [
     state.gui.holdPaint,
     state.gui.showMvmCtrls,
-    state.gui.easterEgg,
   ], shallowEqual);
   const dispatch = useDispatch();
 
@@ -35,12 +33,11 @@ const PencilButton = () => {
           break;
         }
       // eslint-disable-next-line no-fallthrough
-      case HOLD_PAINT.HISTORY:
+      case HOLD_PAINT.HISTORY: {
-        if (easterEgg) {
+        nextMode = HOLD_PAINT.OVERLAY;
-          nextMode = HOLD_PAINT.OVERLAY;
+        dispatch(notify(t`Overlay Pencil ON`));
-          dispatch(notify(t`Overlay Pencil ON`));
+        break;
-          break;
+      }
-        }
       // eslint-disable-next-line no-fallthrough
       default:
         if (holdPaint) {
@@ -50,7 +47,7 @@ const PencilButton = () => {
         }
     }
     dispatch(selectHoldPaint(nextMode));
-  }, [holdPaint, easterEgg, dispatch]);
+  }, [holdPaint, dispatch]);
 
   const onShortPress = useCallback(() => {
     let nextMode;

src/controls/keypress.js

@@ -23,7 +23,7 @@ import {
 import { HOLD_PAINT } from '../core/constants';
 import { notify } from '../store/actions/thunks';
 
-const charKeys = ['g', 'h', 'x', 'm', 't', 'r', 'z', '+', '-'];
+const charKeys = ['g', 'h', 'x', 'm', 't', 'r', 'l', '+', '-'];
 
 export function createKeyUpHandler(store) {
   return (event) => {
@@ -153,7 +153,7 @@ export function createKeyDownHandler(store) {
         if (event.location === KeyboardEvent.DOM_KEY_LOCATION_RIGHT) {
           // right shift
           store.dispatch(selectHoldPaint(
-            (store.getState().gui.easterEgg)
+            (store.getState().templates.oRightShift)
               ? HOLD_PAINT.OVERLAY : HOLD_PAINT.HISTORY,
             true,
           ));
@@ -218,7 +218,7 @@ export function createKeyDownHandler(store) {
           : t`Overlay OFF`));
         return;
       }
-      case 'z':
+      case 'l':
         store.dispatch(toggleEasterEgg());
         store.dispatch(notify((store.getState().gui.easterEgg)
           ? t`Easter Egg ON`

src/store/actions/templates.js

@@ -48,6 +48,12 @@ export function toggleSmallPxls() {
   };
 }
 
+export function toggleRightShift() {
+  return {
+    type: 's/TGL_RIGHTSHIFT',
+  };
+}
+
 export function setOvOpacity(opacity) {
   return {
     type: 's/SET_O_OPACITY',

src/store/reducers/templates.js

@@ -9,6 +9,7 @@ const initialState = {
   mEnabled: false,
   oOpacity: 40,
   oSmallPxls: true,
+  oRightShift: false,
   /*
    * [{
    *   enabled,
@@ -112,6 +113,12 @@ export default function templates(
         oSmallPxls: !state.oSmallPxls,
       };
 
+    case 's/TGL_RIGHTSHIFT':
+      return {
+        ...state,
+        oRightShift: !state.oRightShift,
+      };
+
     case 's/SET_O_OPACITY':
       return {
         ...state,