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

remove alpha value from canvases.json and replace it with cli

Browse Source
This commit is contained in:
HF 2020-01-31 00:26:32 +01:00
parent c2dbb45572
commit 6f9dc2ec32
14 changed files with 83 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
promotion/can-you-do-zuckerberg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

7
src/canvases.json
View File

@ -36,8 +36,8 @@
[ 207, 110, 228 ],
[ 130, 0, 128 ]
],
"alpha": 0,
"size": 65536,
"cli": 2,
"bcd": 4000,
"pcd" : 7000,
"cds": 60000,
@ -82,8 +82,8 @@
[ 122, 148, 156 ],
[ 174, 215, 185 ]
],
"alpha": 0,
"size" : 1024,
"cli": 2,
"bcd": 15000,
"pcd": 15000,
"cds": 900000,
@ -95,7 +95,6 @@
"ident":"v",
"title": "3D Canvas",
"colors": [
[ 202, 227, 255 ],
[ 255, 255, 255 ],
[ 255, 255, 255 ],
[ 228, 228, 228 ],
@ -128,9 +127,9 @@
[ 207, 110, 228 ],
[ 130, 0, 128 ]
],
"alpha": 0,
"size": 1024,
"v": true,
"cli": 1,
"bcd": 2000,
"pcd" : 2000,
"cds": 60000,

35
src/components/Palette.jsx
View File

