Feat: Reset tutorials (#37)

* feat: reset tutorials ,refresh battletv

* Fix: Reset tutorials

* fix: small fixes

* fix : stats

* fix: minor changes

---------

Co-authored-by: shubham-1806 <shub.agarwal2003@gmail.com>
Co-authored-by: Ram-20062003 <ramajs2003@gmail.com>
Co-authored-by: Ram Ganesh K. R <83528327+Ram-20062003@users.noreply.github.com>

Author: 3 people

packages/map-designer/src/Parameters.ts

@@ -19,7 +19,7 @@ export class Parameters {
 
   static mapTileOffsetY = 256;
 
-  static totalCoins = 10000;
+  static totalCoins = 6000;
 
   static mapLocalStorageKey = 'cc-map-designer-map';
 }

packages/renderer/src/config/TowerConfig.ts

@@ -10,7 +10,7 @@ export default class TowerConfig {
       'tower1_thumbnail.png',
       400,
       4,
-      100,
+      25,
     ),
     new TowerType(
       1,
@@ -19,7 +19,7 @@ export default class TowerConfig {
       'tower2_thumbnail.png',
       600,
       6,
-      200,
+      50,
     ),
     new TowerType(
       2,
@@ -28,7 +28,7 @@ export default class TowerConfig {
       'tower3_thumbnail.png',
       400,
       6,
-      200,
+      100,
     ),
   ];
 }

src/components/BattleTV/BattleTV.module.css

@@ -261,3 +261,21 @@
   height: 0;
   width: 0;
 }
+.button {
+  background-color: transparent;
+  color: #eaeaea;
+  margin: 0px 8px;
+  border: 1px solid #eaeaea;
+  padding: 8px;
+  text-transform: uppercase;
+  border-radius: 8px;
+  font-family: monospace, sans-serif;
+  display: inline-block;
+  white-space: nowrap;
+  transition: 0.3s;
+}
+
+.button:hover {
+  color: #0a1c2a;
+  background-color: #aaaaaa;
+}

src/components/BattleTV/BattleTV.tsx

