Add indicators for Yard members

index.html

@@ -84,6 +84,7 @@
 		<link rel="prefetch" href="shop_Switch1.png" />
 		<link rel="prefetch" href="Fire.png" />
 		<link rel="prefetch" href="bandaid.png" />
+		<link rel="prefetch" href="yard_member.png" />
 
 		<title>Profectus</title>
 		<meta name="description" content="A project made in Profectus"/>

src/data/CharacterSlot.vue

@@ -111,6 +111,7 @@ import level2_2 from "../../public/Lvl 2_2.png";
 import level3 from "../../public/Lvl 3.png";
 import star from "../../public/presence_v2.png";
 import money_small from "../../public/money_small.png";
+import yard_member from "../../public/yard_member.png";
 import { characters } from "./projEntry";
 import { Character } from "./types";
 
@@ -154,7 +155,7 @@ watchEffect(() => {
         return;
     }
     const Ability = coerceComponent(characters[props.character.type].abilityDescription(props.character));
-    comp.value = jsx(() => (<><b>{characters[props.character!.type].nickname}</b><br /><Ability /></>));
+    comp.value = jsx(() => (<><b>{characters[props.character!.type].nickname}</b>{characters[props.character!.type].isYard ? <img src={yard_member} style="margin-left: 0.25em" /> : null}<br /><Ability /></>));
 })
 </script>
 

src/data/common.css

@@ -427,6 +427,7 @@
 .tooltip img {
     height: 1em;
     padding-right: 0.5em;
+    image-rendering: auto;
 }
 
 @keyframes swing {

src/data/projEntry.tsx

@@ -63,6 +63,7 @@ import vespa from "../../public/Vespa Coots.png";
 import victoryButton from "../../public/Victory Button.png";
 import victoryFace from "../../public/win face.png";
 import yard_small from "../../public/yard_small.png";
+import yard_member from "../../public/yard_member.png";
 import CharacterSlot from "./CharacterSlot.vue";
 import "./common.css";
 import healthParticles from "./health.json";
@@ -130,6 +131,7 @@ export const characters: Record<string, CharacterInfo> = {
         initialPresence: 1,
         display: ludwig,
         abilityType: "LivestreamJoined",
+        isYard: true,
         abilityDescription: char =>
             jsx(() => (
                 <>
@@ -222,6 +224,7 @@ export const characters: Record<string, CharacterInfo> = {
         initialRelevancy: 2,
         display: aimen,
         abilityType: "Sold",
+        isYard: true,
         abilityDescription: char =>
             jsx(() => (
                 <>
@@ -248,6 +251,7 @@ export const characters: Record<string, CharacterInfo> = {
         initialRelevancy: 1,
         display: nick,
         abilityType: "LivestreamEnded",
+        isYard: true,
         abilityDescription: char =>
             jsx(() => (
                 <>
@@ -687,6 +691,7 @@ export const characters: Record<string, CharacterInfo> = {
         initialPresence: 3,
         display: slime,
         abilityType: "LivestreamJoined",
+        isYard: true,
         abilityDescription: char =>
             jsx(() => (
                 <>
@@ -1508,10 +1513,13 @@ export const main = createLayer("main", function (this: BaseLayer) {
                         <Tooltip
                             display={jsx(() => (
                                 <>
-                                    <i>Stream started</i>: All Yard Coots gain 1{" "}
+                                    <i>Stream started</i>: All <img src={yard_member} />
+                                    <span style="color: white">Yard</span> Coots gain 1{" "}
                                     <img src={heart_small} />
-                                    <span style="color: red">Relevancy</span> for every Yard Coots
-                                    owned, for the rest of the battle
+                                    <span style="color: red">Relevancy</span> for every{" "}
+                                    <img src={yard_member} />
+                                    <span style="color: white">Yard</span> Coots owned, for the rest
+                                    of the battle
                                 </>
                             ))}
                         >

src/data/types.d.ts

@@ -18,6 +18,7 @@ interface CharacterInfo {
     initialPresence: number;
     display: string;
     abilityType: AbilityTypes;
+    isYard?: boolean;
     abilityDescription: (char: Character) => CoercableComponent;
     performAbility: (char: Character) => void;
 }