feat: game country selector start

MarcoEscaleira · Feb 13, 2024 · 75a0f0f · 75a0f0f
1 parent cf835b6
commit 75a0f0f
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 16 deletions.
diff --git a/src/pages/Game/MapChart.tsx b/src/pages/Game/MapChart.tsx
@@ -10,8 +10,9 @@ interface Position {
 }
 
 export const MapChart: FC<{
+  setSelectedCountry: Dispatch<SetStateAction<string>>;
   setTooltipContent: Dispatch<SetStateAction<string>>;
-}> = ({ setTooltipContent }) => {
+}> = ({ setSelectedCountry, setTooltipContent }) => {
   const [position, setPosition] = useState<Position>({ coordinates: [5, 46], zoom: 1 });
 
   function handleZoomIn() {
@@ -39,6 +40,7 @@ export const MapChart: FC<{
           style={{
             width: "100%",
             height: "auto",
+            maxHeight: "600px",
           }}
         >
           {/* @ts-expect-error: due to a temporary update on the @types/react */}
@@ -55,8 +57,11 @@ export const MapChart: FC<{
                         key={geo.rsmKey}
                         geography={geo}
                         data-tooltip-id="country-tooltip"
+                        onClick={() => {
+                          setSelectedCountry(geo.properties.name);
+                        }}
                         onMouseEnter={() => {
-                          setTooltipContent(`${geo.properties.name}`);
+                          setTooltipContent(geo.properties.name);
                         }}
                         onMouseLeave={() => {
                           setTooltipContent("");
@@ -65,6 +70,7 @@ export const MapChart: FC<{
                           default: {
                             fill: "#D6D6DA",
                             outline: "none",
+                            cursor: "pointer",
                           },
                           hover: {
                             fill: "#004f79",
@@ -76,9 +82,18 @@ export const MapChart: FC<{
                           },
                         }}
                       />
-                      <Marker key={`name-${geo.rsmKey}`} coordinates={provinceCenter}>
+                      <Marker
+                        key={`name-${geo.rsmKey}`}
+                        coordinates={provinceCenter}
+                        onMouseEnter={() => {
+                          setTooltipContent(geo.properties.name);
+                        }}
+                        onClick={() => {
+                          setSelectedCountry(geo.properties.name);
+                        }}
+                      >
                         {/* @ts-expect-error: text not found in svg */}
-                        <text textAnchor="middle" fill="black" strokeWidth={0} fontSize="8px">
+                        <text textAnchor="middle" fill="black" strokeWidth={0} fontSize="8px" cursor="pointer">
                           {geo.properties.name}
                         </text>
                       </Marker>
@@ -90,12 +105,12 @@ export const MapChart: FC<{
           </ZoomableGroup>
         </ComposableMap>
       </div>
-      <div className="mt-3 flex w-full items-center justify-center gap-3">
-        <Typography>Controls</Typography>
-        <Button onClick={handleZoomIn} size="sm">
-          <Plus />
+      <div className="absolute left-4 top-0 mt-3 flex items-center gap-3">
+        <Typography>Zoom</Typography>
+        <Button onClick={handleZoomIn} size="sm" className="p-2">
+          <Plus className="w-6" />
         </Button>
-        <Button onClick={handleZoomOut} size="sm">
+        <Button onClick={handleZoomOut} size="sm" className="p-2">
           <Minus />
         </Button>
       </div>

diff --git a/src/pages/Game/index.tsx b/src/pages/Game/index.tsx
@@ -1,18 +1,39 @@
 import { useState } from "react";
-import { Typography } from "@material-tailwind/react";
+import { Typography, Button } from "@material-tailwind/react";
 import { Tooltip } from "react-tooltip";
+import { useCountries } from "use-react-countries";
 import { MapChart } from "./MapChart.tsx";
 
 export function Component() {
-  const [content, setContent] = useState("");
+  const [selectedTooltipContent, setSelectedTooltipContent] = useState("");
+  const [selectedCountry, setSelectedCountry] = useState("");
+
+  const { countries } = useCountries();
+  const countyDetails = countries.find(({ name }: { name: string }) => name.toLowerCase() === selectedCountry.toLowerCase());
+
+  console.log(countries);
 
   return (
     <div className="flex h-full w-full flex-col items-center">
-      <Typography variant="h1" className="mt-10 md:mt-10 mb-6 text-3xl md:text-5xl">Map</Typography>
-
-      <MapChart setTooltipContent={setContent} />
-
-      <Tooltip id="country-tooltip">{content}</Tooltip>
+      <Typography variant="h1" className="mb-6 mt-10 text-3xl md:mt-10 md:text-5xl">
+        Map
+      </Typography>
+
+      <Tooltip id="country-tooltip">{selectedTooltipContent}</Tooltip>
+      <MapChart setSelectedCountry={setSelectedCountry} setTooltipContent={setSelectedTooltipContent} />
+
+      {selectedCountry && (
+        <>
+          <div className="mb-4 mt-8 flex items-center gap-8">
+            <Typography variant="h2" className="text-2xl flex items-center gap-2">
+              <img src={countyDetails.flags.svg} alt={selectedCountry} className="h-5 w-5 rounded-full object-cover" />
+
+              {selectedCountry}
+            </Typography>
+            <Button className="h-10">View country information</Button>
+          </div>
+        </>
+      )}
     </div>
   );
 }