@@ -125,7 +125,7 @@ function PaginatedItems() {
                         ></img>
                       </div>
                       <span className={[styles.name].join(' ')}>
-                        {match.user1.username}
+                        {match.user1.username.substring(0, 10)}
                       </span>
                     </span>
                     <span className={styles.coinsusedleft}>
@@ -206,6 +206,16 @@ function PaginatedItems() {
           containerClassName={styles.pagination}
           activeClassName="active"
         />
+        <button
+          type="button"
+          className={styles.button}
+          onClick={() => {
+            dispatch(fetchBattleTv());
+          }}
+          id="refresh"
+        >
+          Refresh
+        </button>
       </nav>
     </>
   );

src/components/DashboardOptions/DashboardOptions.tsx

@@ -1,15 +1,42 @@
 import Dropdown from 'react-bootstrap/Dropdown';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import styles from './DashboardOptions.module.css';
 import DropdownToggle from 'react-bootstrap/esm/DropdownToggle';
 import { ButtonGroup } from 'react-bootstrap';
+import { apiConfig, ApiError } from '../../api/ApiConfig';
+import { CurrentUserApi } from '@codecharacter-2023/client';
+import Toast from 'react-hot-toast';
+import { useAppDispatch } from '../../store/hooks';
+import {
+  isTourOverChanged,
+  isTourResetChanged,
+} from '../../store/DailyChallenge/dailyChallenge';
 
 interface dashboardoptions {
   image?: JSX.Element;
   onLogout?: React.MouseEventHandler<HTMLElement>;
 }
 
 const DashboardOptions = (props: dashboardoptions): JSX.Element => {
+  const currentUserApi = new CurrentUserApi(apiConfig);
+  const navigate = useNavigate();
+  const dispatch = useAppDispatch();
+
+  const resetTutorials = () => {
+    currentUserApi
+      .updateCurrentUser({
+        updateTutorialLevel: 'RESET',
+      })
+      .then(() => {
+        navigate('/dashboard', { replace: true });
+        dispatch(isTourResetChanged(true));
+        dispatch(isTourOverChanged(false));
+      })
+      .catch(err => {
+        if (err instanceof ApiError) Toast.error(err.message);
+      });
+  };
+
   return (
     <div className={styles.dropdown}>
       <Dropdown as={ButtonGroup}>
@@ -20,6 +47,9 @@ const DashboardOptions = (props: dashboardoptions): JSX.Element => {
           <Dropdown.Item as={Link} to="/profile" className={styles.menuText}>
             View Profile
           </Dropdown.Item>
+          <Dropdown.Item onClick={resetTutorials} className={styles.menuText}>
+            Revisit Tutorial
+          </Dropdown.Item>
           <Dropdown.Item onClick={props.onLogout} className={styles.menuText}>
             Logout
           </Dropdown.Item>

src/components/Leaderboard/DailyLeaderboard.tsx

@@ -99,7 +99,7 @@ function PaginatedItems() {
                               className={styles.pic}
                               src={getAvatarByID(row.avatarId).url}
                             ></img>
-                            {' ' + row.userName}
+                            {' ' + row.userName.substring(0, 10)}
                           </div>
                         </td>
                         <td className={styles.score}>{row.score}</td>

src/components/Leaderboard/Leaderboard.tsx

@@ -160,7 +160,7 @@ function PaginatedItems() {
                               className={styles.pic}
                               src={getAvatarByID(row.user.avatarId).url}
                             ></img>
-                            {' ' + row.user.username}
+                            {' ' + row.user.username.substring(0, 10)}
                           </div>
                         </td>
                         <td className={styles.score}>

src/components/TourIntroModal/TourIntroModal.tsx

@@ -3,22 +3,28 @@ import { apiConfig, ApiError } from '../../api/ApiConfig';
 import { CurrentUserApi } from '@codecharacter-2023/client';
 import Toast from 'react-hot-toast';
 import styles from './TourIntroModal.module.css';
-import { useAppSelector } from '../../store/hooks';
+import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { user } from '../../store/User/UserSlice';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTour } from '@reactour/tour';
-import { IsTourOver } from '../../store/DailyChallenge/dailyChallenge';
+import {
+  IsTourOver,
+  IsTourReset,
+  isTourResetChanged,
+} from '../../store/DailyChallenge/dailyChallenge';
 
 const TourIntroModal = (): JSX.Element => {
   const [isTourOpen, setIsTourOpen] = useState(false);
   const currentUserApi = new CurrentUserApi(apiConfig);
 
   const User = useAppSelector(user);
   const navigate = useNavigate();
+  const dispatch = useAppDispatch();
   const { setIsOpen } = useTour();
 
   const isTourOver = useAppSelector(IsTourOver);
+  const isTourReset = useAppSelector(IsTourReset);
 
   const handleShowClick = () => {
     setIsTourOpen(false);
@@ -70,10 +76,11 @@ const TourIntroModal = (): JSX.Element => {
       currentUserApi.getCurrentUser().then(res => {
         if (res.isTutorialComplete === false && res.tutorialLevel < 6) {
           setIsTourOpen(true);
+          dispatch(isTourResetChanged(false));
         }
       });
     }
-  }, [isTourOver]);
+  }, [isTourOver, isTourReset]);
 
   return (
     <Modal show={isTourOpen} centered onHide={onHide}>

src/store/DailyChallenge/dailyChallenge.ts

@@ -18,6 +18,7 @@ export interface DailyChallengeStateType {
   dcMap: Array<Array<number>>;
   isSimulating: boolean;
   isTourOver: boolean;
+  isTourReset: boolean;
 }
 
 const initialState: DailyChallengeStateType = {
@@ -40,6 +41,7 @@ const initialState: DailyChallengeStateType = {
   dcMap: [],
   isSimulating: false,
   isTourOver: false,
+  isTourReset: false,
 };
 
 export const dailyChallengeSlice = createSlice({
@@ -87,6 +89,9 @@ export const dailyChallengeSlice = createSlice({
     isTourOverChanged: (state, action: PayloadAction<boolean>) => {
       state.isTourOver = action.payload;
     },
+    isTourResetChanged: (state, action: PayloadAction<boolean>) => {
+      state.isTourReset = action.payload;
+    },
   },
 });
 
@@ -98,6 +103,7 @@ export const {
   changeDcMap,
   changeSimulationState,
   isTourOverChanged,
+  isTourResetChanged,
 } = dailyChallengeSlice.actions;
 export const dailyChallengeState = (
   state: RootState,
@@ -119,4 +125,6 @@ export const dcSimulation = (state: RootState): boolean =>
   state.dailyChallenge.isSimulating;
 export const IsTourOver = (state: RootState): boolean =>
   state.dailyChallenge.isTourOver;
+export const IsTourReset = (state: RootState): boolean =>
+  state.dailyChallenge.isTourReset;
 export default dailyChallengeSlice.reducer;