Firq/firq-dev-website
Firq/firq-dev-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 69 Packages Wiki Activity Actions

Added servant and turns to TA collection

Browse source
This commit is contained in:
Firq 2023-03-16 17:25:45 +01:00
parent 65032859a0
commit 7b194c844e
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
9 changed files with 172 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/components/taCard.astro
View file

@ -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>

9
src/pages/ta-collection.astro
View file

@ -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>

78
static/assets/data/_featureddata.json
View file

@ -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"
}
]

80
static/assets/data/_tadata.json
View file

@ -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"
}
]

BIN
static/assets/ta_icons/ta_servants/jalter.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
static/assets/ta_icons/ta_servants/musashi.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
static/assets/ta_icons/ta_servants/shishou.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/assets/ta_icons/ta_servants/summerjalter.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
static/assets/ta_icons/ta_servants/summershishou.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB