Change controls to E/C Up/Down and update Help Modal

Fix Screenshot issue

src/components/HelpModal.jsx

@@ -4,21 +4,14 @@
  */
 
 import React from 'react';
-import { connect } from 'react-redux';
 // import FaFacebook from 'react-icons/lib/fa/facebook';
 // import FaTwitter from 'react-icons/lib/fa/twitter';
 // import FaRedditAlien from 'react-icons/lib/fa/reddit-alien';
 
+/* eslint-disable max-len */
+
 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 = {
   color: '#4f545c',
@@ -46,14 +39,16 @@ const textStyle = {
 };
 
 
-const HelpModal = ({ center }) => (
+const HelpModal = () => (
   <Modal title="Welcome to PixelPlanet.fun">
     <p style={{ textAlign: 'center' }}>
       <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!
-        The current canvas size is from -32768 to +32768 in x and y.
+        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 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.
-		Have fun!</p>
+      Have fun!</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>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={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={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>
-      <h3 style={titleStyle}>Controls</h3>
+      <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}>2D Controls</h3>
       <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>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}>Pan to move (on touch devices)</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 style={textStyle}>
         <small>This site is protected by reCAPTCHA and the Google
@@ -90,9 +94,4 @@ const HelpModal = ({ center }) => (
   </Modal>
 );
 
-function mapStateToProps(state: State) {
-  const { center } = state.user;
-  return { center };
-}
-
-export default connect(mapStateToProps)(HelpModal);
+export default HelpModal;

src/controls/VoxelPainterControls.js

@@ -467,11 +467,11 @@ class VoxelPainterControls extends EventDispatcher {
           moveRight = true;
           break;
 
-        case 32: // space
+        case 69: // E
           moveUp = true;
           break;
 
-        case 16: // shift
+        case 67: // C
           moveDown = true;
           break;
         default:
@@ -503,11 +503,11 @@ class VoxelPainterControls extends EventDispatcher {
           moveRight = false;
           break;
 
-        case 32: // space
+        case 69: // E
           moveUp = false;
           break;
 
-        case 16: // shift
+        case 67: // C
           moveDown = false;
           break;
         default:

src/core/constants.js

@@ -87,9 +87,3 @@ export const MINUTE = 60 * SECOND;
 export const HOUR = 60 * MINUTE;
 export const DAY = 24 * HOUR;
 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;

src/routes/api/index.js

@@ -15,7 +15,6 @@ import {
   MINUTE,
   SECOND,
   DAY,
-  BLANK_COOLDOWN,
 } from '../../core/constants';
 
 import me from './me';

src/socket/ProtocolClient.js

@@ -79,13 +79,12 @@ class ProtocolClient extends EventEmitter {
     this.isConnected = true;
     this.emit('open', {});
     this.requestChatHistory();
-    console.log(`Register ${chunks.length} chunks`);
-    // TODO RegisterMultipleChunks before RegisterCanvas doesn't make sense
-    this.ws.send(RegisterMultipleChunks.dehydrate(chunks));
+    this.processMsgQueue();
     if (this.canvasId !== null) {
       this.ws.send(RegisterCanvas.dehydrate(this.canvasId));
     }
-    this.processMsgQueue();
+    console.log(`Register ${chunks.length} chunks`);
+    this.ws.send(RegisterMultipleChunks.dehydrate(chunks));
   }
 
   onError(err) {
@@ -106,6 +105,7 @@ class ProtocolClient extends EventEmitter {
     }
     console.log('Notify websocket server that we changed canvas');
     this.canvasId = canvasId;
+    chunks.length = 0;
     this.sendWhenReady(RegisterCanvas.dehydrate(this.canvasId));
   }
 

src/ui/Renderer3D.js

@@ -134,7 +134,9 @@ class Renderer {
     this.plane.position.y = -0.1;
 
     // renderer
-    const threeRenderer = new THREE.WebGLRenderer({ antialias: true });
+    const threeRenderer = new THREE.WebGLRenderer({
+      preserveDrawingBuffer: true,
+    });
     threeRenderer.setPixelRatio(window.devicePixelRatio);
     threeRenderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(threeRenderer.domElement);