Added servant and turns to TA collection

src/components/taCard.astro

@@ -5,9 +5,11 @@ export interface Props {
   link: string
   image: string
   user?: string
+  ta_servant?: string
+  turns?: string
 }
 
-const { user, date, image, link, title } = Astro.props
+const { turns, ta_servant, user, date, image, link, title } = Astro.props
 
 const options_date: Intl.DateTimeFormatOptions = {
   year: 'numeric',
@@ -17,6 +19,7 @@ const options_date: Intl.DateTimeFormatOptions = {
 
 const formatted_date = new Date(date).toLocaleDateString('de-DE', options_date)
 const icon: string = `background: url('/assets/ta_icons/${image}.webp')`
+const servant: string = `/assets/ta_icons/ta_servants/${ta_servant}.webp`
 
 let hasuser = ''
 if (user !== undefined) {
@@ -26,7 +29,7 @@ if (user !== undefined) {
 
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
   <article>
-    <div style={icon}>
+    <div class="icon" style={icon}>
       <span>
         <h2>{title}</h2>
       </span>
@@ -37,6 +40,10 @@ if (user !== undefined) {
       </span>
       {formatted_date}
     </p>
+    <div class="expand-on-hover">
+      <img src={servant} alt="" />
+      <h2>{turns}</h2>
+    </div>
   </article>
 </a>
 
@@ -62,14 +69,14 @@ if (user !== undefined) {
   article:hover {
     transform: scale(var(--hover-scale));
   }
-  article > div {
+  article > .icon {
     width: 128px;
     height: 128px;
     object-fit: cover;
     object-position: 0% 0%;
   }
 
-  article:hover div span {
+  article:hover .icon span {
     padding: 0.5rem 0.5rem;
     display: flex;
     align-items: center;
@@ -94,11 +101,11 @@ if (user !== undefined) {
     display: none;
   }
 
-  article div span {
+  article .icon span {
     display: none;
   }
 
-  div {
+  .icon {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -119,4 +126,37 @@ if (user !== undefined) {
     flex-wrap: wrap;
     flex-direction: column;
   }
+
+  .expand-on-hover {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-evenly;
+    background-color: var(--c-duskgray);
+    z-index: 99;
+    transform: scaleY(0);
+    transform-origin: top;
+    position: absolute;
+    top: 95%;
+    left: 0px;
+    right: 0px;
+    color: white;
+  }
+
+  .expand-on-hover img {
+    width: 3rem;
+    height: 3rem;
+    margin: 0.5rem;
+  }
+
+  .expand-on-hover h2 {
+    margin: 0.5rem;
+  }
+
+  article:hover .expand-on-hover {
+    transform: scaleY(1);
+    transition: transform 200ms ease-in-out;
+    background-color: var(--c-duskgray);
+  }
 </style>

src/pages/ta-collection.astro

@@ -44,6 +44,13 @@ const description = 'A collection of TAs previously completed be Firq.'
   >
     {featured_data.map((item) => <TaCard {...item} />)}
   </TaSection>
+  <div class="placeholder"></div>
 </Layout>
 
-<style></style>
+<style>
+  .placeholder {
+    visibility: hidden;
+    width: 100%;
+    height: 5rem;
+  }
+</style>

static/assets/data/_featureddata.json

@@ -4,132 +4,170 @@
 		"link": "https://www.youtube.com/watch?v=nYV4jwgpuR0",
 		"image": "db",
 		"date": "2022-07-14",
-		"user": "KOG"
+		"user": "KOG",
+		"ta_servant": "shishou",
+		"turns": "7T"
 	},
 	{
 		"title": "DB 7T",
 		"link": "https://www.youtube.com/watch?v=jKoSw1XM6-c",
 		"image": "db",
 		"date": "2022-07-07",
-		"user": "Requiem"
+		"user": "Requiem",
+		"ta_servant": "shishou",
+		"turns": "7T"
 	},
 	{
 		"title": "Valentines 2023 CQ 5T SC",
 		"link": "https://www.youtube.com/watch?v=AkDFyJ98GDQ",
 		"image": "orion",
 		"date": "2023-02-23",
-		"user": "Requiem"
+		"user": "Requiem",
+		"ta_servant": "shishou",
+		"turns": "5T"
 	},
 	{
 		"title": "Ibuki 3T (Lostbelt 5.5)",
 		"link": "https://www.youtube.com/watch?v=zHGvHC0CUu0",
 		"image": "ibuki",
 		"date": "2022-11-22",
-		"user": "Requiem"
+		"user": "Requiem",
+		"ta_servant": "shishou",
+		"turns": "3T"
 	},
 	{
 		"title": "Kingprotea 1T",
 		"link": "https://www.youtube.com/watch?v=iAhwqIGWsG4",
 		"image": "kingprotea",
 		"date": "2022-09-13",
-		"user": "Requiem"
+		"user": "Requiem",
+		"ta_servant": "shishou",
+		"turns": "1T"
 	},
 	{
 		"title": "Golden Caenis 3T (LB5.2)",
 		"link": "https://www.youtube.com/watch?v=_yZYgdr6XA4",
 		"image": "caenis",
 		"date": "2022-04-22",
-		"user": "Requiem"
+		"user": "Requiem",
+		"ta_servant": "shishou",
+		"turns": "3T"
 	},
 	{
 		"title": "GudaGuda 4 CQ 3T [No DMG CE]",
 		"link": "https://www.youtube.com/watch?v=oCT7ngip82U",
 		"image": "shibata",
 		"date": "2022-04-26",
-		"user": "Requiem"
+		"user": "Requiem",
+		"ta_servant": "shishou",
+		"turns": "3T"
 	},
 	{
 		"title": "Valentines 2023 CQ 4T",
 		"link": "https://www.youtube.com/watch?v=6WyPFYT8h1c",
 		"image": "orion",
 		"date": "2023-02-25",
-		"user": "KOG"
+		"user": "KOG",
+		"ta_servant": "summershishou",
+		"turns": "4T"
 	},
 	{
 		"title": "Ooku Rerun CQ 4T",
 		"link": "https://www.youtube.com/watch?v=EU2THj6GnhQ",
 		"image": "kiyohime",
 		"date": "2022-08-12",
-		"user": "KOG"
+		"user": "KOG",
+		"ta_servant": "summershishou",
+		"turns": "4T"
 	},
 	{
 		"title": "Amazoness 2021 CQ 3T",
 		"link": "https://www.youtube.com/watch?v=l2cmlS9LKSU",
 		"image": "penth",
 		"date": "2022-01-22",
-		"user": "KOG"
+		"user": "KOG",
+		"ta_servant": "shishou",
+		"turns": "3T"
 	},
 	{
 		"title": "Christmas 2021 CQ 4T",
 		"link": "https://www.youtube.com/watch?v=PrJvjo3fvVc",
 		"image": "santagale",
 		"date": "2021-12-20",
-		"user": "KOG"
+		"user": "KOG",
+		"ta_servant": "summershishou",
+		"turns": "4T"
 	},
 	{
 		"title": "GudaGuda 4 CQ 3T",
 		"link": "https://www.youtube.com/watch?v=e9H37cnW160",
 		"image": "shibata",
 		"date": "2021-06-29",
-		"user": "KOG"
+		"user": "KOG",
+		"ta_servant": "shishou",
+		"turns": "3T"
 	},
 	{
 		"title": "GudaGuda 5 CQ 4T",
 		"link": "https://www.youtube.com/watch?v=HmrWnxp8Qz0",
 		"image": "nobunaga",
 		"date": "2022-09-24",
-		"user": "Ray"
+		"user": "Ray",
+		"ta_servant": "jalter",
+		"turns": "4T"
 	},
 	{
 		"title": "GudaGuda 5 CQ 4T",
 		"link": "https://www.youtube.com/watch?v=pcvhCQq5gFE",
 		"image": "nobunaga",
 		"date": "2022-09-23",
-		"user": "Ray"
+		"user": "Ray",
+		"ta_servant": "summerjalter",
+		"turns": "4T"
 	},
 	{
 		"title": "Ibuki 3T (Lostbelt 5.5)",
-		"link": "https://www.youtube.com/watch?v=pcvhCQq5gFE",
+		"link": "https://www.youtube.com/watch?v=4NgfXE1WY5I",
 		"image": "ibuki",
 		"date": "2022-11-26",
-		"user": "Ray"
+		"user": "Ray",
+		"ta_servant": "jalter",
+		"turns": "3T"
 	},
 	{
 		"title": "Douman 3T (Lostbelt 5.5)",
 		"link": "https://www.youtube.com/watch?v=CIoNRC4tDrY",
 		"image": "douman",
 		"date": "2022-11-27",
-		"user": "Ray"
+		"user": "Ray",
+		"ta_servant": "musashi",
+		"turns": "3T"
 	},
 	{
 		"title": "Boxing 3T (Xmas 5)",
 		"link": "https://www.youtube.com/watch?v=0ErT8Qbzuw8",
 		"image": "dioscuri",
 		"date": "2022-12-18",
-		"user": "Ray"
+		"user": "Ray",
+		"ta_servant": "jalter",
+		"turns": "3T"
 	},
 	{
 		"title": "Slapstick Museum CQ 5T",
 		"link": "https://www.youtube.com/watch?v=QtthHB6rk7k",
 		"image": "moriarty",
 		"date": "2023-03-10",
-		"user": "Ray"
+		"user": "Ray",
+		"ta_servant": "jalter",
+		"turns": "5T"
 	},
 	{
 		"title": "Little Big Tengu CQ 4T",
 		"link": "https://www.youtube.com/watch?v=50Adjx4owhg",
 		"image": "taira",
 		"date": "2023-01-29",
-		"user": "Ray"
+		"user": "Ray",
+		"ta_servant": "jalter",
+		"turns": "4T"
 	}
 ]

static/assets/data/_tadata.json

@@ -3,120 +3,160 @@
 		"title": "DB 7T (No Duplicates)",
 		"link": "https://www.youtube.com/watch?v=d1ftVeitR6c",
 		"image": "db",
-		"date": "2022-07-09"
+		"date": "2022-07-09",
+		"ta_servant": "shishou",
+		"turns": "7T"
 	},
 	{
 		"title": "Kingprotea 1T",
 		"link": "https://www.youtube.com/watch?v=m3SATSOfpt4",
 		"image": "kingprotea",
-		"date": "2022-06-21"
+		"date": "2022-06-21",
+		"ta_servant": "shishou",
+		"turns": "1T"
 	},
 	{
 		"title": "Solomon 1T (No NP)",
 		"link": "https://www.youtube.com/watch?v=01Qx4Hs-X4M",
 		"image": "solomon",
-		"date": "2022-06-28"
+		"date": "2022-06-28",
+		"ta_servant": "shishou",
+		"turns": "1T"
 	},
 	{
 		"title": "Ibuki 3T (Lostbelt 5.5)",
 		"link": "https://www.youtube.com/watch?v=AaqRN73dO5k",
 		"image": "ibuki",
-		"date": "2022-11-22"
+		"date": "2022-11-22",
+		"ta_servant": "shishou",
+		"turns": "3T"
 	},
 	{
 		"title": "Boxing 3T (Xmas 5)",
 		"link": "https://www.youtube.com/watch?v=S8OQ7yWldJY",
 		"image": "dioscuri",
-		"date": "2022-12-24"
+		"date": "2022-12-24",
+		"ta_servant": "shishou",
+		"turns": "3T"
 	},
 	{
 		"title": "MHXX 2T (No DMG CE)",
 		"link": "https://www.youtube.com/watch?v=lz6iBZvoDuw",
 		"image": "mhxx",
-		"date": "2023-01-12"
+		"date": "2023-01-12",
+		"ta_servant": "shishou",
+		"turns": "2T"
 	},
 	{
 		"title": "Taira 3T (Lostbelt 5.5)",
 		"link": "https://www.youtube.com/watch?v=YtRvahqFA0Y",
 		"image": "taira",
-		"date": "2022-11-22"
+		"date": "2022-11-22",
+		"ta_servant": "shishou",
+		"turns": "3T"
 	},
 	{
 		"title": "Douman 3T (Lostbelt 5.5)",
 		"link": "https://www.youtube.com/watch?v=6cstr3vTd8Y",
 		"image": "douman",
-		"date": "2022-11-23"
+		"date": "2022-11-23",
+		"ta_servant": "shishou",
+		"turns": "3T"
 	},
 	{
 		"title": "Christmas 2021 Rerun CQ 5T",
 		"link": "https://www.youtube.com/watch?v=cpqhx9dUgTU",
 		"image": "santagale",
-		"date": "2022-10-15"
+		"date": "2022-10-15",
+		"ta_servant": "shishou",
+		"turns": "5T"
 	},
 	{
 		"title": "Summer 4 Rerun CQ 3T",
 		"link": "https://www.youtube.com/watch?v=u72o7PDBtks",
 		"image": "fuuma",
-		"date": "2022-06-04"
+		"date": "2022-06-04",
+		"ta_servant": "shishou",
+		"turns": "3T"
 	},
 	{
 		"title": "Fate/Requiem CQ 3T",
 		"link": "https://www.youtube.com/watch?v=k7vGC4kpEFg",
 		"image": "erice",
-		"date": "2022-05-11"
+		"date": "2022-05-11",
+		"ta_servant": "shishou",
+		"turns": "3T"
 	},
 	{
 		"title": "Kirschtaria 3T (Lostbelt 5)",
 		"link": "https://www.youtube.com/watch?v=aYlyfAzuFw0",
 		"image": "kirschtaria",
-		"date": "2022-04-04"
+		"date": "2022-04-04",
+		"ta_servant": "shishou",
+		"turns": "3T"
 	},
 	{
 		"title": "Aeaean Spring Breeze CQ 3T",
 		"link": "https://www.youtube.com/watch?v=uo3jI9xuVwI",
 		"image": "odysseus",
-		"date": "2022-03-06"
+		"date": "2022-03-06",
+		"ta_servant": "shishou",
+		"turns": "3T"
 	},
 	{
 		"title": "Valentines 2022 CQ 4T",
 		"link": "https://www.youtube.com/watch?v=MOCMXZ17FkU",
 		"image": "sei",
-		"date": "2022-02-09"
+		"date": "2022-02-09",
+		"ta_servant": "shishou",
+		"turns": "4T"
 	},
 	{
 		"title": "Amazoness 2021 CQ 3T",
 		"link": "https://www.youtube.com/watch?v=MU_Hw2KKYRU",
 		"image": "penth",
-		"date": "2022-01-23"
+		"date": "2022-01-23",
+		"ta_servant": "shishou",
+		"turns": "3T"
 	},
 	{
 		"title": "Valentines 2023 CQ 4T",
 		"link": "https://www.youtube.com/watch?v=fwCmEiaocQo",
 		"image": "orion",
-		"date": "2023-02-25"
+		"date": "2023-02-25",
+		"ta_servant": "shishou",
+		"turns": "4T"
 	},
 	{
 		"title": "Slapstick Museum CQ 5T",
 		"link": "https://www.youtube.com/watch?v=fQImgJirFeo",
 		"image": "moriarty",
-		"date": "2023-03-10"
+		"date": "2023-03-10",
+		"ta_servant": "shishou",
+		"turns": "5T"
 	},
 	{
 		"title": "GudaGuda 5 CQ 4T",
 		"link": "https://www.youtube.com/watch?v=3scILqsgobU",
 		"image": "nobunaga",
-		"date": "2022-09-21"
+		"date": "2022-09-21",
+		"ta_servant": "shishou",
+		"turns": "4T"
 	},
 	{
 		"title": "GudaGuda 4 CQ 3T [No DMG CE]",
 		"link": "https://www.youtube.com/watch?v=HY95cWsjC08",
 		"image": "shibata",
-		"date": "2022-04-30"
+		"date": "2022-04-30",
+		"ta_servant": "shishou",
+		"turns": "3T"
 	},
 	{
 		"title": "GudaGuda 4 CQ 3T",
 		"link": "https://www.youtube.com/watch?v=7iO2WQt64-8",
 		"image": "shibata",
-		"date": "2022-04-26"
+		"date": "2022-04-26",
+		"ta_servant": "shishou",
+		"turns": "3T"
 	}
 ]