començar joc assenyalar país

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

src/App.css

@@ -2,7 +2,7 @@ body {
   margin: 0;
   padding: 0;
 }
-#root {
+.app-page {
   display: flex;
   flex-direction: column;
 }
@@ -39,7 +39,7 @@ body {
   .map-box {
     height: 100vh;
   }
-  #root {
+  .app-page {
     flex-direction: row;
   }
 }

src/App.tsx

@@ -1,94 +1,36 @@
 // @ts-ignore
-import { Map } from "./assets/world";
+import { Map } from "./assets/Map";
 import "./App.css";
-import { useEffect, useRef, useState } from "react";
+import { BrowserRouter, Route, Link, Routes } from "react-router-dom";
+import { PointCountryGame } from "./pages/PointCountryGame";
+import { PointCountryInfo } from "./pages/PointCountryInfo";
 
 function App() {
-  const selectedPath = useRef<SVGPathElement | null>(null);
-  const [country, setCountry] = useState("");
-  type countryInfoT = {
-    capital: string;
-    languages: object;
-    flags: {
-      svg: string;
-    };
-    name: {
-      official: string;
-    };
-  };
-  const [countryInfo, setCountryInfo] = useState<countryInfoT>({
-    capital: "",
-    languages: {},
-    flags: {
-      svg: "",
-    },
-    name: {
-      official: "",
-    },
-  });
-
-  useEffect(() => {
-    if (!country) {
-      return;
-    }
-    fetch(`https://restcountries.com/v3.1/name/${country}`)
-      .then((response) => response.json())
-      // 4. Setting *dogImage* to the image url that we received from the response above
-      .then((data) => {
-        setCountryInfo(data[0]);
-      });
-  }, [country]);
-
-  useEffect(() => {
-    let paths = document.querySelectorAll("path");
-    for (let i = 0; i < paths.length; i++) {
-      paths[i].addEventListener("click", (e) => onClickPais(e));
-    }
-  }, []);
-
-  function onClickPais(e: MouseEvent) {
-    if (selectedPath.current) {
-      selectedPath.current.setAttribute("style", "fill:black");
-    }
-    const targ = e.target as SVGPathElement;
-    selectedPath.current = targ;
-    const title = (targ.attributes.getNamedItem("title") as Attr).value;
-
-    if (!title || !targ) {
-      return;
-    }
-    console.log(title);
-    targ.setAttribute("style", "fill:red");
-    setCountry(title);
-  }
   return (
     <>
-      <Map />
-
-      <div id="country-info">
-        {countryInfo ? (
-          <>
-            <div>
-              <h2>{country}</h2>{" "}
-              <img className="country-flag" src={countryInfo.flags.svg} />
-            </div>
-            <div>
-              <p>
-                <strong>Official name:</strong> {countryInfo.name.official}
-              </p>
-              <p>
-                <strong>Capital:</strong> {countryInfo?.capital}
-              </p>
-              <p>
-                <strong>Languages:</strong>{" "}
-                {Object.values(countryInfo?.languages).map((l) => l + ", ")}
-              </p>
-            </div>
-          </>
-        ) : (
-          "no info :/"
-        )}
-      </div>
+      <BrowserRouter>
+        <nav>
+          <ul>
+            <li>
+              <Link to="/point-country-game">Point Country Game</Link>
+            </li>
+            <li>
+              <Link to="/point-country-info">Point Country info</Link>
+            </li>
+          </ul>
+        </nav>
+        <Routes>
+          <Route
+            path="/point-country-game"
+            element={<PointCountryGame />}
+          ></Route>
+          <Route
+            path="/point-country-info"
+            element={<PointCountryInfo />}
+          ></Route>
+          <Route path="/" element={<App />}></Route>
+        </Routes>
+      </BrowserRouter>
     </>
   );
 }