From f1d82220dd27bed4a733b0eda8228f9caff710fd Mon Sep 17 00:00:00 2001 From: HF Date: Wed, 15 Apr 2020 01:19:36 +0200 Subject: [PATCH] fix a few lint errors --- src/components/OnlineBox.jsx | 3 +- src/components/PalselButton.jsx | 12 ++++- src/core/config.js | 2 +- src/globe.js | 7 ++- src/ui/Renderer2D.js | 90 +++++++++++++++++++++++---------- src/utils/RateLimiter.js | 34 ++++++------- 6 files changed, 101 insertions(+), 47 deletions(-) diff --git a/src/components/OnlineBox.jsx b/src/components/OnlineBox.jsx index 9ff05a3..087c6c7 100644 --- a/src/components/OnlineBox.jsx +++ b/src/components/OnlineBox.jsx @@ -18,7 +18,8 @@ const OnlineBox = ({ online, totalPixels, name }) => ( ? (
{(online) && {online} } - {(name != null) && {numberToString(totalPixels)} } + {(name != null) + && {numberToString(totalPixels)} }
) : null} diff --git a/src/components/PalselButton.jsx b/src/components/PalselButton.jsx index 64978fc..ddc9981 100644 --- a/src/components/PalselButton.jsx +++ b/src/components/PalselButton.jsx @@ -13,7 +13,17 @@ import { toggleOpenPalette } from '../actions'; const PalselButton = ({ palette, onToggle, selectedColor, paletteOpen, }) => ( -
+
); diff --git a/src/core/config.js b/src/core/config.js index 8061c85..2405337 100644 --- a/src/core/config.js +++ b/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.', ); } diff --git a/src/globe.js b/src/globe.js index 50a83e4..512ae6f 100644 --- a/src/globe.js +++ b/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]; diff --git a/src/ui/Renderer2D.js b/src/ui/Renderer2D.js index 1810cdb..6cd9d1d 100644 --- a/src/ui/Renderer2D.js +++ b/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 (let dy = -CHUNK_RENDER_RADIUS_Y; dy <= CHUNK_RENDER_RADIUS_Y; dy += 1) { + for ( + 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, - // do scale = 1 in renderChunks and scale in render() + // If scale is so large that neighbouring chunks wouldn't fit in offscreen + // 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 (let dy = -CHUNK_RENDER_RADIUS_Y; dy <= CHUNK_RENDER_RADIUS_Y; dy += 1) { + for ( + 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, - // do scale = 1 in renderChunks and scale in render() + // If scale is so large that neighbouring chunks wouldn't fit in offscreen + // 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); + } } } diff --git a/src/utils/RateLimiter.js b/src/utils/RateLimiter.js index 6fd29ea..3604de0 100644 --- a/src/utils/RateLimiter.js +++ b/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; - burst_time: number; - cooldown_completely: boolean; - on_cooldown: boolean; + msPerTick: number; + burstTime: number; + cooldownCompletely: 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.burst_time = burst * this.ms_per_tick; - this.cooldown_completely = cooldown_completely; - this.on_cooldown = false; + this.msPerTick = 60 / ticksPerMin * 1000; + this.burstTime = burst * this.msPerTick; + this.cooldownCompletely = cooldownCompletely; + this.onCooldown = false; } /* @@ -33,19 +33,19 @@ class RateLimiter { tick() { const now = Date.now(); const waitLeft = this.wait - now; - if (waitLeft >= this.burst_time) { - this.on_cooldown = true; + if (waitLeft >= this.burstTime) { + 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.on_cooldown = false; + this.wait = now + this.msPerTick; + this.onCooldown = false; return false; } }