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

refactor store

Browse Source
This commit is contained in:
HF 2022-07-11 15:33:29 +02:00
parent 2789cd2a54
commit e105b8fa07
6 changed files with 131 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/client.js
View File

@ -5,7 +5,7 @@
// eslint-disable-next-line no-unused-vars
import fetch from 'isomorphic-fetch'; // TODO put in the beggining with webpack!
import onKeyPress from './controls/keypress';
import createKeyPressHandler from './controls/keypress';
import {
fetchMe,
initTimer,
@ -22,7 +22,7 @@ import {
receivePixelUpdate,
receivePixelReturn,
} from './ui/placePixel';
import store from './ui/store';
import store from './store/configureStore';
import renderApp from './components/App';
@ -121,8 +121,9 @@ function init() {
init();
document.addEventListener('DOMContentLoaded', () => {
renderApp(document.getElementById('app'));
renderApp(document.getElementById('app'), store);
const onKeyPress = createKeyPressHandler(store);
document.addEventListener('keydown', onKeyPress, false);
// garbage collection

7
src/components/App.jsx
View File

@ -1,6 +1,5 @@
/**
*
* @flow
* Main App
*/
import React from 'react';
@ -8,8 +7,6 @@ import { Provider } from 'react-redux';
import ReactDOM from 'react-dom';
import { IconContext } from 'react-icons';
import store from '../ui/store';
import Style from './Style';
import CoordinatesBox from './CoordinatesBox';
import CanvasSwitchButton from './buttons/CanvasSwitchButton';
@ -41,7 +38,7 @@ const App = () => (
</div>
);
function renderApp(domParent) {
function renderApp(domParent, store) {
ReactDOM.render(
<Provider store={store}>
<App />

151
src/controls/keypress.js
View File

@ -2,7 +2,6 @@
* keypress actions
*/
import { t } from 'ttag';
import store from '../ui/store';
import copy from '../utils/clipboard';
import {
toggleGrid,
@ -16,85 +15,87 @@ import {
const usedKeys = ['g', 'h', 'x', 'm', 'r', 'p'];
function onKeyPress(event) {
// ignore key presses if modal is open or chat is used
if (event.target.nodeName === 'INPUT'
|| event.target.nodeName === 'TEXTAREA'
) {
return;
}
let { key } = event;
const num = Number(key);
if (!Number.isNaN(num) && num > 0) {
// switch to canvas on num keys
const { canvases, canvasId: curCanvasId } = store.getState().canvas;
const canvasIds = Object.keys(canvases).filter((id) => !canvases[id].hid);
if (num <= canvasIds.length) {
const canvasId = canvasIds[num - 1];
// eslint-disable-next-line eqeqeq
if (canvasId != curCanvasId) {
store.dispatch(selectCanvas(canvasId));
const canvasName = canvases[canvasId].title;
store.dispatch(notify(t`Switched to ${canvasName}`));
}
}
return;
}
/*
* if char of key isn't used by a keybind,
* we check if the key location is where a
* key that is used would be on QWERTY
*/
if (!usedKeys.includes(key)) {
key = event.code;
if (!key.startsWith('Key')) {
function createKeyPressHandler(store) {
return (event) => {
// ignore key presses if modal is open or chat is used
if (event.target.nodeName === 'INPUT'
|| event.target.nodeName === 'TEXTAREA'
) {
return;
}
key = key.slice(-1).toLowerCase();
}
switch (key) {
case 'g':
store.dispatch(toggleGrid());
store.dispatch(notify((store.getState().gui.showGrid)
? t`Grid ON`
: t`Grid OFF`));
return;
case 'h':
if (window.ssv && window.ssv.backupurl) {
store.dispatch(toggleHistoricalView());
let { key } = event;
const num = Number(key);
if (!Number.isNaN(num) && num > 0) {
// switch to canvas on num keys
const { canvases, canvasId: curCanvasId } = store.getState().canvas;
const canvasIds = Object.keys(canvases).filter((id) => !canvases[id].hid);
if (num <= canvasIds.length) {
const canvasId = canvasIds[num - 1];
// eslint-disable-next-line eqeqeq
if (canvasId != curCanvasId) {
store.dispatch(selectCanvas(canvasId));
const canvasName = canvases[canvasId].title;
store.dispatch(notify(t`Switched to ${canvasName}`));
}
}
return;
case 'x':
store.dispatch(togglePixelNotify());
store.dispatch(notify((store.getState().gui.showPixelNotify)
? t`Pixel Notify ON`
: t`Pixel Notify OFF`));
return;
case 'm':
store.dispatch(toggleMute());
store.dispatch(notify((store.getState().audio.mute)
? t`Muted Sound`
: t`Unmuted Sound`));
return;
case 'r': {
const { hover } = store.getState().gui;
const text = hover.join('_');
copy(text);
store.dispatch(notify(t`Copied!`));
return;
}
case 'p':
store.dispatch(toggleHiddenCanvases());
store.dispatch(notify((store.getState().canvas.showHiddenCanvases)
? t`Show Hidden Canvases`
: t`Hide Hidden Canvases`));
break;
default:
}
/*
* if char of key isn't used by a keybind,
* we check if the key location is where a
* key that is used would be on QWERTY
*/
if (!usedKeys.includes(key)) {
key = event.code;
if (!key.startsWith('Key')) {
return;
}
key = key.slice(-1).toLowerCase();
}
switch (key) {
case 'g':
store.dispatch(toggleGrid());
store.dispatch(notify((store.getState().gui.showGrid)
? t`Grid ON`
: t`Grid OFF`));
return;
case 'h':
if (window.ssv && window.ssv.backupurl) {
store.dispatch(toggleHistoricalView());
}
return;
case 'x':
store.dispatch(togglePixelNotify());
store.dispatch(notify((store.getState().gui.showPixelNotify)
? t`Pixel Notify ON`
: t`Pixel Notify OFF`));
return;
case 'm':
store.dispatch(toggleMute());
store.dispatch(notify((store.getState().audio.mute)
? t`Muted Sound`
: t`Unmuted Sound`));
return;
case 'r': {
const { hover } = store.getState().gui;
const text = hover.join('_');
copy(text);
store.dispatch(notify(t`Copied!`));
return;
}
case 'p':
store.dispatch(toggleHiddenCanvases());
store.dispatch(notify((store.getState().canvas.showHiddenCanvases)
? t`Show Hidden Canvases`
: t`Hide Hidden Canvases`));
break;
default:
}
};
}
export default onKeyPress;
export default createKeyPressHandler;

61
src/store/configureStore.js
View File

@ -1,8 +1,27 @@
import { applyMiddleware, createStore, compose } from 'redux';
import thunk from 'redux-thunk';
import { persistStore } from 'redux-persist';
import { persistStore, persistCombineReducers } from 'redux-persist';
import localForage from 'localforage';
import audio from './middleware/audio';
/*
* reducers
*/
import audio from './reducers/audio';
import canvas from './reducers/canvas';
import gui from './reducers/gui';
import windows from './reducers/windows';
import user from './reducers/user';
import ranks from './reducers/ranks';
import alert from './reducers/alert';
import chat from './reducers/chat';
import contextMenu from './reducers/contextMenu';
import chatRead from './reducers/chatRead';
import fetching from './reducers/fetching';
/*
* middleware
*/
import audiom from './middleware/audio';
import socketClientHook from './middleware/socketClientHook';
import rendererHook from './middleware/rendererHook';
// import ads from './ads';
@ -12,8 +31,31 @@ import notifications from './middleware/notifications';
import title from './middleware/title';
import placePixelControl from './middleware/placePixelControl';
import extensions from './middleware/extensions';
import reducers from './reducers';
const reducers = persistCombineReducers({
key: 'primary',
storage: localForage,
blacklist: [
'user',
'canvas',
'alert',
'chat',
'contextMenu',
'fetching',
],
}, {
audio,
canvas,
gui,
windows,
user,
ranks,
alert,
chat,
contextMenu,
chatRead,
fetching,
});
const store = createStore(
reducers,
@ -23,7 +65,7 @@ const store = createStore(
thunk,
promise,
array,
audio,
audiom,
notifications,
title,
socketClientHook,
@ -35,11 +77,6 @@ const store = createStore(
);
export default function configureStore(onComplete) {
persistStore(store, null, () => {
if (onComplete) {
onComplete(store);
}
});
return store;
}
persistStore(store);
export default store;

42
src/store/reducers/index.js
View File

@ -1,42 +0,0 @@
/* @flow */
import { persistCombineReducers } from 'redux-persist';
import localForage from 'localforage';
import audio from './audio';
import canvas from './canvas';
import gui from './gui';
import windows from './windows';
import user from './user';
import ranks from './ranks';
import alert from './alert';
import chat from './chat';
import contextMenu from './contextMenu';
import chatRead from './chatRead';
import fetching from './fetching';
const config = {
key: 'primary',
storage: localForage,
blacklist: [
'user',
'canvas',
'alert',
'chat',
'contextMenu',
'fetching',
],
};
export default persistCombineReducers(config, {
audio,
canvas,
gui,
windows,
user,
ranks,
alert,
chat,
contextMenu,
chatRead,
fetching,
});

10
src/ui/store.js
View File

@ -1,10 +0,0 @@
/**
*
* @flow
*/
import configureStore from '../store/configureStore';
const store = configureStore(() => null);
export default store;