Codechef-VITC-Student-Chapter · Bharath-murari · Jul 25, 2024 · Jul 25, 2024 · Jul 25, 2024 · Jul 25, 2024
diff --git a/Client/.eslintrc.cjs b/Client/.eslintrc.cjs
@@ -1,21 +1,49 @@
 module.exports = {
+  // Specifies that this is the root configuration file
   root: true,
-  env: { browser: true, es2020: true },
+
+  // Defines the environments in which the code is expected to run
+  env: {
+    browser: true, // Code is expected to run in the browser
+    es2020: true, // Code is using ECMAScript 2020 features
+  },
+
+  // Extends from base configurations and recommended rules
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    'eslint:recommended', // Uses the recommended ESLint rules
+    'plugin:react/recommended', // Uses the recommended rules from the ESLint React plugin
+    'plugin:react/jsx-runtime', // Enables rules for React's new JSX transform
+    'plugin:react-hooks/recommended', // Uses recommended rules for React Hooks
+  ],
+
+  // Specifies files and directories to ignore
+  ignorePatterns: [
+    'dist', // Ignore the 'dist' directory (typically used for build outputs)
+    '.eslintrc.cjs', // Ignore this ESLint configuration file itself
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+
+  // Defines the parser options
+  parserOptions: {
+    ecmaVersion: 'latest', // Use the latest ECMAScript syntax
+    sourceType: 'module', // Specifies that the code uses ES modules
+  },
+
+  // Specifies settings for specific plugins
+  settings: {
+    react: {
+      version: '18.2', // Specifies the version of React to use (for linting rules compatibility)
+    },
+  },
+
+  // Defines additional plugins to use
+  plugins: ['react-refresh'], // Includes the 'react-refresh' plugin for hot reloading support in development
+
+  // Customizes specific rules
   rules: {
-    'react/jsx-no-target-blank': 'off',
+    'react/jsx-no-target-blank': 'off', // Disables the rule that prevents using `target="_blank"` without `rel="noopener noreferrer"` (you might want to manage this manually)
     'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
+      'warn', // Set the rule to show warnings instead of errors
+      { allowConstantExport: true }, // Allows exporting constants without triggering the rule
     ],
   },
-}
+};
diff --git a/Client/index.html b/Client/index.html
@@ -6,6 +6,7 @@
     <title>Flappy Bird</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="icon" type="image/x-icon" href="/Client/src/assets/logo.png">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
   </head>
   <body>

diff --git a/Client/public/Totem-l.png b/Client/public/Totem-l.png
diff --git a/Client/public/Totem-m.png b/Client/public/Totem-m.png
diff --git a/Client/public/Totem-s.png b/Client/public/Totem-s.png
diff --git a/Client/public/Totem-xl.png b/Client/public/Totem-xl.png
diff --git a/Client/public/Totem-xs.png b/Client/public/Totem-xs.png
diff --git a/Client/public/certificate_codecheflogo.png b/Client/public/certificate_codecheflogo.png
diff --git a/Client/public/certificate_gamebg.png b/Client/public/certificate_gamebg.png
diff --git a/Client/public/certificate_phonebgg.png b/Client/public/certificate_phonebgg.png
diff --git a/Client/public/gameOver_bg.png b/Client/public/gameOver_bg.png
diff --git a/Client/public/gameOver_bg2.png b/Client/public/gameOver_bg2.png
diff --git a/Client/public/homePage_desktopBg.png b/Client/public/homePage_desktopBg.png
diff --git a/Client/public/homePage_gameName.png b/Client/public/homePage_gameName.png
diff --git a/Client/public/homePage_mobileBg.png b/Client/public/homePage_mobileBg.png
diff --git a/Client/public/homePage_startButton.png b/Client/public/homePage_startButton.png
diff --git a/Client/public/leaderBoard_bird.png b/Client/public/leaderBoard_bird.png
diff --git a/Client/public/leaderBoard_crown_r1.png b/Client/public/leaderBoard_crown_r1.png
diff --git a/Client/public/leaderBoard_crown_r2.png b/Client/public/leaderBoard_crown_r2.png
diff --git a/Client/public/leaderBoard_crown_r3.png b/Client/public/leaderBoard_crown_r3.png
diff --git a/Client/public/leaderBoard_image 9 (1).png b/Client/public/leaderBoard_image 9 (1).png
diff --git a/Client/public/leaderBoard_image_bg.png b/Client/public/leaderBoard_image_bg.png
diff --git a/Client/public/leaderBoard_image_bg_sm.png b/Client/public/leaderBoard_image_bg_sm.png
diff --git a/Client/public/leaderBoard_tree_board.png b/Client/public/leaderBoard_tree_board.png
diff --git a/Client/public/leaderBoard_tree_board_sm.png b/Client/public/leaderBoard_tree_board_sm.png
diff --git a/Client/public/playscreen_ScoreBoard.png b/Client/public/playscreen_ScoreBoard.png
diff --git a/Client/public/playscreen_bg.jpg b/Client/public/playscreen_bg.jpg
diff --git a/Client/public/playscreen_bird.png b/Client/public/playscreen_bird.png
diff --git a/Client/public/playscreen_bird_big_eye.png b/Client/public/playscreen_bird_big_eye.png
diff --git a/Client/public/playscreen_mobile-bg.png b/Client/public/playscreen_mobile-bg.png
diff --git a/Client/public/playscreen_obstacle.png b/Client/public/playscreen_obstacle.png
diff --git a/Client/src/App.jsx b/Client/src/App.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { Analytics } from '@vercel/analytics/react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
@@ -7,60 +7,56 @@ import PlayScreen from './screens/PlayScreen.jsx';
 import LeaderBoard from './screens/LeaderBoard.jsx';
 import SignInPage from './screens/SignInPage.jsx';
 
