replace sweetalert
This commit is contained in:
parent
ee21dd9d86
commit
74b4a44224
5
package-lock.json
generated
5
package-lock.json
generated
|
@ -9074,11 +9074,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"sweetalert2": {
|
|
||||||
"version": "10.14.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-10.14.0.tgz",
|
|
||||||
"integrity": "sha512-EBUh4k9qyRRsttm9X9j7WUhLExetvTJpcbp1VTMJCpuI2UwHLesXMIw9M+UeuqBywv0UjNMR5PKH7Qnv65m8rw=="
|
|
||||||
},
|
|
||||||
"symbol-observable": {
|
"symbol-observable": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
|
||||||
|
|
|
@ -10,6 +10,7 @@
|
||||||
"main": "server.js",
|
"main": "server.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "babel-node scripts/run prebuild && npm run webpack",
|
"build": "babel-node scripts/run prebuild && npm run webpack",
|
||||||
|
"build-en": "babel-node scripts/run prebuild && npm run extract",
|
||||||
"clean": "babel-node scripts/run clean",
|
"clean": "babel-node scripts/run clean",
|
||||||
"webpack": "webpack --config ./webpack.config.web.babel.js && parallel-webpack --config ./webpack.config.client.babel.js",
|
"webpack": "webpack --config ./webpack.config.web.babel.js && parallel-webpack --config ./webpack.config.client.babel.js",
|
||||||
"extract": "webpack --env extract --config ./webpack.config.web.babel.js && webpack --env extract --config ./webpack.config.client.babel.js",
|
"extract": "webpack --env extract --config ./webpack.config.web.babel.js && webpack --env extract --config ./webpack.config.client.babel.js",
|
||||||
|
@ -76,7 +77,6 @@
|
||||||
"sequelize": "^6.5.0",
|
"sequelize": "^6.5.0",
|
||||||
"sharp": "^0.27.1",
|
"sharp": "^0.27.1",
|
||||||
"startaudiocontext": "^1.2.1",
|
"startaudiocontext": "^1.2.1",
|
||||||
"sweetalert2": "^10.14.0",
|
|
||||||
"three": "^0.125.2",
|
"three": "^0.125.2",
|
||||||
"three-trackballcontrols": "^0.9.0",
|
"three-trackballcontrols": "^0.9.0",
|
||||||
"ttag": "^1.7.24",
|
"ttag": "^1.7.24",
|
||||||
|
|
|
@ -29,6 +29,12 @@ export function sweetAlert(
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function closeAlert(): Action {
|
||||||
|
return {
|
||||||
|
type: 'CLOSE_ALERT',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
export function toggleChatBox(): Action {
|
export function toggleChatBox(): Action {
|
||||||
return {
|
return {
|
||||||
type: 'TOGGLE_CHAT_BOX',
|
type: 'TOGGLE_CHAT_BOX',
|
||||||
|
|
|
@ -14,6 +14,7 @@ export type Action =
|
||||||
icon: string,
|
icon: string,
|
||||||
confirmButtonText: string,
|
confirmButtonText: string,
|
||||||
}
|
}
|
||||||
|
| { type: 'CLOSE_ALERT' }
|
||||||
| { type: 'TOGGLE_GRID' }
|
| { type: 'TOGGLE_GRID' }
|
||||||
| { type: 'TOGGLE_PIXEL_NOTIFY' }
|
| { type: 'TOGGLE_PIXEL_NOTIFY' }
|
||||||
| { type: 'TOGGLE_AUTO_ZOOM_IN' }
|
| { type: 'TOGGLE_AUTO_ZOOM_IN' }
|
||||||
|
|
70
src/components/Alert.jsx
Normal file
70
src/components/Alert.jsx
Normal file
|
@ -0,0 +1,70 @@
|
||||||
|
/*
|
||||||
|
*
|
||||||
|
* @flow
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { useSelector, useDispatch } from 'react-redux';
|
||||||
|
|
||||||
|
import { closeAlert } from '../actions';
|
||||||
|
|
||||||
|
const Alert = () => {
|
||||||
|
const [render, setRender] = useState(false);
|
||||||
|
|
||||||
|
const {
|
||||||
|
alertOpen,
|
||||||
|
alertType,
|
||||||
|
alertTitle,
|
||||||
|
alertMessage,
|
||||||
|
alertBtn,
|
||||||
|
} = useSelector((state) => state.alert);
|
||||||
|
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const close = () => {
|
||||||
|
dispatch(closeAlert());
|
||||||
|
};
|
||||||
|
|
||||||
|
const onTransitionEnd = () => {
|
||||||
|
if (!alertOpen) setRender(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.setTimeout(() => {
|
||||||
|
if (alertOpen) setRender(true);
|
||||||
|
}, 10);
|
||||||
|
}, [alertOpen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
(render || alertOpen) && (
|
||||||
|
<div
|
||||||
|
className={(alertOpen && render) ? 'Overlay show' : 'Overlay'}
|
||||||
|
onTransitionEnd={onTransitionEnd}
|
||||||
|
role="button"
|
||||||
|
tabIndex={-1}
|
||||||
|
onClick={close}
|
||||||
|
style={{
|
||||||
|
zIndex: 5,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="Alert"
|
||||||
|
>
|
||||||
|
<h2>{alertTitle}</h2>
|
||||||
|
<p className="modaltext">
|
||||||
|
{alertMessage}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={close}
|
||||||
|
>
|
||||||
|
{alertBtn}
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default React.memo(Alert);
|
|
@ -7,6 +7,5 @@ import { t } from 'ttag';
|
||||||
|
|
||||||
const Captcha = ({
|
const Captcha = ({
|
||||||
}) => (
|
}) => (
|
||||||
<div>
|
div />
|
||||||
<div />
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -4,21 +4,21 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { useSelector, useDispatch } from 'react-redux';
|
||||||
|
|
||||||
import type { State } from '../reducers';
|
|
||||||
import useWindowSize from '../utils/reactHookResize';
|
import useWindowSize from '../utils/reactHookResize';
|
||||||
import { showChatModal } from '../actions';
|
import { showChatModal } from '../actions';
|
||||||
|
|
||||||
import Chat from './Chat';
|
import Chat from './Chat';
|
||||||
|
|
||||||
|
|
||||||
function ChatBox({
|
const ChatBox = () => {
|
||||||
chatOpen,
|
|
||||||
triggerModal,
|
|
||||||
}) {
|
|
||||||
const [render, setRender] = useState(false);
|
const [render, setRender] = useState(false);
|
||||||
|
|
||||||
|
const chatOpen = useSelector((state) => state.modal.chatOpen);
|
||||||
|
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
window.setTimeout(() => {
|
window.setTimeout(() => {
|
||||||
if (chatOpen) setRender(true);
|
if (chatOpen) setRender(true);
|
||||||
|
@ -31,7 +31,7 @@ function ChatBox({
|
||||||
|
|
||||||
const { width } = useWindowSize();
|
const { width } = useWindowSize();
|
||||||
if (width < 604 && chatOpen) {
|
if (width < 604 && chatOpen) {
|
||||||
triggerModal();
|
dispatch(showChatModal(true));
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -46,17 +46,4 @@ function ChatBox({
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function mapStateToProps(state: State) {
|
export default React.memo(ChatBox);
|
||||||
const { chatOpen } = state.modal;
|
|
||||||
return { chatOpen };
|
|
||||||
}
|
|
||||||
|
|
||||||
function mapDispatchToProps(dispatch) {
|
|
||||||
return {
|
|
||||||
triggerModal() {
|
|
||||||
dispatch(showChatModal(true));
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(ChatBox);
|
|
||||||
|
|
|
@ -12,6 +12,7 @@ import NotifyBox from './NotifyBox';
|
||||||
import GlobeButton from './GlobeButton';
|
import GlobeButton from './GlobeButton';
|
||||||
import PalselButton from './PalselButton';
|
import PalselButton from './PalselButton';
|
||||||
import Palette from './Palette';
|
import Palette from './Palette';
|
||||||
|
import Alert from './Alert';
|
||||||
import HistorySelect from './HistorySelect';
|
import HistorySelect from './HistorySelect';
|
||||||
import Mobile3DControls from './Mobile3DControls';
|
import Mobile3DControls from './Mobile3DControls';
|
||||||
import UserContextMenu from './UserContextMenu';
|
import UserContextMenu from './UserContextMenu';
|
||||||
|
@ -41,13 +42,14 @@ const UI = ({
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
<Alert />
|
||||||
<PalselButton />
|
<PalselButton />
|
||||||
<Palette />
|
<Palette />
|
||||||
{(is3D) ? null : <GlobeButton />}
|
{(!is3D) && <GlobeButton />}
|
||||||
{(is3D && isOnMobile) ? <Mobile3DControls /> : null}
|
{(is3D && isOnMobile) && <Mobile3DControls />}
|
||||||
<CoolDownBox />
|
<CoolDownBox />
|
||||||
<NotifyBox />
|
<NotifyBox />
|
||||||
{(menuOpen && menuType) ? CONTEXT_MENUS[menuType] : null}
|
{(menuOpen && menuType) && CONTEXT_MENUS[menuType]}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
51
src/reducers/alert.js
Normal file
51
src/reducers/alert.js
Normal file
|
@ -0,0 +1,51 @@
|
||||||
|
/* @flow */
|
||||||
|
|
||||||
|
import type { Action } from '../actions/types';
|
||||||
|
|
||||||
|
export type AlertState = {
|
||||||
|
alertOpen: boolean,
|
||||||
|
alertType: ?string,
|
||||||
|
alertTitle: ?string,
|
||||||
|
alertMessage: ?string,
|
||||||
|
alertBtn: ?string,
|
||||||
|
};
|
||||||
|
|
||||||
|
const initialState: AlertState = {
|
||||||
|
alertOpen: false,
|
||||||
|
alertType: null,
|
||||||
|
alertTitle: null,
|
||||||
|
alertMessage: null,
|
||||||
|
alertBtn: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function alert(
|
||||||
|
state: AlertState = initialState,
|
||||||
|
action: Action,
|
||||||
|
): AlertState {
|
||||||
|
switch (action.type) {
|
||||||
|
case 'ALERT': {
|
||||||
|
const {
|
||||||
|
title, text, icon, confirmButtonText,
|
||||||
|
} = action;
|
||||||
|
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
alertOpen: true,
|
||||||
|
alertTitle: title,
|
||||||
|
alertMessage: text,
|
||||||
|
alertType: icon,
|
||||||
|
alertBtn: confirmButtonText,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
case 'CLOSE_ALERT': {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
alertOpen: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
default:
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
}
|
|
@ -8,6 +8,7 @@ import gui from './gui';
|
||||||
import modal from './modal';
|
import modal from './modal';
|
||||||
import user from './user';
|
import user from './user';
|
||||||
import ranks from './ranks';
|
import ranks from './ranks';
|
||||||
|
import alert from './alert';
|
||||||
import chat from './chat';
|
import chat from './chat';
|
||||||
import contextMenu from './contextMenu';
|
import contextMenu from './contextMenu';
|
||||||
import chatRead from './chatRead';
|
import chatRead from './chatRead';
|
||||||
|
@ -18,6 +19,8 @@ import type { CanvasState } from './canvas';
|
||||||
import type { GUIState } from './gui';
|
import type { GUIState } from './gui';
|
||||||
import type { ModalState } from './modal';
|
import type { ModalState } from './modal';
|
||||||
import type { UserState } from './user';
|
import type { UserState } from './user';
|
||||||
|
import type { RanksState } from './ranks';
|
||||||
|
import type { AlertState } from './alert';
|
||||||
import type { ChatState } from './chat';
|
import type { ChatState } from './chat';
|
||||||
import type { ContextMenuState } from './contextMenu';
|
import type { ContextMenuState } from './contextMenu';
|
||||||
import type { FetchingState } from './fetching';
|
import type { FetchingState } from './fetching';
|
||||||
|
@ -28,6 +31,8 @@ export type State = {
|
||||||
gui: GUIState,
|
gui: GUIState,
|
||||||
modal: ModalState,
|
modal: ModalState,
|
||||||
user: UserState,
|
user: UserState,
|
||||||
|
ranks: RanksState,
|
||||||
|
alert: AlertState,
|
||||||
chat: ChatState,
|
chat: ChatState,
|
||||||
contextMenu: ContextMenuState,
|
contextMenu: ContextMenuState,
|
||||||
chatRead: ChatReadState,
|
chatRead: ChatReadState,
|
||||||
|
@ -41,6 +46,7 @@ const config = {
|
||||||
'user',
|
'user',
|
||||||
'ranks',
|
'ranks',
|
||||||
'canvas',
|
'canvas',
|
||||||
|
'alert',
|
||||||
'modal',
|
'modal',
|
||||||
'chat',
|
'chat',
|
||||||
'contextMenu',
|
'contextMenu',
|
||||||
|
@ -55,6 +61,7 @@ export default persistCombineReducers(config, {
|
||||||
modal,
|
modal,
|
||||||
user,
|
user,
|
||||||
ranks,
|
ranks,
|
||||||
|
alert,
|
||||||
chat,
|
chat,
|
||||||
contextMenu,
|
contextMenu,
|
||||||
chatRead,
|
chatRead,
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
import type { Action } from '../actions/types';
|
import type { Action } from '../actions/types';
|
||||||
|
|
||||||
export type UserState = {
|
export type RanksState = {
|
||||||
totalPixels: number,
|
totalPixels: number,
|
||||||
dailyTotalPixels: number,
|
dailyTotalPixels: number,
|
||||||
ranking: number,
|
ranking: number,
|
||||||
|
@ -13,7 +13,7 @@ export type UserState = {
|
||||||
totalDailyRanking: Object,
|
totalDailyRanking: Object,
|
||||||
};
|
};
|
||||||
|
|
||||||
const initialState: UserState = {
|
const initialState: RanksState = {
|
||||||
totalPixels: 0,
|
totalPixels: 0,
|
||||||
dailyTotalPixels: 0,
|
dailyTotalPixels: 0,
|
||||||
ranking: 1488,
|
ranking: 1488,
|
||||||
|
@ -24,9 +24,9 @@ const initialState: UserState = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function ranks(
|
export default function ranks(
|
||||||
state: UserState = initialState,
|
state: RanksState = initialState,
|
||||||
action: Action,
|
action: Action,
|
||||||
): UserState {
|
): RanksState {
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
case 'PLACED_PIXELS': {
|
case 'PLACED_PIXELS': {
|
||||||
let { totalPixels, dailyTotalPixels } = state;
|
let { totalPixels, dailyTotalPixels } = state;
|
||||||
|
|
|
@ -5,7 +5,6 @@ import thunk from 'redux-thunk';
|
||||||
import { persistStore } from 'redux-persist';
|
import { persistStore } from 'redux-persist';
|
||||||
|
|
||||||
import audio from './audio';
|
import audio from './audio';
|
||||||
import swal from './sweetAlert';
|
|
||||||
import protocolClientHook from './protocolClientHook';
|
import protocolClientHook from './protocolClientHook';
|
||||||
import rendererHook from './rendererHook';
|
import rendererHook from './rendererHook';
|
||||||
// import ads from './ads';
|
// import ads from './ads';
|
||||||
|
@ -25,7 +24,6 @@ const store = createStore(
|
||||||
thunk,
|
thunk,
|
||||||
promise,
|
promise,
|
||||||
array,
|
array,
|
||||||
swal,
|
|
||||||
audio,
|
audio,
|
||||||
notifications,
|
notifications,
|
||||||
title,
|
title,
|
||||||
|
|
|
@ -1,30 +0,0 @@
|
||||||
/*
|
|
||||||
* @flow
|
|
||||||
*/
|
|
||||||
|
|
||||||
import swal from 'sweetalert2';
|
|
||||||
|
|
||||||
export default () => (next) => (action) => {
|
|
||||||
switch (action.type) {
|
|
||||||
case 'ALERT': {
|
|
||||||
const {
|
|
||||||
title,
|
|
||||||
text,
|
|
||||||
icon,
|
|
||||||
confirmButtonText,
|
|
||||||
} = action;
|
|
||||||
swal.fire({
|
|
||||||
title,
|
|
||||||
text,
|
|
||||||
icon,
|
|
||||||
confirmButtonText,
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
default:
|
|
||||||
// nothing
|
|
||||||
}
|
|
||||||
|
|
||||||
return next(action);
|
|
||||||
};
|
|
|
@ -322,7 +322,7 @@ tr:nth-child(even) {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Modal {
|
.Modal, .Alert {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
@ -334,14 +334,21 @@ tr:nth-child(even) {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
outline: currentcolor none medium;
|
outline: currentcolor none medium;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.Modal {
|
||||||
height: 80%;
|
height: 80%;
|
||||||
max-height: 900px;
|
|
||||||
width: 70%;
|
width: 70%;
|
||||||
transition: all 0.5s ease 0s;
|
max-height: 900px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Alert {
|
||||||
|
padding: 15px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modaltext, .modalcotext {
|
.modaltext, .modalcotext {
|
||||||
color: hsla(218, 5%, 47%, .6);
|
color: hsla(0, 0%, 0%, 0.6);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
|
@ -370,7 +377,7 @@ tr:nth-child(even) {
|
||||||
.modaldesc {
|
.modaldesc {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
color: hsla(218, 5%, 47%, .6);
|
color: hsla(0, 0%, 0%, 0.6);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
@ -397,7 +404,7 @@ tr:nth-child(even) {
|
||||||
}
|
}
|
||||||
|
|
||||||
.modalcvtext {
|
.modalcvtext {
|
||||||
color: hsla(218, 5%, 47%, .6);
|
color: hsla(0, 0%, 0%, 0.6);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -446,6 +453,7 @@ tr:nth-child(even) {
|
||||||
padding: 5%;
|
padding: 5%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Overlay {
|
.Overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
|
@ -454,6 +462,8 @@ tr:nth-child(even) {
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
background-color: rgba(255, 255, 255, 0.75);
|
background-color: rgba(255, 255, 255, 0.75);
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 200ms ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatbox div .chatarea {
|
.chatbox div .chatarea {
|
||||||
|
@ -697,12 +707,7 @@ tr:nth-child(even) {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ReactModal__Overlay {
|
.ReactModal__Overlay--after-open, .Overlay.show {
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 200ms ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ReactModal__Overlay--after-open{
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user