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

fix chat css

Browse Source
This commit is contained in:
HF 2020-05-10 00:03:15 +02:00
parent dc99fd9012
commit cc5340bc7a
10 changed files with 156 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/ForgotPasswordModal.jsx
View File

@ -8,8 +8,6 @@ import { connect } from 'react-redux';
import Modal from './Modal';
import type { State } from '../reducers';
import { showUserAreaModal } from '../actions';
import NewPasswordForm from './NewPasswordForm';
@ -21,16 +19,21 @@ const textStyle = {
textAlign: 'inherit',
float: 'none',
margin: 0,
padding: 0,
paddingLeft: '5%',
lineHeight: 'normal',
};
const ForgotPasswordModal = ({ login }) => (
<Modal title="Restore my Password">
<p style={textStyle}>Enter your mail adress and we will send you a new password:</p><br />
<p style={{ textAlign: 'center' }}>
<NewPasswordForm back={login} />
<p>Also join our Discord: <a href="./discord" target="_blank">pixelplanet.fun/discord</a></p>
<p style={{ paddingLeft: '5%', paddingRight: '5%' }}>
<p style={textStyle}>
Enter your mail adress and we will send you a new password:
</p><br />
<p style={{ textAlign: 'center' }}>
<NewPasswordForm back={login} />
<p>Also join our Discord:&nbsp;
<a href="./discord" target="_blank">pixelplanet.fun/discord</a></p>
</p>
</p>
</Modal>
);
@ -43,8 +46,5 @@ function mapDispatchToProps(dispatch) {
};
}
function mapStateToProps(state: State) {
}
export default connect(mapStateToProps, mapDispatchToProps)(ForgotPasswordModal);
export default connect(null, mapDispatchToProps)(ForgotPasswordModal);

4
src/components/HelpModal.jsx
View File

