archive political-compass canvas

src/actions/index.js

@@ -712,6 +712,9 @@ export function showForgotPasswordModal(): Action {
 export function showHelpModal(): Action {
   return showModal('HELP');
 }
+export function showArchiveModal(): Action {
+  return showModal('ARCHIVE');
+}
 
 export function showCanvasSelectionModal(): Action {
   return showModal('CANVAS_SELECTION');

src/canvases.json

@@ -212,38 +212,6 @@
     "sd": "2020-03-15",
     "desc": "Special canvas to spread awareness of SARS-CoV2"
   },
-  "4": {
-    "ident": "p",
-    "title": "Political Compass",
-    "colors": [
-      [ 196, 196, 196 ],
-      [ 0, 243, 0 ],
-      [ 0, 105, 43 ],
-      [ 0, 247, 250 ],
-      [ 5, 50, 250 ],
-      [ 156, 69, 250 ],
-      [ 213, 43, 162 ],
-      [ 252, 121, 250 ],
-      [ 0, 0, 0 ],
-      [ 249, 249, 249 ],
-      [ 146, 146, 146 ],
-      [ 132, 90, 42 ],
-      [ 252, 37, 0 ],
-      [ 245, 162, 29 ],
-      [ 250, 210, 168 ],
-      [ 250, 246, 0 ]
-        ],
-    "size": 1024,
-    "hid": false,
-    "cli": 0,
-    "bcd": 5000,
-    "pcd": 5000,
-    "cds": 60000,
-    "ranked": true,
-    "req": -1,
-    "sd": "2020-05-11",
-    "desc": "A meme"
-  },
   "5": {
     "ident": "y",
     "title": "PixelZone",

src/components/ArchiveModal.jsx

@@ -0,0 +1,52 @@
+/*
+ * @flow
+ */
+
+/* eslint-disable max-len */
+
+import React from 'react';
+
+const imageStyle = {
+  maxWidth: '20%',
+  padding: 2,
+  display: 'inline-block',
+  verticalAlign: 'middle',
+};
+
+const ArchiveModal = () => (
+  <p style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
+    <p className="modaltext">
+      While we tend to not delete canvases, some canvases are started for fun or as a request by users who currently like a meme.
+      Those canvases can get boring after a while and after weeks of no major change and if they really aren&apos;t worth being kept active, we decide to remove them.<br />
+      Here we collect those canvases to archive them in a proper way (which is currently just one).
+    </p>
+    <p className="modaltitle">Political Compass Canvas</p>
+    <img
+      style={imageStyle}
+      alt="political-compass"
+      src="https://storage.pixelplanet.fun/compass-preview.png"
+    />
+    <p className="modaltext">
+      This canvas got requested during a time of political conflicts on the main Earth canvas. It was a 1024x1024 representation of the political compass with a 5s coolodwn and 60s stacking. It got launched on May 11th and remained active for months till it got shut down on November 30th.<br />
+      We decided to archive it as a timelapse with lossless encoded webm. Taking a screenshot from the timelapse results in a perfect 1:1 representation of how the canvas was at that time.
+    </p>
+    <p>
+      Timelapse:
+      <a href="https://storage.pixelplanet.fun/compass-timelapse.webm">
+        Download
+      </a>
+    </p>
+    <img
+      style={{ padding: 2, maxWidth: '80%', verticalAlign: 'middle' }}
+      alt="political-compass"
+      src="https://storage.pixelplanet.fun/compass-final.png"
+    />
+  </p>
+);
+
+const data = {
+  content: ArchiveModal,
+  title: 'Canvas Archive',
+};
+
+export default data;

src/components/CanvasSelectModal.jsx

@@ -7,11 +7,16 @@ import React from 'react';
 import { connect } from 'react-redux';
 
 import CanvasItem from './CanvasItem';
+import { showArchiveModal } from '../actions';
 
 import type { State } from '../reducers';
 
 
-const CanvasSelectModal = ({ canvases, showHiddenCanvases }) => (
+const CanvasSelectModal = ({
+  canvases,
+  showHiddenCanvases,
+  showArchive,
+}) => (
   <p style={{
     textAlign: 'center',
     paddingLeft: '5%',
@@ -22,7 +27,14 @@ const CanvasSelectModal = ({ canvases, showHiddenCanvases }) => (
     <p className="modaltext">
       Select the canvas you want to use.
       Every canvas is unique and has different palettes,
-      cooldown and requirements.
+      cooldown and requirements. Archive of closed canvases can be
+      accessed&nbsp;
+      <span
+        role="button"
+        tabIndex={0}
+        className="modallink"
+        onClick={showArchive}
+      >here</span>.
     </p>
     {
       Object.keys(canvases).map((canvasId) => (
@@ -34,6 +46,14 @@ const CanvasSelectModal = ({ canvases, showHiddenCanvases }) => (
   </p>
 );
 
+function mapDispatchToProps(dispatch) {
+  return {
+    showArchive() {
+      dispatch(showArchiveModal());
+    },
+  };
+}
+
 function mapStateToProps(state: State) {
   const {
     canvases,
@@ -43,7 +63,7 @@ function mapStateToProps(state: State) {
 }
 
 const data = {
-  content: connect(mapStateToProps)(CanvasSelectModal),
+  content: connect(mapStateToProps, mapDispatchToProps)(CanvasSelectModal),
   title: 'Canvas Selection',
 };
 

src/components/HelpModal.jsx

@@ -4,9 +4,6 @@
  */
 
 import React from 'react';
-// import FaFacebook from 'react-icons/lib/fa/facebook';
-// import FaTwitter from 'react-icons/lib/fa/twitter';
-// import FaRedditAlien from 'react-icons/lib/fa/reddit-alien';
 
 /* eslint-disable max-len */
 

src/components/ModalRoot.jsx

@@ -19,6 +19,7 @@ import SettingsModal from './SettingsModal';
 import UserAreaModal from './UserAreaModal';
 import RegisterModal from './RegisterModal';
 import CanvasSelectModal from './CanvasSelectModal';
+import ArchiveModal from './ArchiveModal';
 import ChatModal from './ChatModal';
 import ForgotPasswordModal from './ForgotPasswordModal';
 
@@ -32,6 +33,7 @@ const MODAL_COMPONENTS = {
   FORGOT_PASSWORD: ForgotPasswordModal,
   CHAT: ChatModal,
   CANVAS_SELECTION: CanvasSelectModal,
+  ARCHIVE: ArchiveModal,
   /* other modals */
 };
 

src/routes/admintools.js

@@ -67,7 +67,9 @@ router.use(passport.session());
 router.use(async (req, res, next) => {
   const ip = getIPFromRequest(req);
   if (!req.user) {
-    admintoolsLogger.info(`ADMINTOOLS: ${ip} tried to access admintools without login`);
+    admintoolsLogger.info(
+      `ADMINTOOLS: ${ip} tried to access admintools without login`,
+    );
     res.status(403).send('You are not logged in');
     return;
   }