add logo to toggle easter egg in help window, fix z keybind
This commit is contained in:
parent
313101d4be
commit
e74b3f923b
|
@ -164,7 +164,6 @@
|
||||||
"cli": 2,
|
"cli": 2,
|
||||||
"bcd": 2000,
|
"bcd": 2000,
|
||||||
"cds": 60000,
|
"cds": 60000,
|
||||||
"req": 0,
|
|
||||||
"sd": "2020-01-08"
|
"sd": "2020-01-08"
|
||||||
},
|
},
|
||||||
"3": {
|
"3": {
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
|
|
||||||
import { useState, useRef, useCallback } from 'react';
|
import { useState, useRef, useCallback } from 'react';
|
||||||
|
|
||||||
function useLongPress(shortPressCallback, longPressCallback) {
|
function useLongPress(shortPressCallback, longPressCallback, timeout = 600) {
|
||||||
const [pressTimeout, setPressTimeout] = useState(null);
|
const [pressTimeout, setPressTimeout] = useState(null);
|
||||||
const btnRef = useRef();
|
const btnRef = useRef();
|
||||||
|
|
||||||
|
@ -14,8 +14,8 @@ function useLongPress(shortPressCallback, longPressCallback) {
|
||||||
setPressTimeout(setTimeout(() => {
|
setPressTimeout(setTimeout(() => {
|
||||||
longPressCallback(event);
|
longPressCallback(event);
|
||||||
setPressTimeout(null);
|
setPressTimeout(null);
|
||||||
}, 600));
|
}, timeout));
|
||||||
}, [longPressCallback]);
|
}, [longPressCallback, timeout]);
|
||||||
|
|
||||||
const release = useCallback((event) => {
|
const release = useCallback((event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
@ -24,7 +24,9 @@ function useLongPress(shortPressCallback, longPressCallback) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
clearTimeout(pressTimeout);
|
clearTimeout(pressTimeout);
|
||||||
|
if (shortPressCallback) {
|
||||||
shortPressCallback(event);
|
shortPressCallback(event);
|
||||||
|
}
|
||||||
setPressTimeout(null);
|
setPressTimeout(null);
|
||||||
}, [pressTimeout, shortPressCallback]);
|
}, [pressTimeout, shortPressCallback]);
|
||||||
|
|
||||||
|
|
|
@ -3,13 +3,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { t } from 'ttag';
|
import { t } from 'ttag';
|
||||||
|
|
||||||
const imageStyle = {
|
|
||||||
maxWidth: '20%',
|
|
||||||
padding: 2,
|
|
||||||
display: 'inline-block',
|
|
||||||
verticalAlign: 'middle',
|
|
||||||
};
|
|
||||||
|
|
||||||
const Archive = () => (
|
const Archive = () => (
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<p>
|
<p>
|
||||||
|
@ -18,7 +11,9 @@ const Archive = () => (
|
||||||
</p>
|
</p>
|
||||||
<h3>{t`Political Compass Canvas`}</h3>
|
<h3>{t`Political Compass Canvas`}</h3>
|
||||||
<img
|
<img
|
||||||
style={imageStyle}
|
style={{
|
||||||
|
padding: 2, maxWidth: '20%', verticalAlign: 'middle', display: 'inline-block',
|
||||||
|
}}
|
||||||
alt="political-compass"
|
alt="political-compass"
|
||||||
src="https://storage.pixelplanet.fun/compass-preview.png"
|
src="https://storage.pixelplanet.fun/compass-preview.png"
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -14,7 +14,7 @@ import useLink from '../hooks/link';
|
||||||
const CanvasSelect = () => {
|
const CanvasSelect = () => {
|
||||||
const [canvases, showHiddenCanvases, online] = useSelector((state) => [
|
const [canvases, showHiddenCanvases, online] = useSelector((state) => [
|
||||||
state.canvas.canvases,
|
state.canvas.canvases,
|
||||||
state.canvas.showHiddenCanvases,
|
state.gui.easterEgg,
|
||||||
state.ranks.online,
|
state.ranks.online,
|
||||||
], shallowEqual);
|
], shallowEqual);
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
|
@ -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 { c, t, jt } from 'ttag';
|
||||||
import { GiMouse } from 'react-icons/gi';
|
import { GiMouse } from 'react-icons/gi';
|
||||||
import { MdTouchApp } from 'react-icons/md';
|
import { MdTouchApp } from 'react-icons/md';
|
||||||
|
|
||||||
import GetIID from '../GetIID';
|
import GetIID from '../GetIID';
|
||||||
|
import useLongPress from '../hooks/useLongPress';
|
||||||
|
import { toggleEasterEgg } from '../../store/actions';
|
||||||
|
import { notify } from '../../store/actions/thunks';
|
||||||
|
|
||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
|
|
||||||
|
@ -37,8 +41,27 @@ const Help = () => {
|
||||||
const guildedLink = <a href="https://pixelplanet.fun/guilded">guilded</a>;
|
const guildedLink = <a href="https://pixelplanet.fun/guilded">guilded</a>;
|
||||||
const mailLink = <a href="mailto:admin@pixelplanet.fun">admin@pixelplanet.fun</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 (
|
return (
|
||||||
<div className="content">
|
<div className="content">
|
||||||
|
<img
|
||||||
|
style={{
|
||||||
|
padding: 2, maxWidth: '20%', verticalAlign: 'middle', display: 'inline-block',
|
||||||
|
}}
|
||||||
|
alt="ppfun"
|
||||||
|
src="./logo.svg"
|
||||||
|
ref={refCallback}
|
||||||
|
/>
|
||||||
<p>
|
<p>
|
||||||
{t`Place color pixels on a large canvas with other players online!`}<br />
|
{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 \
|
{t`Our main canvas is a huge worldmap, you can place wherever you like, but you will have to wait a specific \
|
||||||
|
|
|
@ -916,7 +916,7 @@ table td span {
|
||||||
border-width: thin;
|
border-width: thin;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
z-index: 2;
|
z-index: 8;
|
||||||
transition: visibility 0.5s, opacity 0.5s linear;
|
transition: visibility 0.5s, opacity 0.5s linear;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user