forked from ppfun/pixelplanet
Create GIMP Palette on client in own Converter Menu
This commit is contained in:
parent
b3b0908449
commit
80fe10da7b
10
package-lock.json
generated
10
package-lock.json
generated
|
@ -8379,6 +8379,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz",
|
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz",
|
||||||
"integrity": "sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ=="
|
"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": {
|
"js-tokens": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||||
|
@ -10735,11 +10740,6 @@
|
||||||
"scheduler": "^0.19.1"
|
"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": {
|
"react-hot-loader": {
|
||||||
"version": "4.12.21",
|
"version": "4.12.21",
|
||||||
"resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.12.21.tgz",
|
"resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.12.21.tgz",
|
||||||
|
|
|
@ -43,6 +43,7 @@
|
||||||
"http-proxy-agent": "^4.0.1",
|
"http-proxy-agent": "^4.0.1",
|
||||||
"ip-address": "^6.3.0",
|
"ip-address": "^6.3.0",
|
||||||
"isomorphic-fetch": "^2.2.1",
|
"isomorphic-fetch": "^2.2.1",
|
||||||
|
"js-file-download": "^0.4.12",
|
||||||
"keycode": "^2.1.9",
|
"keycode": "^2.1.9",
|
||||||
"localforage": "^1.5.0",
|
"localforage": "^1.5.0",
|
||||||
"morgan": "^1.10.0",
|
"morgan": "^1.10.0",
|
||||||
|
@ -59,7 +60,6 @@
|
||||||
"passport-vkontakte": "^0.3.2",
|
"passport-vkontakte": "^0.3.2",
|
||||||
"react": "^16.13.1",
|
"react": "^16.13.1",
|
||||||
"react-dom": "^16.13.1",
|
"react-dom": "^16.13.1",
|
||||||
"react-file-download": "^0.3.4",
|
|
||||||
"react-icons": "^3.10.0",
|
"react-icons": "^3.10.0",
|
||||||
"react-modal": "^3.11.2",
|
"react-modal": "^3.11.2",
|
||||||
"react-redux": "^7.2.0",
|
"react-redux": "^7.2.0",
|
||||||
|
|
|
@ -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
|
|
|
@ -1,34 +0,0 @@
|
||||||
GIMP Palette
|
|
||||||
Name: Greenstar30
|
|
||||||
#Description: Created by <a target="_blank" href="https://twitter.com/starhousedev">starhouse</a> 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
|
|
|
@ -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
|
|
123
src/components/Converter.jsx
Normal file
123
src/components/Converter.jsx
Normal file
|
@ -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 (
|
||||||
|
<p style={{ textAlign: 'center' }}>
|
||||||
|
<p style={textStyle}>Choose Canvas:
|
||||||
|
<select
|
||||||
|
onChange={(e) => {
|
||||||
|
const sel = e.target;
|
||||||
|
selectCanvas(sel.options[sel.selectedIndex].value);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
Object.keys(canvases).map((canvas) => ((canvases[canvas].v)
|
||||||
|
? null
|
||||||
|
: (
|
||||||
|
<option
|
||||||
|
selected={canvas === selectedCanvas}
|
||||||
|
value={canvas}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
canvases[canvas].title
|
||||||
|
}
|
||||||
|
</option>
|
||||||
|
)))
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
</p>
|
||||||
|
<p style={textStyle}>
|
||||||
|
Palette for <a href="https://www.gimp.org">GIMP</a>:
|
||||||
|
<button
|
||||||
|
style={{ display: 'inline' }}
|
||||||
|
onClick={() => {
|
||||||
|
const canvas = canvases[selectedCanvas];
|
||||||
|
const {
|
||||||
|
title, desc, colors, cli,
|
||||||
|
} = canvas;
|
||||||
|
printGIMPPalette(title, desc, colors.slice(cli));
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Download Palette
|
||||||
|
</button>
|
||||||
|
<p>Credit for the Palette of the Moon goes to <a href="https://twitter.com/starhousedev">starhouse</a>.</p>
|
||||||
|
</p>
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapStateToProps(state: State) {
|
||||||
|
const { canvasId, canvases } = state.canvas;
|
||||||
|
return { canvasId, canvases };
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(mapStateToProps)(Converter);
|
|
@ -6,7 +6,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { MdFileDownload } from 'react-icons/md';
|
import { MdFileDownload } from 'react-icons/md';
|
||||||
import fileDownload from 'react-file-download';
|
import fileDownload from 'js-file-download';
|
||||||
|
|
||||||
import { getRenderer } from '../ui/renderer';
|
import { getRenderer } from '../ui/renderer';
|
||||||
|
|
||||||
|
|
|
@ -57,8 +57,6 @@ const HelpModal = () => (
|
||||||
<p style={titleStyle}>Map Data</p>
|
<p style={titleStyle}>Map Data</p>
|
||||||
<p style={textStyle}>The bare map data that we use, together with converted OpenStreetMap tiles for orientation,
|
<p style={textStyle}>The bare map data that we use, together with converted OpenStreetMap tiles for orientation,
|
||||||
can be downloaded from mega.nz here: <a href="https://mega.nz/#!JpkBwAbJ!EnSLlZmKv3kEBE0HDhakTgAZZycD3ELjduajJxPGaXo">pixelplanetmap.zip</a> (422MB)</p>
|
can be downloaded from mega.nz here: <a href="https://mega.nz/#!JpkBwAbJ!EnSLlZmKv3kEBE0HDhakTgAZZycD3ELjduajJxPGaXo">pixelplanetmap.zip</a> (422MB)</p>
|
||||||
<p style={titleStyle}>GIMP Palette</p>
|
|
||||||
<p style={textStyle}>Palette downloads for <a href="https://www.gimp.org">GIMP</a>: <a href="./palette0.gpl">World</a>, <a href="./palette1.gpl">Moon</a> and <a href="./palette3.gpl">Corona</a>. Credit for the Palette of the Moon goes to <a href="https://twitter.com/starhousedev">starhouse</a>.</p>
|
|
||||||
<p style={titleStyle}>Detected as Proxy?</p>
|
<p style={titleStyle}>Detected as Proxy?</p>
|
||||||
<p style={textStyle}>If you got detected as proxy, but you are none, please send us an e-mail with <a href="https://www.whatismyip.com/">your IP</a> to pixelplanetdev@gmail.com. Do not post your IP anywhere else. We are sorry for the inconvenience.</p>
|
<p style={textStyle}>If you got detected as proxy, but you are none, please send us an e-mail with <a href="https://www.whatismyip.com/">your IP</a> to pixelplanetdev@gmail.com. Do not post your IP anywhere else. We are sorry for the inconvenience.</p>
|
||||||
<h3 style={titleStyle}>2D Controls</h3>
|
<h3 style={titleStyle}>2D Controls</h3>
|
||||||
|
|
|
@ -3,13 +3,15 @@
|
||||||
* @flow
|
* @flow
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React, { Suspense } from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
import Modal from './Modal';
|
import Modal from './Modal';
|
||||||
|
|
||||||
import type { State } from '../reducers';
|
import type { State } from '../reducers';
|
||||||
|
|
||||||
|
const Converter = React.lazy(() => import(/* webpackChunkName: "converter" */ './Converter'));
|
||||||
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
showRegisterModal, showForgotPasswordModal, setName, setMailreg, receiveMe,
|
showRegisterModal, showForgotPasswordModal, setName, setMailreg, receiveMe,
|
||||||
|
@ -66,7 +68,7 @@ const LogInArea = ({ register, forgot_password, me }) => (
|
||||||
);
|
);
|
||||||
|
|
||||||
const UserAreaModal = ({
|
const UserAreaModal = ({
|
||||||
name, register, forgot_password, doMe, logout, setName, setMailreg,
|
name, register, forgot_password, doMe, logout, setName, setMailreg, canvases,
|
||||||
}) => (
|
}) => (
|
||||||
<Modal title="User Area">
|
<Modal title="User Area">
|
||||||
<p style={{ textAlign: 'center' }}>
|
<p style={{ textAlign: 'center' }}>
|
||||||
|
@ -84,6 +86,11 @@ const UserAreaModal = ({
|
||||||
<div label="Ranking">
|
<div label="Ranking">
|
||||||
<Rankings />
|
<Rankings />
|
||||||
</div>
|
</div>
|
||||||
|
<div label="Converter">
|
||||||
|
<Suspense fallback={<div>Loading...</div>}>
|
||||||
|
<Converter />
|
||||||
|
</Suspense>
|
||||||
|
</div>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
)}
|
)}
|
||||||
<p>Also join our Discord: <a href="./discord" target="_blank">pixelplanet.fun/discord</a></p>
|
<p>Also join our Discord: <a href="./discord" target="_blank">pixelplanet.fun/discord</a></p>
|
||||||
|
@ -120,7 +127,8 @@ function mapDispatchToProps(dispatch) {
|
||||||
|
|
||||||
function mapStateToProps(state: State) {
|
function mapStateToProps(state: State) {
|
||||||
const { name } = state.user;
|
const { name } = state.user;
|
||||||
return { name };
|
const { canvases } = state.canvas;
|
||||||
|
return { name, canvases };
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(UserAreaModal);
|
export default connect(mapStateToProps, mapDispatchToProps)(UserAreaModal);
|
||||||
|
|
Loading…
Reference in New Issue
Block a user