Change controls to E/C Up/Down and update Help Modal
Fix Screenshot issue
This commit is contained in:
parent
1b185f4e5b
commit
dd7bfa95a0
|
@ -4,21 +4,14 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { connect } from 'react-redux';
|
|
||||||
// import FaFacebook from 'react-icons/lib/fa/facebook';
|
// import FaFacebook from 'react-icons/lib/fa/facebook';
|
||||||
// import FaTwitter from 'react-icons/lib/fa/twitter';
|
// import FaTwitter from 'react-icons/lib/fa/twitter';
|
||||||
// import FaRedditAlien from 'react-icons/lib/fa/reddit-alien';
|
// import FaRedditAlien from 'react-icons/lib/fa/reddit-alien';
|
||||||
|
|
||||||
|
/* eslint-disable max-len */
|
||||||
|
|
||||||
import Modal from './Modal';
|
import Modal from './Modal';
|
||||||
import { social, MIN_COOLDOWN, BLANK_COOLDOWN } from '../core/constants';
|
|
||||||
|
|
||||||
import type { State } from '../reducers';
|
|
||||||
|
|
||||||
|
|
||||||
const linkStyle = {
|
|
||||||
textDecoration: 'none',
|
|
||||||
color: '#428bca',
|
|
||||||
};
|
|
||||||
|
|
||||||
const titleStyle = {
|
const titleStyle = {
|
||||||
color: '#4f545c',
|
color: '#4f545c',
|
||||||
|
@ -46,14 +39,16 @@ const textStyle = {
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const HelpModal = ({ center }) => (
|
const HelpModal = () => (
|
||||||
<Modal title="Welcome to PixelPlanet.fun">
|
<Modal title="Welcome to PixelPlanet.fun">
|
||||||
<p style={{ textAlign: 'center' }}>
|
<p style={{ textAlign: 'center' }}>
|
||||||
<p style={textStyle}>Place color pixels on a large canvas with other players online!
|
<p style={textStyle}>Place color pixels on a large canvas with other players online!
|
||||||
Cooldown is {(BLANK_COOLDOWN / 1000) | 0} seconds for fresh pixels and {(MIN_COOLDOWN / 1000) | 0}s for overwriting existing pixels!
|
Our main canvas is a huge worldmap, you can place wherever you like, but you will have to wait a specific
|
||||||
The current canvas size is from -32768 to +32768 in x and y.
|
Cooldown between pixels. You can check out the cooldown and requiremnts 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.
|
||||||
Higher zoomlevels take some time to update, the 3D globe gets updated at least once per day.
|
Higher zoomlevels take some time to update, the 3D globe gets updated at least once per day.
|
||||||
Have fun!</p>
|
Have fun!</p>
|
||||||
<p>Discord: <a href="./discord" target="_blank">pixelplanet.fun/discord</a></p>
|
<p>Discord: <a href="./discord" target="_blank">pixelplanet.fun/discord</a></p>
|
||||||
<p>Source on <a href="https://github.com/pixelplanetdev/pixelplanet" target="_blank">github</a></p>
|
<p>Source on <a href="https://github.com/pixelplanetdev/pixelplanet" target="_blank">github</a></p>
|
||||||
<p>Reddit: <a href="https://www.reddit.com/r/PixelPlanetFun/" target="_blank">r/PixelPlanetFun</a></p>
|
<p>Reddit: <a href="https://www.reddit.com/r/PixelPlanetFun/" target="_blank">r/PixelPlanetFun</a></p>
|
||||||
|
@ -65,8 +60,8 @@ const HelpModal = ({ center }) => (
|
||||||
<p style={titleStyle}>GIMP Palette</p>
|
<p style={titleStyle}>GIMP Palette</p>
|
||||||
<p style={textStyle}>The Palettes for <a href="https://www.gimp.org">GIMP</a> can be found <a href="./palette0.gpl">here</a> and <a href="./palette1.gpl">here</a>. Credit for the Palette of the second planet goes to <a href="https://twitter.com/starhousedev">starhouse</a>.</p>
|
<p style={textStyle}>The Palettes for <a href="https://www.gimp.org">GIMP</a> can be found <a href="./palette0.gpl">here</a> and <a href="./palette1.gpl">here</a>. Credit for the Palette of the second planet goes to <a href="https://twitter.com/starhousedev">starhouse</a>.</p>
|
||||||
<p style={titleStyle}>Detected as Proxy?</p>
|
<p style={titleStyle}>Detected as Proxy?</p>
|
||||||
<p style={textStyle}>If you got detected as proxy, but you are none, please send us an e-mail with <a href="https://www.whatismyip.com/">your IP</a> to pixelplanetdev@gmail.com. Don't post your IP anywhere else. We are sorry for the inconvenience.</p>
|
<p style={textStyle}>If you got detected as proxy, but you are none, please send us an e-mail with <a href="https://www.whatismyip.com/">your IP</a> to pixelplanetdev@gmail.com. Do not post your IP anywhere else. We are sorry for the inconvenience.</p>
|
||||||
<h3 style={titleStyle}>Controls</h3>
|
<h3 style={titleStyle}>2D Controls</h3>
|
||||||
<p style={textStyle}>Click a color in palette to select</p>
|
<p style={textStyle}>Click a color in palette to select</p>
|
||||||
<p style={textStyle}>Press <kbd>G</kbd> to toggle grid</p>
|
<p style={textStyle}>Press <kbd>G</kbd> to toggle grid</p>
|
||||||
<p style={textStyle}>Press <kbd>C</kbd> to toggle showing of pixel activity</p>
|
<p style={textStyle}>Press <kbd>C</kbd> to toggle showing of pixel activity</p>
|
||||||
|
@ -79,6 +74,15 @@ const HelpModal = ({ center }) => (
|
||||||
<p style={textStyle}>Pinch to zoom (on touch devices)</p>
|
<p style={textStyle}>Pinch to zoom (on touch devices)</p>
|
||||||
<p style={textStyle}>Pan to move (on touch devices)</p>
|
<p style={textStyle}>Pan to move (on touch devices)</p>
|
||||||
<p style={textStyle}>Click or tab to place a pixel</p>
|
<p style={textStyle}>Click or tab to place a pixel</p>
|
||||||
|
<h3 style={titleStyle}>3D Controls</h3>
|
||||||
|
<p style={textStyle}>Press <kbd>W</kbd>,<kbd>A</kbd>,<kbd>S</kbd>, <kbd>D</kbd> to move</p>
|
||||||
|
<p style={textStyle}>Press <kbd>↑</kbd>,<kbd>←</kbd>,<kbd>↓</kbd>, <kbd>→</kbd> to move</p>
|
||||||
|
<p style={textStyle}>Scroll mouse wheel to zoom</p>
|
||||||
|
<p style={textStyle}>Left click and drag mouse to rotate</p>
|
||||||
|
<p style={textStyle}>Middle click and drag mouse to zoom</p>
|
||||||
|
<p style={textStyle}>Right click and drag mouse to pan</p>
|
||||||
|
<p style={textStyle}>Left Click to place a pixel</p>
|
||||||
|
<p style={textStyle}>Right Click to remove a pixel</p>
|
||||||
<p>Partners: <a href="https://www.crazygames.com/c/io" target="_blank">crazygames.com</a></p>
|
<p>Partners: <a href="https://www.crazygames.com/c/io" target="_blank">crazygames.com</a></p>
|
||||||
<p style={textStyle}>
|
<p style={textStyle}>
|
||||||
<small>This site is protected by reCAPTCHA and the Google
|
<small>This site is protected by reCAPTCHA and the Google
|
||||||
|
@ -90,9 +94,4 @@ const HelpModal = ({ center }) => (
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
|
|
||||||
function mapStateToProps(state: State) {
|
export default HelpModal;
|
||||||
const { center } = state.user;
|
|
||||||
return { center };
|
|
||||||
}
|
|
||||||
|
|
||||||
export default connect(mapStateToProps)(HelpModal);
|
|
||||||
|
|
|
@ -467,11 +467,11 @@ class VoxelPainterControls extends EventDispatcher {
|
||||||
moveRight = true;
|
moveRight = true;
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 32: // space
|
case 69: // E
|
||||||
moveUp = true;
|
moveUp = true;
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 16: // shift
|
case 67: // C
|
||||||
moveDown = true;
|
moveDown = true;
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
|
@ -503,11 +503,11 @@ class VoxelPainterControls extends EventDispatcher {
|
||||||
moveRight = false;
|
moveRight = false;
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 32: // space
|
case 69: // E
|
||||||
moveUp = false;
|
moveUp = false;
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 16: // shift
|
case 67: // C
|
||||||
moveDown = false;
|
moveDown = false;
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
|
|
|
@ -87,9 +87,3 @@ export const MINUTE = 60 * SECOND;
|
||||||
export const HOUR = 60 * MINUTE;
|
export const HOUR = 60 * MINUTE;
|
||||||
export const DAY = 24 * HOUR;
|
export const DAY = 24 * HOUR;
|
||||||
export const MONTH = 30 * DAY;
|
export const MONTH = 30 * DAY;
|
||||||
|
|
||||||
/* export const BLANK_COOLDOWN = 10 * SECOND;
|
|
||||||
export const MIN_COOLDOWN = 30 * SECOND; */
|
|
||||||
|
|
||||||
export const BLANK_COOLDOWN = 3 * SECOND;
|
|
||||||
export const MIN_COOLDOWN = 15 * SECOND;
|
|
||||||
|
|
|
@ -15,7 +15,6 @@ import {
|
||||||
MINUTE,
|
MINUTE,
|
||||||
SECOND,
|
SECOND,
|
||||||
DAY,
|
DAY,
|
||||||
BLANK_COOLDOWN,
|
|
||||||
} from '../../core/constants';
|
} from '../../core/constants';
|
||||||
|
|
||||||
import me from './me';
|
import me from './me';
|
||||||
|
|
|
@ -79,13 +79,12 @@ class ProtocolClient extends EventEmitter {
|
||||||
this.isConnected = true;
|
this.isConnected = true;
|
||||||
this.emit('open', {});
|
this.emit('open', {});
|
||||||
this.requestChatHistory();
|
this.requestChatHistory();
|
||||||
console.log(`Register ${chunks.length} chunks`);
|
this.processMsgQueue();
|
||||||
// TODO RegisterMultipleChunks before RegisterCanvas doesn't make sense
|
|
||||||
this.ws.send(RegisterMultipleChunks.dehydrate(chunks));
|
|
||||||
if (this.canvasId !== null) {
|
if (this.canvasId !== null) {
|
||||||
this.ws.send(RegisterCanvas.dehydrate(this.canvasId));
|
this.ws.send(RegisterCanvas.dehydrate(this.canvasId));
|
||||||
}
|
}
|
||||||
this.processMsgQueue();
|
console.log(`Register ${chunks.length} chunks`);
|
||||||
|
this.ws.send(RegisterMultipleChunks.dehydrate(chunks));
|
||||||
}
|
}
|
||||||
|
|
||||||
onError(err) {
|
onError(err) {
|
||||||
|
@ -106,6 +105,7 @@ class ProtocolClient extends EventEmitter {
|
||||||
}
|
}
|
||||||
console.log('Notify websocket server that we changed canvas');
|
console.log('Notify websocket server that we changed canvas');
|
||||||
this.canvasId = canvasId;
|
this.canvasId = canvasId;
|
||||||
|
chunks.length = 0;
|
||||||
this.sendWhenReady(RegisterCanvas.dehydrate(this.canvasId));
|
this.sendWhenReady(RegisterCanvas.dehydrate(this.canvasId));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -134,7 +134,9 @@ class Renderer {
|
||||||
this.plane.position.y = -0.1;
|
this.plane.position.y = -0.1;
|
||||||
|
|
||||||
// renderer
|
// renderer
|
||||||
const threeRenderer = new THREE.WebGLRenderer({ antialias: true });
|
const threeRenderer = new THREE.WebGLRenderer({
|
||||||
|
preserveDrawingBuffer: true,
|
||||||
|
});
|
||||||
threeRenderer.setPixelRatio(window.devicePixelRatio);
|
threeRenderer.setPixelRatio(window.devicePixelRatio);
|
||||||
threeRenderer.setSize(window.innerWidth, window.innerHeight);
|
threeRenderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
document.body.appendChild(threeRenderer.domElement);
|
document.body.appendChild(threeRenderer.domElement);
|
||||||
|
|
Loading…
Reference in New Issue
Block a user