add logo to toggle easter egg in help window, fix z keybind

src/canvases.json

@@ -164,7 +164,6 @@
     "cli": 2,
     "bcd": 2000,
     "cds": 60000,
-    "req": 0,
     "sd": "2020-01-08"
   },
   "3": {

src/components/hooks/useLongPress.js

@@ -5,7 +5,7 @@
 
 import { useState, useRef, useCallback } from 'react';
 
-function useLongPress(shortPressCallback, longPressCallback) {
+function useLongPress(shortPressCallback, longPressCallback, timeout = 600) {
   const [pressTimeout, setPressTimeout] = useState(null);
   const btnRef = useRef();
 
@@ -14,8 +14,8 @@ function useLongPress(shortPressCallback, longPressCallback) {
     setPressTimeout(setTimeout(() => {
       longPressCallback(event);
       setPressTimeout(null);
-    }, 600));
-  }, [longPressCallback]);
+    }, timeout));
+  }, [longPressCallback, timeout]);
 
   const release = useCallback((event) => {
     event.preventDefault();
@@ -24,7 +24,9 @@ function useLongPress(shortPressCallback, longPressCallback) {
       return;
     }
     clearTimeout(pressTimeout);
-    shortPressCallback(event);
+    if (shortPressCallback) {
+      shortPressCallback(event);
+    }
     setPressTimeout(null);
   }, [pressTimeout, shortPressCallback]);
 

src/components/windows/Archive.jsx

@@ -3,13 +3,6 @@
 import React from 'react';
 import { t } from 'ttag';
 
-const imageStyle = {
-  maxWidth: '20%',
-  padding: 2,
-  display: 'inline-block',
-  verticalAlign: 'middle',
-};
-
 const Archive = () => (
   <div className="content">
     <p>
@@ -18,7 +11,9 @@ const Archive = () => (
     </p>
     <h3>{t`Political Compass Canvas`}</h3>
     <img
-      style={imageStyle}
+      style={{
+        padding: 2, maxWidth: '20%', verticalAlign: 'middle', display: 'inline-block',
+      }}
       alt="political-compass"
       src="https://storage.pixelplanet.fun/compass-preview.png"
     />

src/components/windows/CanvasSelect.jsx

@@ -14,7 +14,7 @@ import useLink from '../hooks/link';
 const CanvasSelect = () => {
   const [canvases, showHiddenCanvases, online] = useSelector((state) => [
     state.canvas.canvases,
-    state.canvas.showHiddenCanvases,
+    state.gui.easterEgg,
     state.ranks.online,
   ], shallowEqual);
   const dispatch = useDispatch();

src/components/windows/Help.jsx

@@ -2,12 +2,16 @@
  *
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 import { c, t, jt } from 'ttag';
 import { GiMouse } from 'react-icons/gi';
 import { MdTouchApp } from 'react-icons/md';
 
 import GetIID from '../GetIID';
+import useLongPress from '../hooks/useLongPress';
+import { toggleEasterEgg } from '../../store/actions';
+import { notify } from '../../store/actions/thunks';
 
 /* eslint-disable max-len */
 
@@ -37,8 +41,27 @@ const Help = () => {
   const guildedLink = <a href="https://pixelplanet.fun/guilded">guilded</a>;
   const mailLink = <a href="mailto:admin@pixelplanet.fun">admin@pixelplanet.fun</a>;
 
+  const dispatch = useDispatch();
+  const easterEgg = useSelector((state) => state.gui.easterEgg);
+
+  const onLongPress = useCallback(() => {
+    dispatch(toggleEasterEgg());
+    dispatch(notify((easterEgg)
+      ? t`Easter Egg OFF`
+      : t`Easter Egg ON`));
+  }, [easterEgg, dispatch]);
+  const refCallback = useLongPress(null, onLongPress, 1000);
+
   return (
     <div className="content">
+      <img
+        style={{
+          padding: 2, maxWidth: '20%', verticalAlign: 'middle', display: 'inline-block',
+        }}
+        alt="ppfun"
+        src="./logo.svg"
+        ref={refCallback}
+      />
       <p>
         {t`Place color pixels on a large canvas with other players online!`}<br />
         {t`Our main canvas is a huge worldmap, you can place wherever you like, but you will have to wait a specific \

src/styles/default.css

@@ -916,7 +916,7 @@ table td span {
   border-width: thin;
   margin-left: auto;
   margin-right: auto;
-  z-index: 2;
+  z-index: 8;
   transition: visibility 0.5s, opacity 0.5s linear;
   visibility: hidden;
   opacity: 0;