render settings on /win
This commit is contained in:
parent
befa32b0a6
commit
6ee78ff5d6
|
@ -19,10 +19,9 @@ import WindowManager from './WindowManager';
|
||||||
|
|
||||||
const iconContextValue = { style: { verticalAlign: 'middle' } };
|
const iconContextValue = { style: { verticalAlign: 'middle' } };
|
||||||
|
|
||||||
const App = () => (
|
const App = ({ store }) => (
|
||||||
<div>
|
<Provider store={store}>
|
||||||
<Style />
|
<Style />
|
||||||
<div id="outstreamContainer" />
|
|
||||||
<IconContext.Provider value={iconContextValue}>
|
<IconContext.Provider value={iconContextValue}>
|
||||||
<CanvasSwitchButton />
|
<CanvasSwitchButton />
|
||||||
<Menu />
|
<Menu />
|
||||||
|
@ -33,16 +32,12 @@ const App = () => (
|
||||||
<UI />
|
<UI />
|
||||||
<WindowManager />
|
<WindowManager />
|
||||||
</IconContext.Provider>
|
</IconContext.Provider>
|
||||||
</div>
|
</Provider>
|
||||||
);
|
);
|
||||||
|
|
||||||
function renderApp(domParent, store) {
|
function renderApp(domParent, store) {
|
||||||
const root = createRoot(domParent);
|
const root = createRoot(domParent);
|
||||||
root.render(
|
root.render(<App store={store} />);
|
||||||
<Provider store={store}>
|
|
||||||
<App />
|
|
||||||
</Provider>,
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default renderApp;
|
export default renderApp;
|
||||||
|
|
29
src/components/AppWin.jsx
Normal file
29
src/components/AppWin.jsx
Normal 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
25
src/components/UIWin.jsx
Normal 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);
|
|
@ -5,18 +5,42 @@
|
||||||
|
|
||||||
/* eslint-disable max-len */
|
/* 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 */
|
/* this will be set by webpack */
|
||||||
import { assets } from '../core/assets';
|
import { styleassets, assets } from '../core/assets';
|
||||||
import { ASSET_SERVER } from '../core/config';
|
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
|
* @param lang language code
|
||||||
* @return html of mainpage
|
* @return html of mainpage
|
||||||
*/
|
*/
|
||||||
function generateWinPage(lang) {
|
function generateWinPage(lang) {
|
||||||
|
const ssvR = {
|
||||||
|
...ssv,
|
||||||
|
lang: lang === 'default' ? 'en' : lang,
|
||||||
|
};
|
||||||
const script = (assets[`win-${lang}`])
|
const script = (assets[`win-${lang}`])
|
||||||
? assets[`win-${lang}`].js
|
? assets[`win-${lang}`].js
|
||||||
: assets.win.js;
|
: assets.win.js;
|
||||||
|
@ -37,8 +61,12 @@ function generateWinPage(lang) {
|
||||||
/>
|
/>
|
||||||
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
|
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
|
||||||
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="app">
|
||||||
|
</div>
|
||||||
<script src="${ASSET_SERVER + script}"></script>
|
<script src="${ASSET_SERVER + script}"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -17,6 +17,7 @@ import storage from 'redux-persist/lib/storage';
|
||||||
import audio from './reducers/audio';
|
import audio from './reducers/audio';
|
||||||
import canvas from './reducers/canvas';
|
import canvas from './reducers/canvas';
|
||||||
import gui from './reducers/gui';
|
import gui from './reducers/gui';
|
||||||
|
import win from './reducers/win';
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* middleware
|
* middleware
|
||||||
|
@ -40,11 +41,13 @@ const reducers = persistReducer({
|
||||||
},
|
},
|
||||||
blacklist: [
|
blacklist: [
|
||||||
'canvas',
|
'canvas',
|
||||||
|
'win',
|
||||||
],
|
],
|
||||||
}, combineReducers({
|
}, combineReducers({
|
||||||
audio,
|
audio,
|
||||||
canvas,
|
canvas,
|
||||||
gui,
|
gui,
|
||||||
|
win,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const store = createStore(
|
const store = createStore(
|
20
src/store/reducers/win.js
Normal file
20
src/store/reducers/win.js
Normal 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
5
src/store/selectors/win.js
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
/*
|
||||||
|
* selectors for single window / popup
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const selectWindowType = (state) => state.win.windowType;
|
|
@ -684,6 +684,10 @@ tr:nth-child(even) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
|
@ -980,19 +984,6 @@ table td span {
|
||||||
transform: scale(1.10,1.10); /* Standard syntax */
|
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 {
|
.grecaptcha-badge {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
|
@ -172,7 +172,3 @@ h3, h4 {
|
||||||
.actionbuttons:hover, .coorbox:hover, .menu > div:hover {
|
.actionbuttons:hover, .coorbox:hover, .menu > div:hover {
|
||||||
background-color: #363637;
|
background-color: #363637;
|
||||||
}
|
}
|
||||||
|
|
||||||
#outstreamContainer {
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
|
|
|
@ -177,7 +177,3 @@ h3, h4 {
|
||||||
.actionbuttons:hover, .coorbox:hover, .menu > div:hover {
|
.actionbuttons:hover, .coorbox:hover, .menu > div:hover {
|
||||||
background-color: rgba(71, 71, 71, 0.8);
|
background-color: rgba(71, 71, 71, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
#outstreamContainer {
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
|
|
|
@ -157,7 +157,3 @@ h3, h4 {
|
||||||
.actionbuttons:hover, .coorbox:hover, .menu > div:hover {
|
.actionbuttons:hover, .coorbox:hover, .menu > div:hover {
|
||||||
background-color: #363637;
|
background-color: #363637;
|
||||||
}
|
}
|
||||||
|
|
||||||
#outstreamContainer {
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
|
|
|
@ -2,9 +2,12 @@
|
||||||
* Main Script for windows (pop-ups and stuff)
|
* 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', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
// eslint-disable-next-line no-console
|
// eslint-disable-next-line no-console
|
||||||
console.log('hello');
|
console.log('hello');
|
||||||
|
renderAppWin(document.getElementById('app'), store);
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue
Block a user