Merge remote-tracking branch 'origin/feature-achievement'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "onlinejudge3-fe",
-  "version": "3.6.4",
+  "version": "3.7.0",
   "description": "",
   "scripts": {
     "dev": "gulp dev",
@@ -63,6 +63,7 @@
     "react-player": "~2.13.0",
     "react-scroll": "^1.7.12",
     "react-syntax-highlighter": "^9.0.0",
+    "react-toastify": "^8.2.0",
     "react-tooltip": "^3.9.2",
     "short-number": "^1.0.6",
     "socket.io-client": "^2.4.0",

src/components/AchievementToast.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { toast } from 'react-toastify';
+import classNames from 'classnames';
+import { Icon } from 'antd';
+import { Howl } from 'howler';
+import { IAchievement } from '@/common/interfaces/achievement';
+import { EAchievementKey } from '@/common/configs/achievement.config';
+import { getAchievementByKey } from '@/utils/achievement';
+import AchievementTrophySvg from '@/assets/svg/achievement-trophy.svg';
+import { EAchievementLevel } from '@/common/enums';
+
+export interface IAchievementToastProps {
+  achievement: IAchievement;
+}
+
+class AchievementToast extends React.Component<IAchievementToastProps> {
+  componentDidMount() {
+    const sound = new Howl({
+      src: [`${process.env.PUBLIC_PATH}assets/audio/achievement-toast.mp3`],
+    });
+    setTimeout(() => sound.play(), 200);
+  }
+
+  render() {
+    const { achievement } = this.props;
+
+    return (
+      <div className="achievement-toast">
+        <div
+          className={classNames(
+            'achievement-toast-trophy',
+            `achievement-toast-trophy-${EAchievementLevel[achievement.level]}`,
+          )}
+        >
+          <Icon theme="outlined" component={AchievementTrophySvg} />
+        </div>
+        <div className="achievement-toast-info">
+          <div className="achievement-toast-title text-ellipsis">{achievement.title}</div>
+          <div className="achievement-toast-description text-ellipsis">
+            {achievement.description}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default AchievementToast;
+
+export function showAchievementToast(achievementKey: EAchievementKey) {
+  const achievement = getAchievementByKey(achievementKey);
+  return toast(<AchievementToast achievement={achievement} />, { containerId: 'achievement' });
+}

src/components/AchievementToastContainer.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ToastContainer, Zoom } from 'react-toastify';
+
+class AchievementToastContainer extends React.Component {
+  render() {
+    return (
+      <ToastContainer
+        containerId="achievement"
+        position="bottom-center"
+        autoClose={8000}
+        hideProgressBar
+        newestOnTop={false}
+        closeOnClick
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="colored"
+        className="achievement-toast-container"
+        bodyClassName="achievement-toast-body"
+        closeButton={false}
+        transition={Zoom}
+      />
+    );
+  }
+}
+
+export default AchievementToastContainer;