closes #124

frontend-react/public/locales/en/translation.json

@@ -1188,6 +1188,7 @@
     "Top 500": "Top 500",
     "Top 500 Tier Lists": "Top 500 Tier Lists",
     "Leaderboards": "Leaderboards",
+    "X Rank Leaderboards": "X Rank Leaderboards",
     "Plus Server": "Plus Server",
     "Profile": "Profile",
     "Log out": "Log out",
@@ -1538,7 +1539,7 @@
     "trendsExplanation": "Here you can find X Rank Top 500 usage tier lists. For example for a weapon to be in the X tier it needs at least 30 placements in that mode that month."
   },
   "xleaderboards": {
-    "PEAK_XP": "X Power - all weapons",
+    "PEAK_XP": "X Power (all weapons)",
     "UNIQUE_WEAPONS_COUNT": "Top 500 placements with different weapons",
     "FOUR_MODE_PEAK_AVERAGE": "4 mode peak X Power average",
     "PLACEMENTS_COUNT": "Top 500 placements",

frontend-react/src/components/xleaderboards/XLeaderboardsPage.tsx

@@ -1,6 +1,7 @@
 import { Box } from "@chakra-ui/core";
 import { RouteComponentProps } from "@reach/router";
 import React, { useState } from "react";
+import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import { XRankLeaderboardType } from "../../generated/graphql";
 import { Weapon } from "../../types";
@@ -26,7 +27,7 @@ const Leaderboard = ({ type }: { type: string }) => {
 const selectOptions = [
   ...[
     {
-      label: "X Power - All weapons",
+      label: "X Power (all weapons)",
       value: "PEAK_XP",
     },
     {
@@ -44,23 +45,35 @@ const selectOptions = [
   ],
   ...weapons
     .filter((wpn) => !wpn.includes("Hero") && !wpn.includes("Octo"))
-    .map((wpn) => ({ label: "X Power - " + wpn, value: wpn })),
+    .map((wpn) => ({ label: `X Power (${wpn})`, value: wpn })),
 ] as const;
 
 const XLeaderboardsPage: React.FC<RouteComponentProps> = () => {
   const { t } = useTranslation();
   const [value, setValue] = useState("PEAK_XP");
+
+  const leaderboardNameLocalized = weapons.includes(value as Weapon)
+    ? t(`xsearch;X Power`) + " (" + t(`game;${value}`) + ")"
+    : t(`xleaderboards;${value}`);
+
   return (
     <>
-      <PageHeader title="X Leaderboards" />
+      <Helmet>
+        <title>
+          {t("navigation;X Rank Leaderboards")} - {leaderboardNameLocalized} -
+          sendou.ink
+        </title>
+      </Helmet>
+      <PageHeader title={t("navigation;X Rank Leaderboards")} />
       <Box my={10}>
         <Select
-          options={selectOptions}
-          value={
-            weapons.includes(value as Weapon)
-              ? t(`xsearch;X Power`) + " - " + t(`game;${value}`)
-              : t(`xleaderboards;${value}`)
-          }
+          options={selectOptions.map(({ value, label }) => ({
+            value,
+            label: weapons.includes(value as Weapon)
+              ? t(`xsearch;X Power`) + " (" + t(`game;${value}`) + ")"
+              : t(`xleaderboards;${value}`),
+          }))}
+          value={leaderboardNameLocalized}
           setValue={setValue}
           isSearchable
         />