-const players = [
-  { name: 'Player 1', score: 150 },
-  { name: 'Player 2', score: 120 },
-  { name: 'Player 3', score: 100 },
-  { name: 'Player 4', score: 90 },
-  { name: 'Player 5', score: 83 },
-  { name: 'Player 6', score: 70 },
-  { name: 'Player 7', score: 66 },
-  { name: 'Player 8', score: 53 },
-  { name: 'Player 9', score: 50 },
-  { name: 'Player 10', score: 48 },
-  { name: 'Player 11', score: 40 },
-];
+import { GameProvider } from './contexts/gameContext.jsx';
 
+// Main App component
 function App() {
+  // State to manage the current score and best score
   const [score, setScore] = useState(0);
   const [bestScore, setBestScore] = useState(0);
-  const [stayAnonymous, setStayAnonymous] = useState(false);
-
-  //Backend part will be updated later
-  let leaderBoardData = [];
 
   return (
     <>
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<HomePage />} />
-          <Route
-            path="/play"
-            element={
-              <PlayScreen
-                score={score}
-                setScore={setScore}
-                bestScore={bestScore}
-                setBestScore={setBestScore}
-              />
-            }
-          />
-          <Route
-            path="/LeaderBoard"
-            element={
-              <LeaderBoard
-                leaderBoardData={leaderBoardData}
-                players={players}
-              />
-            }
-          />
-          <Route
-            path="/SignIn"
-            element={<SignInPage setStayAnonymous={setStayAnonymous} />}
-          />
-        </Routes>
-      </BrowserRouter>
-      <Analytics />
+      {/* GameProvider is a context provider for managing game state */}
+      <GameProvider>
+        {/* BrowserRouter is used to handle routing in the application */}
+        <BrowserRouter>
+          {/* Routes define the different routes of the application */}
+          <Routes>
+            {/* Route for the home page */}
+            <Route path="/" element={<HomePage />} />
+
+            {/* Route for the play screen, passing score and bestScore as props */}
+            <Route
+              path="/play"
+              element={
+                <PlayScreen
+                  score={score}
+                  setScore={setScore}
+                  bestScore={bestScore}
+                  setBestScore={setBestScore}
+                />
+              }
+            />
+
+            {/* Route for the leaderboard screen */}
+            <Route
+              path="/LeaderBoard"
+              element={
+                <LeaderBoard/>
+              }
+            />
+
+            {/* Route for the sign-in page */}
+            <Route
+              path="/SignIn"
+              element={<SignInPage />}
+            />
+          </Routes>
+        </BrowserRouter>
+        {/* Analytics component for tracking application analytics */}
+        <Analytics />
+      </GameProvider>
     </>
   );
 }