@ -41,7 +41,7 @@ const textStyle = {
const HelpModal = () => (
<Modal title="Welcome to PixelPlanet.fun">
<p style={{ textAlign: 'center' }}>
<p style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
<p style={textStyle}>Place color pixels on a large canvas with other players online!
Our main canvas is a huge worldmap, you can place wherever you like, but you will have to wait a specific
Cooldown between pixels. You can check out the cooldown and requiremnts on the Canvas Selection menu (globe button on top).
@ -56,7 +56,7 @@ const HelpModal = () => (
<p style={textStyle}>The bare map data that we use, together with converted OpenStreetMap tiles for orientation,
can be downloaded from mega.nz here: <a href="https://mega.nz/#!JpkBwAbJ!EnSLlZmKv3kEBE0HDhakTgAZZycD3ELjduajJxPGaXo">pixelplanetmap.zip</a> (422MB)</p>
<p style={titleStyle}>Detected as Proxy?</p>
<p style={textStyle}>If you got detected as proxy, but you are none, please send us an e-mail with <a href="https://www.whatismyip.com/">your IP</a> to pixelplanetdev@gmail.com. Do not post your IP anywhere else. We are sorry for the inconvenience.</p>
<p style={textStyle}>If you got detected as proxy, but you are none, please send us an e-mail with <a href="https://www.whatismyip.com/">your IP</a> to <a href="mailto:pixelplanetdev@gmail.com">pixelplanetdev@gmail.com</a>. Do not post your IP anywhere else. We are sorry for the inconvenience.</p>
<h3 style={titleStyle}>2D Controls</h3>
<p style={textStyle}>Click a color in palette to select</p>
<p style={textStyle}>Press <kbd>G</kbd> to toggle grid</p>

18
src/components/Modal.jsx
View File

@ -12,8 +12,6 @@ import {
hideModal,
} from '../actions';
import type { State } from '../reducers';
const closeStyles = {
position: 'fixed',
@ -45,17 +43,19 @@ function MyModal({ close, title, children }) {
contentLabel={`${title} Modal`}
onRequestClose={close}
>
<h2>{title}</h2>
<div style={closeStyles} onClick={close}><MdClose /></div>
<h2 style={{ paddingLeft: '5%' }}>{title}</h2>
<div
style={closeStyles}
onClick={close}
role="button"
label="close"
tabIndex={-1}
><MdClose /></div>
{children}
</Modal>
);
}
function mapStateToProps(state: State) {
return {};
}
function mapDispatchToProps(dispatch) {
return {
close() {
@ -64,4 +64,4 @@ function mapDispatchToProps(dispatch) {
};
}
export default connect(mapStateToProps, mapDispatchToProps)(MyModal);
export default connect(null, mapDispatchToProps)(MyModal);

17
src/components/NewPasswordForm.jsx
View File

@ -12,7 +12,7 @@ function validate(email) {
return errors;
}
async function submit_newpass(email, component) {
async function submitNewpass(email) {
const body = JSON.stringify({
email,
});
@ -28,8 +28,9 @@ async function submit_newpass(email, component) {
}
const inputStyles = {
display: 'block',
display: 'inline-block',
width: '100%',
maxWidth: '35em',
};
class NewPasswordForm extends React.Component {
@ -58,7 +59,7 @@ class NewPasswordForm extends React.Component {
if (errors.length > 0) return;
this.setState({ submitting: true });
const { errors: resperrors } = await submit_newpass(email);
const { errors: resperrors } = await submitNewpass(email);
if (resperrors) {
this.setState({
errors: resperrors,
@ -76,7 +77,9 @@ class NewPasswordForm extends React.Component {
if (this.state.success) {
return (
<div>
<p className="modalmessage">Sent you a mail with instructions to reset your password.</p>
<p className="modalmessage">
Sent you a mail with instructions to reset your password.
</p>
<button type="button" onClick={this.props.back}>Back</button>
</div>
);
@ -93,8 +96,10 @@ class NewPasswordForm extends React.Component {
type="text"
placeholder="Email"
/>
<button type="submit">{(this.state.submitting) ? '...' : 'Submit'}</button>
<br />
<button type="submit">
{(this.state.submitting) ? '...' : 'Submit'}
</button>
<button type="button" onClick={this.props.back}>Cancel</button>
</form>
);

37
src/components/PasswordReset.jsx
View File

@ -10,8 +10,22 @@ const PasswordReset = ({ name, code }) => (
<form method="post" action="reset_password">
<h3>Reset Password</h3>
<p>Hello {name}, you can set your new password here:</p>
<input type="password" name="pass" placeholder="New Password" />
<input type="password" name="passconf" placeholder="Confirm New Password" />
<input
type="password"
name="pass"
placeholder="New Password"
style={{
maxWidth: '35em',
}}
/>
<input
type="password"
name="passconf"
placeholder="Confirm New Password"
style={{
maxWidth: '35em',
}}
/>
<input type="hidden" name="code" value={code} />
<button type="submit" name="submit">Submit</button>
</form>
@ -25,12 +39,17 @@ const PasswordResetError = ({ message }) => (
</div>
);
export function getPasswordResetHtml(name, code, message = null) {
const data = {
title: 'PixelPlanet.fun Password Reset',
description: 'reset your password here',
body: (message) ? <PasswordResetError message={message} /> : <PasswordReset name={name} code={code} />,
};
const index = `<!doctype html>${ReactDOM.renderToStaticMarkup(<Html {...data} />)}`;
export default function getPasswordResetHtml(name, code, message = null) {
const title = 'PixelPlanet.fun Password Reset';
const description = 'reset your password here';
const body = (message)
? <PasswordResetError message={message} />
: <PasswordReset name={name} code={code} />;
const index = `<!doctype html>${
ReactDOM.renderToStaticMarkup(<Html
title={title}
description={description}
body={body}
/>)}`;
return index;
}

14
src/components/RegisterModal.jsx
View File

@ -8,8 +8,6 @@ import { connect } from 'react-redux';
import Modal from './Modal';
import type { State } from '../reducers';
import { showUserAreaModal, receiveMe } from '../actions';
// import { send_registration } from '../ui/register';
@ -24,7 +22,7 @@ const textStyle = {
textAlign: 'inherit',
float: 'none',
margin: 0,
padding: 0,
paddingLeft: '5%',
lineHeight: 'normal',
};
@ -34,7 +32,9 @@ const RegisterModal = ({ login, doMe }) => (
<p style={{ textAlign: 'center' }}>
<SignUpForm userarea={login} me={doMe} />
<button type="button" onClick={login}>Cancel</button>
<p>Also join our Discord: <a href="./discord" target="_blank">pixelplanet.fun/discord</a></p>
<p>Also join our Discord:&nbsp;
<a href="./discord" target="_blank">pixelplanet.fun/discord</a>
</p>
</p>
</Modal>
);
@ -50,8 +50,4 @@ function mapDispatchToProps(dispatch) {
};
}
function mapStateToProps(state: State) {
}
export default connect(mapStateToProps, mapDispatchToProps)(RegisterModal);
export default connect(null, mapDispatchToProps)(RegisterModal);

128
src/components/SettingsModal.jsx
View File

@ -111,69 +111,71 @@ function SettingsModal({
}) {
return (
<Modal title="Settings">
<SettingsItem
title="Show Grid"
description="Turn on grid to highlight pixel borders."
keyBind="G"
value={isGridShown}
onToggle={onToggleGrid}
/>
<SettingsItem
title="Show Pixel Activity"
description="Show circles where pixels are placed."
keyBind="X"
value={isPixelNotifyShown}
onToggle={onTogglePixelNotify}
/>
<SettingsItem
title="Disable Game Sounds"
// eslint-disable-next-line max-len
description="All sound effects except Chat Notification will be disabled."
keyBind="M"
value={isMuted}
onToggle={onMute}
/>
<SettingsItem
title="Enable chat notifications"
description="Play a sound when new chat messages arrive"
value={chatNotify}
onToggle={onToggleChatNotify}
/>
<SettingsItem
title="Auto Zoom In"
// eslint-disable-next-line max-len
description="Zoom in instead of placing a pixel when you tap the canvas and your zoom is small."
value={autoZoomIn}
onToggle={onToggleAutoZoomIn}
/>
<SettingsItem
title="Compact Palette"
// eslint-disable-next-line max-len
description="Display Palette in a compact form that takes less screen space."
value={compactPalette}
onToggle={onToggleCompactPalette}
/>
<SettingsItem
title="Potato Mode"
description="For when you are playing on a potato."
value={isPotato}
onToggle={onTogglePotatoMode}
/>
<SettingsItem
title="Light Grid"
description="Show Grid in white instead of black."
value={isLightGrid}
onToggle={onToggleLightGrid}
/>
{ (window.backupurl)
? (
<SettingsItem
title="Historical View"
description="Check out past versions of the canvas."
value={isHistoricalView}
onToggle={onToggleHistoricalView}
/>
) : null }
<p style={{ paddingLeft: '5%', paddingRight: '5%' }}>
<SettingsItem
title="Show Grid"
description="Turn on grid to highlight pixel borders."
keyBind="G"
value={isGridShown}
onToggle={onToggleGrid}
/>
<SettingsItem
title="Show Pixel Activity"
description="Show circles where pixels are placed."
keyBind="X"
value={isPixelNotifyShown}
onToggle={onTogglePixelNotify}
/>
<SettingsItem
title="Disable Game Sounds"
// eslint-disable-next-line max-len
description="All sound effects except Chat Notification will be disabled."
keyBind="M"
value={isMuted}
onToggle={onMute}
/>
<SettingsItem
title="Enable chat notifications"
description="Play a sound when new chat messages arrive"
value={chatNotify}
onToggle={onToggleChatNotify}
/>
<SettingsItem
title="Auto Zoom In"
// eslint-disable-next-line max-len
description="Zoom in instead of placing a pixel when you tap the canvas and your zoom is small."
value={autoZoomIn}
onToggle={onToggleAutoZoomIn}
/>
<SettingsItem
title="Compact Palette"
// eslint-disable-next-line max-len
description="Display Palette in a compact form that takes less screen space."
value={compactPalette}
onToggle={onToggleCompactPalette}
/>
<SettingsItem
title="Potato Mode"
description="For when you are playing on a potato."
value={isPotato}
onToggle={onTogglePotatoMode}
/>
<SettingsItem
title="Light Grid"
description="Show Grid in white instead of black."
value={isLightGrid}
onToggle={onToggleLightGrid}
/>
{ (window.backupurl)
? (
<SettingsItem
title="Historical View"
description="Check out past versions of the canvas."
value={isHistoricalView}
onToggle={onToggleHistoricalView}
/>
) : null }
</p>
</Modal>
);
}

33
src/components/SignUpForm.jsx
View File

@ -8,7 +8,7 @@ import {
validateEMail, validateName, validatePassword, parseAPIresponse,
} from '../utils/validation';
function validate(name, email, password, confirm_password) {
function validate(name, email, password, confirmPassword) {
const errors = [];
const mailerror = validateEMail(email);
if (mailerror) errors.push(mailerror);
@ -17,14 +17,14 @@ function validate(name, email, password, confirm_password) {
const passworderror = validatePassword(password);
if (passworderror) errors.push(passworderror);
if (password !== confirm_password) {
if (password !== confirmPassword) {
errors.push('Passwords do not match');
}
return errors;
}
async function submit_registration(name, email, password, component) {
async function submitRegistration(name, email, password) {
const body = JSON.stringify({
name,
email,
@ -43,8 +43,9 @@ async function submit_registration(name, email, password, component) {
}
const inputStyles = {
display: 'block',
display: 'inline-block',
width: '100%',
maxWidth: '35em',
};
class SignUpForm extends React.Component {
@ -54,7 +55,7 @@ class SignUpForm extends React.Component {
name: '',
email: '',
password: '',
confirm_password: '',
confirmPassword: '',
submitting: false,
errors: [],
@ -67,17 +68,21 @@ class SignUpForm extends React.Component {
e.preventDefault();
const {
name, email, password, confirm_password, submitting,
name, email, password, confirmPassword, submitting,
} = this.state;
if (submitting) return;
const errors = validate(name, email, password, confirm_password);
const errors = validate(name, email, password, confirmPassword);
this.setState({ errors });
if (errors.length > 0) return;
this.setState({ submitting: true });
const { errors: resperrors, me } = await submit_registration(name, email, password);
const { errors: resperrors, me } = await submitRegistration(
name,
email,
password,
);
if (resperrors) {
this.setState({
errors: resperrors,
@ -119,13 +124,17 @@ class SignUpForm extends React.Component {
/>
<input
style={inputStyles}
value={this.state.confirm_password}
onChange={(evt) => this.setState({ confirm_password: evt.target.value })}
value={this.state.confirmPassword}
onChange={(evt) => this.setState({
confirmPassword: evt.target.value,
})}
type="password"
placeholder="Confirm Password"
/>
<button type="submit">{(this.state.submitting) ? '...' : 'Submit'}</button>
<br />
<button type="submit">
{(this.state.submitting) ? '...' : 'Submit'}
</button>
</form>
);
}

6
src/components/base.tcss
View File

@ -214,7 +214,6 @@ kbd {
overflow-y: auto;
border-radius: 4px;
outline: currentcolor none medium;
padding: 20px 40px;
transform: translate(-50%, -50%);
height: 80%;
max-height: 900px;
@ -228,11 +227,12 @@ kbd {
left: 0px;
right: 0px;
bottom: 0px;
height: 100%;
width: 100%;
height: 95%;
width: 90%;
transform: none;
max-width: none;
max-height: none;
padding: 5%;
}
}
:global(.Overlay) {

2
src/routes/reset_password.js
View File

@ -12,7 +12,7 @@ import type { Request, Response } from 'express';
import redis from '../data/redis';
import logger from '../core/logger';
import { getPasswordResetHtml } from '../components/PasswordReset';
import getPasswordResetHtml from '../components/PasswordReset';
import { MINUTE } from '../core/constants';
import mailProvider from '../core/mail';