032

src/IndexPage.tsx

@@ -43,8 +43,7 @@ const IndexPage: FC = () => {
   const [showInstructions, setShowInstructions] = useState(true);
   const [gameStarted, setGameStarted] = useState(false);
   const [carAnimation, setCarAnimation] = useState('');
- // const [showPowerIndicator, setShowPowerIndicator] = useState(false);
- // const [powerIndicatorValue, setPowerIndicatorValue] = useState(0);
+
 
   useEffect(() => {
     if (gameStarted) {
@@ -142,14 +141,28 @@ const handleGearClick = () => {
         borderRadius: '5px',
         zIndex: 4,
         position: 'absolute',
-        top: '35%',
+        top: '5%',
         left: '50%',
         transform: 'translateX(-50%)',
       }}>
         Elapsed Time: {elapsedTime.toFixed(2)} seconds<br></br>
-          <StyledButton onClick={() => window.location.reload()} style={{ margin: '20px', cursor: 'pointer' }}>
-            Restart Race
-          </StyledButton>
+        <StyledButton onClick={() => {
+  setPosition1(0);
+  setPosition2(RESET_POSITION);
+  setClickCount(0);
+  setMoveDistance(INITIAL_MOVE_DISTANCE);
+  setShowGear(false);
+  setShowingImage('');
+  setClickEnabled(false);
+  setStartTime(0);
+  setEndTime(0);
+  setVerticalBlurLevel(0);
+  setShowInstructions(true);
+  setGameStarted(false);
+  setCarAnimation('');
+}} style={{ margin: '20px', cursor: 'pointer' }}>
+  Restart
+</StyledButton>
       </div>
     );
   };

src/PowerIndicator.tsx

@@ -18,7 +18,7 @@ const powerImages = [
 
 const PowerContainer = styled.div`
   position: absolute;
-  top: 5px;
+  top: 5%;
   left: 10px;
   z-index: 4; /* Ensure it's above other elements */
 `;

src/ProgressIndicator.tsx

@@ -1,5 +1,4 @@
-// ProgressIndicator.tsx
-import React, { FC } from "react";
+import { FC } from "react";
 import styled from "styled-components";
 
 const ProgressWrapper = styled.div`
@@ -15,6 +14,10 @@ const ProgressWrapper = styled.div`
   font-size: 28px;
 `;
 
+const LargeNumber = styled.span`
+  font-size: 56px; // 2x larger
+`;
+
 interface ProgressIndicatorProps {
   clickCount: number;
 }
@@ -30,9 +33,12 @@ const ProgressIndicator: FC<ProgressIndicatorProps> = ({ clickCount }) => {
     return "7/7";
   };
 
+  const progress = calculateProgress(clickCount);
+  const [largeNumber, smallNumber] = progress.split("/");
+
   return (
     <ProgressWrapper>
-      {calculateProgress(clickCount)}
+      <LargeNumber>{largeNumber}</LargeNumber>/{smallNumber}
     </ProgressWrapper>
   );
 };

src/speed.tsx

@@ -1,6 +1,6 @@
 // newLogic.ts
-export const MAX_SPEED = 25; // Maximum move distance in pixels per click
-export const RESET_POSITION = -650; // Height of road image (in pixels)
+export const MAX_SPEED = 55; // Maximum move distance in pixels per click
+export const RESET_POSITION = -600; // Height of road image (in pixels)
 
 export const calculateMoveDistance = (clickCount: number): number => {
   const increment = MAX_SPEED * 0.01449; // 1.44% of max speed