remove squares

Author: codergautam

components/LeafletMap.js

@@ -70,9 +70,42 @@ export default function LeafletMap({ onCountryClick, highlightCountry, gameState
 
   const loadCountryBoundaries = async (map, L) => {
     try {
-      // For now, we'll create basic country polygons for major countries
-      // In a real implementation, you'd load actual GeoJSON data
-      const countryBounds = getSimplifiedCountryBounds();
+      // Load actual world countries GeoJSON from a public source
+      const response = await fetch('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson');
+      const worldData = await response.json();
+      
+      // Filter to only include our game countries
+      const gameCountries = [
+        'United States of America', 'Canada', 'Mexico', 'Brazil', 'Argentina', 
+        'Russia', 'China', 'India', 'Australia', 'Egypt',
+        'South Africa', 'Nigeria', 'Germany', 'France', 'Spain',
+        'United Kingdom', 'Italy', 'Turkey', 'Saudi Arabia', 'Iran',
+        'Kazakhstan', 'Mongolia', 'Japan', 'Indonesia', 'Thailand'
+      ];
+      
+      // Map display names to GeoJSON names
+      const countryNameMap = {
+        'United States': 'United States of America',
+        'United Kingdom': 'United Kingdom',
+        'Russia': 'Russia',
+        'South Africa': 'South Africa'
+      };
+      
+      const filteredFeatures = worldData.features.filter(feature => {
+        const countryName = feature.properties.NAME;
+        return gameCountries.includes(countryName);
+      });
+      
+      const countryBounds = {
+        type: "FeatureCollection",
+        features: filteredFeatures.map(feature => ({
+          ...feature,
+          properties: {
+            ...feature.properties,
+            name: Object.keys(countryNameMap).find(key => countryNameMap[key] === feature.properties.NAME) || feature.properties.NAME
+          }
+        }))
+      };
 
       const geoJsonLayer = L.geoJSON(countryBounds, {
         style: {

components/MapGuessrGame.js

@@ -13,6 +13,16 @@ export default function MapGuessrGame() {
   const [round, setRound] = useState(1);
   const [gameState, setGameState] = useState('playing'); // playing, correct, wrong, finished
   const [feedback, setFeedback] = useState('');
+  const [gameStats, setGameStats] = useState({
+    totalAnswers: 0,
+    correctAnswers: 0,
+    wrongAnswers: 0,
+    roundDetails: [],
+    startTime: null,
+    endTime: null,
+    averageTimePerRound: 0
+  });
+  const [roundStartTime, setRoundStartTime] = useState(null);
 
   // Basic list of easy-to-click major countries
   const countries = [
@@ -26,11 +36,26 @@ export default function MapGuessrGame() {
   const maxRounds = 10;
 
   useEffect(() => {
+    // Initialize game stats with start time
+    setGameStats(prev => ({
+      ...prev,
+      startTime: new Date()
+    }));
     startNewRound();
   }, []);
 
   const startNewRound = () => {
     if (round > maxRounds) {
+      // Finalize game stats
+      const endTime = new Date();
+      setGameStats(prev => {
+        const totalTime = endTime - prev.startTime;
+        return {
+          ...prev,
+          endTime,
+          averageTimePerRound: prev.totalAnswers > 0 ? totalTime / prev.totalAnswers : 0
+        };
+      });
       setGameState('finished');
       return;
     }
@@ -39,6 +64,7 @@ export default function MapGuessrGame() {
     setCurrentCountry(randomCountry);
     setGameState('playing');
     setFeedback('');
+    setRoundStartTime(new Date());
   };
 
   const handleCountryClick = (clickedCountry) => {