Feat : Home,commit history,dc modal

index.html

@@ -38,6 +38,7 @@
       });
     }
   </script>
+  <script>const global = globalThis;</script>
   <script type="module" src="/src/main.tsx"></script>
 </body>
 

package.json

@@ -46,6 +46,7 @@
     "react-ace": "^10.1.0",
     "react-ansi": "^3.0.2",
     "react-bootstrap": "^2.7.0",
+    "react-code-blocks": "^0.0.9-0",
     "react-dom": "^18.2.0",
     "react-flags-select": "^2.2.3",
     "react-google-recaptcha": "^2.1.0",

packages/client/src/models/index.ts

@@ -36,7 +36,7 @@ export const AuthStatusResponseStatusEnum = {
   ActivationPending: 'ACTIVATION_PENDING',
 } as const;
 export type AuthStatusResponseStatusEnum =
-  typeof AuthStatusResponseStatusEnum[keyof typeof AuthStatusResponseStatusEnum];
+  (typeof AuthStatusResponseStatusEnum)[keyof typeof AuthStatusResponseStatusEnum];
 
 /**
  *
@@ -46,7 +46,7 @@ export const ChallengeType = {
   Code: 'CODE',
   Map: 'MAP',
 } as const;
-export type ChallengeType = typeof ChallengeType[keyof typeof ChallengeType];
+export type ChallengeType = (typeof ChallengeType)[keyof typeof ChallengeType];
 
 /**
  * Code model
@@ -447,7 +447,7 @@ export const GameStatus = {
   Executed: 'EXECUTED',
   ExecuteError: 'EXECUTE_ERROR',
 } as const;
-export type GameStatus = typeof GameStatus[keyof typeof GameStatus];
+export type GameStatus = (typeof GameStatus)[keyof typeof GameStatus];
 
 /**
  * Model for Generic Error
@@ -473,7 +473,7 @@ export const Language = {
   Java: 'JAVA',
   Python: 'PYTHON',
 } as const;
-export type Language = typeof Language[keyof typeof Language];
+export type Language = (typeof Language)[keyof typeof Language];
 
 /**
  * Leaderboard entry model
@@ -553,7 +553,7 @@ export const MatchMode = {
   Manual: 'MANUAL',
   Auto: 'AUTO',
 } as const;
-export type MatchMode = typeof MatchMode[keyof typeof MatchMode];
+export type MatchMode = (typeof MatchMode)[keyof typeof MatchMode];
 
 /**
  * Notification model
@@ -932,4 +932,4 @@ export const Verdict = {
   Player2: 'PLAYER2',
   Tie: 'TIE',
 } as const;
-export type Verdict = typeof Verdict[keyof typeof Verdict];
+export type Verdict = (typeof Verdict)[keyof typeof Verdict];

src/AllRoutes.tsx

@@ -28,6 +28,7 @@ const IncompleteProfile = lazy(
   () =>
     import('./components/Auth/Auth/Login/IncompleteProfile/incompeleteProfile'),
 );
+const Profile = lazy(() => import('./components/Profile/Profile'));
 
 export default function AllRoutes(): JSX.Element {
   const dispatch = useAppDispatch();
@@ -39,22 +40,6 @@ export default function AllRoutes(): JSX.Element {
     }
   }, []);
 
-  // return (
-  //   <Routes>
-  //     <Route path="/dashboard" element={<Dashboard />} />
-  //     <Route path="/mapdesigner" element={<MapDesigner />} />
-  //     <Route path="/history" element={<History />} />
-  //     <Route path="/leaderboard" element={<Leaderboard />} />
-  //     <Route path="/battletv" element={<BattleTV />} />
-  //     <Route path="/activate" element={<Verify />} />
-  //     <Route path="/incomplete-profile" element={<IncompleteProfile />} />
-  //     <Route path="/login" element={<Login />} />
-  //     <Route path="/register" element={<Register />} />
-  //     <Route path="/reset-password" element={<ResetPassword />} />
-  //     <Route path="/" element={<Home />} />
-  //   </Routes>
-  // );
-
   return logIn ? (
     <Routes>
       <Route path="/" element={<Home />} />
@@ -65,6 +50,7 @@ export default function AllRoutes(): JSX.Element {
       <Route path="/battletv" element={<BattleTV />} />
       <Route path="/activate" element={<Verify />} />
       <Route path="/incomplete-profile" element={<IncompleteProfile />} />
+      <Route path="/profile" element={<Profile />} />
       <Route path="*" element={<Redirect />} />
     </Routes>
   ) : (

src/components/Background/BackgroundVideo.module.css

@@ -0,0 +1,8 @@
+.bgvideo{
+    z-index: -100;
+    position: fixed;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    object-fit: cover;
+}

src/components/Background/BackgroundVideo.tsx

@@ -0,0 +1,26 @@
+import { useRef, useEffect } from 'react';
+import styles from './BackgroundVideo.module.css';
+import bgvideo from '../../../public/assets/bgEffect.mp4';
+
+const Backgroundvideo = () => {
+  const vid = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (vid.current) {
+      vid.current.playbackRate = 0.5;
+    }
+  }, []);
+
+  return (
+    <video
+      src={bgvideo}
+      autoPlay
+      loop
+      muted
+      className={styles.bgvideo}
+      ref={vid}
+    />
+  );
+};
+
+export default Backgroundvideo;

src/components/CommitHistory/CodeMapViewbox/CodeView.tsx

@@ -1,29 +1,17 @@
 import { CodeRevision } from '@codecharacter-2023/client';
-import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import c from 'react-syntax-highlighter/dist/esm/languages/prism/c';
-import cpp from 'react-syntax-highlighter/dist/esm/languages/prism/cpp';
-import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
-import java from 'react-syntax-highlighter/dist/esm/languages/prism/java';
-import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
-
-SyntaxHighlighter.registerLanguage('c', c);
-SyntaxHighlighter.registerLanguage('cpp', cpp);
-SyntaxHighlighter.registerLanguage('python', python);
-SyntaxHighlighter.registerLanguage('java', java);
-
+import { CodeBlock, irBlack } from 'react-code-blocks';
 type PropsType = {
   code: CodeRevision['code'];
   codeLang: string;
 };
 
 export default function CodeView(props: PropsType): JSX.Element {
   return (
-    <SyntaxHighlighter
+    <CodeBlock
+      text={props.code}
       language={props.codeLang}
-      style={atomDark}
       showLineNumbers={props.code != '' ? true : false}
-    >
-      {props.code}
-    </SyntaxHighlighter>
+      theme={irBlack}
+    />
   );
 }

src/components/CommitHistory/CommitTree/CommitHistory.css

@@ -1,42 +1,77 @@
 .vertical-timeline-element--work,
 .vertical-timeline-element {
   width: 90%;
-  height: 120px;
   padding: 0%;
 }
 
+.vertical-timeline::before {
+  background: transparent;
+}
+
+.vertical-timeline-element:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  top: 67px;
+  left: 18px;
+  height: calc(148%) !important;
+  width: 4px;
+  background: white;
+}
+
 .vertical-timeline-element-icon {
-  top: 16px;
+  top: 70px;
   left: 10px;
   width: 20px;
   height: 20px;
+  box-shadow: 0 0 0 4px #444444;
+  transform: scale(1.3);
+}
+
+.vertical-timeline-element-date {
+  font-size: 1.4rem !important;
+  font-family: Bai Jamjuree ;
 }
 
 .vertical-timeline-element-content {
   box-shadow: 0 0 0;
   padding: 0%;
   padding-left: 1rem;
   border-radius: 0%;
+  border-radius: 10px;
+  width: 92%; 
+  max-width: 350px;
+  margin-left: 25%;
+  display: flex;
+  flex-direction: column;
 }
 
 .vertical-timeline-element-content:hover {
   cursor: pointer;
-  transform: scale(1.1);
-  box-shadow: 2px 2px 2px #dfff00;
+  transform: scale(1.05);
 }
 
 .vertical-timeline-element--work:hover {
   cursor: pointer;
 }
 
+.vertical-timeline-element-content-arrow{
+  display: none;
+}
+
 .vertical-timeline-element-title {
-  font-family: Montserrat;
+  font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
-  font-size: 1.5rem;
+  font-size: 1.8rem;
   padding: 1rem;
   -ms-overflow-style: none;
   overflow-x: auto;
+  overflow-y: auto;
+  height: 70px;
+  margin-bottom: 0rem;
+  max-width: 250px;
+  padding-left: 0 !important;
+  margin-top: 0.5rem;
 }
 
 .vertical-timeline-element-title::-webkit-scrollbar {
@@ -50,3 +85,14 @@
   font-size: 24px;
   color: white;
 }
+
+.vertical-timeline{
+  padding-top: 0px;
+}
+
+@media only screen and (width < 1200px) {
+  .vertical-timeline-element:not(:last-child)::before{
+    height: calc(138%);
+  }
+}
+