127 lines
6.3 KiB
JavaScript
127 lines
6.3 KiB
JavaScript
/**
|
|
*
|
|
*/
|
|
|
|
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 */
|
|
|
|
const Help = () => {
|
|
const bindG = <kbd>{c('keybinds').t`G`}</kbd>;
|
|
const bindX = <kbd>{c('keybinds').t`X`}</kbd>;
|
|
const bindH = <kbd>{c('keybinds').t`H`}</kbd>;
|
|
const bindR = <kbd>{c('keybinds').t`R`}</kbd>;
|
|
const bindQ = <kbd>{c('keybinds').t`Q`}</kbd>;
|
|
const bindE = <kbd>{c('keybinds').t`E`}</kbd>;
|
|
const bindW = <kbd>{c('keybinds').t`W`}</kbd>;
|
|
const bindA = <kbd>{c('keybinds').t`A`}</kbd>;
|
|
const bindS = <kbd>{c('keybinds').t`S`}</kbd>;
|
|
const bindD = <kbd>{c('keybinds').t`D`}</kbd>;
|
|
const bindAUp = <kbd>↑</kbd>;
|
|
const bindALeft = <kbd>←</kbd>;
|
|
const bindADown = <kbd>↓</kbd>;
|
|
const bindARight = <kbd>→</kbd>;
|
|
const mouseSymbol = <kbd><GiMouse /></kbd>;
|
|
const touchSymbol = <kbd><MdTouchApp /></kbd>;
|
|
const bindShift = <kbd>⇧ {c('keybinds').t`Shift`}</kbd>;
|
|
|
|
const starhouseLink = <a href="https://twitter.com/starhousedev">starhouse </a>;
|
|
const vinikLink = <a href="https://twitter.com/Vinikdev">Vinikdev</a>;
|
|
const donendoLink = <a href="https://lospec.com/palette-list/lava-gb">Do-Nendo</a>;
|
|
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 Cooldown between pixels. You can check out the cooldown and requirements on the Canvas Selection menu (globe button on top). Some canvases have a different cooldown for replacing a user-set pixels than placing on a unset pixel. i.e. 4s/7s means 4s on fresh pixels and 7s on already set pixels.`}<br />
|
|
{t`Higher zoomlevels take some time to update, the 3D globe gets updated at least once per day.`}<br />
|
|
{t`Have fun!`}
|
|
</p>
|
|
<p className="modalinfo">Guilded ({t`recommended`}): <a href="./guilded" target="_blank" rel="noopener noreferrer">pixelplanet.fun/guilded</a></p>
|
|
<p className="modalinfo">{t`Source on `}<a href="https://git.pixelplanet.fun" target="_blank" rel="noopener noreferrer">git.pixelplanet.fun</a></p>
|
|
<h3>{t`Map Data`}</h3>
|
|
<p>{t`The bare map data that we use, together with converted OpenStreetMap tiles for orientation, can be downloaded from mega.nz here: `}<a href="https://mega.nz/#!JpkBwAbJ!EnSLlZmKv3kEBE0HDhakTgAZZycD3ELjduajJxPGaXo">pixelplanetmap.zip</a> (422MB)</p>
|
|
<h3>{t`Banned? Detected as Proxy?`}</h3>
|
|
<div>
|
|
<p>{jt`If you got detected as proxy, but you are none, or think that you got wrongfully banned, please go to our ${guildedLink} or send us an e-mail to ${mailLink} and include the following IID:`}</p>
|
|
<GetIID />
|
|
</div>
|
|
<h3>2D {t`Controls`}</h3>
|
|
<div style={{ lineHeight: 1.5 }}>
|
|
{t`Click a color in palette to select it`}<br />
|
|
{jt`Press ${bindG} to toggle grid`}<br />
|
|
{jt`Press ${bindX} to toggle showing of pixel activity`}<br />
|
|
{jt`Press ${bindH} to toggle historical view`}<br />
|
|
{jt`Press ${bindR} to copy coordinates`}<br />
|
|
{jt`Press ${bindQ} or ${bindE} to zoom`}<br />
|
|
{jt`Press ${bindW}, ${bindA}, ${bindS}, ${bindD} to move`}<br />
|
|
{jt`Press ${bindAUp}, ${bindALeft}, ${bindADown}, ${bindARight} to move`}<br />
|
|
{jt`Drag ${mouseSymbol} mouse or ${touchSymbol} pan to move`}<br />
|
|
{jt`Scroll ${mouseSymbol} mouse wheel or ${touchSymbol} pinch to zoom`}<br />
|
|
{jt`Hold left ${bindShift} for placing while moving mouse`}<br />
|
|
{jt`Hold right ${bindShift} for placing while moving mouse according to historical view`}<br />
|
|
{jt`${mouseSymbol} Left click or ${touchSymbol} tap to place a pixel`}<br />
|
|
{jt`Click ${mouseSymbol} middle mouse button or ${touchSymbol} long-tap to select current hovering color`}<br />
|
|
</div>
|
|
<h3>3D {t`Controls`}</h3>
|
|
<div style={{ lineHeight: 1.5 }}>
|
|
{jt`Press ${bindW}, ${bindA}, ${bindS}, ${bindD} to move`}<br />
|
|
{jt`Press ${bindAUp}, ${bindALeft}, ${bindADown}, ${bindARight} to move`}<br />
|
|
{jt`Press ${bindQ} and ${bindE} to fly up and down`}<br />
|
|
{jt`${mouseSymbol} Hold left mouse button and drag mouse to rotate`}<br />
|
|
{jt`${mouseSymbol} Scroll mouse wheel or hold ${mouseSymbol} middle mouse button and drag to zoom`}<br />
|
|
{jt`${mouseSymbol} Right click and drag mouse to pan`}<br />
|
|
{jt`${mouseSymbol} Left click or ${touchSymbol} tap to place a pixel`}<br />
|
|
{jt`${mouseSymbol} Right click or ${touchSymbol} double-tap to remove a pixel`}<br />
|
|
{jt`Click ${mouseSymbol} middle mouse button or ${touchSymbol} long-tap to select current hovering color`}<br />
|
|
</div>
|
|
<h3>Palette Credits</h3>
|
|
<div>
|
|
{jt`We thank the following artists, who made their palettes available to the public on`}
|
|
<a href="https://lospec.com/">lospec.com</a>
|
|
<p>
|
|
{jt`Credit for the Palette of the Moon goes to ${starhouseLink}.`}
|
|
</p>
|
|
<p>
|
|
{jt`Credit for the Palette of the Top10 canvas goes to ${vinikLink}.`}
|
|
</p>
|
|
<p>
|
|
{jt`Credit for the Palette of the 2bit canvas goes to ${donendoLink}.`}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Help;
|