iampeter/pixelplanet
1
Fork 0
forked from ppfun/pixelplanet
Code Pull Requests Activity

Create GIMP Palette on client in own Converter Menu

Browse Source
This commit is contained in:
HF 2020-05-08 13:07:47 +02:00
parent b3b0908449
commit 80fe10da7b
9 changed files with 141 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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",

34
public/palette0.gpl
View File

@ -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

34
public/palette1.gpl
View File

@ -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

24
public/palette3.gpl
View File

@ -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
View 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:&nbsp;
<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>:&nbsp;
<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);

2
src/components/DownloadButton.jsx
View File

@ -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';

2
src/components/HelpModal.jsx
View File

@ -57,8 +57,6 @@ const HelpModal = () => (
<p style={titleStyle}>Map Data</p>
<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>
<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={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>

14
src/components/UserAreaModal.jsx
View File

@ -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,
}) => (
<Modal title="User Area">
<p style={{ textAlign: 'center' }}>
@ -84,6 +86,11 @@ const UserAreaModal = ({
<div label="Ranking">
<Rankings />
</div>
<div label="Converter">
<Suspense fallback={<div>Loading...</div>}>
<Converter />
</Suspense>
</div>
</Tabs>
)}
<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) {
const { name } = state.user;
return { name };
const { canvases } = state.canvas;
return { name, canvases };
}
export default connect(mapStateToProps, mapDispatchToProps)(UserAreaModal);