ppfun/pixelplanet
13
Fork 18
Code Issues 24 Pull Requests Releases 2 Activity

fix a few lint errors

Browse Source
This commit is contained in:
HF 2020-04-15 01:19:36 +02:00
parent 485f2b83bc
commit f1d82220dd
6 changed files with 101 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/OnlineBox.jsx
View File

@ -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>

12
src/components/PalselButton.jsx
View File

@ -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>
);

2
src/core/config.js
View File

@ -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.',
);
}

7
src/globe.js
View File

@ -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];

90
src/ui/Renderer2D.js
View File

@ -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);
}
}
}

34
src/utils/RateLimiter.js
View File

@ -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;
}
}