tournaments translation

2026-08-24 20:16:41 -05:00 · 2020-06-27 12:01:53 +03:00
parent baf00c286f
commit 30b3bb4a6e
6 changed files with 80 additions and 37 deletions
--- a/frontend-react/public/locales/en/translation.json
+++ b/frontend-react/public/locales/en/translation.json
@@ -1468,5 +1468,22 @@
    "What is your activity like on a typical week?": "What is your activity like on a typical week?",
    "What are you looking from a team?": "What are you looking from a team?",
    "Free word": "Free word"
+  },
+  "tournaments": {
+    "Tournament": "Tournament",
+    "Team": "Team",
+    "Player": "Player",
+    "Comp": "Comp",
+    "Map & mode": "Map & mode",
+    "Region": "Region",
+    "All": "All",
+    "Western": "Western",
+    "Japanese": "Japanese",
+    "Apply": "Apply",
+    "Clear filters": "Clear filters",
+    "All tournaments": "All tournaments",
+    "Popular weapons": "Popular weapons",
+    "VICTORY": "VICTORY",
+    "DEFEAT": "DEFEAT"
  }
 }
--- a/frontend-react/src/components/elements/Select.tsx
+++ b/frontend-react/src/components/elements/Select.tsx
@@ -115,7 +115,7 @@ const Select: React.FC<SelectProps> = ({
  }

  return (
-    <Box zIndex={99999999}>
+    <Box>
      {label && <Label required={required}>{label}</Label>}
      <ReactSelect
        className="basic-single"
@@ -173,7 +173,7 @@ const Select: React.FC<SelectProps> = ({
            background: themeColorHexLighter,
            color: "black",
          }),
-          option: (styles, { data, isDisabled, isFocused, isSelected }) => {
+          option: (styles, { isFocused }) => {
            return {
              ...styles,
              backgroundColor: isFocused ? themeColorHexLighter : undefined,
--- a/frontend-react/src/components/tournaments/TournamentCard.tsx
+++ b/frontend-react/src/components/tournaments/TournamentCard.tsx
@@ -6,6 +6,7 @@ import trophy from "../../assets/trophy.png"
 import WeaponImage from "../common/WeaponImage"
 import { Weapon } from "../../types"
 import Flag from "../common/Flag"
+import { useTranslation } from "react-i18next"

 interface TournamentCardProps {
  tournament: {
@@ -26,6 +27,7 @@ const TournamentCard: React.FC<TournamentCardProps> = ({
  tournament,
  styledOnHover,
 }) => {
+  const { t } = useTranslation()
  const { grayWithShade } = useContext(MyThemeContext)
  const a = new Date(parseInt(tournament.date))
  const dateStr = `${a.getDate()} ${
@@ -78,10 +80,10 @@ const TournamentCard: React.FC<TournamentCardProps> = ({
          fontSize="xs"
          mt="1.5em"
        >
-          Popular weapons
+          {t("tournaments;Popular weapons")}
        </Box>
        <Flex flexWrap="wrap">
-          {tournament.popular_weapons.map(weapon => (
+          {tournament.popular_weapons.map((weapon) => (
            <Box key={weapon} mx="0.2em">
              <WeaponImage englishName={weapon as Weapon} size="SMALL" />
            </Box>
--- a/frontend-react/src/components/tournaments/TournamentDetailsPage.tsx
+++ b/frontend-react/src/components/tournaments/TournamentDetailsPage.tsx
@@ -26,6 +26,7 @@ import {
 } from "use-query-params"
 import { stringify } from "querystring"
 import { removeFalsy } from "../../utils/helperFunctions"
+import { useTranslation } from "react-i18next"

 interface TournamentDetailsPageProps {
  id?: string
@@ -55,8 +56,10 @@ const filterMap = {
  stage: StringParam,
 }

-const TournamentDetailsPage: React.FC<RouteComponentProps &
-  TournamentDetailsPageProps> = ({ id }) => {
+const TournamentDetailsPage: React.FC<
+  RouteComponentProps & TournamentDetailsPageProps
+> = ({ id }) => {
+  const { t } = useTranslation()
  const {
    themeColorWithShade,
    grayWithShade,
@@ -104,10 +107,10 @@ const TournamentDetailsPage: React.FC<RouteComponentProps &
      const playerNameUpper = player_name.toUpperCase()
      if (
        round.winning_team_players.some(
-          player => player.toUpperCase() === playerNameUpper
+          (player) => player.toUpperCase() === playerNameUpper
        ) ||
        round.losing_team_players.some(
-          player => player.toUpperCase() === playerNameUpper
+          (player) => player.toUpperCase() === playerNameUpper
        )
      ) {
        return true
@@ -117,10 +120,10 @@ const TournamentDetailsPage: React.FC<RouteComponentProps &
    if (comp) {
      if (
        comp.every(
-          weapon => round.winning_team_weapons.indexOf(weapon as any) !== -1
+          (weapon) => round.winning_team_weapons.indexOf(weapon as any) !== -1
        ) ||
        comp.every(
-          weapon => round.losing_team_weapons.indexOf(weapon as any) !== -1
+          (weapon) => round.losing_team_weapons.indexOf(weapon as any) !== -1
        )
      ) {
        return true
@@ -150,7 +153,7 @@ const TournamentDetailsPage: React.FC<RouteComponentProps &
        }
      >
        <Button outlined icon={FaLongArrowAltLeft}>
-          All tournaments
+          {t("tournaments;All tournaments")}
        </Button>
      </Link>
      <Flex justifyContent="center" mt="1em">
@@ -158,7 +161,7 @@ const TournamentDetailsPage: React.FC<RouteComponentProps &
          <TournamentCard tournament={tournament} />
        </Box>
      </Flex>
-      {tournament.rounds.map(round => {
+      {tournament.rounds.map((round) => {
        return (
          <Box key={`${round.round_name}_${round.game_number}`} mt="1em">
            {round.game_number === 1 && (
@@ -194,7 +197,7 @@ const TournamentDetailsPage: React.FC<RouteComponentProps &
              >
                <Box color={themeColorWithShade}>{round.game_number}.</Box>
                <Avatar src={mapIcons[round.stage]} size="lg" my="5px" />
-                {round.stage}
+                {t("game;" + round.stage)}
                <Icon
                  name={round.mode.toLowerCase() as any}
                  color={themeColorWithShade}
@@ -209,7 +212,7 @@ const TournamentDetailsPage: React.FC<RouteComponentProps &
                  fontSize="md"
                  alignItems="center"
                >
-                  <Box color={grayWithShade}>VICTORY</Box>
+                  <Box color={grayWithShade}>{t("tournaments;VICTORY")}</Box>
                  <Box color={textColor} fontSize="xl">
                    {round.winning_team_name}
                  </Box>
@@ -251,7 +254,7 @@ const TournamentDetailsPage: React.FC<RouteComponentProps &
                    fontSize="md"
                    alignItems="center"
                  >
-                    <Box color={grayWithShade}>DEFEAT</Box>
+                    <Box color={grayWithShade}>{t("tournaments;DEFEAT")}</Box>
                    <Box color={textColor} fontSize="xl">
                      {round.losing_team_name}
                    </Box>
--- a/frontend-react/src/components/tournaments/TournamentFilters.tsx
+++ b/frontend-react/src/components/tournaments/TournamentFilters.tsx
@@ -9,6 +9,7 @@ import MyThemeContext from "../../themeContext"
 import { Weapon } from "../../types"
 import { maps } from "../../utils/lists"
 import { FaFilter } from "react-icons/fa"
+import { useTranslation } from "react-i18next"

 interface TournamentFiltersProps {
  forms: {
@@ -31,40 +32,41 @@ const TournamentFilters: React.FC<TournamentFiltersProps> = ({
  handleClear,
  onSubmit,
 }) => {
+  const { t } = useTranslation()
  const { themeColor } = useContext(MyThemeContext)
  const [show, setShow] = useState(false)
  return (
    <>
      <Button icon={FaFilter} onClick={() => setShow(!show)}>
-        {show ? "Hide filters" : "Show filters"}
+        {show ? t("freeagents;Hide filters") : t("freeagents;Show filters")}
      </Button>
      <Collapse mt={4} isOpen={show}>
        <Grid maxW="500px" gridRowGap="1em" gridTemplateColumns="1fr">
          <Input
-            label="Tournament"
+            label={t("tournaments;Tournament")}
            value={forms.tournament_name ?? ""}
            setValue={(value: string) =>
              handleChange({ tournament_name: value })
            }
          />
          <Input
-            label="Team"
+            label={t("tournaments;Team")}
            value={forms.team_name ?? ""}
            setValue={(value: string) => handleChange({ team_name: value })}
          />
          <Input
-            label="Player"
+            label={t("tournaments;Player")}
            value={forms.player_name ?? ""}
            setValue={(value: string) => handleChange({ player_name: value })}
          />
          <WeaponSelector
-            label="Comp"
+            label={t("tournaments;Comp")}
            value={(forms.comp as Weapon[]) ?? []}
            setValue={(value: Weapon[]) => handleChange({ comp: value })}
            isMulti
          />
          <Select
-            label="Map & mode"
+            label={t("tournaments;Map & mode")}
            isSearchable
            value={
              forms.stage && forms.mode ? `${forms.stage} (${forms.mode})` : ""
@@ -79,17 +81,34 @@ const TournamentFilters: React.FC<TournamentFiltersProps> = ({
            options={maps.reduce(
              (acc: { label: string; value: string }[], cur: string) => [
                ...acc,
-                { label: `${cur} (TW)`, value: `${cur} (TW)` },
-                { label: `${cur} (SZ)`, value: `${cur} (SZ)` },
-                { label: `${cur} (TC)`, value: `${cur} (TC)` },
-                { label: `${cur} (RM)`, value: `${cur} (RM)` },
-                { label: `${cur} (CB)`, value: `${cur} (CB)` },
+                {
+                  label: `${t("game;" + cur)} - ${t("plans;turfWarShort")}`,
+                  value: `${cur} (TW)`,
+                },
+                {
+                  label: `${t("game;" + cur)} - ${t("plans;splatZonesShort")}`,
+                  value: `${cur} (SZ)`,
+                },
+                {
+                  label: `${t("game;" + cur)} - ${t(
+                    "plans;towerControlShort"
+                  )}`,
+                  value: `${cur} (TC)`,
+                },
+                {
+                  label: `${t("game;" + cur)} - ${t("plans;rainMakerShort")}`,
+                  value: `${cur} (RM)`,
+                },
+                {
+                  label: `${t("game;" + cur)} - ${t("plans;clamBlitzShort")}`,
+                  value: `${cur} (CB)`,
+                },
              ],
              []
            )}
          />
          <Box mt="0.5em">
-            <Label>Mode</Label>
+            <Label>{t("tournaments;Region")}</Label>
            <RadioGroup
              value={forms.region ?? "all"}
              defaultValue="0"
@@ -98,21 +117,21 @@ const TournamentFilters: React.FC<TournamentFiltersProps> = ({
              onChange={(e, value: any) => handleChange({ region: value })}
            >
              <Radio variantColor={themeColor} value="all">
-                All
+                {t("tournaments;All")}
              </Radio>
              <Radio variantColor={themeColor} value="western">
-                Western only
+                {t("tournaments;Western")}
              </Radio>
              <Radio variantColor={themeColor} value="jpn">
-                Japanese only
+                {t("tournaments;Japanese")}
              </Radio>
            </RadioGroup>
          </Box>
          <Flex mt="1em">
-            <Button onClick={onSubmit}>Apply</Button>
+            <Button onClick={onSubmit}>{t("tournaments;Apply")}</Button>
            <Box mx="1em">
              <Button outlined onClick={handleClear}>
-                Clear filters
+                {t("tournaments;Clear filters")}
              </Button>
            </Box>
          </Flex>
--- a/frontend-react/src/components/tournaments/TournamentsPage.tsx
+++ b/frontend-react/src/components/tournaments/TournamentsPage.tsx
@@ -18,6 +18,7 @@ import { Box, Grid, Alert, AlertIcon } from "@chakra-ui/core"
 import TournamentFilters from "./TournamentFilters"
 import Pagination from "../common/Pagination"
 import { stringify } from "querystring"
+import { useTranslation } from "react-i18next"

 interface SearchForTournamentsData {
  searchForTournaments: {
@@ -59,6 +60,7 @@ const queryMap = {
 }

 const TournamentsPage: React.FC<RouteComponentProps> = () => {
+  const { t } = useTranslation()
  const [query, setQuery] = useQueryParams(queryMap)
  const [forms, setForms] = useState<SearchForTournamentsVars>({
    page: query.page,
@@ -95,9 +97,9 @@ const TournamentsPage: React.FC<RouteComponentProps> = () => {
  return (
    <>
      <Helmet>
-        <title>Tournament Results | sendou.ink</title>
+        <title>{t("navigation;Tournament Results")} | sendou.ink</title>
      </Helmet>
-      <PageHeader title="Tournament Results" />
+      <PageHeader title={t("navigation;Tournament Results")} />
      <TournamentFilters
        forms={forms}
        handleChange={handleFormChange}
@@ -114,7 +116,7 @@ const TournamentsPage: React.FC<RouteComponentProps> = () => {
            <Pagination
              currentPage={forms.page ?? 1}
              pageCount={data?.searchForTournaments.pageCount ?? 999}
-              onChange={page => {
+              onChange={(page) => {
                setForms({ ...forms, page })
                setQuery({ ...query, page })
              }}
@@ -127,7 +129,7 @@ const TournamentsPage: React.FC<RouteComponentProps> = () => {
                gridTemplateColumns="repeat(auto-fit, minmax(260px, 1fr))"
                mt="1em"
              >
-                {data.searchForTournaments.tournaments.map(tournament => (
+                {data.searchForTournaments.tournaments.map((tournament) => (
                  <Box key={tournament.id}>
                    <Link to={`/tournaments/${tournament.id}${linkSuffix}`}>
                      <TournamentCard tournament={tournament} styledOnHover />
@@ -139,7 +141,7 @@ const TournamentsPage: React.FC<RouteComponentProps> = () => {
                <Pagination
                  currentPage={forms.page ?? 1}
                  pageCount={data.searchForTournaments.pageCount}
-                  onChange={page => {
+                  onChange={(page) => {
                    setForms({ ...forms, page })
                    setQuery({ ...query, page })
                  }}