Firq/fgo-ta-com-website
Firq/fgo-ta-com-website
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 67 Packages Wiki Activity Actions

Redesign Part 2

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

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

116
src/components/listings/eventListingLine.astro Normal file
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>

0
src/components/questListing.astro → src/components/listings/questListingCard.astro
View file

121
src/components/listings/questListingLine.astro Normal file
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>

10
src/content/changes/koyan.json Normal file
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/"
}

10
src/content/changes/skadi.json Normal file
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/"
}

10
src/content/config.ts
View file

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

5
src/content/groups/lostbelt-6.json
View file

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

3
src/content/taInfoData/beast4l.json
View file

@ -2,7 +2,8 @@
"info": {
"title": "Beast IV:L",
"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": [
{

3
src/content/taInfoData/case-files-rerun.json
View file

@ -3,7 +3,8 @@
"title": "Case Files Rerun 2024",
"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.",
"releaseNumber": 1
"releaseNumber": 1,
"type": "quest"
},
"quests": [
{

5
src/content/taInfoData/devilish-bodhisattva.json
View file

@ -1,9 +1,10 @@
{
"info": {
"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",
"releaseNumber": 1
"releaseNumber": 1,
"type": "quest"
},
"quests": [
{

3
src/content/taInfoData/lostbelt-6/albion.json
View file

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

3
src/content/taInfoData/lostbelt-6/cernunnos.json
View file

@ -3,7 +3,8 @@
"title": "Cernunnos",
"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",
"releaseNumber": 2
"releaseNumber": 2,
"type": "quest"
},
"quests": [
{

3
src/content/taInfoData/lostbelt-6/morgan.json
View file

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

15
src/layouts/databaseSection.astro
View file

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

2
src/pages/database/[...slug].astro
View file

@ -3,7 +3,7 @@ import { getCollection } from 'astro:content'
import TaShowcaseLayout from '../../layouts/taShowcaseLayout.astro'
import Layout from '../../layouts/Layout.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'
interface store {

45
src/pages/database/index.astro
View file

@ -1,24 +1,27 @@
---
import { getCollection } from 'astro:content';
import { getCollection } from 'astro:content'
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 Title from '../../components/title.astro';
import Title from '../../components/title.astro'
const description = 'FGO NA TA Database'
const fulldata = await getCollection('taInfoData')
const groups = await getCollection('groups')
const changes = await getCollection('changes')
let combined = fulldata
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(
(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
@ -26,9 +29,31 @@ combined.sort(
currentpage="database"
descriptionOverride={description}
>
<Title maintext='TA DATA&shy;BASE' subtext='A mostly up-to-date list of NA TA runs' fadeout={true}/>
<DatabaseSection title="NA Runs" titlehidden={true}>
{combined.map((quest) => <QuestListing { ...{...quest.data.info, slug: quest.id} } baseurl="database" />)}
<Title
maintext="TA DATA­BASE"
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>
</Layout>

2
src/pages/teslafest/index.astro
View file

@ -1,7 +1,7 @@
---
import { getCollection } from 'astro:content';
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 GenericHero from '../../components/genericHero.astro';
import Title from '../../components/title.astro';