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
*/
import React from 'react';
import ReactDOM from 'react-dom/server';
import Html from './Html';
const Admin = () => (
<form method="post" action="admintools" encType="multipart/form-data">
@ -36,4 +39,11 @@ const Admin = () => (
</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 sharp from 'sharp';
import multer from 'multer';
import React from 'react';
import ReactDOM from 'react-dom/server';
import { getIPFromRequest } from '../utils/ip';
import { getIdFromObject } from '../core/utils';
@ -26,23 +24,12 @@ import { MINUTE } from '../core/constants';
import canvases from '../canvases.json';
import { imageABGR2Canvas } from '../core/Image';
import Html from '../components/Html';
import Admin from '../components/Admin';
import adminHtml from '../components/Admin';
const router = express.Router();
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
@ -246,7 +233,7 @@ router.use(async (req: Request, res: Response) => {
res.set({
'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 http from 'http';
import etag from 'etag';
import React from 'react';
import ReactDOM from 'react-dom/server';
import expressValidator from 'express-validator';
// import baseCss from './components/base.tcss';
import forceGC from './core/forceGC';
import Html from './components/Html';
import assets from './assets.json'; // eslint-disable-line import/no-unresolved
import logger from './core/logger';
import models from './data/models';
@ -25,6 +22,7 @@ import {
resetPassword,
} from './routes';
import globeHtml from './components/Globe';
import generateMainPage from './components/Main';
import { SECOND, MONTH } from './core/constants';
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(
`${assets.globe.js}`,
@ -130,7 +128,7 @@ app.get('/globe', async (req, res) => {
ETag: indexEtag,
});
if (req.headers['if-none-match'] === indexEtag) {
if (req.headers['if-none-match'] === globeEtag) {
res.status(304).end();
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(
`${assets.vendor.js},${assets.client.js}`,
{ weak: true },
@ -174,14 +159,9 @@ app.get('/', async (req, res) => {
// get start coordinates based on cloudflare header country
const country = req.headers['cf-ipcountry'];
const [x, y] = (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}`;
const countryCoords = (country) ? ccToCoords(country) : [0, 0];
res.status(200).send(index);
res.status(200).send(generateMainPage(countryCoords));
});