Redesign Part 2

This commit is contained in:
Firq 2024-07-15 14:39:52 +02:00
parent f1bb9b80ca
commit 49fd7ffdff
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
18 changed files with 332 additions and 28 deletions

View file

@ -1,7 +1,7 @@
{ {
"name": "fgo-ta-com-website", "name": "fgo-ta-com-website",
"type": "module", "type": "module",
"version": "0.2.2-pre.2", "version": "0.2.2-pre.3",
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",
"start": "astro dev", "start": "astro dev",

View file

@ -0,0 +1,116 @@
---
export interface Props {
title: string
releaseDate: Date
shortdescription: string
link: string
}
const options_date: Intl.DateTimeFormatOptions = {
year: 'numeric',
month: 'long',
day: '2-digit',
}
const { shortdescription, releaseDate, title, link } = Astro.props
const render_date = releaseDate.toLocaleDateString('en-GB', options_date)
---
<a href={link} target="_blank" rel="noopener noreferrer">
<div class="circle"></div>
<article>
<h2>{title}</h2>
<h3>{render_date}</h3>
<p>{shortdescription}</p>
</article>
</a>
<style>
.circle {
display: none;
}
a {
align-items: center;
justify-content: center;
display: flex;
text-decoration: none;
height: fit-content;
margin: 0px 0.5rem;
width: 100%;
}
p {
color: white;
text-align: left;
font-size: 1em;
margin: 0px 0.5em;
}
article > h2 {
margin: 0px 0.5rem;
color: var(--c-darkpurple);
font-size: 1.2rem;
line-height: normal;
text-decoration: none;
}
article > h3 {
margin: 0px 0.5rem;
color: white;
font-size: 1rem;
line-height: normal;
text-decoration: none;
}
article {
display: flex;
flex: 1;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
align-content: center;
justify-content: center;
background-color: var(--c-duskgray);
padding: 10px;
text-align: center;
transition: transform var(--speed) var(--ease);
min-height: 100%;
border-radius: 1.25rem;
border-style: solid;
border-width: 2px;
border-color: var(--c-darkergray);
}
a:hover > article {
transform: scaleY(102.5%) scaleX(101%);
transition: transform var(--speed) var(--ease);
}
@media (min-width: 900px) {
.circle {
margin: 1rem 0.5rem 1rem 0.5rem;
position: relative;
display: flex;
visibility: visible;
height: 1.5rem;
width: 1.5rem;
border-radius: 40%;
background-color: var(--c-darkpurple);
transition: transform var(--speed) var(--ease);
}
a:hover > .circle {
height: 1.75rem;
width: 1.75rem;
translate: -0.125rem;
margin-right: 0.825rem;
}
a:hover article {
border-color: var(--c-darkpurple);
}
article {
align-items: flex-start;
align-content: flex-start;
margin-left: 0.5rem;
}
}
</style>

View file

@ -0,0 +1,121 @@
---
export interface Props {
baseurl: string
slug: string
title: string
releaseDate: Date
shortdescription: string
}
const options_date: Intl.DateTimeFormatOptions = {
year: 'numeric',
month: 'long',
day: '2-digit',
}
const { shortdescription, releaseDate, slug, title, baseurl } = Astro.props
const url = `/${baseurl}/${slug}`
const render_date = releaseDate.toLocaleDateString(
'en-GB',
options_date
)
---
<a href={url} rel="noopener noreferrer">
<div class="circle"></div>
<article>
<h2>{title}</h2>
<h3>{render_date}</h3>
<p>{shortdescription}</p>
</article>
</a>
<style>
.circle {
display: none;
}
a {
align-items: center;
justify-content: center;
display: flex;
text-decoration: none;
height: auto;
margin: 0.5rem;
width: 100%;
}
p {
color: white;
text-align: left;
font-size: 1.1em;
margin: 0.5em;
}
article > h2 {
margin: 0.3rem 0.5rem;
color: var(--c-darkpurple);
font-size: 1.5rem;
line-height: normal;
text-decoration: none;
}
article > h3 {
margin: 0.2em 0.5rem;
color: white;
font-size: 1rem;
line-height: normal;
text-decoration: none;
}
article {
display: flex;
flex: 1;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
align-content: center;
justify-content: center;
background-color: var(--c-darkergray);
padding: 10px;
text-align: center;
transition: transform var(--speed) var(--ease);
min-height: 100%;
border-radius: 1.25rem;
}
a:hover > article {
transform: scaleY(102.5%) scaleX(101%);
transition: transform var(--speed) var(--ease);
}
@media (min-width: 900px) {
.circle {
margin: 1rem 0.5rem 1rem 0.5rem;
position: relative;
display: flex;
visibility: visible;
height: 1.5rem;
width: 1.5rem;
border-radius: 40%;
background-color: var(--c-darkpurple);
transition: transform var(--speed) var(--ease);
}
a:hover > .circle {
height: 1.75rem;
width: 1.75rem;
translate: -0.125rem;
margin-right: 0.825rem;
}
a:hover article {
border-color: var(--c-darkpurple);
}
article {
border-style: solid;
border-width: 2px;
border-color: var(--c-darkergray);
align-items: flex-start;
align-content: flex-start;
margin-left: 0.5rem;
}
}
</style>

View file

@ -0,0 +1,10 @@
{
"info": {
"title": "Koyanskaya of Light",
"releaseDate": "2023-07-03",
"shortdescription": "Release of Koyanskaya of Light during 6th Anniversary of the game",
"releaseNumber": 1,
"type": "event"
},
"link": "https://apps.atlasacademy.io/db/NA/servant/314/"
}

View file

@ -0,0 +1,10 @@
{
"info": {
"title": "Scathach-Skadi",
"releaseDate": "2020-07-06",
"shortdescription": "Release of Scathach-Skadi during 3rd Anniversary of the game",
"releaseNumber": 1,
"type": "event"
},
"link": "https://apps.atlasacademy.io/db/NA/servant/215/"
}

View file

@ -23,6 +23,7 @@ const info = z.object({
releaseDate: z.string().transform((str) => new Date(str)), releaseDate: z.string().transform((str) => new Date(str)),
shortdescription: z.string(), shortdescription: z.string(),
releaseNumber: z.number().default(1), releaseNumber: z.number().default(1),
type: z.enum(["quest", "event", "group"]).default("quest")
}) })
// Combined ta data collection schema // Combined ta data collection schema
@ -39,8 +40,17 @@ const groupDescription = defineCollection({
schema: z.object({ info: info }), schema: z.object({ info: info }),
}) })
const changes = defineCollection({
type: 'data',
schema: z.object({
info: info,
link: z.string().url()
}),
})
export const collections = { export const collections = {
taInfoData: taData, taInfoData: taData,
teslafest: taData, teslafest: taData,
groups: groupDescription, groups: groupDescription,
changes: changes,
} }

