ppfun/pixelplanet
13
Fork 18
Code Issues 24 Pull Requests Releases 2 Activity

move all react html generation to components folder

Browse Source
This commit is contained in:
HF 2020-01-03 03:21:57 +01:00
parent aaa235d397
commit 630bff0483
4 changed files with 66 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Admin.js
View File

@ -1,10 +1,13 @@
/* /*
* react html for adminpage * Html for adminpage
* *
* @flow * @flow
*/ */
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom/server';
import Html from './Html';
const Admin = () => ( const Admin = () => (
<form method="post" action="admintools" encType="multipart/form-data"> <form method="post" action="admintools" encType="multipart/form-data">
@ -36,4 +39,11 @@ const Admin = () => (
</form> </form>
); );
export default Admin; const data = {
title: 'PixelPlanet.fun AdminTools',
description: 'admin access on pixelplanet',
body: <Admin />,
};
const adminHtml = `<!doctype html>${ReactDOM.renderToStaticMarkup(<Html {...data} />)}`;
export default adminHtml;

46
src/components/Main.js Normal file
View File

@ -0,0 +1,46 @@
/*
* Html for mainpage
*
* @flow
*/
import React from 'react';
import ReactDOM from 'react-dom/server';
import Html from './Html';
import assets from './assets.json';
import { ASSET_SERVER } from '../core/config';
const data = {
title: 'PixelPlanet.fun',
description: 'Place color pixels on an map styled canvas ' +
'with other players online',
// styles: [
// { id: 'css', cssText: baseCss },
// ],
scripts: [
ASSET_SERVER + assets.vendor.js,
ASSET_SERVER + assets.client.js,
],
useRecaptcha: true,
};
/*
* generates string with html of main page
* including setting global variables for countryCoords
* and assetserver
* @param countryCoords Cell with coordinates of client country
* @return html of mainpage
*/
function generateMainPage(countryCoords: Cell): string {
const [x, y] = countryCoords;
const code =
`window.coordx=${x};window.coordy=${y};window.assetserver="${ASSET_SERVER}";`;
const htmldata = { ...data, code };
const html = ReactDOM.renderToStaticMarkup(<Html {...htmldata} />);
return `<!doctype html>${html}`;
}
export default generateMainPage;

17
src/routes/admintools.js
View File

@ -11,8 +11,6 @@ import type { Request, Response } from 'express';
import bodyParser from 'body-parser'; import bodyParser from 'body-parser';
import sharp from 'sharp'; import sharp from 'sharp';
import multer from 'multer'; import multer from 'multer';
import React from 'react';
import ReactDOM from 'react-dom/server';
import { getIPFromRequest } from '../utils/ip'; import { getIPFromRequest } from '../utils/ip';
import { getIdFromObject } from '../core/utils'; import { getIdFromObject } from '../core/utils';
@ -26,23 +24,12 @@ import { MINUTE } from '../core/constants';
import canvases from '../canvases.json'; import canvases from '../canvases.json';
import { imageABGR2Canvas } from '../core/Image'; import { imageABGR2Canvas } from '../core/Image';
import Html from '../components/Html'; import adminHtml from '../components/Admin';
import Admin from '../components/Admin';
const router = express.Router(); const router = express.Router();
const limiter = expressLimiter(router, redis); const limiter = expressLimiter(router, redis);
/*
* build html of admin page with react
*/
const data = {
title: 'PixelPlanet.fun AdminTools',
description: 'admin access on pixelplanet',
body: <Admin />,
};
const index = `<!doctype html>${ReactDOM.renderToStaticMarkup(<Html {...data} />)}`;
/* /*
* multer middleware for getting POST parameters * multer middleware for getting POST parameters
@ -246,7 +233,7 @@ router.use(async (req: Request, res: Response) => {
res.set({ res.set({
'Content-Type': 'text/html', 'Content-Type': 'text/html',
}); });
res.status(200).send(index); res.status(200).send(adminHtml);
}); });

32
src/web.js
View File

@ -5,14 +5,11 @@ import compression from 'compression';
import express from 'express'; import express from 'express';
import http from 'http'; import http from 'http';
import etag from 'etag'; import etag from 'etag';
import React from 'react';
import ReactDOM from 'react-dom/server';
import expressValidator from 'express-validator'; import expressValidator from 'express-validator';
// import baseCss from './components/base.tcss'; // import baseCss from './components/base.tcss';
import forceGC from './core/forceGC'; import forceGC from './core/forceGC';
import Html from './components/Html';
import assets from './assets.json'; // eslint-disable-line import/no-unresolved import assets from './assets.json'; // eslint-disable-line import/no-unresolved
import logger from './core/logger'; import logger from './core/logger';
import models from './data/models'; import models from './data/models';
@ -25,6 +22,7 @@ import {
resetPassword, resetPassword,
} from './routes'; } from './routes';
import globeHtml from './components/Globe'; import globeHtml from './components/Globe';
import generateMainPage from './components/Main';
import { SECOND, MONTH } from './core/constants'; import { SECOND, MONTH } from './core/constants';
import { PORT, ASSET_SERVER, DISCORD_INVITE } from './core/config'; import { PORT, ASSET_SERVER, DISCORD_INVITE } from './core/config';
@ -117,7 +115,7 @@ app.use('/reset_password', resetPassword);
// //
// 3D Globe // 3D Globe (react generated)
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
const globeEtag = etag( const globeEtag = etag(
`${assets.globe.js}`, `${assets.globe.js}`,
@ -130,7 +128,7 @@ app.get('/globe', async (req, res) => {
ETag: indexEtag, ETag: indexEtag,
}); });
if (req.headers['if-none-match'] === indexEtag) { if (req.headers['if-none-match'] === globeEtag) {
res.status(304).end(); res.status(304).end();
return; return;
} }
@ -140,21 +138,8 @@ app.get('/globe', async (req, res) => {
// //
// Register server-side rendering middleware // Main Page (react generated)
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
const data = {
title: 'PixelPlanet.fun',
description: 'Place color pixels on an map styled canvas ' +
'with other players online',
// styles: [
// { id: 'css', cssText: baseCss },
// ],
scripts: [
ASSET_SERVER + assets.vendor.js,
ASSET_SERVER + assets.client.js,
],
useRecaptcha: true,
};
const indexEtag = etag( const indexEtag = etag(
`${assets.vendor.js},${assets.client.js}`, `${assets.vendor.js},${assets.client.js}`,
{ weak: true }, { weak: true },
@ -174,14 +159,9 @@ app.get('/', async (req, res) => {
// get start coordinates based on cloudflare header country // get start coordinates based on cloudflare header country
const country = req.headers['cf-ipcountry']; const country = req.headers['cf-ipcountry'];
const [x, y] = (country) ? ccToCoords(country) : [0, 0]; const countryCoords = (country) ? ccToCoords(country) : [0, 0];
const code =
`window.coordx=${x};window.coordy=${y};window.assetserver="${ASSET_SERVER}";`;
const htmldata = { ...data, code };
const html = ReactDOM.renderToStaticMarkup(<Html {...htmldata} />);
const index = `<!doctype html>${html}`;
res.status(200).send(index); res.status(200).send(generateMainPage(countryCoords));
}); });