Add tooltips to senator portraits (#288)

Add tooltips to senator portraits when the name is not also shown right there. The one example of this is currently the faction list items. Also make faction list items use slightly smaller icons.
iamlogand · Oct 3, 2023 · 655520e · 655520e
1 parent d69dc25
commit 655520e
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 49 deletions.
diff --git a/frontend/components/FactionListItem.tsx b/frontend/components/FactionListItem.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image'
+import Tooltip from '@mui/material/Tooltip'
 
 import SenatorPortrait from '@/components/SenatorPortrait'
 import Collection from '@/classes/Collection'
@@ -11,7 +12,7 @@ import SenatorsIcon from "@/images/icons/senators.svg"
 import InfluenceIcon from "@/images/icons/influence.svg"
 import TalentsIcon from "@/images/icons/talents.svg"
 import VotesIcon from "@/images/icons/votes.svg"
-import Tooltip from '@mui/material/Tooltip'
+
 
 type Attribute = {
   name: "senators" | "influence" | "votes" | "talents"
@@ -54,7 +55,7 @@ const FactionListItem = (props: FactionListItemProps) => {
         <div key={item.name} className={`${styles.attribute} ` + (!item.sum ? `${styles.nonSum}` : '')}>
           <div className={styles.symbols}>
             {item.sum && <span className={styles.sigma}>Σ</span>}
-            <Image src={item.image} height={34} width={34} alt={`${titleCaseName} icon`} />
+            <Image src={item.image} height={28} width={28} alt={`${titleCaseName} icon`} />
           </div>
           <div className={styles.attributeValue}>{item.value.toString()}</div>
         </div>
@@ -74,7 +75,7 @@ const FactionListItem = (props: FactionListItemProps) => {
       </div>
       <div className={styles.portraits}>
         {senators.asArray.map((senator: Senator) =>
-          <SenatorPortrait key={senator.id} senator={senator} size={80} selectable />
+          <SenatorPortrait key={senator.id} senator={senator} size={80} selectable nameTooltip />
         )}
       </div>
     </div>

diff --git a/frontend/components/GamePage.tsx b/frontend/components/GamePage.tsx
@@ -521,7 +521,7 @@ const GamePage = (props: GamePageProps) => {
                 </Box>
                 {mainTab === 0 && <FactionList />}
                 {mainTab === 1 &&
-                  <SenatorList margin={8} selectableSenators selectableFactions
+                  <SenatorList margin={8} selectableSenators selectableFactions border
                     mainSenatorListSortState={[mainSenatorListSort, setMainSenatorListSort]}
                     mainSenatorListGroupedState={[mainSenatorListGrouped, setMainSenatorListGrouped]}
                     mainSenatorListFilterAliveState={[mainSenatorListFilterAlive, setMainSenatorListFilterAlive]}

diff --git a/frontend/components/SenatorList.module.css b/frontend/components/SenatorList.module.css
@@ -5,11 +5,14 @@
   overflow-y: hidden;
   display: flex;
   flex-direction: column;
-  border: 1px solid var(--divider-line-color);
   border-radius: 3px;
   background-color: var(--background-color);
 }
 
+.listContainer.border {
+  border: 1px solid var(--divider-line-color);
+}
+
 .listContainer.margin {
   margin: 8px;
 }

diff --git a/frontend/components/SenatorList.tsx b/frontend/components/SenatorList.tsx
@@ -37,6 +37,7 @@ interface SenatorListProps {
   minHeight?: number
   margin?: number
   faction?: Faction
+  border?: boolean
   radioSelectedSenator?: Senator | null
   setRadioSelectedSenator?: (senator: Senator | null) => void
   mainSenatorListGroupedState?: [boolean, (grouped: boolean) => void]
@@ -204,7 +205,7 @@ const SenatorList = (props: SenatorListProps) => {
   const filtersId = filtersOpen ? 'filter-menu' : undefined
 
   return (
-    <div className={styles.listContainer}
+    <div className={`${styles.listContainer} ${props.border ? styles.border : ''}`}
       style={{height: props.height, margin: props.margin ?? 0, minHeight: props.minHeight ?? DEFAULT_MIN_HEIGHT }}
     >
       <div className={styles.content} style={{ minWidth: props.setRadioSelectedSenator ? 446 : 406 }}>

diff --git a/frontend/components/SenatorPortrait.tsx b/frontend/components/SenatorPortrait.tsx
@@ -13,6 +13,7 @@ import FactionLeaderPattern from "@/images/patterns/factionLeader.svg"
 import DeadIcon from "@/images/icons/dead.svg"
 import { useGameContext } from '@/contexts/GameContext'
 import Collection from '@/classes/Collection'
+import { Tooltip } from '@mui/material'
 
 import Cornelius from "@/images/portraits/cornelius.png"
 import Fabius from "@/images/portraits/fabius.png"
@@ -34,7 +35,6 @@ import Plautius from "@/images/portraits/plautius.png"
 import Quinctius from "@/images/portraits/quinctius.png"
 import Aemilius from "@/images/portraits/aemilius.png"
 import Terentius from "@/images/portraits/terentius.png"
-import { Tooltip } from '@mui/material'
 
 // Map of senator names to images
 const senatorImages: { [key: string]: StaticImageData } = {
@@ -64,11 +64,12 @@ interface SenatorPortraitProps {
   senator: Senator
   size: number
   selectable?: boolean
+  nameTooltip?: boolean
 }
 
 // The senator portrait is a visual representation of the senator,
 // containing an image of their face, faction color background, and other status icons
-const SenatorPortrait = ({ senator, size, selectable }: SenatorPortraitProps) => {
+const SenatorPortrait = ({ senator, size, ...props }: SenatorPortraitProps) => {
   const { allFactions, allTitles, setSelectedEntity } = useGameContext()
 
   // Used to force a re-render when senator changes
@@ -181,56 +182,64 @@ const SenatorPortrait = ({ senator, size, selectable }: SenatorPortraitProps) =>
 
   // Handle mouse interactions
   const handleMouseOver = () => {
-    if (selectable) setHover(true)
+    if (props.selectable) setHover(true)
   }
   const handleMouseLeave = () => {
     setHover(false)
   }
   const handleClick = () => {
-    if (selectable) setSelectedEntity({className: "Senator", id: senator.id} as SelectedEntity)
+    if (props.selectable) setSelectedEntity({className: "Senator", id: senator.id} as SelectedEntity)
   }
 
-  // Render the portrait
-  const PortraitElement = selectable ? 'button' : 'div'
-  return (
-    <PortraitElement
-      className={`${styles.senatorPortrait} ${selectable ? styles.selectable : ''}`}
-      onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}
-      onClick={handleClick}
-      key={key}
-    >
-      <figure style={{height: size, width: size}}>
-        <div className={styles.imageContainer} style={getImageContainerStyle()}>
-          { factionLeader &&
+  // Get JSX for the portrait
+  const getPortrait = () => {
+    return (
+      <PortraitElement
+        className={`${styles.senatorPortrait} ${props.selectable ? styles.selectable : ''}`}
+        onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}
+        onClick={handleClick}
+        key={key}
+      >
+        <figure style={{height: size, width: size}}>
+          <div className={styles.imageContainer} style={getImageContainerStyle()}>
+            { factionLeader &&
+              <Image
+                src={FactionLeaderPattern}
+                className={styles.factionLeaderPattern}
+                alt="Faction Leader pattern"
+              />
+            }
             <Image
-              src={FactionLeaderPattern}
-              className={styles.factionLeaderPattern}
-              alt="Faction Leader pattern"
+              className={`${styles.picture} ${senator.alive ? '' : styles.dead}`}
+              width={size + getZoom()}
+              height={size + getZoom()}
+              src={getPicture()}
+              alt={"Portrait of " + senator.displayName}
+              style={{transform: `translate(-50%, -${50 - getOffset()}%)`}}
+              placeholder='blur'
             />
+          </div>
+          <div className={styles.bg} style={getBgStyle()}></div>
+          {size > 120 &&
+            <Tooltip title="Senator ID" enterDelay={500} arrow>
+              <div className={styles.code}># {senator.code}</div>
+            </Tooltip>
+          }
+          {majorOffice && <TitleIcon title={majorOffice} size={getIconSize()} />}
+          {senator.alive === false &&
+            <Image src={DeadIcon} alt="Skull and crossbones icon" height={getIconSize()} className={styles.deadIcon} />
           }
-          <Image
-            className={`${styles.picture} ${senator.alive ? '' : styles.dead}`}
-            width={size + getZoom()}
-            height={size + getZoom()}
-            src={getPicture()}
-            alt={"Portrait of " + senator.displayName}
-            style={{transform: `translate(-50%, -${50 - getOffset()}%)`}}
-            placeholder='blur'
-          />
-        </div>
-        <div className={styles.bg} style={getBgStyle()}></div>
-        {size > 120 &&
-          <Tooltip title="Senator ID" enterDelay={500} arrow>
-            <div className={styles.code}># {senator.code}</div>
-          </Tooltip>
-        }
-        {majorOffice && <TitleIcon title={majorOffice} size={getIconSize()} />}
-        {senator.alive === false &&
-          <Image src={DeadIcon} alt="Skull and crossbones icon" height={getIconSize()} className={styles.deadIcon} />
-        }
-      </figure>
-    </PortraitElement>
-  )
+        </figure>
+      </PortraitElement>
+    )
+  }
+
+  const PortraitElement = props.selectable ? 'button' : 'div'
+  if (props.nameTooltip) {
+    return <Tooltip key={key} title={`${senator.displayName}`} enterDelay={500} arrow>{getPortrait()}</Tooltip>
+  } else {
+    return getPortrait()
+  }
 }
 
 export default SenatorPortrait;
diff --git a/frontend/components/actionDialogs/ActionDialog_SelectFactionLeader.tsx b/frontend/components/actionDialogs/ActionDialog_SelectFactionLeader.tsx
@@ -72,7 +72,7 @@ const SelectFactionLeaderDialog = (props: SelectFactionLeaderDialogProps ) => {
           </p>
 
           {/* 365 pixels is enough height to show 3 senators */}
-          <SenatorList faction={faction} height={365} radioSelectedSenator={selectedSenator} setRadioSelectedSenator={setSelectedSenator} />
+          <SenatorList faction={faction} height={365} radioSelectedSenator={selectedSenator} setRadioSelectedSenator={setSelectedSenator} border />
         </DialogContent>
 
         <DialogActions>