diff --git a/Client/src/assets/LoginPage_bg.png b/Client/src/assets/LoginPage_bg.png
diff --git a/Client/src/assets/LoginPage_board.png b/Client/src/assets/LoginPage_board.png
diff --git a/Client/src/assets/LoginPage_signboard1.png b/Client/src/assets/LoginPage_signboard1.png
diff --git a/Client/src/assets/Totem-l.png b/Client/src/assets/Totem-l.png
diff --git a/Client/src/assets/Totem-m.png b/Client/src/assets/Totem-m.png
diff --git a/Client/src/assets/Totem-s.png b/Client/src/assets/Totem-s.png
diff --git a/Client/src/assets/Totem-xl.png b/Client/src/assets/Totem-xl.png
diff --git a/Client/src/assets/Totem-xs.png b/Client/src/assets/Totem-xs.png
diff --git a/Client/src/assets/add_assets.txt b/Client/src/assets/add_assets.txt
diff --git a/Client/src/assets/anonymous-icon.png b/Client/src/assets/anonymous-icon.png
diff --git a/Client/src/assets/certificate_gamebg.png b/Client/src/assets/certificate_gamebg.png
diff --git a/Client/src/assets/certificate_phonebgg.png b/Client/src/assets/certificate_phonebgg.png
diff --git a/Client/src/assets/gameOver_bg.png b/Client/src/assets/gameOver_bg.png
diff --git a/Client/src/assets/gameOver_bg2.png b/Client/src/assets/gameOver_bg2.png
diff --git a/Client/src/assets/google-icon.png b/Client/src/assets/google-icon.png
diff --git a/Client/src/assets/homePage_desktopBg.png b/Client/src/assets/homePage_desktopBg.png
diff --git a/Client/src/assets/homePage_gameName.png b/Client/src/assets/homePage_gameName.png
diff --git a/Client/src/assets/homePage_mobileBg.png b/Client/src/assets/homePage_mobileBg.png
diff --git a/Client/src/assets/homePage_startButton.png b/Client/src/assets/homePage_startButton.png
diff --git a/Client/src/assets/leaderBoard_bird.png b/Client/src/assets/leaderBoard_bird.png
diff --git a/Client/src/assets/leaderBoard_crown_r1.png b/Client/src/assets/leaderBoard_crown_r1.png
diff --git a/Client/src/assets/leaderBoard_crown_r2.png b/Client/src/assets/leaderBoard_crown_r2.png
diff --git a/Client/src/assets/leaderBoard_crown_r3.png b/Client/src/assets/leaderBoard_crown_r3.png
diff --git a/Client/src/assets/leaderBoard_image_bg.png b/Client/src/assets/leaderBoard_image_bg.png
diff --git a/Client/src/assets/leaderBoard_image_bg_sm.png b/Client/src/assets/leaderBoard_image_bg_sm.png
diff --git a/Client/src/assets/leaderBoard_tree_board.png b/Client/src/assets/leaderBoard_tree_board.png
diff --git a/Client/src/assets/leaderBoard_tree_board_sm.png b/Client/src/assets/leaderBoard_tree_board_sm.png
diff --git a/Client/src/assets/logo.png b/Client/src/assets/logo.png
diff --git a/Client/src/assets/playBackground.png b/Client/src/assets/playBackground.png
diff --git a/Client/src/assets/playscreen_ScoreBoard.png b/Client/src/assets/playscreen_ScoreBoard.png
diff --git a/Client/src/assets/playscreen_bg.jpg b/Client/src/assets/playscreen_bg.jpg
diff --git a/Client/src/assets/playscreen_bird.png b/Client/src/assets/playscreen_bird.png
diff --git a/Client/src/assets/playscreen_bird_big_eye.png b/Client/src/assets/playscreen_bird_big_eye.png
diff --git a/Client/src/assets/playscreen_mobile-bg.png b/Client/src/assets/playscreen_mobile-bg.png
diff --git a/Client/src/assets/playscreen_obstacle.png b/Client/src/assets/playscreen_obstacle.png
diff --git a/Client/public/signboard.png → Client/src/assets/signboard.png b/Client/public/signboard.png → Client/src/assets/signboard.png
diff --git a/Client/src/contexts/gameContext.jsx b/Client/src/contexts/gameContext.jsx
@@ -0,0 +1,18 @@
+import React, { createContext, useState, useContext } from 'react';
+import getRandomName from '../utils/utils';
+
+const GameContext = createContext();
+
+export const GameProvider = ({ children }) => {
+  const defaultName = getRandomName();
+  const [playerName, setPlayerName] = useState(defaultName);
+  const [currentScore, setCurrentScore] = useState(0);
+
+  return (
+    <GameContext.Provider value={{ playerName, setPlayerName, currentScore, setCurrentScore }}>
+      {children}
+    </GameContext.Provider>
+  );
+};
+
+export const useGameContext = () => useContext(GameContext);
diff --git a/Client/src/data/data.jsx b/Client/src/data/data.jsx
diff --git a/Client/src/index.css b/Client/src/index.css
@@ -1,59 +1,98 @@
+/* Import Tailwind's base styles, component classes, and utility classes */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+/* Define a custom font face for 'Post No Bills Colombo' */
 @font-face {
-  font-family: 'Post No Bills Colombo';
-  src: url('./PostNoBillsColombo-ExtraBold.woff') format('woff');
-  font-weight: 800;
-  font-style: normal;
+  font-family: 'Post No Bills Colombo'; /* The name used to refer to this font in CSS */
+  src: url('./PostNoBillsColombo-ExtraBold.woff') format('woff'); /* URL to the font file */
+  font-weight: 800; /* Font weight for this font (ExtraBold) */
+  font-style: normal; /* Font style (normal) */
 }
 