@ -12,16 +12,33 @@ import type { State } from '../reducers';
const Palette = ({
colors, selectedColor, paletteOpen, compactPalette, select,
colors, selectedColor, paletteOpen, compactPalette, select, clrIgnore,
}) => (
<div className={`palettebox ${(compactPalette) ? 'compalette' : 'widpalette'}`} id="colors" style={{ display: (paletteOpen) ? 'flex' : 'none' }}>
<div
className={`palettebox ${
((colors.length - clrIgnore) > 30 || compactPalette)
? 'compalette'
: 'widpalette'
}`}
id="colors"
style={{
display: (paletteOpen) ? 'flex' : 'none',
height: ((colors.length - clrIgnore) > 30 || compactPalette)
? Math.ceil((colors.length - clrIgnore) / 5 * 28)
: undefined,
}}
>
{colors.slice(2).map((color, index) => (
<span
style={{ backgroundColor: color }}
style={{
backgroundColor: color,
}}
key={index + 2}
className={selectedColor === (index + 2) ? 'selected' : 'unselected'}
className={selectedColor === (index + clrIgnore)
? 'selected'
: 'unselected'}
color={color}
onClick={() => select(index + 2)}
onClick={() => select(index + clrIgnore)}
/>
))}
</div>
@ -29,9 +46,13 @@ const Palette = ({
function mapStateToProps(state: State) {
const { selectedColor, paletteOpen, compactPalette } = state.gui;
const { palette } = state.canvas;
const { palette, clrIgnore } = state.canvas;
return {
colors: palette.colors, selectedColor, paletteOpen, compactPalette,
colors: palette.colors,
selectedColor,
paletteOpen,
compactPalette,
clrIgnore,
};
}

4
src/core/Image.js
View File

@ -36,7 +36,7 @@ export async function imageABGR2Canvas(
`Loading image with dim ${width}/${height} to ${x}/${y}/${canvasId}`,
);
const canvas = canvases[canvasId];
const palette = new Palette(canvas.colors, canvas.alpha);
const palette = new Palette(canvas.colors);
const canvasMinXY = -(canvas.size / 2);
const imageData = new Uint32Array(data.buffer);
@ -112,7 +112,7 @@ export async function imagemask2Canvas(
`Loading mask with size ${width} / ${height} to ${x} / ${y} to the canvas`,
);
const canvas = canvases[canvasId];
const palette = new Palette(canvas.colors, canvas.alpha);
const palette = new Palette(canvas.colors);
const canvasMinXY = -(canvas.size / 2);
const imageData = new Uint8Array(data.buffer);

4
src/core/Palette.js
View File

@ -13,10 +13,8 @@ class Palette {
colors: Array<Color>;
abgr: Uint32Array;
fl: Array<number>;
alpha: number = 0;
constructor(colors: Array, alpha: number = 0) {
this.alpha = alpha;
constructor(colors: Array) {
this.length = colors.length;
this.rgb = new Uint8Array(this.length * 3);
this.colors = new Array(this.length);

14
src/core/Tile.js
View File

@ -31,11 +31,10 @@ function deleteSubtilefromTile(
for (let row = 0; row < TILE_SIZE; row += 1) {
let channelOffset = (offset + row * TILE_SIZE * subtilesInTile) * 3;
const max = channelOffset + TILE_SIZE * 3;
const alphaIndex = palette.alpha * 3;
while (channelOffset < max) {
buffer[channelOffset++] = palette.rgb[alphaIndex];
buffer[channelOffset++] = palette.rgb[alphaIndex + 1];
buffer[channelOffset++] = palette.rgb[alphaIndex + 2];
buffer[channelOffset++] = palette.rgb[0];
buffer[channelOffset++] = palette.rgb[1];
buffer[channelOffset++] = palette.rgb[2];
}
}
}
@ -244,11 +243,10 @@ export async function createEmptyTile(
);
let i = 0;
const max = TILE_SIZE * TILE_SIZE * 3;
const alphaIndex = palette.alpha * 3;
while (i < max) {
tileRGBBuffer[i++] = palette.rgb[alphaIndex];
tileRGBBuffer[i++] = palette.rgb[alphaIndex + 1];
tileRGBBuffer[i++] = palette.rgb[alphaIndex + 2];
tileRGBBuffer[i++] = palette.rgb[0];
tileRGBBuffer[i++] = palette.rgb[1];
tileRGBBuffer[i++] = palette.rgb[2];
}
const filename = `${canvasTileFolder}/emptytile.png`;
await sharp(Buffer.from(tileRGBBuffer.buffer), {

1
src/core/constants.js
View File

@ -50,7 +50,6 @@ export const DEFAULT_CANVASES = {
[207, 110, 228],
[130, 0, 128],
],
alpha: 0,
size: 65536,
bcd: 4000,
pcd: 7000,

13
src/core/draw.js
View File

@ -99,7 +99,7 @@ async function draw(
success: false,
};
}
if (color < 2) {
if (color < canvas.cli) {
return {
error: 'Invalid color selected',
success: false,
@ -115,6 +115,13 @@ async function draw(
}
}
if (color < 0 || color >= canvas.colors.length) {
return {
error: 'Invalid color selected',
success: false,
};
}
if (canvas.req !== -1) {
if (user.id === null) {
return {
@ -138,7 +145,7 @@ async function draw(
const setColor = await RedisCanvas.getPixel(canvasId, x, y, z);
let coolDown = !(setColor & 0x1E) ? canvas.bcd : canvas.pcd;
let coolDown = (setColor & 0x3F) < canvas.cli ? canvas.bcd : canvas.pcd;
if (user.isAdmin()) {
coolDown = 0.0;
}
@ -156,7 +163,7 @@ async function draw(
};
}
if (setColor & 0x20) {
if (setColor & 0x80) {
logger.info(`${user.ip} tried to set on protected pixel (${x}, ${y})`);
return {
errorTitle: 'Pixel Protection',

4
src/core/tilesBackup.js
View File

@ -92,7 +92,7 @@ export async function incrementialBackupRedis(
fs.mkdirSync(canvasTileBackupDir);
}
const palette = new Palette(canvas.colors, canvas.alpha);
const palette = new Palette(canvas.colors);
const chunksXY = (canvas.size / TILE_SIZE);
console.log('Creating Incremential Backup...');
const startTime = Date.now();
@ -182,7 +182,7 @@ export async function createPngBackup(
}
const canvas = canvases[id];
const palette = new Palette(canvas.colors, canvas.alpha);
const palette = new Palette(canvas.colors);
const chunksXY = (canvas.size / TILE_SIZE);
console.log('Create PNG tiles from backup...');
const startTime = Date.now();

2
src/core/tileserver.js
View File

@ -44,7 +44,7 @@ class CanvasUpdater {
this.id = id;
this.canvas = canvases[id];
this.canvasTileFolder = `${TILE_FOLDER}/${id}`;
this.palette = new Palette(this.canvas.colors, this.canvas.alpha);
this.palette = new Palette(this.canvas.colors);
this.firstZoomtileWidth = this.canvas.size / TILE_SIZE / TILE_ZOOM_LEVEL;
this.maxTiledZoom = getMaxTiledZoom(this.canvas.size);
this.startReloadingLoops();

9
src/data/models/RedisCanvas.js
View File

@ -97,9 +97,9 @@ class RedisCanvas {
y: number,
z: number = null,
): Promise<number> {
// 1st and 2nd bit -> not used yet
// 3rd bit -> protected or not
// rest (5 bits) -> index of color
// 1st bit -> protected or not
// 2nd bit -> unused
// rest (6 bits) -> index of color
const canvasSize = canvases[canvasId].size;
const [i, j] = getChunkOfPixel(canvasSize, x, y, z);
const offset = getOffsetOfPixel(canvasSize, x, y, z);
@ -121,9 +121,8 @@ class RedisCanvas {
y: number,
z: number = null,
): Promise<number> {
const canvasAlpha = canvases[canvasId].alpha;
const clr = RedisCanvas.getPixelIfExists(canvasId, x, y, z);
return (clr == null) ? canvasAlpha : clr;
return (clr == null) ? 0 : clr;
}
}

21
src/reducers/canvas.js
View File

@ -26,6 +26,7 @@ export type CanvasState = {
canvasMaxTiledZoom: number,
canvasStartDate: string,
palette: Palette,
clrIgnore: number,
view: Cell,
scale: number,
viewscale: number,
@ -61,6 +62,7 @@ function getViewFromURL(canvases: Object) {
const canvasId = getIdFromObject(canvases, almost[0]);
let colors;
let clrIgnore;
let canvasSize;
let canvasStartDate;
let is3D;
@ -68,12 +70,14 @@ function getViewFromURL(canvases: Object) {
// if canvas informations are not available yet
// aka /api/me didn't load yet
colors = canvases[DEFAULT_CANVAS_ID].colors;
clrIgnore = 2;
canvasSize = 1024;
is3D = false;
canvasStartDate = null;
} else {
const canvas = canvases[canvasId];
colors = canvas.colors;
clrIgnore = canvas.cli;
canvasSize = canvas.size;
is3D = !!canvas.v;
canvasStartDate = canvas.sd;
@ -100,20 +104,23 @@ function getViewFromURL(canvases: Object) {
canvasStartDate,
canvasMaxTiledZoom: getMaxTiledZoom(canvasSize),
palette: new Palette(colors, 0),
clrIgnore,
view: [x, y],
viewscale: urlscale,
scale: urlscale,
canvases,
};
} catch (error) {
const canvas = canvases[DEFAULT_CANVAS_ID];
return {
canvasId: DEFAULT_CANVAS_ID,
canvasIdent: canvases[DEFAULT_CANVAS_ID].ident,
canvasSize: canvases[DEFAULT_CANVAS_ID].size,
is3D: !!canvases[DEFAULT_CANVAS_ID].v,
canvasIdent: canvas.ident,
canvasSize: canvas.size,
is3D: !!canvas.v,
canvasStartDate: null,
canvasMaxTiledZoom: getMaxTiledZoom(canvases[DEFAULT_CANVAS_ID].size),
palette: new Palette(canvases[DEFAULT_CANVAS_ID].colors, 0),
canvasMaxTiledZoom: getMaxTiledZoom(canvas.size),
palette: new Palette(canvas.colors, 0),
clrIgnore: canvas.cli,
view: getGivenCoords(),
viewscale: DEFAULT_SCALE,
scale: DEFAULT_SCALE,
@ -263,6 +270,7 @@ export default function canvasReducer(
sd: canvasStartDate,
ident: canvasIdent,
v: is3D,
cli: clrIgnore,
colors,
} = canvas;
const canvasMaxTiledZoom = getMaxTiledZoom(canvasSize);
@ -277,6 +285,7 @@ export default function canvasReducer(
canvasStartDate,
canvasMaxTiledZoom,
palette,
clrIgnore,
view,
viewscale: DEFAULT_SCALE,
scale: DEFAULT_SCALE,
@ -297,6 +306,7 @@ export default function canvasReducer(
size: canvasSize,
sd: canvasStartDate,
v: is3D,
cli: clrIgnore,
colors,
} = canvases[canvasId];
const canvasMaxTiledZoom = getMaxTiledZoom(canvasSize);
@ -311,6 +321,7 @@ export default function canvasReducer(
canvasStartDate,
canvasMaxTiledZoom,
palette,
clrIgnore,
canvases,
};
}

2
src/routes/api/pixel.js
View File

@ -40,8 +40,6 @@ async function validate(req: Request, res: Response, next) {
error = 'y is not a valid number';
} else if (Number.isNaN(clr)) {
error = 'No color selected';
} else if (clr < 0 || clr > 31) {
error = 'Invalid color selected';
} else if (z !== null && Number.isNaN(z)) {
error = 'z is not a valid number';
}

19
utils/redisUnprotect.js
View File

@ -1,5 +1,5 @@
/* @flow */
//this script just copies chunks from one redis to another with a different key as needed
//this script removes protection from all pixels on main canas
import redis from 'redis';
import bluebird from 'bluebird';
@ -10,8 +10,10 @@ bluebird.promisifyAll(redis.Multi.prototype);
//ATTENTION Make suer to set the rdis URLs right!!!
const url = "redis://localhost:6379";
const redis = redis.createClient(url, { return_buffers: true });
const urlo = "redis://localhost:6379";
const url = "redis://localhost:6380";
const rediso = redis.createClient(urlo, { return_buffers: true });
const redisc = redis.createClient(url, { return_buffers: true });
const CANVAS_SIZE = 256 * 256;
const TILE_SIZE = 256;
@ -21,26 +23,25 @@ async function moveProtection() {
for (let x = 0; x < CHUNKS_XY; x++) {
for (let y = 0; y < CHUNKS_XY; y++) {
const key = `ch:0:${x}:${y}`;
const chunk = await redis.getAsync(key);
const chunk = await redisc.getAsync(key);
if (chunk) {
const buffer = new Uint8Array(chunk);
let changed = false;
for (let u = 0; u < buffer.length; ++u) {
const bit = buffer[u];
if (bit & 0x20) {
// move protected bit from 0x20 to 0x80
buffer[u] = (bit & 0x1F) | 0x80;
if (bit & 0x80) {
buffer[u] = bit & 0x1F;
changed = true;
}
}
if (changed) {
const setNXArgs = [key, Buffer.from(buffer.buffer).toString('binary')]
await redis.sendCommandAsync('SETNX', setNXArgs);
await rediso.setAsync(key, Buffer.from(buffer.buffer));
console.log("Changed Chunk ", key);
}
}
}
}
console.log("done");
}
moveProtection();