diff --git a/components/AboutPage/index.scss b/components/AboutPage/index.scss index 38d21a98..3d073192 100644 --- a/components/AboutPage/index.scss +++ b/components/AboutPage/index.scss @@ -1,4 +1,85 @@ .About.PageContent { + $width: 520px; + padding-bottom: $unit-12x; + + section { + display: flex; + flex-direction: column; + position: relative; + gap: $unit-2x; + z-index: 5; + + .Hero { + position: absolute; + width: 40vw; + height: 80vh; + right: -18vw; + top: $unit-4x * -1; + z-index: 1; + background-image: linear-gradient( + 90deg, + rgba(245, 245, 245, 1) 5%, + rgba(245, 245, 245, 0.2) 50%, + rgba(245, 245, 245, 0.2) 70%, + rgba(245, 245, 245, 1) 95% + ), + linear-gradient( + rgba(245, 245, 245, 1) 5%, + rgba(245, 245, 245, 0.4) 40%, + rgba(245, 245, 245, 0.4) 78%, + rgba(245, 245, 245, 1) 95% + ), + url('https://prd-game-a-granbluefantasy.akamaized.net/assets_en/img/sp/top/bg/bg_23.jpg'); + + @include breakpoint(tablet) { + right: -14vw; + width: 60vw; + } + + @include breakpoint(phone) { + right: $unit-2x * -1; + width: 80vw; + + &::before { + content: ' '; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 90deg, + rgba(245, 245, 245, 1) 0%, + rgba(245, 245, 245, 0) 50%, + rgba(245, 245, 245, 0) 70%, + rgba(245, 245, 245, 1) 95% + ), + linear-gradient( + rgba(245, 245, 245, 1) 0%, + rgba(245, 245, 245, 0) 40%, + rgba(245, 245, 245, 0) 78%, + rgba(245, 245, 245, 1) 95% + ); + z-index: 3; + } + } + } + + p { + font-size: $font-medium; + max-width: $width; + line-height: 1.35; + z-index: 2; + } + + h2 { + font-weight: $bold; + font-size: $font-medium; + margin: 0; + max-width: $width; + z-index: 2; + } + } .Links { display: grid; gap: $unit; @@ -8,4 +89,8 @@ div.LinkItem { margin-top: $unit-2x; } + + .LinkItem { + max-width: calc($width / 3 * 2); + } } diff --git a/components/AboutPage/index.tsx b/components/AboutPage/index.tsx index 0e3c546b..8519ef6f 100644 --- a/components/AboutPage/index.tsx +++ b/components/AboutPage/index.tsx @@ -2,7 +2,7 @@ import React from 'react' import Link from 'next/link' import { useRouter } from 'next/router' -import { useTranslation } from 'next-i18next' +import { Trans, useTranslation } from 'next-i18next' import ShareIcon from '~public/icons/Share.svg' import DiscordIcon from '~public/icons/discord.svg' @@ -14,42 +14,35 @@ interface Props {} const AboutPage: React.FC = (props: Props) => { const { t: common } = useTranslation('common') + const { t: about } = useTranslation('about') + return (

{common('about.segmented_control.about')}

-

- Granblue.team is a tool to save and share team comps for{' '} - - Granblue Fantasy - - . -

-

- Start adding to a team and a URL will be created for you to share - wherever you like, no account needed. -

-

- However, if you do make an account, you can save any teams you find - for future reference and keep all of your teams together in one place. -

+

+ + Granblue.team is a tool to save and share team compositions for{' '} + + Granblue Fantasy + + , a social RPG from Cygames. + +

+

{about('about.explanation.0')}

+

{about('about.explanation.1')}

+
-

Feedback

-

- This is an evolving project so feedback and suggestions are greatly - appreciated! -

-

- If you have a feature request, would like to report a bug, or are - enjoying the tool and want to say thanks, come hang out in Discord! -

-
+

{about('about.feedback.title')}

+

{about('about.feedback.explanation')}

+

{about('about.feedback.solicit')}

+
= (props: Props) => {
-

Credits

+

{about('about.credits.title')}

- Granblue.team was built by{' '} - - @jedmund - {' '} - with a lot of help from{' '} - - @lalalalinna - {' '} - and{' '} - - @tarngerine - - . + + Granblue.team was built and is maintained by{' '} + + @jedmund + + . +

- Many thanks also go to Disinfect, Slipper, Jif, Bless, 9highwind, and - everyone else in{' '} - - Fireplace - {' '} - that helped with bug testing and feature requests. (P.S. We're - recruiting!) And yoey, but he won't join our crew. + + Many thanks to{' '} + + @lalalalinna + {' '} + and{' '} + + @tarngerine + + , who both provided a lot of help and advice as I was ramping up. + +

+

+ + Many thanks also go to everyone in{' '} + + Fireplace + {' '} + and the granblue-tools Discord for all of their help with with bug + testing, feature requests, and moral support. (P.S. We're + recruiting!) +

-

Contributing

-

- This app is open source and licensed under{' '} - - GNU AGPLv3 - - . Plainly, that means you can download the source, modify it, and - redistribute it if you attribute this project, use the same license, - and keep it open source. You can contribute on Github. -

+

{about('about.contributing.title')}

+ +

{about('about.contributing.explanation')}

+
+

{about('about.license.title')}

+

+ + This app is licensed under{' '} + + GNU AGPLv3 + + . + +

+

{about('about.license.explanation')}

+
+
+

{about('about.copyright.title')}

+

{about('about.copyright.explanation')}

+
) } diff --git a/components/Button/index.scss b/components/Button/index.scss index dd46aa10..c240aaad 100644 --- a/components/Button/index.scss +++ b/components/Button/index.scss @@ -9,6 +9,7 @@ font-weight: $normal; gap: 6px; transition: 0.18s opacity ease-in-out; + user-select: none; &:hover, &.Blended:hover, diff --git a/components/ChangelogUnit/index.scss b/components/ChangelogUnit/index.scss index b79f2c75..6c6a0e8c 100644 --- a/components/ChangelogUnit/index.scss +++ b/components/ChangelogUnit/index.scss @@ -1,7 +1,7 @@ .ChangelogUnit { display: flex; flex-direction: column; - gap: $unit-half; + gap: $unit; img { border-radius: $input-corner; @@ -12,5 +12,6 @@ font-size: $font-small; font-weight: $medium; text-align: center; + line-height: 1.4; } } diff --git a/components/ChangelogUnit/index.tsx b/components/ChangelogUnit/index.tsx index e9786901..98fdb87b 100644 --- a/components/ChangelogUnit/index.tsx +++ b/components/ChangelogUnit/index.tsx @@ -1,10 +1,11 @@ -import React from 'react' +import { useRouter } from 'next/router' +import React, { useEffect, useState } from 'react' +import api from '~utils/api' import './index.scss' interface Props { id: string - name: string type: 'character' | 'summon' | 'weapon' image?: '01' | '02' | '03' | '04' } @@ -17,8 +18,52 @@ const defaultProps = { image: '01', } -const ChangelogUnit = ({ id, type, image, name }: Props) => { - function generateImageUrl() { +const ChangelogUnit = ({ id, type, image }: Props) => { + // Router + const router = useRouter() + const locale = + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + + // State + const [item, setItem] = useState() + + // Hooks + useEffect(() => { + fetch() + }, []) + + async function fetch() { + switch (type) { + case 'character': + const character = await fetchCharacter() + setItem(character.data) + break + + case 'weapon': + const weapon = await fetchWeapon() + setItem(weapon.data) + break + + case 'summon': + const summon = await fetchSummon() + setItem(summon.data) + break + } + } + + async function fetchCharacter() { + return api.endpoints.characters.getOne({ id: id }) + } + + async function fetchWeapon() { + return api.endpoints.weapons.getOne({ id: id }) + } + + async function fetchSummon() { + return api.endpoints.summons.getOne({ id: id }) + } + + const imageUrl = () => { let src = '' switch (type) { @@ -37,9 +82,9 @@ const ChangelogUnit = ({ id, type, image, name }: Props) => { } return ( -
- {name} -

{name}

+
+ {item +

{item ? item.name[locale] : ''}

) } diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 35af54c6..2a9adfe5 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useState } from 'react' import { subscribe, useSnapshot } from 'valtio' -import { subscribeKey } from 'valtio/utils' import { deleteCookie } from 'cookies-next' import { useRouter } from 'next/router' import { Trans, useTranslation } from 'next-i18next' @@ -31,6 +30,7 @@ import ArrowIcon from '~public/icons/Arrow.svg' import LinkIcon from '~public/icons/Link.svg' import MenuIcon from '~public/icons/Menu.svg' import RemixIcon from '~public/icons/Remix.svg' +import PlusIcon from '~public/icons/Add.svg' import SaveIcon from '~public/icons/Save.svg' import './index.scss' @@ -114,19 +114,9 @@ const Header = () => { } // Methods: Actions - function handleNewParty(event: React.MouseEvent, path: string) { + function handleNewTeam(event: React.MouseEvent) { event.preventDefault() - - // Clean state - const resetState = clonedeep(initialAppState) - Object.keys(resetState).forEach((key) => { - appState[key] = resetState[key] - }) - - // Push the root URL - router.push(path) - - // Close right menu + newTeam() closeRightMenu() } @@ -165,6 +155,17 @@ const Header = () => { return false } + function newTeam() { + // Clean state + const resetState = clonedeep(initialAppState) + Object.keys(resetState).forEach((key) => { + appState[key] = resetState[key] + }) + + // Push the root URL + router.push('/new') + } + function remixTeam() { setOriginalName(partySnapshot.name ? partySnapshot.name : t('no_title')) @@ -281,6 +282,20 @@ const Header = () => { ) } + const newButton = () => { + return ( + +