diff --git a/src/components/taCard.astro b/src/components/taCard.astro index eeba62c..6a69036 100644 --- a/src/components/taCard.astro +++ b/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) {
-
+

{title}

 @@ -37,6 +40,10 @@ if (user !== undefined) { {formatted_date}

+
+ +

{turns}

+
@@ -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); + } diff --git a/src/pages/ta-collection.astro b/src/pages/ta-collection.astro index bae8b1e..4060948 100644 --- a/src/pages/ta-collection.astro +++ b/src/pages/ta-collection.astro @@ -44,6 +44,13 @@ const description = 'A collection of TAs previously completed be Firq.' > {featured_data.map((item) => )} +
- + diff --git a/static/assets/data/_featureddata.json b/static/assets/data/_featureddata.json index d9f2139..90a884f 100644 --- a/static/assets/data/_featureddata.json +++ b/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" } ] diff --git a/static/assets/data/_tadata.json b/static/assets/data/_tadata.json index 08224c6..aaa91fc 100644 --- a/static/assets/data/_tadata.json +++ b/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" } ] diff --git a/static/assets/ta_icons/ta_servants/jalter.webp b/static/assets/ta_icons/ta_servants/jalter.webp new file mode 100644 index 0000000..ad99f30 Binary files /dev/null and b/static/assets/ta_icons/ta_servants/jalter.webp differ diff --git a/static/assets/ta_icons/ta_servants/musashi.webp b/static/assets/ta_icons/ta_servants/musashi.webp new file mode 100644 index 0000000..b1c79b5 Binary files /dev/null and b/static/assets/ta_icons/ta_servants/musashi.webp differ diff --git a/static/assets/ta_icons/ta_servants/shishou.webp b/static/assets/ta_icons/ta_servants/shishou.webp new file mode 100644 index 0000000..94cbc7d Binary files /dev/null and b/static/assets/ta_icons/ta_servants/shishou.webp differ diff --git a/static/assets/ta_icons/ta_servants/summerjalter.webp b/static/assets/ta_icons/ta_servants/summerjalter.webp new file mode 100644 index 0000000..835545c Binary files /dev/null and b/static/assets/ta_icons/ta_servants/summerjalter.webp differ diff --git a/static/assets/ta_icons/ta_servants/summershishou.webp b/static/assets/ta_icons/ta_servants/summershishou.webp new file mode 100644 index 0000000..a14e655 Binary files /dev/null and b/static/assets/ta_icons/ta_servants/summershishou.webp differ