diff --git a/src/components/Admin.js b/src/components/Admin.js index 37af0e4..b76249b 100644 --- a/src/components/Admin.js +++ b/src/components/Admin.js @@ -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 = () => (
@@ -36,4 +39,11 @@ const Admin = () => (
); -export default Admin; +const data = { + title: 'PixelPlanet.fun AdminTools', + description: 'admin access on pixelplanet', + body: , +}; +const adminHtml = `${ReactDOM.renderToStaticMarkup()}`; + +export default adminHtml; diff --git a/src/components/Main.js b/src/components/Main.js new file mode 100644 index 0000000..9c873e9 --- /dev/null +++ b/src/components/Main.js @@ -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(); + + return `${html}`; +} + +export default generateMainPage; diff --git a/src/routes/admintools.js b/src/routes/admintools.js index 3f71db3..976d7df 100644 --- a/src/routes/admintools.js +++ b/src/routes/admintools.js @@ -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: , -}; -const index = `${ReactDOM.renderToStaticMarkup()}`; - /* * 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); }); diff --git a/src/web.js b/src/web.js index 08a148e..a6d5814 100644 --- a/src/web.js +++ b/src/web.js @@ -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(); - const index = `${html}`; + const countryCoords = (country) ? ccToCoords(country) : [0, 0]; - res.status(200).send(index); + res.status(200).send(generateMainPage(countryCoords)); });