send amount of ranked pixel in PixelReturn package

src/client.js

@@ -39,11 +39,9 @@ function init() {
       receivePixelUpdate(store, i, j, offset, color & 0x7F);
     });
   });
-  SocketClient.on('pixelReturn', ({
-    retCode, wait, coolDownSeconds, pxlCnt,
-  }) => {
-    receivePixelReturn(store, retCode, wait, coolDownSeconds, pxlCnt);
-  });
+  SocketClient.on('pixelReturn',
+    (args) => receivePixelReturn(store, ...args),
+  );
   SocketClient.on('cooldownPacket', (coolDown) => {
     store.dispatch(receiveCoolDown(coolDown));
   });

src/components/HistorySelect.jsx

@@ -127,6 +127,7 @@ const HistorySelect = () => {
               >
                 {times.map((value) => (
                   <option
+                    key={value}
                     value={value}
                   >
                     {value}

src/components/SocialSettings.jsx

@@ -61,6 +61,7 @@ const SocialSettings = ({ done }) => {
             {
             blocked.map((bl) => (
               <div
+                key={bl[0]}
                 role="button"
                 tabIndex={0}
                 onClick={() => {

src/core/draw.js

@@ -252,6 +252,7 @@ export async function drawByOffsets(
     wait,
     coolDown,
     pxlCnt,
+    rankedPxlCnt,
     retCode,
   };
 }

src/socket/SocketServer.js

@@ -490,7 +490,7 @@ class SocketServer {
           // check if captcha needed
           if (await needCaptcha(ip)) {
             // need captcha
-            failureRet = PixelReturn.dehydrate(10, 0, 0);
+            failureRet = PixelReturn.dehydrate(10);
           } else {
             // (re)check for Proxy
             const allowed = await isIPAllowed(ip);
@@ -504,7 +504,7 @@ class SocketServer {
                 // range banned
                 failureStatus = 15;
               }
-              failureRet = PixelReturn.dehydrate(failureStatus, 0, 0);
+              failureRet = PixelReturn.dehydrate(failureStatus);
             }
           }
           if (failureRet !== null) {
@@ -526,6 +526,7 @@ class SocketServer {
             wait,
             coolDown,
             pxlCnt,
+            rankedPxlCnt,
             retCode,
           } = await drawByOffsets(
             ws.user,
@@ -533,7 +534,13 @@ class SocketServer {
             i, j,
             pixels,
           );
-          ws.send(PixelReturn.dehydrate(retCode, wait, coolDown, pxlCnt));
+          ws.send(PixelReturn.dehydrate(
+            retCode,
+            wait,
+            coolDown,
+            pxlCnt,
+            rankedPxlCnt,
+          ));
           break;
         }
         case RegisterCanvas.OP_CODE: {

src/socket/packets/PixelReturn.js

@@ -8,22 +8,31 @@ export default {
     const wait = data.getUint32(2);
     const coolDownSeconds = data.getInt16(6);
     const pxlCnt = data.getUint8(8);
-    return {
+    const rankedPxlCnt = data.getUint8(9);
+    return [
       retCode,
       wait,
       coolDownSeconds,
       pxlCnt,
-    };
+      rankedPxlCnt,
+    ];
   },
-  dehydrate(retCode, wait, coolDown, pxlCnt) {
+  dehydrate(
+    retCode,
+    wait = 0,
+    coolDown = 0,
+    pxlCnt = 0,
+    rankedPxlCnt = 0,
+  ) {
     // Server (sender)
-    const buffer = Buffer.allocUnsafe(1 + 1 + 4 + 2 + 1);
+    const buffer = Buffer.allocUnsafe(1 + 1 + 4 + 2 + 1 + 1);
     buffer.writeUInt8(OP_CODE, 0);
     buffer.writeUInt8(retCode, 1);
     buffer.writeUInt32BE(wait, 2);
     const coolDownSeconds = Math.round(coolDown / 1000);
     buffer.writeInt16BE(coolDownSeconds, 6);
     buffer.writeUInt8(pxlCnt, 8);
+    buffer.writeUInt8(rankedPxlCnt, 9);
     return buffer;
   },
 };

src/ui/placePixel.js

@@ -156,6 +156,7 @@ export function receivePixelReturn(
   wait,
   coolDownSeconds,
   pxlCnt,
+  rankedPxlCnt,
 ) {
   clearTimeout(pixelTimeout);
 
@@ -189,7 +190,7 @@ export function receivePixelReturn(
   let type = 'error';
   switch (retCode) {
     case 0:
-      store.dispatch(placedPixels(pxlCnt));
+      store.dispatch(placedPixels(rankedPxlCnt));
       break;
     case 1:
       errorTitle = t`Invalid Canvas`;