refactor header component

silentDjay · Nov 2, 2024 · e7c8588 · e7c8588
1 parent 48df829
commit e7c8588
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 12 deletions.
diff --git a/src/components/GameplayMap.tsx b/src/components/GameplayMap.tsx
@@ -83,7 +83,7 @@ export const GameplayMap: React.FC<GameplayMapProps> = ({
       const maxRadius = distanceFromTarget * 1000; // meters
 
       const growthRate = 22000 / (map.getZoom() || 1); // Amount to increase the radius per interval (in meters)
-      const intervalRate = 5; // milliseconds
+      const intervalRate = 5;
 
       const timeRequiredToFillCircle = (maxRadius / growthRate) * intervalRate;
 

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -14,25 +14,20 @@ interface HeaderProps {
   targetCountryData: Country;
   gameCategory: GameCategory;
   gameStatus: GameStatus;
+  distanceFromTarget?: number;
 }
 
 export const Header: React.FC<HeaderProps> = ({
   clicks,
   targetCountryData,
   gameCategory,
   gameStatus,
+  distanceFromTarget,
 }) => {
   const totalClickCount = clicks.length;
   const clickCountOnLand = getNumberOfClicksOnLand(clicks);
   const lastClickData = clicks[totalClickCount - 1];
   const penultimateClickData = clicks[totalClickCount - 2];
-  const distanceFromTarget =
-    !!targetCountryData &&
-    !!lastClickData &&
-    getClickDistanceFromTarget(
-      targetCountryData.latlng,
-      lastClickData.coordinates
-    );
   const previousClickDistance =
     !!targetCountryData &&
     !!penultimateClickData &&
@@ -50,7 +45,7 @@ export const Header: React.FC<HeaderProps> = ({
       <span className="header-title">MAPSTERY</span>
       {!!targetCountryData && (
         <div className="header-gameplay-info">
-          {clicks?.length !== 0 && gameStatus === "INIT" && !!lastClickData ? (
+          {gameStatus === "INIT" && !!lastClickData ? (
             <div style={{ display: "flex" }}>
               <div>
                 <b>

diff --git a/src/components/PlayGame.tsx b/src/components/PlayGame.tsx
@@ -74,9 +74,7 @@ export const PlayGame: React.FC = () => {
     useState<google.maps.LatLng>();
 
   useEffect(() => {
-    const totalClicks = clicks?.length;
-
-    const lastClickData = clicks[totalClicks - 1];
+    const lastClickData = clicks[clicks.length - 1];
 
     if (!!lastClickData && !!targetCountryData) {
       setLatestClickDistance(
@@ -275,6 +273,7 @@ export const PlayGame: React.FC = () => {
           targetCountryData={targetCountryData}
           gameCategory={gameCategory as GameCategory}
           gameStatus={gameStatus}
+          distanceFromTarget={latestClickDistance}
         />
       )}
       <WelcomeModal