From 80fe10da7b3b6c0341111b9421234d120a9abad2 Mon Sep 17 00:00:00 2001
From: HF
Date: Fri, 8 May 2020 13:07:47 +0200
Subject: [PATCH] Create GIMP Palette on client in own Converter Menu
---
package-lock.json | 10 +--
package.json | 2 +-
public/palette0.gpl | 34 ---------
public/palette1.gpl | 34 ---------
public/palette3.gpl | 24 ------
src/components/Converter.jsx | 123 ++++++++++++++++++++++++++++++
src/components/DownloadButton.jsx | 2 +-
src/components/HelpModal.jsx | 2 -
src/components/UserAreaModal.jsx | 14 +++-
9 files changed, 141 insertions(+), 104 deletions(-)
delete mode 100644 public/palette0.gpl
delete mode 100644 public/palette1.gpl
delete mode 100644 public/palette3.gpl
create mode 100644 src/components/Converter.jsx
diff --git a/package-lock.json b/package-lock.json
index dbe06656..cfd23ebe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8379,6 +8379,11 @@
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz",
"integrity": "sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ=="
},
+ "js-file-download": {
+ "version": "0.4.12",
+ "resolved": "https://registry.npmjs.org/js-file-download/-/js-file-download-0.4.12.tgz",
+ "integrity": "sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg=="
+ },
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -10735,11 +10740,6 @@
"scheduler": "^0.19.1"
}
},
- "react-file-download": {
- "version": "0.3.5",
- "resolved": "https://registry.npmjs.org/react-file-download/-/react-file-download-0.3.5.tgz",
- "integrity": "sha1-ek51h0UogGv6U93d2YtNpCfTqJc="
- },
"react-hot-loader": {
"version": "4.12.21",
"resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.12.21.tgz",
diff --git a/package.json b/package.json
index a1a29b7e..98689028 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
"http-proxy-agent": "^4.0.1",
"ip-address": "^6.3.0",
"isomorphic-fetch": "^2.2.1",
+ "js-file-download": "^0.4.12",
"keycode": "^2.1.9",
"localforage": "^1.5.0",
"morgan": "^1.10.0",
@@ -59,7 +60,6 @@
"passport-vkontakte": "^0.3.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
- "react-file-download": "^0.3.4",
"react-icons": "^3.10.0",
"react-modal": "^3.11.2",
"react-redux": "^7.2.0",
diff --git a/public/palette0.gpl b/public/palette0.gpl
deleted file mode 100644
index b5f2d6a7..00000000
--- a/public/palette0.gpl
+++ /dev/null
@@ -1,34 +0,0 @@
-GIMP Palette
-Name: Pixelplanet
-Columns: 0
-#
-255 255 255 White
-228 228 228 Light Gray
-136 136 136 Dark Gray
- 78 78 78 Darker Gray
- 0 0 0 Black
-244 179 174 Skin
-255 167 209 Light Pink
-255 84 178 Pink
-255 101 101 Peach
-229 0 0 Red
-154 0 0 Dark Red
-254 164 96 Light Brown
-229 149 0 Orange
-160 106 66 Unbenannt
-245 223 176 Unbenannt
-229 217 0 Unbenannt
-148 224 68 Unbenannt
- 2 190 1 Unbenannt
- 0 101 19 Unbenannt
-202 227 255 Unbenannt
- 0 211 221 Unbenannt
- 0 131 199 Unbenannt
- 0 0 234 Unbenannt
- 25 25 115 Unbenannt
-207 110 228 Unbenannt
-130 0 128 Unbenannt
-196 196 196 Silver
-96 64 40 Dark Brown
-255 248 137 Khaki
-104 131 56 Olive
diff --git a/public/palette1.gpl b/public/palette1.gpl
deleted file mode 100644
index bdbe8b6c..00000000
--- a/public/palette1.gpl
+++ /dev/null
@@ -1,34 +0,0 @@
-GIMP Palette
-Name: Greenstar30
-#Description: Created by starhouse for their game CrescentWhole. Based off MortMort's SoftMilk32 palette. Used on pixelplanet with 2 colors removed
-#Colors: 32
-49 46 47 #312e2f
-99 92 90 #635c5a
-129 119 107 #81776b
-198 181 165 #c6b5a5
-255 237 212 #ffedd4
-150 86 122 #96567a
-202 112 145 #ca7091
-96 67 79 #60434f
-136 79 94 #884f5e
-175 101 103 #af6567
-195 124 107 #c37c6b
-221 153 126 #dd997e
-233 181 140 #e9b58c
-198 139 91 #c68b5b
-140 89 74 #8c594a
-94 68 63 #5e443f
-225 173 86 #e1ad56
-248 207 142 #f8cf8e
-239 220 118 #efdc76
-206 190 85 #cebe55
-157 159 55 #9d9f37
-114 121 43 #72792b
-81 94 46 #515e2e
-69 100 79 #45644f
-80 134 87 #508657
-187 209 138 #bbd18a
-91 84 108 #5b546c
-106 113 137 #6a7189
-122 148 156 #7a949c
-174 215 185 #aed7b9
diff --git a/public/palette3.gpl b/public/palette3.gpl
deleted file mode 100644
index bb2007f1..00000000
--- a/public/palette3.gpl
+++ /dev/null
@@ -1,24 +0,0 @@
-GIMP Palette
-Name: corona
-Columns: 4
-#
- 33 28 15 Unbenannt
- 37 32 20 Unbenannt
- 41 36 24 Unbenannt
- 44 39 27 Unbenannt
- 50 44 31 Unbenannt
- 60 53 40 Unbenannt
- 71 62 49 Unbenannt
- 82 72 57 Unbenannt
-100 88 66 Unbenannt
-115 101 74 Unbenannt
-125 111 84 Unbenannt
-139 125 98 Unbenannt
-152 134 102 Unbenannt
-164 141 106 Unbenannt
-180 156 122 Unbenannt
-189 165 131 Unbenannt
-195 173 138 Unbenannt
-205 186 148 Unbenannt
-218 196 161 Unbenannt
-230 206 172 Unbenannt
diff --git a/src/components/Converter.jsx b/src/components/Converter.jsx
new file mode 100644
index 00000000..e01a93ae
--- /dev/null
+++ b/src/components/Converter.jsx
@@ -0,0 +1,123 @@
+/**
+ *
+ * @flow
+ */
+
+import React, { useState } from 'react';
+import { connect } from 'react-redux';
+import fileDownload from 'js-file-download';
+
+import type { State } from '../reducers';
+
+const titleStyle = {
+ color: '#4f545c',
+ marginLeft: 0,
+ marginRight: 10,
+ overflow: 'hidden',
+ wordWrap: 'break-word',
+ lineHeight: '24px',
+ fontSize: 16,
+ fontWeight: 500,
+ // marginTop: 0,
+ marginBottom: 0,
+};
+
+const textStyle = {
+ color: 'hsla(218, 5%, 47%, .6)',
+ fontSize: 14,
+ fontWeight: 500,
+ position: 'relative',
+ textAlign: 'inherit',
+ float: 'none',
+ lineHeight: 'normal',
+};
+
+function appendNumberText(number) {
+ let appendStr = `${number} `;
+ if (number < 10) appendStr += ' ';
+ else if (number < 100) appendStr += ' ';
+ return appendStr;
+}
+function appendHexColorText(clr) {
+ let appendStr = ' #';
+ clr.forEach((z) => {
+ if (z < 16) appendStr += '0';
+ appendStr += z.toString(16);
+ });
+ return appendStr;
+}
+
+
+function printGIMPPalette(title, description, colors) {
+ let text = `GIMP Palette
+#Palette Name: Pixelplanet${title}
+#Description: ${description}
+#Colors: ${colors.length}`;
+ colors.forEach((clr) => {
+ text += '\n';
+ clr.forEach((z) => {
+ text += appendNumberText(z);
+ });
+ text += appendHexColorText(clr);
+ });
+ fileDownload(text, `Pixelplanet${title}.gpl`);
+}
+
+
+function Converter({
+ canvasId,
+ canvases,
+}) {
+ const [selectedCanvas, selectCanvas] = useState(canvasId);
+
+ return (
+
+
Choose Canvas:
+ {
+ const sel = e.target;
+ selectCanvas(sel.options[sel.selectedIndex].value);
+ }}
+ >
+ {
+ Object.keys(canvases).map((canvas) => ((canvases[canvas].v)
+ ? null
+ : (
+
+ {
+ canvases[canvas].title
+ }
+
+ )))
+ }
+
+
+
+ Palette for GIMP :
+ {
+ const canvas = canvases[selectedCanvas];
+ const {
+ title, desc, colors, cli,
+ } = canvas;
+ printGIMPPalette(title, desc, colors.slice(cli));
+ }}
+ >
+ Download Palette
+
+
Credit for the Palette of the Moon goes to starhouse .
+
+
+ );
+}
+
+function mapStateToProps(state: State) {
+ const { canvasId, canvases } = state.canvas;
+ return { canvasId, canvases };
+}
+
+export default connect(mapStateToProps)(Converter);
diff --git a/src/components/DownloadButton.jsx b/src/components/DownloadButton.jsx
index 7b0f8895..d5874574 100644
--- a/src/components/DownloadButton.jsx
+++ b/src/components/DownloadButton.jsx
@@ -6,7 +6,7 @@
import React from 'react';
import { connect } from 'react-redux';
import { MdFileDownload } from 'react-icons/md';
-import fileDownload from 'react-file-download';
+import fileDownload from 'js-file-download';
import { getRenderer } from '../ui/renderer';
diff --git a/src/components/HelpModal.jsx b/src/components/HelpModal.jsx
index 2cb77488..84e7180f 100644
--- a/src/components/HelpModal.jsx
+++ b/src/components/HelpModal.jsx
@@ -57,8 +57,6 @@ const HelpModal = () => (
Map Data
The bare map data that we use, together with converted OpenStreetMap tiles for orientation,
can be downloaded from mega.nz here: pixelplanetmap.zip (422MB)
- GIMP Palette
- Palette downloads for GIMP : World , Moon and Corona . Credit for the Palette of the Moon goes to starhouse .
Detected as Proxy?
If you got detected as proxy, but you are none, please send us an e-mail with your IP to pixelplanetdev@gmail.com. Do not post your IP anywhere else. We are sorry for the inconvenience.
2D Controls
diff --git a/src/components/UserAreaModal.jsx b/src/components/UserAreaModal.jsx
index 88c82508..82a5479e 100644
--- a/src/components/UserAreaModal.jsx
+++ b/src/components/UserAreaModal.jsx
@@ -3,13 +3,15 @@
* @flow
*/
-import React from 'react';
+import React, { Suspense } from 'react';
import { connect } from 'react-redux';
import Modal from './Modal';
import type { State } from '../reducers';
+const Converter = React.lazy(() => import(/* webpackChunkName: "converter" */ './Converter'));
+
import {
showRegisterModal, showForgotPasswordModal, setName, setMailreg, receiveMe,
@@ -66,7 +68,7 @@ const LogInArea = ({ register, forgot_password, me }) => (
);
const UserAreaModal = ({
- name, register, forgot_password, doMe, logout, setName, setMailreg,
+ name, register, forgot_password, doMe, logout, setName, setMailreg, canvases,
}) => (
@@ -84,6 +86,11 @@ const UserAreaModal = ({
+
+ Loading...
}>
+
+
+
)}
Also join our Discord: pixelplanet.fun/discord
@@ -120,7 +127,8 @@ function mapDispatchToProps(dispatch) {
function mapStateToProps(state: State) {
const { name } = state.user;
- return { name };
+ const { canvases } = state.canvas;
+ return { name, canvases };
}
export default connect(mapStateToProps, mapDispatchToProps)(UserAreaModal);