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

render settings on /win

Browse Source
This commit is contained in:
HF 2022-08-17 12:22:52 +02:00
parent befa32b0a6
commit 6ee78ff5d6
12 changed files with 126 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/App.jsx
View File

@ -19,10 +19,9 @@ import WindowManager from './WindowManager';
const iconContextValue = { style: { verticalAlign: 'middle' } };
const App = () => (
<div>
const App = ({ store }) => (
<Provider store={store}>
<Style />
<div id="outstreamContainer" />
<IconContext.Provider value={iconContextValue}>
<CanvasSwitchButton />
<Menu />
@ -33,16 +32,12 @@ const App = () => (
<UI />
<WindowManager />
</IconContext.Provider>
</div>
</Provider>
);
function renderApp(domParent, store) {
const root = createRoot(domParent);
root.render(
<Provider store={store}>
<App />
</Provider>,
);
root.render(<App store={store} />);
}
export default renderApp;

29
src/components/AppWin.jsx Normal file
View File

@ -0,0 +1,29 @@
/**
* Main App
*/
import React from 'react';
import { Provider } from 'react-redux';
import { createRoot } from 'react-dom/client';
import { IconContext } from 'react-icons';
import Style from './Style';
import UIWin from './UIWin';
const iconContextValue = { style: { verticalAlign: 'middle' } };
const AppWin = ({ store }) => (
<Provider store={store}>
<Style />
<IconContext.Provider value={iconContextValue}>
<UIWin />
</IconContext.Provider>
</Provider>
);
function renderAppWin(domParent, store) {
const root = createRoot(domParent);
root.render(<AppWin store={store} />);
}
export default renderAppWin;

25
src/components/UIWin.jsx Normal file
View File

@ -0,0 +1,25 @@
/*
*
*/
import React from 'react';
import { useSelector } from 'react-redux';
import { selectWindowType } from '../store/selectors/win';
import COMPONENTS from './windows';
const UIWin = () => {
const windowType = useSelector(selectWindowType);
const [Content, name] = COMPONENTS[windowType];
return (
<>
{(windowType)
? <Content />
: <h1>Loading</h1>}
</>
);
};
export default React.memo(UIWin);

36
src/ssr/Win.jsx
View File

@ -5,18 +5,42 @@
/* eslint-disable max-len */
import { getTTag } from '../core/ttag';
import { langCodeToCC } from '../utils/location';
import ttags, { getTTag } from '../core/ttag';
/* this will be set by webpack */
import { assets } from '../core/assets';
import { ASSET_SERVER } from '../core/config';
import { styleassets, assets } from '../core/assets';
import { ASSET_SERVER, BACKUP_URL } from '../core/config';
/*
* generates string with html of globe page
* generate language list
*/
const langs = Object.keys(ttags)
.map((l) => (l === 'default' ? 'en' : l))
.map((l) => [l, langCodeToCC(l)]);
/*
* values that we pass to client scripts
*/
const ssv = {
assetserver: ASSET_SERVER,
availableStyles: styleassets,
langs,
};
if (BACKUP_URL) {
ssv.backupurl = BACKUP_URL;
}
/*
* generates string with html of win page
* @param lang language code
* @return html of mainpage
*/
function generateWinPage(lang) {
const ssvR = {
...ssv,
lang: lang === 'default' ? 'en' : lang,
};
const script = (assets[`win-${lang}`])
? assets[`win-${lang}`].js
: assets.win.js;
@ -37,8 +61,12 @@ function generateWinPage(lang) {
/>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<script>window.ssv=JSON.parse('${JSON.stringify(ssvR)}')</script>
<link rel="stylesheet" type="text/css" id="globcss" href="${styleassets.default}" />
</head>
<body>
<div id="app">
</div>
<script src="${ASSET_SERVER + script}"></script>
</body>
</html>

3
src/store/configureWinStore.js → src/store/configureStoreWin.js
View File

@ -17,6 +17,7 @@ import storage from 'redux-persist/lib/storage';
import audio from './reducers/audio';
import canvas from './reducers/canvas';
import gui from './reducers/gui';
import win from './reducers/win';
/*
* middleware
@ -40,11 +41,13 @@ const reducers = persistReducer({
},
blacklist: [
'canvas',
'win',
],
}, combineReducers({
audio,
canvas,
gui,
win,
}));
const store = createStore(

20
src/store/reducers/win.js Normal file
View File

@ -0,0 +1,20 @@
/*
* state for single-window page (popup)
*/
const initialState = {
// windowType: null,
windowType: 'SETTINGS',
title: '',
args: {},
};
export default function win(
state = initialState,
action,
) {
switch (action.type) {
default:
return state;
}
}

5
src/store/selectors/win.js Normal file
View File

@ -0,0 +1,5 @@
/*
* selectors for single window / popup
*/
export const selectWindowType = (state) => state.win.windowType;

17
src/styles/default.css
View File

@ -684,6 +684,10 @@ tr:nth-child(even) {
width: 100%;
padding: 0;
}
.overlay {
display: none;
}
}
.overlay {
@ -980,19 +984,6 @@ table td span {
transform: scale(1.10,1.10); /* Standard syntax */
}
#outstreamContainer {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: black;
z-index: 9000;
}
.grecaptcha-badge {
visibility: hidden;
}

4
src/styles/theme-dark-round.css
View File

@ -172,7 +172,3 @@ h3, h4 {
.actionbuttons:hover, .coorbox:hover, .menu > div:hover {
background-color: #363637;
}
#outstreamContainer {
background-color: black;
}

4
src/styles/theme-dark-sstraight.css
View File

@ -177,7 +177,3 @@ h3, h4 {
.actionbuttons:hover, .coorbox:hover, .menu > div:hover {
background-color: rgba(71, 71, 71, 0.8);
}
#outstreamContainer {
background-color: black;
}

4
src/styles/theme-dark.css
View File

@ -157,7 +157,3 @@ h3, h4 {
.actionbuttons:hover, .coorbox:hover, .menu > div:hover {
background-color: #363637;
}
#outstreamContainer {
background-color: black;
}

5
src/win.js
View File

@ -2,9 +2,12 @@
* Main Script for windows (pop-ups and stuff)
*/
import store from './store/configureWinStore';
import store from './store/configureStoreWin';
import renderAppWin from './components/AppWin';
document.addEventListener('DOMContentLoaded', () => {
// eslint-disable-next-line no-console
console.log('hello');
renderAppWin(document.getElementById('app'), store);
});