see all civs at once with hover over for descriptions

king8fisher · Nov 15, 2024 · 35d15c4 · 35d15c4
1 parent 05dc54a
commit 35d15c4
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 17 deletions.
diff --git a/src/components/atoms/SingleCivIcon/index.tsx b/src/components/atoms/SingleCivIcon/index.tsx
@@ -1,29 +1,50 @@
+import { HTMLAttributes } from "react";
 import { ICivData } from "../../../data/model";
 import { getCivImgUrl } from "../../../helpers/tools";
 import { ContentWithTooltip } from "../ContentWithTooltip";
 import { SingleCivIconWrap } from "./styles";
 
 interface SingleCivIconProps {
   highlight: boolean;
+  disablePopup?: boolean;
   civData: ICivData;
 }
 
-const SingleCivIcon = ({ highlight, civData }: SingleCivIconProps) => {
+const SingleCivIcon = (
+  { highlight, civData, disablePopup, ...props }: SingleCivIconProps
+    & HTMLAttributes<HTMLDivElement>) => {
   const imgClassName = highlight ? undefined : "opacity-20";
   return (
-    <SingleCivIconWrap>
-      <ContentWithTooltip
-        tooltip={
-          <>
-            <span className="font-bold leading-6">{civData.value}</span>
-            <span dangerouslySetInnerHTML={{ __html: civData.help }} />
-          </>
-        }
-      >
-        <img src={getCivImgUrl(civData.key)} className={imgClassName} />
-      </ContentWithTooltip>
+    <SingleCivIconWrap {...props}>
+      {disablePopup && <img src={getCivImgUrl(civData.key)} className={imgClassName} />}
+      {!disablePopup &&
+        <ContentWithTooltip
+          tooltip={
+            <TooltipContent civData={civData} />
+          }
+        >
+
+          <img src={getCivImgUrl(civData.key)} className={imgClassName} />
+        </ContentWithTooltip>
+      }
     </SingleCivIconWrap>
   );
 };
 
 export default SingleCivIcon;
+
+export const TooltipContent = ({ civData }: { civData: ICivData }) => {
+  return (<div className="flex flex-col gap-1">
+    <div className="flex flex-row items-start">
+      <span className="font-bold leading-6 grow">{civData.value}</span>
+      <SingleCivIcon
+        highlight
+        disablePopup
+        civData={civData}
+        className="place-self-end"
+      />
+    </div>
+    <span className="text-wrap" dangerouslySetInnerHTML={{ __html: civData.help }} />
+  </div>
+  )
+}
diff --git a/src/components/atoms/SingleCivIcon/styles.ts b/src/components/atoms/SingleCivIcon/styles.ts
@@ -1,6 +1,6 @@
 import { styled } from "styled-components";
 
-export const SingleCivIconWrap = styled.span`
+export const SingleCivIconWrap = styled.div`
   max-width: 1.75rem;
   max-height: 1.75rem;
 `;
diff --git a/src/components/molecules/Layout/index.tsx b/src/components/molecules/Layout/index.tsx
@@ -6,9 +6,11 @@ interface ILayoutProps {
 
 const Layout = ({ children }: ILayoutProps): JSX.Element => (
   <>
-    <Navbar />
-    {children}
-    {/* TODO: Add fotter */}
+    <div className="min-h-screen mb-1">
+      <Navbar />
+      {children}
+      {/* TODO: Add footer */}
+    </div>
   </>
 );
 

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import SearchInput from "../../components/atoms/SearchInput";
+import SingleCivIcon, { TooltipContent } from "../../components/atoms/SingleCivIcon";
 import { ButtonGroup, IFilterStats } from "../../components/molecules/ButtonGroup";
 import { CivView } from "../../components/molecules/CivView";
 import GenericUnitsView from "../../components/molecules/GenericUnitsView";
-import { ICivData, IGroupByUnitData, IUnitCivData, groupByUnitType, searchCivs, searchUnits } from "../../data/model";
+import { ICivData, IGroupByUnitData, IUnitCivData, getAllCivs, groupByUnitType, searchCivs, searchUnits } from "../../data/model";
 import { DataFilter } from "../../helpers/constants";
 import { useDebounce } from "../../helpers/debouncers";
 import { Container } from "../../styles";
@@ -56,12 +57,41 @@ const Home = () => {
     };
   }, [searchResult]);
 
+  const [civTip, setCivTip] = useState<ICivData | null>(null);
+
   return (
     <Container>
       <SearchInput searchTerm={searchTerm} setSearchTerm={handleSetSearchTerm} isLoading={isLoading} />
       <ButtonGroup filter={filter} setFilter={setFilter} filterStats={filterStats} />
       {filter === DataFilter.units && <GenericUnitsView genericUnitsData={searchResult} />}
       {filter === DataFilter.civs && searchResult?.civs.map((civ) => <CivView key={civ.key} civ={civ} />)}
+      <div className="flex flex-row flex-wrap gap-1 items-start">
+        {
+          filter === DataFilter.civs &&
+          <div className="grid grid-cols-8 gap-1 p-1 mt-1 max-w-[300px]">
+            {getAllCivs().map((civData) => (
+              <SingleCivIcon
+                highlight
+                disablePopup
+                civData={civData}
+                key={civData.key}
+                onMouseOver={() => {
+                  setCivTip(civData)
+                }}
+                onMouseLeave={() => {
+                  // We want to keep the last still visible.
+                  //setCivTip(null)
+                }}
+              />
+            ))}
+          </div>
+        }
+        { (filter === DataFilter.civs && civTip) &&
+          <div className="min-w-[200px] max-w-[350px] flex flex-col gap-2 p-2 rounded bg-black/20">
+            <TooltipContent civData={civTip} />
+          </div>
+        }
+      </div>
     </Container>
   );
 };