View file

@ -1,8 +1,9 @@
{ {
"info": { "info": {
"title": "Lostbelt 6", "title": "Lostbelt 6",
"releaseDate": "2023-07-10", "releaseDate": "2023-06-06",
"shortdescription": "Lostbelt 6", "shortdescription": "Lostbelt 6",
"releaseNumber": 1 "releaseNumber": 1,
"type": "group"
} }
} }

View file

@ -2,7 +2,8 @@
"info": { "info": {
"title": "Beast IV:L", "title": "Beast IV:L",
"releaseDate": "2023-12-26", "releaseDate": "2023-12-26",
"shortdescription": "An interesting conclusion to Tunguska to say the least" "shortdescription": "An interesting conclusion to Tunguska to say the least",
"type": "quest"
}, },
"quests": [ "quests": [
{ {

View file

@ -3,7 +3,8 @@
"title": "Case Files Rerun 2024", "title": "Case Files Rerun 2024",
"releaseDate": "2024-01-10", "releaseDate": "2024-01-10",
"shortdescription": "The rerun of the collaboration event with the Case Files franchise - and the return of old challenges as well as a new challenge quest.", "shortdescription": "The rerun of the collaboration event with the Case Files franchise - and the return of old challenges as well as a new challenge quest.",
"releaseNumber": 1 "releaseNumber": 1,
"type": "quest"
}, },
"quests": [ "quests": [
{ {

View file

@ -1,9 +1,10 @@
{ {
"info": { "info": {
"title": "Devilish Bodhisattva", "title": "Devilish Bodhisattva",
"releaseDate": "2022-06-21", "releaseDate": "2019-04-23",
"shortdescription": "One of the most infamous fights in FGO, Full Power Beast III:R", "shortdescription": "One of the most infamous fights in FGO, Full Power Beast III:R",
"releaseNumber": 1 "releaseNumber": 1,
"type": "quest"
}, },
"quests": [ "quests": [
{ {

View file

@ -3,7 +3,8 @@
"title": "Albion", "title": "Albion",
"releaseDate": "2023-07-10", "releaseDate": "2023-07-10",
"shortdescription": "Albion shows up with a new mechanic, but will it be enough?", "shortdescription": "Albion shows up with a new mechanic, but will it be enough?",
"releaseNumber": 1 "releaseNumber": 1,
"type": "quest"
}, },
"quests": [ "quests": [
{ {

View file

@ -3,7 +3,8 @@
"title": "Cernunnos", "title": "Cernunnos",
"releaseDate": "2023-07-10", "releaseDate": "2023-07-10",
"shortdescription": "One of FGOs most notorious boss fights due to up to 100% special defense, strong DoT damage and powerful field effects", "shortdescription": "One of FGOs most notorious boss fights due to up to 100% special defense, strong DoT damage and powerful field effects",
"releaseNumber": 2 "releaseNumber": 2,
"type": "quest"
}, },
"quests": [ "quests": [
{ {

View file

@ -3,7 +3,8 @@
"title": "Queen Morgan", "title": "Queen Morgan",
"releaseDate": "2023-06-20", "releaseDate": "2023-06-20",
"shortdescription": "The fight against the Lostbelt 6 Queen as the conclusion of LB 6 Part 2", "shortdescription": "The fight against the Lostbelt 6 Queen as the conclusion of LB 6 Part 2",
"releaseNumber": 1 "releaseNumber": 1,
"type": "quest"
}, },
"quests": [ "quests": [
{ {

View file

@ -2,10 +2,11 @@
export interface Props { export interface Props {
title: string title: string
titlehidden?: boolean titlehidden?: boolean
displayLine?: boolean
} }
const { title, titlehidden, displayLine } = Astro.props
const { title, titlehidden } = Astro.props
const display = titlehidden ? "display: none" : "" const display = titlehidden ? "display: none" : ""
const line = displayLine ? "flex" : "none"
--- ---
<section> <section>
@ -17,7 +18,7 @@ const display = titlehidden ? "display: none" : ""
</div> </div>
</section> </section>
<style> <style define:vars={{ line }}>
section { section {
padding-left: 0.25em; padding-left: 0.25em;
padding-right: 0.25em; padding-right: 0.25em;
@ -106,10 +107,14 @@ const display = titlehidden ? "display: none" : ""
padding-bottom: unset; padding-bottom: unset;
} }
.drop { .drop {
display: none; display: var(--line);
margin-left: 2rem;
} }
.line { .line {
display: none; display: var(--line);
margin-left: 2.6rem;
height: calc(100% + 4rem);
translate: unset;
} }
h1 { h1 {
margin-left: 15rem; margin-left: 15rem;

View file

@ -3,7 +3,7 @@ import { getCollection } from 'astro:content'
import TaShowcaseLayout from '../../layouts/taShowcaseLayout.astro' import TaShowcaseLayout from '../../layouts/taShowcaseLayout.astro'
import Layout from '../../layouts/Layout.astro' import Layout from '../../layouts/Layout.astro'
import DatabaseSection from '../../layouts/databaseSection.astro' import DatabaseSection from '../../layouts/databaseSection.astro'
import QuestListing from '../../components/questListing.astro' import QuestListing from '../../components/listings/questListingCard.astro'
import SmallTitle from '../../components/smallTitle.astro' import SmallTitle from '../../components/smallTitle.astro'
interface store { interface store {

View file

@ -1,24 +1,27 @@
--- ---
import { getCollection } from 'astro:content'; import { getCollection } from 'astro:content'
import Layout from '../../layouts/Layout.astro' import Layout from '../../layouts/Layout.astro'
import QuestListing from '../../components/questListing.astro' import QuestListing from '../../components/listings/questListingLine.astro'
import EventListing from '../../components/listings/eventListingLine.astro'
import DatabaseSection from '../../layouts/databaseSection.astro' import DatabaseSection from '../../layouts/databaseSection.astro'
import Title from '../../components/title.astro'; import Title from '../../components/title.astro'
const description = 'FGO NA TA Database' const description = 'FGO NA TA Database'
const fulldata = await getCollection('taInfoData') const fulldata = await getCollection('taInfoData')
const groups = await getCollection('groups') const groups = await getCollection('groups')
const changes = await getCollection('changes')
let combined = fulldata let combined = fulldata
for (const group of groups) { for (const group of groups) {
combined = combined.filter(data => !data.id.startsWith(group.id)) combined = combined.filter((data) => !data.id.startsWith(group.id))
} }
combined = combined.concat(groups as any) combined = combined.concat(groups as any).concat(changes as any)
combined.sort( combined.sort(
(a, b) => b.data.info.releaseDate.valueOf() - a.data.info.releaseDate.valueOf() || b.data.info.releaseNumber - a.data.info.releaseNumber (a, b) =>
b.data.info.releaseDate.valueOf() - a.data.info.releaseDate.valueOf() ||
b.data.info.releaseNumber - a.data.info.releaseNumber
) )
--- ---
<Layout <Layout
@ -26,9 +29,31 @@ combined.sort(
currentpage="database" currentpage="database"
descriptionOverride={description} descriptionOverride={description}
> >
<Title maintext='TA DATA&shy;BASE' subtext='A mostly up-to-date list of NA TA runs' fadeout={true}/> <Title
<DatabaseSection title="NA Runs" titlehidden={true}> maintext="TA DATA­BASE"
{combined.map((quest) => <QuestListing { ...{...quest.data.info, slug: quest.id} } baseurl="database" />)} subtext="A mostly up-to-date list of NA TA runs"
fadeout={true}
/>
<DatabaseSection title="NA Runs" titlehidden={true} displayLine={true}>
{
combined.map((quest) => {
if (['quest', 'group'].includes(quest.data.info.type)) {
return (
<QuestListing
{...{ ...quest.data.info, slug: quest.id }}
baseurl="database"
/>
)
} else {
return (
<EventListing
{...{ ...quest.data.info, slug: quest.id }}
link={(quest.data as any).link}
/>
)
}
})
}
</DatabaseSection> </DatabaseSection>
</Layout> </Layout>

View file

@ -1,7 +1,7 @@
--- ---
import { getCollection } from 'astro:content'; import { getCollection } from 'astro:content';
import Layout from '../../layouts/Layout.astro' import Layout from '../../layouts/Layout.astro'
import QuestListing from '../../components/questListing.astro' import QuestListing from '../../components/listings/questListingCard.astro'
import DatabaseSection from '../../layouts/databaseSection.astro' import DatabaseSection from '../../layouts/databaseSection.astro'
import GenericHero from '../../components/genericHero.astro'; import GenericHero from '../../components/genericHero.astro';
import Title from '../../components/title.astro'; import Title from '../../components/title.astro';