From f0e734b36ec4be9eff9f2e7886289f382e3ef838 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Fri, 6 Jan 2023 04:23:43 -0800 Subject: [PATCH 1/3] Add new roadmap localization file --- public/locales/en/roadmap.json | 44 ++++++++++++++++++++++++++++++++++ public/locales/ja/roadmap.json | 44 ++++++++++++++++++++++++++++++++++ 2 files changed, 88 insertions(+) create mode 100644 public/locales/en/roadmap.json create mode 100644 public/locales/ja/roadmap.json diff --git a/public/locales/en/roadmap.json b/public/locales/en/roadmap.json new file mode 100644 index 00000000..c5482c86 --- /dev/null +++ b/public/locales/en/roadmap.json @@ -0,0 +1,44 @@ +{ + "modals": { + "roadmap": { + "title": "Roadmap" + } + }, + "title": "Roadmap", + "subtitle": "Next update", + "blurb": "I'm aiming for this update to release between late-January and early-February. I'm losing a week to top 2k in Guild Wars and after that I'm back at my full-time job, so progress will be a bit slower.", + "link": { + "intro": "You can see the full roadmap on Github below:", + "title": "granblue.team Roadmap" + }, + "roadmap": { + "item1": { + "title": "Remix teams", + "description": "See a team you want to riff off of? This update will let you remix other teams, which will add a copy to your account to make something new." + }, + "item2": { + "title": "Character mods", + "description": "This update will allow you to add rings, earrings, perpetuity rings and awakenings to your characters." + }, + "item3": { + "title": "Remove from grid", + "description": "This update will allow you to remove characters, summons, or weapons from your grid." + }, + "item4": { + "title": "Transcendence", + "description": "This update will allow you to set which transcendence stage characters or summons in your team are at." + }, + "item5": { + "title": "URL state for team tabs", + "description": "This update will allow you to append /characters, /weapons, /summons to link to individual tabs, and also /all to see everything at once." + }, + "item6": { + "title": "Add R characters", + "description": "I will spend several hours manually inputting R characters, just for you." + }, + "item7": { + "title": "Private and unlisted teams", + "description": "If you just want to save something for yourself, this update will let you change the visibility of teams so only you or people you share the link with can see them." + } + } +} diff --git a/public/locales/ja/roadmap.json b/public/locales/ja/roadmap.json new file mode 100644 index 00000000..d831c112 --- /dev/null +++ b/public/locales/ja/roadmap.json @@ -0,0 +1,44 @@ +{ + "modals": { + "roadmap": { + "title": "ロードマップ" + } + }, + "title": "ロードマップ", + "subtitle": "次回更新予定", + "blurb": "1月下旬〜2月上旬に更新する予定があります。火古戦場に2000位を狙っており、その後は仕事に戻るので開発はちょっとだけ遅くなります。", + "link": { + "intro": "全部のロードマップは以下のGithubリンクで:", + "title": "granblue.teamのロードマップ" + }, + "roadmap": { + "item1": { + "title": "編成をリミックス", + "description": "面白い編成を見出したら、リミックス機能で自分のアカウントにコピーし、アイテムを変えて新らたな編成を作れる" + }, + "item2": { + "title": "キャラクター変更", + "description": "指輪・御耳飾り・覚醒などキャラクターに付けるようになる" + }, + "item3": { + "title": "編成から外す", + "description": "キャラクター・武器・召喚石などを編成から外すようになる" + }, + "item4": { + "title": "限界超越", + "description": "編成にあるキャラクターや召喚石の限界超越のステージを記録するようになる" + }, + "item5": { + "title": "編成タブをURLで直接アクセス", + "description": "編成URLに/characters・/weapons・/summonsを追加したら、そのタブを直接にアクセスできるようになり、/allを追加したら全てのタブを一気に見えるようになる。" + }, + "item6": { + "title": "Rキャラ追加", + "description": "何時間もかかりますが追加します。" + }, + "item7": { + "title": "プライベートや未公開編成", + "description": "自分や友達だけのために編成を作成したいなら、プライベートまたは未公開設定でできる。" + } + } +} From 3595899233d4765ccdb530316db242d49f0db2d3 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Fri, 6 Jan 2023 04:24:35 -0800 Subject: [PATCH 2/3] Add new layout and styles for roadmap modal --- components/RoadmapModal/index.scss | 127 ++++++++++++++++++++++++----- components/RoadmapModal/index.tsx | 76 +++++++++-------- styles/themes.scss | 4 + styles/variables.scss | 6 +- 4 files changed, 161 insertions(+), 52 deletions(-) diff --git a/components/RoadmapModal/index.scss b/components/RoadmapModal/index.scss index 06f83b3e..7fc37b7b 100644 --- a/components/RoadmapModal/index.scss +++ b/components/RoadmapModal/index.scss @@ -1,26 +1,115 @@ -h3.priority { - font-weight: $medium; - font-size: $font-medium; - margin-bottom: $unit; +.Roadmap.Dialog { + max-height: 60vh; + overflow-y: scroll; - &.high { - color: $red; + .top { + display: flex; + flex-direction: column; + gap: $unit; + + h3.priority { + font-weight: $medium; + font-size: $font-large; + + &.in_progress { + color: $yellow; + } + + &.high { + color: $red; + } + + &.mid { + color: $orange-10; + } + + &.low { + color: $blue; + } + } + + p { + margin-bottom: $unit; + } + + .LinkItem { + $diameter: $unit-6x; + border: 1px solid var(--link-item-bg); + border-radius: $card-corner; + + &:hover { + background-color: var(--link-item-bg); + + svg { + fill: var(--link-item-image-color-hover); + } + } + + a { + display: flex; + padding: $unit-2x; + + &:hover { + text-decoration: none; + } + + .Left { + align-items: center; + display: flex; + gap: $unit-2x; + flex-grow: 1; + } + + svg { + fill: var(--link-item-image-color); + width: $diameter; + height: auto; + + &.ShareIcon { + width: $unit-4x; + } + } + } + + h3 { + font-weight: $bold; + max-width: 70%; + line-height: 1.3; + } + } } - &.mid { - color: $orange-10; + .Separator { + background: var(--separator-bg); + border-radius: 2px; + margin: $unit-3x 0; + height: 2px; + } + p { + color: var(--text-secondary); + + font-size: $font-regular; + line-height: 1.3; } - &.low { - color: $blue; - } -} - -.notes { - color: var(--text-primary); - list-style-type: disc; - - li { - margin-bottom: $unit-half; + .notes { + color: var(--text-primary); + list-style-type: none; + + li { + display: flex; + flex-direction: column; + gap: $unit; + margin-bottom: $unit-2x; + + h4 { + font-size: $font-medium; + font-weight: $bold; + } + + p { + font-size: $font-regular; + } + } } } diff --git a/components/RoadmapModal/index.tsx b/components/RoadmapModal/index.tsx index 8f379245..feba1991 100644 --- a/components/RoadmapModal/index.tsx +++ b/components/RoadmapModal/index.tsx @@ -5,13 +5,12 @@ import * as Dialog from '@radix-ui/react-dialog' import CrossIcon from '~public/icons/Cross.svg' import ShareIcon from '~public/icons/Share.svg' -import DiscordIcon from '~public/icons/discord.svg' import GithubIcon from '~public/icons/github.svg' import './index.scss' const RoadmapModal = () => { - const { t } = useTranslation('common') + const { t } = useTranslation('roadmap') return ( @@ -22,13 +21,11 @@ const RoadmapModal = () => { event.preventDefault()} >
- - {t('menu.roadmap')} - + {t('title')} @@ -37,37 +34,52 @@ const RoadmapModal = () => {
-

High priority

+
+

{t('subtitle')}

+

{t('blurb')}

+

{t('link.intro')}

+ +
+
    -
  • URL state for team tabs
  • - More team details (Full Auto, Auto Guard, Clear Time) and - filters +

    {t('roadmap.item1.title')}

    +

    {t('roadmap.item1.description')}

  • - Character mods - Rings, Earrings, Perpetuity Rings, Styles +

    {t('roadmap.item2.title')}

    +

    {t('roadmap.item2.description')}

    +
    • +
  • +

    {t('roadmap.item3.title')}

    +

    {t('roadmap.item3.description')}

    +
    • +
  • +

    {t('roadmap.item4.title')}

    +

    {t('roadmap.item4.description')}

    +
    • +
  • +

    {t('roadmap.item5.title')}

    +

    {t('roadmap.item5.description')}

    +
    • +
  • +

    {t('roadmap.item6.title')}

    +

    {t('roadmap.item6.description')}

    • -
-
-
-

Medium priority

-
    -
  • Dark mode improvements for logged out users
    • -
  • Light Markdown in team details
    • -
  • Transcendence Steps - Eternals and Bahamut
    • -
  • Rearrange items in team
    • -
  • Remove items from team
    • -
-
-
-

Low priority

-
    -
  • Figure out DNS to simplify URLs to just granblue.team
    • -
  • Unify About, Changelog, Roadmap
    • -
  • Add R characters
    • -
  • Add images for weird units like Aquors
    • -
  • Character substitutions
    • -
  • Deeper gbf.wiki integration
 diff --git a/styles/themes.scss b/styles/themes.scss index 42befb43..b4024588 100644 --- a/styles/themes.scss +++ b/styles/themes.scss @@ -11,6 +11,8 @@ --full-auto-text: #{$text--full--auto--light}; + --separator-bg: #{$separator--bg--light}; + // Light - Menus --dialog-bg: #{$dialog--bg--light}; @@ -133,6 +135,8 @@ --full-auto-text: #{$text--full--auto--dark}; + --separator-bg: #{$separator--bg--dark}; + // Dark - Dialogs --dialog-bg: #{$dialog--bg--dark}; diff --git a/styles/variables.scss b/styles/variables.scss index 7a2e41eb..6ab6cf5e 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -73,6 +73,7 @@ $orange-90: #ffebd9; // Colors -- Interface $blue: #275dc5; $red: #ff6161; +$yellow: #c89d39; $error: #d13a3a; // Colors -- Elements @@ -130,6 +131,9 @@ $page--hover--dark: $grey-30; $page--element--bg--light: $grey-70; $page--element--bg--dark: $grey-40; +$separator--bg--light: $grey-90; +$separator--bg--dark: $grey-15; + // Color Definitions: Dialog $dialog--bg--light: $grey-100; $dialog--bg--dark: $grey-25; @@ -250,7 +254,7 @@ $text--primary--color--light: $grey-40; $text--primary--color--dark: $grey-90; $text--secondary--color--light: $grey-60; -$text--secondary--color--dark: $grey-60; +$text--secondary--color--dark: $grey-70; $text--tertiary--color--light: $grey-50; $text--tertiary--color--dark: $grey-50; From ce2c775f36a021f67ce516807b1f3f91551bd2d5 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Fri, 6 Jan 2023 04:24:48 -0800 Subject: [PATCH 3/3] Include roadmap translation in serverSideTranslations --- pages/[username].tsx | 2 +- pages/new/index.tsx | 2 +- pages/p/[party].tsx | 4 ++-- pages/saved.tsx | 2 +- pages/teams.tsx | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/pages/[username].tsx b/pages/[username].tsx index 99a347d7..148f52d4 100644 --- a/pages/[username].tsx +++ b/pages/[username].tsx @@ -391,7 +391,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex meta: meta, raids: raids, sortedRaids: sortedRaids, - ...(await serverSideTranslations(locale, ['common'])), + ...(await serverSideTranslations(locale, ['common', 'roadmap'])), // Will be passed to the page component as props }, } diff --git a/pages/new/index.tsx b/pages/new/index.tsx index ff174d2e..d3f3881b 100644 --- a/pages/new/index.tsx +++ b/pages/new/index.tsx @@ -105,7 +105,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex raids: raids, sortedRaids: sortedRaids, weaponKeys: weaponKeys, - ...(await serverSideTranslations(locale, ['common'])), + ...(await serverSideTranslations(locale, ['common', 'roadmap'])), // Will be passed to the page component as props }, } diff --git a/pages/p/[party].tsx b/pages/p/[party].tsx index bd5b736a..7e1631ca 100644 --- a/pages/p/[party].tsx +++ b/pages/p/[party].tsx @@ -190,9 +190,9 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex sortedRaids: sortedRaids, weaponKeys: weaponKeys, meta: { - element: elementEmoji() + element: elementEmoji(), }, - ...(await serverSideTranslations(locale, ['common'])), + ...(await serverSideTranslations(locale, ['common', 'roadmap'])), // Will be passed to the page component as props }, } diff --git a/pages/saved.tsx b/pages/saved.tsx index 93b7e16b..cf8313e4 100644 --- a/pages/saved.tsx +++ b/pages/saved.tsx @@ -382,7 +382,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex meta: meta, raids: raids, sortedRaids: sortedRaids, - ...(await serverSideTranslations(locale, ['common'])), + ...(await serverSideTranslations(locale, ['common', 'roadmap'])), // Will be passed to the page component as props }, } diff --git a/pages/teams.tsx b/pages/teams.tsx index 41cc17b4..ec84eea4 100644 --- a/pages/teams.tsx +++ b/pages/teams.tsx @@ -393,7 +393,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex meta: meta, raids: raids, sortedRaids: sortedRaids, - ...(await serverSideTranslations(locale, ['common'])), + ...(await serverSideTranslations(locale, ['common', 'roadmap'])), // Will be passed to the page component as props }, }