fix a few lint errors

src/components/OnlineBox.jsx

@@ -18,7 +18,8 @@ const OnlineBox = ({ online, totalPixels, name }) => (
       ? (
         <div className="onlinebox">
           {(online) && <span>{online} <FaUser /></span>}
-          {(name != null) && <span>{numberToString(totalPixels)} <FaPaintBrush /></span>}
+          {(name != null)
+              && <span>{numberToString(totalPixels)} <FaPaintBrush /></span>}
         </div>
       ) : null}
   </div>

src/components/PalselButton.jsx

@@ -13,7 +13,17 @@ import { toggleOpenPalette } from '../actions';
 const PalselButton = ({
   palette, onToggle, selectedColor, paletteOpen,
 }) => (
-  <div id="palselbutton" className={`actionbuttons ${(paletteOpen) ? '' : 'pressed'}`} style={{ color: palette.isDark(selectedColor) ? 'white' : 'black', backgroundColor: palette.colors[selectedColor] }} onClick={onToggle}>
+  <div
+    id="palselbutton"
+    className={`actionbuttons ${(paletteOpen) ? '' : 'pressed'}`}
+    style={{
+      color: palette.isDark(selectedColor) ? 'white' : 'black',
+      backgroundColor: palette.colors[selectedColor],
+    }}
+    role="button"
+    tabIndex={0}
+    onClick={onToggle}
+  >
     <MdPalette />
   </div>
 );

src/core/config.js

@@ -5,7 +5,7 @@ import path from 'path';
 
 if (process.env.BROWSER) {
   throw new Error(
-    'Do not import `config.js` from inside the client-side code.'
+    'Do not import `config.js` from inside the client-side code.',
   );
 }
 

src/globe.js

