Add possibility to have hidden canvses, mirror pz and pc

src/actions/index.js

@@ -35,6 +35,12 @@ export function toggleHistoricalView(): Action {
   };
 }
 
+export function toggleHiddenCanvases(): Action {
+  return {
+    type: 'TOGGLE_HIDDEN_CANVASES',
+  };
+}
+
 export function toggleGrid(): Action {
   return {
     type: 'TOGGLE_GRID',

src/canvases.json

@@ -37,6 +37,7 @@
       [ 130, 0, 128 ]
     ],
     "size": 65536,
+    "hid": false,
     "cli": 2,
     "bcd": 4000,
     "pcd" : 7000,
@@ -84,6 +85,7 @@
       [ 174,	215,	185	]
     ],
     "size" : 4096,
+    "hid": false,
     "cli": 2,
     "bcd": 15000,
     "pcd": 15000,
@@ -161,6 +163,7 @@
       [ 174,	215,	185	]
     ],
     "size": 1024,
+    "hid": false,
     "v": true,
     "cli": 2,
     "bcd": 2000,
@@ -199,6 +202,7 @@
       [ 230, 206, 172 ]
     ],
     "size" : 256,
+    "hid": false,
     "cli": 2,
     "bcd": 500,
     "pcd": 500,
@@ -230,6 +234,7 @@
       [ 250, 246, 0 ]
         ],
     "size": 1024,
+    "hid": false,
     "cli": 0,
     "bcd": 5000,
     "pcd": 5000,
@@ -238,5 +243,69 @@
     "req": -1,
     "sd": "2020-05-11",
     "desc": "A meme"
+  },
+  "5": {
+    "ident": "y",
+    "title": "PixelZone",
+    "colors": [
+      [ 38, 38, 38 ],
+      [ 0, 0, 0 ],
+      [ 128, 128, 128 ],
+      [ 255, 255, 255 ],
+      [ 153, 98, 61 ],
+      [ 255, 163, 200 ],
+      [ 207, 115, 230 ],
+      [ 128, 0, 128 ],
+      [ 229, 0, 0 ],
+      [ 229, 137, 0 ],
+      [ 229, 229, 0 ],
+      [ 150, 230, 70 ],
+      [ 0, 190, 0 ],
+      [ 0, 230, 230 ],
+      [ 0, 136, 204 ],
+      [ 0, 0, 230 ]
+        ],
+    "size": 16384,
+    "hid": true,
+    "cli": 0,
+    "bcd": 4000,
+    "pcd": 4000,
+    "cds": 4000,
+    "ranked": false,
+    "req": -1,
+    "sd": "2020-07-05",
+    "desc": "Mirror of PixelZone"
+  },
+  "6": {
+    "ident": "z",
+    "title": "PixelCanvas",
+    "colors": [
+      [ 255, 255, 255 ],
+      [ 228, 228, 228 ],
+      [ 136, 136, 136 ],
+      [ 34, 34, 34 ],
+      [ 255, 167, 209 ],
+      [ 229, 0, 0 ],
+      [ 229, 149, 0 ],
+      [ 160, 106, 66 ],
+      [ 229, 217, 0 ],
+      [ 148, 224, 68 ],
+      [ 2, 190, 1 ],
+      [ 0, 211, 221 ],
+      [ 0, 131, 199 ],
+      [ 0, 0, 234	],
+      [ 207, 110, 228 ],
+      [ 130, 0, 128 ]
+        ],
+    "size": 16384,
+    "hid": true,
+    "cli": 0,
+    "bcd": 10000,
+    "pcd": 10000,
+    "cds": 10000,
+    "ranked": false,
+    "req": -1,
+    "sd": "2020-07-05",
+    "desc": "Mirror of PixelCanvas"
   }
 }

src/components/CanvasSelectModal.jsx

@@ -11,7 +11,7 @@ import CanvasItem from './CanvasItem';
 import type { State } from '../reducers';
 
 
