Add a meta button that links to the secrets list

Allow the `AttributeFlex` component to accept `Attribute` items with `onClick` values so that specific attributes can behave as buttons. Use this to make the Secrets attribute in the meta section behave as a link that opens the list of secrets.
iamlogand · Jan 18, 2024 · 9b98dbc · 9b98dbc
1 parent ba4c924
commit 9b98dbc
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 19 deletions.
diff --git a/frontend/components/AttributeFlex.tsx b/frontend/components/AttributeFlex.tsx
@@ -6,37 +6,50 @@ export interface Attribute {
   name: string
   value: number
   icon: string
+  onClick?: () => void
 }
 
 interface AttributeGridProps {
   attributes: Attribute[]
 }
 
+const getAttributeItem = (item: Attribute, index?: number) => {
+  const titleCaseName = capitalize(item.name)
+  return (
+    <Tooltip key={index} title={titleCaseName} enterDelay={500} arrow>
+      <div className="w-[64px] grid grid-cols-[30px_30px] items-center justify-center bg-white shadow-[0px_0px_2px_2px_white] rounded">
+        <Image
+          src={item.icon}
+          height={28}
+          width={28}
+          alt={`${titleCaseName} icon`}
+        />
+        <div className="w-8 text-center text-md font-semibold">
+          {item.value.toString()}
+        </div>
+      </div>
+    </Tooltip>
+  )
+}
+
 const AttributeFlex = ({ attributes }: AttributeGridProps) => {
-  // Get attribute items
-  const getAttributeItem = (item: Attribute, index: number) => {
-    const titleCaseName = capitalize(item.name)
+  const getButton = (item: Attribute, index: number) => {
+    if (item.onClick === undefined) return getAttributeItem(item, index)
     return (
-      <Tooltip key={index} title={titleCaseName} enterDelay={500} arrow>
-        <div className="w-[64px] grid grid-cols-[30px_30px] items-center justify-center bg-white shadow-[0px_0px_2px_2px_white] rounded">
-          <Image
-            src={item.icon}
-            height={28}
-            width={28}
-            alt={`${titleCaseName} icon`}
-          />
-          <div className="w-8 text-center text-md font-semibold">
-            {item.value.toString()}
-          </div>
-        </div>
-      </Tooltip>
+      <button
+        key={index}
+        onClick={item.onClick}
+        className="cursor-pointer border-0 p-0 bg-transparent"
+      >
+        {getAttributeItem(item)}
+      </button>
     )
   }
 
   return (
     <div className="p-[2px] flex flex-wrap gap-3 select-none">
       {attributes.map((attribute: Attribute, index) =>
-        getAttributeItem(attribute, index)
+        getButton(attribute, index)
       )}
     </div>
   )

diff --git a/frontend/components/MetaSection.tsx b/frontend/components/MetaSection.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link"
 import Image from "next/image"
-import React from "react"
+import React, { useCallback } from "react"
 
 import Button from "@mui/material/Button"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
@@ -20,6 +20,7 @@ import VotesIcon from "@/images/icons/votes.svg"
 import SecretsIcon from "@/images/icons/secrets.svg"
 import AttributeFlex, { Attribute } from "@/components/AttributeFlex"
 import Collection from "@/classes/Collection"
+import SelectedDetail from "@/types/selectedDetail"
 
 // Section showing meta info about the game
 const MetaSection = () => {
@@ -33,6 +34,8 @@ const MetaSection = () => {
     allFactions,
     allSenators,
     allSecrets,
+    setSelectedDetail,
+    setFactionDetailTab,
   } = useGameContext()
 
   // Get data
@@ -48,6 +51,15 @@ const MetaSection = () => {
     ? allFactions.asArray.find((f) => f.id == hrao.faction) ?? null
     : null
 
+  const handleSecretsClick = useCallback(() => {
+    if (faction?.id)
+      setSelectedDetail({
+        type: "Faction",
+        id: faction.id,
+      } as SelectedDetail)
+    setFactionDetailTab(2)
+  }, [])
+
   let attributeItems: Attribute[] = []
   if (faction) {
     const senators = new Collection<Senator>(
@@ -64,7 +76,12 @@ const MetaSection = () => {
     const secrets = allSecrets.asArray.filter((s) => s.faction === faction.id)
     attributeItems = [
       { name: "votes", value: totalVotes, icon: VotesIcon },
-      { name: "secrets", value: secrets.length, icon: SecretsIcon },
+      {
+        name: "secrets",
+        value: secrets.length,
+        icon: SecretsIcon,
+        onClick: handleSecretsClick,
+      },
     ]
   }