From caeb7948785e35a69e1258e119bed77fb9b2cb91 Mon Sep 17 00:00:00 2001
From: HF
+
- {t`Changed Mail successfully. We sent you a verification mail, \ - please verify your new mail address.`} -
- -+ {t`Changed Mail successfully. We sent you a verification mail, \ + please verify your new mail address.`} +
+-
{t`Choose Canvas`}: +
+
{t`Convert an image to canvas colors`}
) : null} - +# | -user | -Pixels | -# Total | -Total Pixels | -
---|---|---|---|---|
{rank.dailyRanking} | -{rank.name} | -{rank.dailyTotalPixels} | -{rank.ranking} | -{rank.totalPixels} | -
# | +user | +Pixels | +# Total | +Total Pixels | +
---|---|---|---|---|
{rank.dailyRanking} | +{rank.name} | +{rank.dailyTotalPixels} | +{rank.ranking} | +{rank.totalPixels} | +
- {t`Sent you a mail with instructions to reset your password.`} -
- -- { - this.setState({ orderDaily: false }); - }} - >{t`Total`} | - { this.setState({ orderDaily: true }); }} - >{t`Daily`} -
- {(orderDaily) ?- {t`Ranking updates every 5 min. Daily rankings get reset at midnight UTC.`} -
+ setOrderDaily(false)} + >{t`Total`} | + setOrderDaily(true)} + >{t`Daily`}+ {t`Ranking updates every 5 min. Daily rankings get reset at midnight UTC.`} +
+
- {t`Block all Private Messages`}
-
-
{t`Unblock Users`}
- { - (blocked.length) ? ( - - { - blocked.map((bl) => ( -{t`You have no users blocked`}
+ ) - } - - -{t`You have no users blocked`}
+ ) + } + + +# | -user | -Pixels | -# Today | -Pixels Today | -
---|---|---|---|---|
{rank.ranking} | -{rank.name} | -{rank.totalPixels} | -{rank.dailyRanking} | -{rank.dailyTotalPixels} | -
# | +user | +Pixels | +# Today | +Pixels Today | +
---|---|---|---|---|
{rank.ranking} | +{rank.name} | +{rank.totalPixels} | +{rank.dailyRanking} | +{rank.dailyTotalPixels} | +
- {(rank) ? `${text}: #` : `${text}: `} - - {numberToString(value)} -
-); - -class UserArea extends React.Component { - constructor() { - super(); - this.state = { - // that should be an ENUM tbh - changeNameExtended: false, - changeMailExtended: false, - changePasswdExtended: false, - deleteAccountExtended: false, - }; - } - - render() { - const { - stats, name, logout, mailreg, setMailreg, setName, - } = this.props; - const { - changeNameExtended, - changeMailExtended, - changePasswdExtended, - deleteAccountExtended, - socialSettingsExtended, - } = this.state; - return ( -
-
-
{t`Your name is: ${name}`}
( - {t`Log out`} | - this.setState({ - changeNameExtended: true, - changeMailExtended: false, - changePasswdExtended: false, - deleteAccountExtended: false, - socialSettingsExtended: false, - })} - > {t`Change Username`} | - {(mailreg) - && ( - - this.setState({ - changeNameExtended: false, - changeMailExtended: true, - changePasswdExtended: false, - deleteAccountExtended: false, - socialSettingsExtended: false, - })} - > {t`Change Mail`} | - - )} - this.setState({ - changeNameExtended: false, - changeMailExtended: false, - changePasswdExtended: true, - deleteAccountExtended: false, - socialSettingsExtended: false, - })} - > {t`Change Password`} | - this.setState({ - changeNameExtended: false, - changeMailExtended: false, - changePasswdExtended: false, - deleteAccountExtended: true, - socialSettingsExtended: false, - })} - > {t`Delete Account`} ) -+ {(rank) ? `${text}: #` : `${text}: `} + + {numberToString(value)} +
+); + +const UserAreaContent = () => { + const [area, setArea] = useState('NONE'); + + const dispatch = useDispatch(); + const logout = useCallback(async () => { + const ret = await requestLogOut(); + if (ret) { + dispatch(logoutUser()); + } + }, [dispatch]); + + const mailreg = useSelector((state) => state.user.mailreg); + const name = useSelector((state) => state.user.name); + const stats = useSelector((state) => ({ + totalPixels: state.ranks.totalPixels, + dailyTotalPixels: state.ranks.dailyTotalPixels, + ranking: state.ranks.ranking, + dailyRanking: state.ranks.dailyRanking, + }), shallowEqual); + + const Area = AREAS[area]; + + return ( +{t`Your name is: ${name}`}
( + {t`Log out`} | + setArea('CHANGE_NAME')} + > {t`Change Username`} | + {(mailreg) + && ( + + setArea('CHANGE_MAIL')} + > {t`Change Mail`} | + + )} + setArea('CHANGE_PASSWORD')} + > {t`Change Password`} | + setArea('DELETE_ACCOUNT')} + > {t`Delete Account`} ) +-
- {t`Select the canvas you want to use. \ -Every canvas is unique and has different palettes, cooldown and requirements. \ -Archive of closed canvases can be accessed here:`} - {t`Archive`}) +const CanvasSelect = ({ windowId }) => { + const [canvases, showHiddenCanvases] = useSelector((state) => [ + state.canvas.canvases, + state.canvas.showHiddenCanvases, + ], shallowEqual); + const dispatch = useDispatch(); + const selCanvas = useCallback((canvasId) => dispatch(selectCanvas(canvasId)), + [dispatch]); + + return ( +
+
+ {t`Select the canvas you want to use. \ + Every canvas is unique and has different palettes, cooldown and requirements. \ + Archive of closed canvases can be accessed here:`} + dispatch(changeWindowType(windowId, 'ARCHIVE'))} + >{t`Archive`}) +
+ { + Object.keys(canvases).map((canvasId) => ( + (!canvases[canvasId].hid || showHiddenCanvases) + && ( +-
- {t`Login to access more features and stats.`} -
- {t`I forgot my Password.`}
-
- {(name === null)
- ? (
-
{t`Consider joining us on Guilded:`} - pixelplanet.fun/guilded -
- -); - -function mapDispatchToProps(dispatch) { - return { - register() { - dispatch(showRegisterModal()); - }, - forgotPassword() { - dispatch(showForgotPasswordModal()); - }, - setUserName(name) { - dispatch(setName(name)); - }, - setUserMailreg(mailreg) { - dispatch(setMailreg(mailreg)); - }, - }; -} - -function mapStateToProps(state: State) { - const { name, userlvl } = state.user; - return { name, userlvl }; -} - -export default connect(mapStateToProps, mapDispatchToProps)(UserArea); +export default React.memo(UserArea); diff --git a/src/components/windows/index.jsx b/src/components/windows/index.jsx index f92d96a..fb7b36b 100644 --- a/src/components/windows/index.jsx +++ b/src/components/windows/index.jsx @@ -1,9 +1,6 @@ /* * @flow */ - -import React from 'react'; - import Help from './Help'; import Settings from './Settings'; import UserArea from './UserArea'; @@ -14,7 +11,7 @@ import Chat from './Chat'; import ForgotPassword from './ForgotPassword'; export default { - NONE: , + NONE: null, HELP: Help, SETTINGS: Settings, USERAREA: UserArea, @@ -23,5 +20,5 @@ export default { CHAT: Chat, CANVAS_SELECTION: CanvasSelect, ARCHIVE: Archive, - /* other modals */ + /* other windows */ }; diff --git a/src/reducers/windows.js b/src/reducers/windows.js index 25d54e6..289b5e5 100644 --- a/src/reducers/windows.js +++ b/src/reducers/windows.js @@ -327,6 +327,43 @@ export default function windows( }; } + case 'CHANGE_WINDOW_TYPE': { + const { + windowId, + windowType, + } = action; + const args = { + ...state.args, + [windowId]: { + ...action.args, + }, + }; + if (windowId === 0) { + return { + ...state, + args, + modal: { + ...state.modal, + windowType, + }, + }; + } + const newWindows = state.windows.map((win) => { + if (win.windowId !== windowId) { + return win; + } + return { + ...win, + windowType, + }; + }); + return { + ...state, + args, + windows: newWindows, + }; + } + case 'FOCUS_WINDOW': { const { windowId, diff --git a/src/styles/default.css b/src/styles/default.css index 41df2b8..a30ef91 100644 --- a/src/styles/default.css +++ b/src/styles/default.css @@ -239,13 +239,34 @@ tr:nth-child(even) { border-width: thin; border-radius: 4px; width: 50px; - height: 100%; + height: 22px; white-space: nowrap; font-size: 14px; overflow-x: hidden; color: #212121; } +.cvbtn { + margin-top: 8px; + margin-bottom: 8px; + border: #c5c5c5; + border-style: solid; + border-radius: 8px; + cursor: pointer; +} + +.cvbtn:hover { + background: #c2bebc26; +} + +.cvimg { + max-width: 20%; + opacity: 0.3; + padding: 2; + display: inline-block; + vertical-align: middle; +} + .channeldd { background-color: rgba(226, 226, 226); color: #212121;