Translate new roadmap

components/RoadmapPage/index.scss

@@ -1,4 +1,5 @@
 .Roadmap.PageContent {
+  padding-bottom: $unit-12x;
   h3.priority {
     font-weight: $medium;
     font-size: $font-large;
@@ -83,6 +84,9 @@
   ul {
     color: var(--text-primary);
     list-style-type: none;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: $unit-3x;
 
     li {
       display: flex;

components/RoadmapPage/index.tsx

@@ -9,17 +9,18 @@ import GithubIcon from '~public/icons/github.svg'
 
 import './index.scss'
 
-interface Props {}
+const ROADMAP_ITEMS = 6
 
-const RoadmapPage: React.FC<Props> = (props: Props) => {
+const RoadmapPage = () => {
   const { t: common } = useTranslation('common')
-  const { t: roadmap } = useTranslation('roadmap')
+  const { t: about } = useTranslation('about')
+
   return (
     <div className="Roadmap PageContent">
       <h1>{common('about.segmented_control.roadmap')}</h1>
       <section className="notes">
-        <p>{roadmap('blurb')}</p>
+        <p>{about('roadmap.blurb')}</p>
-        <p>{roadmap('link.intro')}</p>
+        <p>{about('roadmap.link.intro')}</p>
         <div className="LinkItem">
           <Link href="https://github.com/users/jedmund/projects/1/views/3">
             <a
@@ -29,7 +30,7 @@ const RoadmapPage: React.FC<Props> = (props: Props) => {
             >
               <div className="Left">
                 <GithubIcon />
-                <h3>{roadmap('link.title')}</h3>
+                <h3>{about('roadmap.link.title')}</h3>
               </div>
               <ShareIcon className="ShareIcon" />
             </a>
@@ -38,32 +39,14 @@ const RoadmapPage: React.FC<Props> = (props: Props) => {
       </section>
 
       <section className="features">
-        <h3 className="priority in_progress">{roadmap('subtitle')}</h3>
+        <h3 className="priority in_progress">{about('roadmap.subtitle')}</h3>
         <ul>
+          {[...Array(ROADMAP_ITEMS)].map((e, i) => (
             <li>
-            <h4>{roadmap('roadmap.item1.title')}</h4>
+              <h4>{about(`roadmap.items.${i}.title`)}</h4>
-            <p>{roadmap('roadmap.item1.description')}</p>
+              <p>{about(`roadmap.items.${i}.description`)}</p>
-          </li>
-          <li>
-            <h4>{roadmap('roadmap.item2.title')}</h4>
-            <p>{roadmap('roadmap.item2.description')}</p>
-          </li>
-          <li>
-            <h4>{roadmap('roadmap.item3.title')}</h4>
-            <p>{roadmap('roadmap.item3.description')}</p>
-          </li>
-          <li>
-            <h4>{roadmap('roadmap.item4.title')}</h4>
-            <p>{roadmap('roadmap.item4.description')}</p>
-          </li>
-          <li>
-            <h4>{roadmap('roadmap.item5.title')}</h4>
-            <p>{roadmap('roadmap.item5.description')}</p>
-          </li>
-          <li>
-            <h4>{roadmap('roadmap.item6.title')}</h4>
-            <p>{roadmap('roadmap.item6.description')}</p>
             </li>
+          ))}
         </ul>
       </section>
     </div>

public/locales/en/about.json

@@ -12,13 +12,6 @@
     },
     "button": "Learn more"
   },
-  "title": "Roadmap",
-  "subtitle": "Next update",
-  "blurb": "The next major update is planned to come out in late-March to early-April, before the next Unite and Fight. I want to try to do some other things for a bit since I haven't been in a great place mentally, so development might be slower.",
-  "link": {
-    "intro": "You can see the full roadmap on Github below:",
-    "title": "granblue.team Roadmap"
-  },
   "about": {
     "subtitle": "Granblue.team is a tool to save and share team compositions for <2>Granblue Fantasy</2>, a social RPG from Cygames.",
     "explanation": [
@@ -51,33 +44,37 @@
     }
   },
   "roadmap": {
-    "item1": {
+    "subtitle": "Next update",
+    "blurb": "The next major update is planned to come out in late-March to early-April, before the next Unite and Fight. I want to try to do some other things for a bit since I haven't been in a great place mentally, so development might be slower.",
+    "link": {
+      "intro": "You can see the full roadmap on Github below:",
+      "title": "granblue.team Roadmap"
+    },
+    "items": [
+      {
         "title": "Account promotion",
         "description": "Users that have created teams without an account will be able to create an account and retain access to all of their teams"
       },
-    "item2": {
+      {
         "title": "Better filters",
         "description": "You'll be able to filter by team parameters like Full Auto or how many button clicks, and also filter out teams with no name, teams from anonymous users, and so on"
       },
-    "item3": {
+      {
         "title": "Private and Unlisted teams",
         "description": "If you just want to make a team for your own memo or to share with your crew and no one else, this update is for you"
       },
-    "item4": {
+      {
-      "title": "Markdown in team descriptions",
-      "description": "If you're writing a lot of text in the description box, this update will give you tools to format it better"
-    },
-    "item5": {
         "title": "Mention items",
         "description": "This update will allow you to mention individual items, like @Ixaba or @Charlotta (Grand), to give more context or suggest substitutions in your team descriptions."
       },
-    "item6": {
+      {
+        "title": "Markdown in team descriptions",
+        "description": "If you're writing a lot of text in the description box, this update will give you tools to format it better"
+      },
+      {
         "title": "Embed tweets in team descriptions",
         "description": "Similar to embedding Youtube videos, this update will allow you to paste the link to a tweet and have it automatically embed in the description"
-    },
+      }
-    "item7": {
+    ]
-      "title": "",
-      "description": ""
-    }
   }
 }

public/locales/ja/about.json

@@ -12,13 +12,6 @@
     },
     "button": "詳細をみる"
   },
-  "title": "ロードマップ",
-  "subtitle": "次回更新予定",
-  "blurb": "1月下旬〜2月上旬に更新する予定があります。火古戦場に2000位を狙っており、その後は仕事に戻るので開発はちょっとだけ遅くなります。",
-  "link": {
-    "intro": "全部のロードマップは以下のGithubリンクで:",
-    "title": "granblue.teamのロードマップ"
-  },
   "about": {
     "subtitle": "Granblue.teamは<2>グランブルーファンタジー</2>の編成を作成・保存・共有するサイトです。",
     "explanation": [
@@ -51,33 +44,37 @@
     }
   },
   "roadmap": {
-    "item1": {
+    "subtitle": "次回更新予定",
-      "title": "編成をリミックス",
+    "blurb": "次の古戦場の開場前3月下旬〜4月上旬に更新する予定があります。一生懸命頑張りましたのでちょっと休憩が取りたくて、マグナフェスもあるかもしれないので開発はゆっくりと進むと思います。",
-      "description": "面白い編成を見出したら、リミックス機能で自分のアカウントにコピーし、アイテムを変えて新らたな編成を作れる"
+    "link": {
+      "intro": "全部のロードマップは以下のGithubリンクで:",
+      "title": "granblue.teamのロードマップ"
     },
-    "item2": {
+    "items": [
-      "title": "キャラクター変更",
+      {
-      "description": "指輪・御耳飾り・覚醒などキャラクターに付けるようになる"
+        "title": "アカウント昇進",
+        "description": "アカウントを登録せずに編成を作成した方が登場すると作った編成はアカウントに登録します。"
       },
-    "item3": {
+      {
-      "title": "編成から外す",
+        "title": "フィルター強化",
-      "description": "キャラクター・武器・召喚石などを編成から外すようになる"
+        "description": "フルオート、押し数などでフィルターをできるようになり、無題無名の編成を見せないように設定できるようになる。"
       },
-    "item4": {
+      {
-      "title": "限界超越",
+        "title": "プライベート、または非掲載編成",
-      "description": "編成にあるキャラクターや召喚石の限界超越のステージを記録するようになる"
+        "description": "自分だけのメモのために編成を作りたかったり、綺空団飲みとシェアした買ったりするならこの機能でできるようになる。"
       },
-    "item5": {
+      {
-      "title": "編成タブをURLで直接アクセス",
+        "title": "様々なアイテムをメンション",
-      "description": "編成URLに/characters・/weapons・/summonsを追加したら、そのタブを直接にアクセスできるようになり、/allを追加したら全てのタブを一気に見えるようになる。"
+        "description": "@イクサバ、@シャルロッテ（リミテッドver）のようにメンションをすると、代理をおすすめしたり作戦について語ったりすることができるようになる。"
       },
-    "item6": {
+      {
-      "title": "Rキャラ追加",
+        "title": "編成詳細にMarkdown入力",
-      "description": "何時間もかかりますが追加します。"
+        "description": "詳細ボックスに作戦など多めのテキストを入力しようとすればMarkdownでより簡単にフォーマッティングできるようになる。"
       },
-    "item7": {
+      {
-      "title": "プライベートや未公開編成",
+        "title": "詳細ボックスにツイート表示",
-      "description": "自分や友達だけのために編成を作成したいなら、プライベートまたは未公開設定でできる。"
+        "description": "ツイートのURLを詳細ボックスに貼ると、ツイートは編成の下に表示するようになる。"
-    }
+      }
+    ]
   }
 }