-const CanvasSelectModal = ({ canvases }) => (
+const CanvasSelectModal = ({ canvases, showHiddenCanvases }) => (
   <p style={{
     textAlign: 'center',
     paddingLeft: '5%',
@@ -26,15 +26,20 @@ const CanvasSelectModal = ({ canvases }) => (
     </p>
     {
       Object.keys(canvases).map((canvasId) => (
-        <CanvasItem canvasId={canvasId} canvas={canvases[canvasId]} />
+        (canvases[canvasId].hid && !showHiddenCanvases)
+          ? null
+          : <CanvasItem canvasId={canvasId} canvas={canvases[canvasId]} />
       ))
     }
   </p>
 );
 
 function mapStateToProps(state: State) {
-  const { canvases } = state.canvas;
-  return { canvases };
+  const {
+    canvases,
+    showHiddenCanvases,
+  } = state.canvas;
+  return { canvases, showHiddenCanvases };
 }
 
 const data = {

src/components/Converter.jsx

@@ -210,6 +210,7 @@ async function renderOutputImage(opts) {
 function Converter({
   canvasId,
   canvases,
+  showHiddenCanvases,
 }) {
   const [selectedCanvas, selectCanvas] = useState(canvasId);
   const [selectedFile, selectFile] = useState(null);
@@ -270,18 +271,21 @@ function Converter({
           }}
         >
           {
-          Object.keys(canvases).map((canvas) => ((canvases[canvas].v)
-            ? null
-            : (
-              <option
-                selected={canvas === selectedCanvas}
-                value={canvas}
-              >
-                {
+          Object.keys(canvases).map((canvas) => (
+            (canvases[canvas].v
+              || (canvases[canvas].hid && !showHiddenCanvases))
+              ? null
+              : (
+                <option
+                  selected={canvas === selectedCanvas}
+                  value={canvas}
+                >
+                  {
               canvases[canvas].title
             }
-              </option>
-            )))
+                </option>
+              )
+          ))
         }
         </select>
       </p>
@@ -603,8 +607,12 @@ function Converter({
 }
 
 function mapStateToProps(state: State) {
-  const { canvasId, canvases } = state.canvas;
-  return { canvasId, canvases };
+  const {
+    canvasId,
+    canvases,
+    showHiddenCanvases,
+  } = state.canvas;
+  return { canvasId, canvases, showHiddenCanvases };
 }
 
 export default connect(mapStateToProps)(Converter);

src/controls/keypress.js

@@ -9,6 +9,7 @@ import copy from '../utils/clipboard';
 import {
   toggleGrid,
   toggleHistoricalView,
+  toggleHiddenCanvases,
   togglePixelNotify,
   toggleMute,
   notify,
@@ -44,6 +45,10 @@ function onKeyPress(event: KeyboardEvent) {
       store.dispatch(notify('Copied!'));
       break;
     }
+    case 'p': {
+      store.dispatch(toggleHiddenCanvases());
+      break;
+    }
     default:
   }
 }

src/core/tilesBackup.js

@@ -24,8 +24,8 @@ export async function updateBackupRedis(canvasRedis, backupRedis, canvases) {
   for (let i = 0; i < ids.length; i += 1) {
     const id = ids[i];
     const canvas = canvases[id];
-    if (canvas.v) {
-      // ignore 3D canvases
+    if (canvas.v || canvas.hid) {
+      // ignore 3D and hiddedn canvases
       continue;
     }
     const chunksXY = (canvas.size / TILE_SIZE);
@@ -72,8 +72,8 @@ export async function incrementialBackupRedis(
     const id = ids[i];
 
     const canvas = canvases[id];
-    if (canvas.v) {
-      // ignore 3D canvases
+    if (canvas.v || canvas.hid) {
+      // ignore 3D and hidden canvases
       continue;
     }
 

src/reducers/canvas.js

@@ -38,6 +38,7 @@ export type CanvasState = {
   historicalTime: string,
   // object with all canvas informations from all canvases like colors and size
   canvases: Object,
+  showHiddenCanvases: boolean,
 };
 
 /*
@@ -140,6 +141,7 @@ const initialState: CanvasState = {
   isHistoricalView: false,
   historicalDate: null,
   historicalTime: null,
+  showHiddenCanvases: false,
 };
 
 
@@ -212,6 +214,13 @@ export default function canvasReducer(
       };
     }
 
+    case 'TOGGLE_HIDDEN_CANVASES': {
+      return {
+        ...state,
+        showHiddenCanvases: !state.showHiddenCanvases,
+      };
+    }
+
     case 'SET_VIEW_COORDINATES': {
       const { view } = action;
       const { canvasSize } = state;