+/* Custom scrollbar styles for WebKit browsers (Chrome, Safari) */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 12px;
-  margin: 4px;
+  width: 8px; /* Width of the vertical scrollbar */
+  height: 12px; /* Height of the horizontal scrollbar */
+  margin: 4px; /* Margin around the scrollbar */
 }
 
 ::-webkit-scrollbar-track {
-  background: #4D2E13;
-  border-radius: 10px;
+  background: #4D2E13; /* Background color of the scrollbar track */
+  border-radius: 10px; /* Rounded corners for the scrollbar track */
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #D8874F;
-  border-radius: 10px;
+  background: #D8874F; /* Background color of the scrollbar thumb */
+  border-radius: 10px; /* Rounded corners for the scrollbar thumb */
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #ffa15f;
+  background: #ffa15f; /* Background color of the scrollbar thumb on hover */
 }
 
+/* Custom font class for 'Post No Bills Colombo' with bold weight */
 .font-postNoBills {
-  font-family: 'Post No Bills Colombo', sans-serif;
-  font-weight: 800;
+  font-family: 'Post No Bills Colombo', sans-serif; /* Uses the custom font with a fallback to sans-serif */
+  font-weight: 800; /* Bold weight for this font */
 }
 
+/* Custom font class for 'Inter' */
 .font-inter {
-  font-family: "Inter", sans-serif;
-  font-style: normal;
+  font-family: "Inter", sans-serif; /* Uses the Inter font with a fallback to sans-serif */
+  font-style: normal; /* Normal font style */
 }
 
+/* Custom styling for text with a stroke */
 .countdown-text {
-  -webkit-text-stroke-width: 3px;
-  -webkit-text-stroke-color: #311F04;
+  -webkit-text-stroke-width: 3px; /* Width of the text stroke */
+  -webkit-text-stroke-color: #311F04; /* Color of the text stroke */
 }
 
+/* Background style for elements with the 'body' class */
 .body {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.5)), url("/leaderBoard_image_bg.png");
+  background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.5)), url("/leaderBoard_image_bg.png"); /* Linear gradient overlay with a background image */
 }
 
+/* Background style for elements with the 'out' class */
 .out {
-  background-image: url('/leaderBoard_tree_board.png');
+  background-image: url('/leaderBoard_tree_board.png'); /* Background image */
+  background-size: contain; /* Scale background image to fit within its container */
+  background-position: center; /* Center the background image */
+  background-repeat: no-repeat; /* Prevent background image from repeating */
 }
 
+/* Animation for scrolling background */
+.bg-scroll {
+  animation: scrollBackground 120s linear infinite; /* Apply the scrollBackground animation for 120 seconds, infinitely */
+}
+
+/* Keyframes for the scrollBackground animation */
+@keyframes scrollBackground {
+  from {
+      background-position: 0 0; /* Starting position of the background */
+  }
+
+  to {
+      background-position: 1000% 0; /* Ending position of the background (scrolls horizontally) */
+  }
+}
+
+/* Responsive styles for screens with a max width of 1024px */
 @media only screen and (max-width: 1024px) {
   .out {
-    background-image: url('/leaderBoard_tree_board_sm.png');
+    background-image: url('/leaderBoard_tree_board_sm.png'); /* Different background image for smaller screens */
+    background-size: 100% auto; /* Adjust background image size for smaller screens */
+    background-position: center top; /* Adjust background image position */
+    background-repeat: no-repeat; /* Prevent background image from repeating */
+    padding-top: 20%; /* Add padding to the top of the element */
   }
-}
+}
+
+/* Styling for long text to break and wrap properly */
+.name-span {
+  word-break: break-word; /* Break long words onto the next line */
+  overflow-wrap: break-word; /* Wrap text to avoid overflow */
+  hyphens: auto; /* Automatically hyphenate text where appropriate */
+}
diff --git a/Client/src/main.jsx b/Client/src/main.jsx
@@ -1,9 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.jsx';
-import './index.css';
+// Import necessary modules and components
+import React from 'react'; // React library for building user interfaces
+import ReactDOM from 'react-dom/client'; // ReactDOM for rendering React components to the DOM
+import App from './App.jsx'; // The main App component for your application
+import './index.css'; // Import the global CSS file for styling
+
+// Create a root element to render your React application
 ReactDOM.createRoot(document.getElementById('root')).render(
-<React.StrictMode>
+  <React.StrictMode>
+    {/* The React.StrictMode component helps identify potential problems in your application */}
     <App />
+    {/* The App component is the top-level component of your React application */}
   </React.StrictMode>
 );