From 8231b5ed4939369236d988fe70baab09df92ab73 Mon Sep 17 00:00:00 2001
From: Logan Davidson <iamlogandavidson@gmail.com>
Date: Wed, 17 Jan 2024 09:17:00 +0000
Subject: [PATCH] Add secrets icon

Add a secrets icon (replacing the votes icon used to temporarily represent secrets in the faction details component) and add secrets as an attribute to the faction list item component. The icon depicts a simple red masquerade mask.
---
 frontend/components/FactionListItem.tsx       | 21 ++++++++-----------
 .../detailSections/DetailSection_Faction.tsx  |  3 ++-
 frontend/images/icons/secrets.svg             |  1 +
 3 files changed, 12 insertions(+), 13 deletions(-)
 create mode 100644 frontend/images/icons/secrets.svg

diff --git a/frontend/components/FactionListItem.tsx b/frontend/components/FactionListItem.tsx
index 0b49a298..a8c14ab9 100644
--- a/frontend/components/FactionListItem.tsx
+++ b/frontend/components/FactionListItem.tsx
@@ -10,13 +10,8 @@ import FactionLink from "@/components/FactionLink"
 import InfluenceIcon from "@/images/icons/influence.svg"
 import TalentsIcon from "@/images/icons/talents.svg"
 import VotesIcon from "@/images/icons/votes.svg"
-
-type Attribute = {
-  name: "senators" | "influence" | "votes" | "talents"
-  value: Number
-  image: string
-  sum?: boolean
-}
+import SecretsIcon from "@/images/icons/secrets.svg"
+import { Attribute } from "@/components/AttributeGrid"
 
 interface FactionListItemProps {
   faction: Faction
@@ -24,7 +19,7 @@ interface FactionListItemProps {
 
 // Item in the faction list
 const FactionListItem = (props: FactionListItemProps) => {
-  const { allPlayers, allSenators } = useGameContext()
+  const { allPlayers, allSenators, allSecrets } = useGameContext()
 
   // Get faction-specific data
   const player = allPlayers.byId[props.faction.player] ?? null
@@ -47,16 +42,18 @@ const FactionListItem = (props: FactionListItemProps) => {
     (total, senator) => total + senator.votes,
     0
   )
+  const secrets = allSecrets.asArray.filter((s) => s.faction === props.faction?.id)
 
   // Attribute data
   const attributeItems: Attribute[] = [
     {
       name: "influence",
       value: totalInfluence,
-      image: InfluenceIcon,
+      icon: InfluenceIcon,
     },
-    { name: "talents", value: totalTalents, image: TalentsIcon },
-    { name: "votes", value: totalVotes, image: VotesIcon },
+    { name: "talents", value: totalTalents, icon: TalentsIcon },
+    { name: "votes", value: totalVotes, icon: VotesIcon },
+    { name: "Secrets", value: secrets.length, icon: SecretsIcon },
   ]
 
   // Get attribute items
@@ -67,7 +64,7 @@ const FactionListItem = (props: FactionListItemProps) => {
       <Tooltip key={item.name} 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.image}
+            src={item.icon}
             height={28}
             width={28}
             alt={`${titleCaseName} icon`}
diff --git a/frontend/components/detailSections/DetailSection_Faction.tsx b/frontend/components/detailSections/DetailSection_Faction.tsx
index ef5e0750..02ad9f67 100644
--- a/frontend/components/detailSections/DetailSection_Faction.tsx
+++ b/frontend/components/detailSections/DetailSection_Faction.tsx
@@ -10,6 +10,7 @@ import InfluenceIcon from "@/images/icons/influence.svg"
 import TalentsIcon from "@/images/icons/talents.svg"
 import VotesIcon from "@/images/icons/votes.svg"
 import SenatorsIcon from "@/images/icons/senators.svg"
+import SecretsIcon from "@/images/icons/secrets.svg"
 import AttributeGrid, { Attribute } from "@/components/AttributeGrid"
 import SenatorPortrait from "@/components/SenatorPortrait"
 import Title from "@/classes/Title"
@@ -121,7 +122,7 @@ const FactionDetails = () => {
     },
     { name: "Talents", value: totalTalents, icon: TalentsIcon },
     { name: "Votes", value: totalVotes, icon: VotesIcon },
-    { name: "Secrets", value: secrets.length, icon: VotesIcon },
+    { name: "Secrets", value: secrets.length, icon: SecretsIcon },
   ]
 
   // If there is no faction selected, render nothing
diff --git a/frontend/images/icons/secrets.svg b/frontend/images/icons/secrets.svg
new file mode 100644
index 00000000..b8cae778
--- /dev/null
+++ b/frontend/images/icons/secrets.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 12.7 12.7" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs><filter id="a" x="-.09" y="-.14" width="1.17" height="1.29" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation=".3"/></filter></defs><g fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M2.72 3.69c-.4.83-.68 2.32-.54 2.85.09.36.48.79.81 1.1.45.45 1.29 1.1 2.04 1.01.65-.08.7-1.1 1.26-1.1s.61 1.02 1.26 1.1c.75.1 1.6-.56 2.04-1 .33-.32.72-.75.82-1.11a6 6 0 0 0-.54-2.85c-1.32.47-2.35.85-3.58.85-1.22 0-2.26-.38-3.57-.85" filter="url(#a)" transform="matrix(1.23173 0 0 1.20815 -1.4 -1.14)"/><path d="M2.04 3.66s-.7 2-.53 2.96c.07.4.35.66.64.95.64.65 1.43 1.47 2.53 1.47.25 0 .44-.2.55-.36.22-.34.37-.72.7-.92q.2-.1.42-.07.24-.01.42.07c.33.2.49.58.7.91.12.17.3.37.54.37 1.1 0 1.9-.82 2.54-1.47.3-.29.58-.55.64-.95.18-.96-.53-2.96-.53-2.96 0-.02-2.18.69-3.3.88a6.16 6.04 0 0 1-2.01 0c-1.13-.2-3.31-.9-3.31-.88m1.51 1.52c.94-.01 1.8.72 1.78 1.62-.6.36-2.58.65-2.71-1.32q.46-.29.93-.3m5.5 0h.1q.46 0 .93.3C9.96 7.45 7.96 7.15 7.37 6.8c-.02-.87.79-1.6 1.69-1.62" fill="#f87171"/></g></svg>
\ No newline at end of file