@@ -20,7 +20,12 @@ function parseHashCoords() {
     const array = hash.substring(1).split(',');
     const ident = array.shift();
     const [id, size, x, y] = array.map((z) => parseInt(z, 10));
-    if (!ident || isNaN(x) || isNaN(y) || isNaN(id) || isNaN(size)) {
+    if (!ident
+      || Number.isNaN(x)
+      || Number.isNaN(y)
+      || Number.isNaN(id)
+      || Number.isNaN(size)
+    ) {
       throw new Error('NaN');
     }
     return [ident, id, size, x, y];

src/ui/Renderer2D.js

@@ -264,11 +264,13 @@ class Renderer {
     } = state.canvas;
 
     let { relScale } = this;
-    // clear rect is just needed for Google Chrome, else it would flash regularly
+    // clear rect is just needed for Google Chrome, else it would flash
+    // regularly
     context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
 
     // Disable smoothing
-    // making it dependent on the scale is needed for Google Chrome, else scale <1 would look shit
+    // making it dependent on the scale is needed for Google Chrome, else
+    // scale <1 would look shit
     if (scale >= 1) {
       context.msImageSmoothingEnabled = false;
       context.webkitImageSmoothingEnabled = false;
@@ -306,15 +308,26 @@ class Renderer {
     // CLEAN margin
     // draw new chunks. If not existing, just clear.
     let chunk;
-    for (let dx = -CHUNK_RENDER_RADIUS_X; dx <= CHUNK_RENDER_RADIUS_X; dx += 1) {
+    for (
-      for (let dy = -CHUNK_RENDER_RADIUS_Y; dy <= CHUNK_RENDER_RADIUS_Y; dy += 1) {
+      let dx = -CHUNK_RENDER_RADIUS_X;
+      dx <= CHUNK_RENDER_RADIUS_X;
+      dx += 1
+    ) {
+      for (
+        let dy = -CHUNK_RENDER_RADIUS_Y;
+        dy <= CHUNK_RENDER_RADIUS_Y;
+        dy += 1
+      ) {
         const cx = xc + dx;
         const cy = yc + dy;
         const x = xOffset + dx * TILE_SIZE;
         const y = yOffset + dy * TILE_SIZE;
 
         const chunkMaxXY = canvasSize / TILE_SIZE;
-        if (cx < 0 || cx >= chunkMaxXY * tiledScale || cy < 0 || cy >= chunkMaxXY * tiledScale) {
+        if (
+          cx < 0 || cx >= chunkMaxXY * tiledScale
+          || cy < 0 || cy >= chunkMaxXY * tiledScale
+        ) {
           // if out of bounds
           context.fillRect(x, y, TILE_SIZE, TILE_SIZE);
         } else {
@@ -398,7 +411,8 @@ class Renderer {
     );
     //--
     // if we have nothing to render, return
-    // note: this.hover is used to, to render without the placeholder one last time when cursor leaves window
+    // note: this.hover is used to, to render without the placeholder one last
+    // time when cursor leaves window
     if (
       // no full rerender
       !this.forceNextRender
@@ -424,24 +438,28 @@ class Renderer {
     const viewportCtx = viewport.getContext('2d');
     if (!viewportCtx) return;
 
-    // canvas optimization: https://www.html5rocks.com/en/tutorials/canvas/performance/
+    // canvasopt: https://www.html5rocks.com/en/tutorials/canvas/performance/
     viewportCtx.msImageSmoothingEnabled = false;
     viewportCtx.webkitImageSmoothingEnabled = false;
     viewportCtx.imageSmoothingEnabled = false;
-    // If scale is so large that neighbouring chunks wouldn't fit in offscreen canvas,
+    // If scale is so large that neighbouring chunks wouldn't fit in offscreen
-    // do scale = 1 in renderChunks and scale in render()
+    // canvas, do scale = 1 in renderChunks and scale in render()
     const canvasCenter = canvasSize / 2;
     if (viewscale > SCALE_THREASHOLD) {
       viewportCtx.save();
       viewportCtx.scale(viewscale, viewscale);
-      viewportCtx.drawImage(this.canvas,
+      viewportCtx.drawImage(
+        this.canvas,
         width / 2 / viewscale - CANVAS_WIDTH / 2 + ((cx + 0.5) * TILE_SIZE - canvasCenter - x),
-        height / 2 / viewscale - CANVAS_HEIGHT / 2 + ((cy + 0.5) * TILE_SIZE - canvasCenter - y));
+        height / 2 / viewscale - CANVAS_HEIGHT / 2 + ((cy + 0.5) * TILE_SIZE - canvasCenter - y),
+      );
       viewportCtx.restore();
     } else {
-      viewportCtx.drawImage(this.canvas,
+      viewportCtx.drawImage(
+        this.canvas,
         Math.floor(width / 2 - CANVAS_WIDTH / 2 + ((cx + 0.5) * TILE_SIZE / this.tiledScale - canvasCenter - x) * viewscale),
-        Math.floor(height / 2 - CANVAS_HEIGHT / 2 + ((cy + 0.5) * TILE_SIZE / this.tiledScale - canvasCenter - y) * viewscale));
+        Math.floor(height / 2 - CANVAS_HEIGHT / 2 + ((cy + 0.5) * TILE_SIZE / this.tiledScale - canvasCenter - y) * viewscale),
+      );
     }
 
     if (showGrid && viewscale >= 8) {
@@ -478,10 +496,11 @@ class Renderer {
     } = state.canvas;
 
 
-    // clear rect is just needed for Google Chrome, else it would flash regularly
+    // clear rect is just needed for Google Chrome, else it would flash
     context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
     // Disable smoothing
-    // making it dependent on the scale is needed for Google Chrome, else scale <1 would look shit
+    // making it dependent on the scale is needed for Google Chrome, else
+    // scale <1 would look shit
     if (viewscale >= 1) {
       context.msImageSmoothingEnabled = false;
       context.webkitImageSmoothingEnabled = false;
@@ -525,8 +544,16 @@ class Renderer {
     // CLEAN margin
     // draw  chunks. If not existing, just clear.
     let chunk;
-    for (let dx = -CHUNK_RENDER_RADIUS_X; dx <= CHUNK_RENDER_RADIUS_X; dx += 1) {
+    for (
-      for (let dy = -CHUNK_RENDER_RADIUS_Y; dy <= CHUNK_RENDER_RADIUS_Y; dy += 1) {
+      let dx = -CHUNK_RENDER_RADIUS_X;
+      dx <= CHUNK_RENDER_RADIUS_X;
+      dx += 1
+    ) {
+      for (
+        let dy = -CHUNK_RENDER_RADIUS_Y;
+        dy <= CHUNK_RENDER_RADIUS_Y;
+        dy += 1
+      ) {
         const cx = xc + dx;
         const cy = yc + dy;
         const x = xOffset + dx * TILE_SIZE;
@@ -559,7 +586,13 @@ class Renderer {
             }
           } else if (oldHistoricalTime) {
             chunk = this.chunkLoader
-              .getHistoricalChunk(cx, cy, false, historicalDate, oldHistoricalTime);
+              .getHistoricalChunk(
+                cx,
+                cy,
+                false,
+                historicalDate,
+                oldHistoricalTime,
+              );
             if (chunk) {
               context.drawImage(chunk, x, y);
               if (fetch) {
@@ -609,27 +642,32 @@ class Renderer {
     const viewportCtx = viewport.getContext('2d');
     if (!viewportCtx) return;
 
-    // canvas optimization: https://www.html5rocks.com/en/tutorials/canvas/performance/
     viewportCtx.msImageSmoothingEnabled = false;
     viewportCtx.webkitImageSmoothingEnabled = false;
     viewportCtx.imageSmoothingEnabled = false;
-    // If scale is so large that neighbouring chunks wouldn't fit in offscreen canvas,
+    // If scale is so large that neighbouring chunks wouldn't fit in offscreen
-    // do scale = 1 in renderChunks and scale in render()
+    // canvas, do scale = 1 in renderChunks and scale in render()
     const canvasCenter = canvasSize / 2;
     if (viewscale > SCALE_THREASHOLD) {
       viewportCtx.save();
       viewportCtx.scale(viewscale, viewscale);
-      viewportCtx.drawImage(this.canvas,
+      viewportCtx.drawImage(
+        this.canvas,
         width / 2 / viewscale - CANVAS_WIDTH / 2 + ((cx + 0.5) * TILE_SIZE - canvasCenter - x),
-        height / 2 / viewscale - CANVAS_HEIGHT / 2 + ((cy + 0.5) * TILE_SIZE - canvasCenter - y));
+        height / 2 / viewscale - CANVAS_HEIGHT / 2 + ((cy + 0.5) * TILE_SIZE - canvasCenter - y),
+      );
       viewportCtx.restore();
     } else {
-      viewportCtx.drawImage(this.canvas,
+      viewportCtx.drawImage(
+        this.canvas,
         Math.floor(width / 2 - CANVAS_WIDTH / 2 + ((cx + 0.5) * TILE_SIZE - canvasCenter - x) * viewscale),
-        Math.floor(height / 2 - CANVAS_HEIGHT / 2 + ((cy + 0.5) * TILE_SIZE - canvasCenter - y) * viewscale));
+        Math.floor(height / 2 - CANVAS_HEIGHT / 2 + ((cy + 0.5) * TILE_SIZE - canvasCenter - y) * viewscale),
+      );
     }
 
-    if (showGrid && viewscale >= 8) renderGrid(state, viewport, viewscale, isLightGrid);
+    if (showGrid && viewscale >= 8) {
+      renderGrid(state, viewport, viewscale, isLightGrid);
+    }
   }
 }
 

src/utils/RateLimiter.js

@@ -6,23 +6,23 @@
 
 /*
  * RateLimiter
- * @param ticks_per_min How many ticks per min are allowed
+ * @param ticksPerMin How many ticks per min are allowed
  * @param burst Amount of ticks that are allowed before limiter kicks in
- * @param on_cooldown If we force to wait the whole burst time once the limit is reached
+ * @param onCooldown If we force to wait the whole burst time once the limit is reached
  */
 class RateLimiter {
-  ms_per_tick: number;
+  msPerTick: number;
-  burst_time: number;
+  burstTime: number;
-  cooldown_completely: boolean;
+  cooldownCompletely: boolean;
-  on_cooldown: boolean;
+  onCooldown: boolean;
   wait: number;
 
-  constructor(ticks_per_min = 20, burst = 20, cooldown_completely = false) {
+  constructor(ticksPerMin = 20, burst = 20, cooldownCompletely = false) {
     this.wait = Date.now();
-    this.ms_per_tick = 60 / ticks_per_min * 1000;
+    this.msPerTick = 60 / ticksPerMin * 1000;
-    this.burst_time = burst * this.ms_per_tick;
+    this.burstTime = burst * this.msPerTick;
-    this.cooldown_completely = cooldown_completely;
+    this.cooldownCompletely = cooldownCompletely;
-    this.on_cooldown = false;
+    this.onCooldown = false;
   }
 
   /*
@@ -33,19 +33,19 @@ class RateLimiter {
   tick() {
     const now = Date.now();
     const waitLeft = this.wait - now;
-    if (waitLeft >= this.burst_time) {
+    if (waitLeft >= this.burstTime) {
-      this.on_cooldown = true;
+      this.onCooldown = true;
       return waitLeft;
     }
     if (waitLeft > 0) {
-      if (this.cooldown_completely && this.on_cooldown) {
+      if (this.cooldownCompletely && this.onCooldown) {
         return waitLeft;
       }
-      this.wait += this.ms_per_tick;
+      this.wait += this.msPerTick;
       return false;
     }
-    this.wait = now + this.ms_per_tick;
+    this.wait = now + this.msPerTick;
-    this.on_cooldown = false;
+    this.onCooldown = false;
     return false;
   }
 }