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

fix popup issues

Browse Source
This commit is contained in:
HF 2022-09-04 01:40:38 +02:00
parent c0ee7b3e0e
commit cd195c9692
16 changed files with 60 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Window.jsx
View File

@ -153,7 +153,7 @@ const Window = ({ id }) => {
title={t`Close`} title={t`Close`}
tabIndex={-1} tabIndex={-1}
>✕</div> >✕</div>
{(popUpTypes[windowType]) && ( {popUpTypes.includes(windowType) && (
<div <div
onClick={(evt) => { onClick={(evt) => {
openPopUp( openPopUp(
@ -224,7 +224,7 @@ const Window = ({ id }) => {
> >
{windowTitle} {windowTitle}
</span> </span>
{(popUpTypes[windowType]) && ( {popUpTypes.includes(windowType) && (
<span <span
className="win-topbtn" className="win-topbtn"
key="pobtnm" key="pobtnm"

4
src/components/windows/Chat.jsx
View File

@ -15,6 +15,7 @@ import ChannelDropDown from '../contextmenus/ChannelDropDown';
import { import {
markChannelAsRead, markChannelAsRead,
sendChatMessage,
} from '../../store/actions'; } from '../../store/actions';
import { import {
showUserAreaModal, showUserAreaModal,
@ -22,7 +23,6 @@ import {
import { import {
fetchChatMessages, fetchChatMessages,
} from '../../store/actions/thunks'; } from '../../store/actions/thunks';
import SocketClient from '../../socket/SocketClient';
const Chat = ({ const Chat = ({
@ -130,7 +130,7 @@ const Chat = ({
const inptMsg = inputRef.current.value.trim(); const inptMsg = inputRef.current.value.trim();
if (!inptMsg) return; if (!inptMsg) return;
// send message via websocket // send message via websocket
SocketClient.sendChatMessage(inptMsg, chatChannel); dispatch(sendChatMessage(inptMsg, chatChannel));
inputRef.current.value = ''; inputRef.current.value = '';
} }

15
src/components/windows/UserArea.jsx
View File

@ -9,9 +9,6 @@ import { t } from 'ttag';
import { import {
fetchStats, fetchStats,
} from '../../store/actions/thunks'; } from '../../store/actions/thunks';
import {
setWindowArgs,
} from '../../store/actions/windows';
import useInterval from '../hooks/interval'; import useInterval from '../hooks/interval';
import LogInArea from '../LogInArea'; import LogInArea from '../LogInArea';
import Tabs from '../Tabs'; import Tabs from '../Tabs';
@ -23,20 +20,20 @@ const Converter = React.lazy(() => import(/* webpackChunkName: "converter" */ '.
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
const Modtools = React.lazy(() => import(/* webpackChunkName: "modtools" */ '../Modtools')); const Modtools = React.lazy(() => import(/* webpackChunkName: "modtools" */ '../Modtools'));
const UserArea = ({ windowId }) => { const UserArea = ({ args, setArgs, setTitle }) => {
const name = useSelector((state) => state.user.name); const name = useSelector((state) => state.user.name);
const userlvl = useSelector((state) => state.user.userlvl); const userlvl = useSelector((state) => state.user.userlvl);
const lastStatsFetch = useSelector((state) => state.ranks.lastFetch); const lastStatsFetch = useSelector((state) => state.ranks.lastFetch);
const { const {
activeTab = t`Profile`, activeTab = t`Profile`,
} = useSelector((state) => state.windows.args[windowId] || {}); } = args;
const dispatch = useDispatch(); const dispatch = useDispatch();
const setActiveTab = useCallback((label) => { const setActiveTab = useCallback((label) => {
dispatch(setWindowArgs(windowId, { setArgs({
activeTab: label, activeTab: label,
})); });
}, [dispatch]); }, [setArgs]);
useInterval(() => { useInterval(() => {
if (Date.now() - 300000 > lastStatsFetch) { if (Date.now() - 300000 > lastStatsFetch) {
@ -48,7 +45,7 @@ const UserArea = ({ windowId }) => {
<div style={{ textAlign: 'center' }}> <div style={{ textAlign: 'center' }}>
<Tabs activeTab={activeTab} setActiveTab={setActiveTab}> <Tabs activeTab={activeTab} setActiveTab={setActiveTab}>
<div label={t`Profile`}> <div label={t`Profile`}>
{(name) ? <UserAreaContent /> : <LogInArea windowId={windowId} />} {(name) ? <UserAreaContent /> : <LogInArea windowId="1" />}
</div> </div>
<div label={t`Ranking`}> <div label={t`Ranking`}>
<Rankings /> <Rankings />

15
src/components/windows/popUpAvailable.js
View File

@ -7,14 +7,17 @@ export const argsTypes = {
CHAT: ['chatChannel'], CHAT: ['chatChannel'],
}; };
export function buildPopUpUrl(windowType, args) { export function buildPopUpUrl(windowType, argsIn) {
const args = { ...argsIn };
let path = `/${windowType.toLowerCase()}`; let path = `/${windowType.toLowerCase()}`;
const typeArr = argsTypes[windowType]; const typeArr = argsTypes[windowType];
for (let i = 0; i < typeArr.length; i += 1) { if (typeArr) {
const key = typeArr[i]; for (let i = 0; i < typeArr.length; i += 1) {
if (args[key]) { const key = typeArr[i];
path += `/${args[key]}`; if (args[key]) {
delete args[key]; path += `/${args[key]}`;
delete args[key];
}
} }
} }
let searchParams = new URLSearchParams(); let searchParams = new URLSearchParams();

2
src/ssr/PopUp.jsx
View File

@ -52,7 +52,7 @@ function generatePopUpPage(lang) {
<html lang="${lang}"> <html lang="${lang}">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>${t`PixelPlanet.Fun PopUp`}</title> <title>${t`ppfun`}</title>
<meta name="description" content="${t`PixelPlanet.Fun PopUp`}" /> <meta name="description" content="${t`PixelPlanet.Fun PopUp`}" />
<meta name="google" content="nopagereadaloud" /> <meta name="google" content="nopagereadaloud" />
<meta name="theme-color" content="#cae3ff" /> <meta name="theme-color" content="#cae3ff" />

15
src/store/actions/index.js
View File

@ -147,7 +147,7 @@ export function selectColor(color) {
export function selectCanvas(canvasId) { export function selectCanvas(canvasId) {
return { return {
type: 'SELECT_CANVAS', type: 's/SELECT_CANVAS',
canvasId, canvasId,
}; };
} }
@ -286,6 +286,17 @@ export function receiveOnline(online) {
}; };
} }
export function sendChatMessage(
text,
channel,
) {
return {
type: 's/REQ_CHAT_MESSAGE',
text,
channel,
};
}
export function receiveChatMessage( export function receiveChatMessage(
name, name,
text, text,
@ -463,7 +474,7 @@ export function muteChatChannel(cid) {
export function unmuteChatChannel(cid) { export function unmuteChatChannel(cid) {
return { return {
type: 'UNs/MUTE_CHAT_CHANNEL', type: 's/UNMUTE_CHAT_CHANNEL',
cid, cid,
}; };
} }

2
src/store/actions/windows.js
View File

@ -156,7 +156,7 @@ export function cloneWindow(windowId) {
export function toggleMaximizeWindow(windowId) { export function toggleMaximizeWindow(windowId) {
return { return {
type: 's/TGL_MAXIMIZE_WIN', type: 'TGL_MAXIMIZE_WIN',
windowId, windowId,
}; };
} }

2
src/store/middleware/extensions.js
View File

@ -10,7 +10,7 @@ const pixelPlanetEvents = new EventEmitter();
export default () => (next) => (action) => { export default () => (next) => (action) => {
switch (action.type) { switch (action.type) {
case 'SELECT_CANVAS': { case 's/SELECT_CANVAS': {
pixelPlanetEvents.emit('selectcanvas', action.canvasId); pixelPlanetEvents.emit('selectcanvas', action.canvasId);
break; break;
} }

2
src/store/middleware/rendererHook.js
View File

@ -48,7 +48,7 @@ export default (store) => (next) => (action) => {
switch (type) { switch (type) {
case 'RELOAD_URL': case 'RELOAD_URL':
case 'SELECT_CANVAS': case 's/SELECT_CANVAS':
case 'REC_ME': { case 'REC_ME': {
const renderer = getRenderer(); const renderer = getRenderer();
const { is3D } = state.canvas; const { is3D } = state.canvas;

11
src/store/middleware/socketClientHook.js
View File

@ -32,6 +32,15 @@ export default (store) => (next) => (action) => {
break; break;
} }
case 's/REQ_CHAT_MESSAGE': {
const {
text,
channel,
} = action;
SocketClient.sendChatMessage(text, channel);
break;
}
default: default:
// nothing // nothing
} }
@ -41,7 +50,7 @@ export default (store) => (next) => (action) => {
// executed after reducers // executed after reducers
switch (action.type) { switch (action.type) {
case 'RELOAD_URL': case 'RELOAD_URL':
case 'SELECT_CANVAS': case 's/SELECT_CANVAS':
case 'REC_ME': { case 'REC_ME': {
const state = store.getState(); const state = store.getState();
const { canvasId } = state.canvas; const { canvasId } = state.canvas;

2
src/store/middleware/title.js
View File

@ -40,7 +40,7 @@ export default (store) => (next) => (action) => {
} }
case 'SELECT_CANVAS': case 's/SELECT_CANVAS':
case 'REC_ME': case 'REC_ME':
case 'RELOAD_URL': case 'RELOAD_URL':
case 'ON_VIEW_FINISH_CHANGE': { case 'ON_VIEW_FINISH_CHANGE': {

2
src/store/reducers/canvas.js
View File

@ -278,7 +278,7 @@ export default function canvasReducer(
}; };
} }
case 'SELECT_CANVAS': { case 's/SELECT_CANVAS': {
let { canvasId } = action; let { canvasId } = action;
const { canvases, prevCanvasCoords, canvasId: prevCanvasId } = state; const { canvases, prevCanvasCoords, canvasId: prevCanvasId } = state;
let canvas = canvases[canvasId]; let canvas = canvases[canvasId];

2
src/store/reducers/chatRead.js
View File

@ -142,7 +142,7 @@ export default function chatRead(
}; };
} }
case 'UNs/MUTE_CHAT_CHANNEL': { case 's/UNMUTE_CHAT_CHANNEL': {
const { cid } = action; const { cid } = action;
const mute = state.mute.filter((id) => (id !== cid)); const mute = state.mute.filter((id) => (id !== cid));
return { return {

2
src/store/reducers/windows.js
View File

@ -409,7 +409,7 @@ export default function windows(
}); });
} }
case 's/TGL_MAXIMIZE_WIN': { case 'TGL_MAXIMIZE_WIN': {
const { const {
windowId, windowId,
} = action; } = action;

4
src/store/selectors/popup.js
View File

@ -2,6 +2,6 @@
* selectors for single window / popup * selectors for single window / popup
*/ */
export const selectWindowType = (state) => state.win.windowType; export const selectWindowType = (state) => state.popup.windowType;
export const selectWIndowArgs = (state) => state.win.args; export const selectWIndowArgs = (state) => state.popup.args;

8
src/store/storePopUp.js
View File

@ -16,16 +16,23 @@ import { persistStore } from 'redux-persist';
import sharedReducers from './sharedReducers'; import sharedReducers from './sharedReducers';
import canvas from './reducers/canvas'; import canvas from './reducers/canvas';
import popup from './reducers/popup'; import popup from './reducers/popup';
import user from './reducers/user';
import chat from './reducers/chat';
import fetching from './reducers/fetching';
/* /*
* middleware * middleware
*/ */
import parent from './middleware/parent'; import parent from './middleware/parent';
import titlePopUp from './middleware/titlePopUp';
const reducers = combineReducers({ const reducers = combineReducers({
...sharedReducers, ...sharedReducers,
canvas, canvas,
popup, popup,
user,
chat,
fetching,
}); });
const store = createStore( const store = createStore(
@ -33,6 +40,7 @@ const store = createStore(
applyMiddleware( applyMiddleware(
thunk, thunk,
parent, parent,
titlePopUp,
), ),
); );