draft translated

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

@@ -1485,5 +1485,13 @@
     "Popular weapons": "Popular weapons",
     "VICTORY": "VICTORY",
     "DEFEAT": "DEFEAT"
+  },
+  "draft": {
+    "draftExplanation": "Draft Cup is a tournament series open for +1 and +2 members. On this page you can browse the leaderboards and detailed match reports.",
+    "View matches": "View matches",
+    "Bracket": "Bracket",
+    "Back to Draft Cup home": "Back to Draft Cup home",
+    "Expand": "Expand",
+    "paintShort": "p"
   }
 }

frontend-react/src/components/plusdraftcup/DraftCupDetails.tsx

@@ -26,6 +26,7 @@ import AbilityIcon from "../builds/AbilityIcon"
 import GearImage from "../builds/GearImage"
 import SplatnetIcon from "../common/SplatnetIcon"
 import { Helmet } from "react-helmet-async"
+import { useTranslation } from "react-i18next"
 
 interface DraftCupDetailsProps {
   id?: string
@@ -81,6 +82,7 @@ const DetailedMapCard: React.FC<DetailedMapCardProps> = ({
   mapDetails,
   gameNumber,
 }) => {
+  const { t } = useTranslation()
   const { themeColorWithShade, grayWithShade, textColor } = useContext(
     MyThemeContext
   )
@@ -108,7 +110,7 @@ const DetailedMapCard: React.FC<DetailedMapCardProps> = ({
       >
         <Box color={themeColorWithShade}>{gameNumber}.</Box>
         <Avatar src={mapIcons[mapDetails.stage]} size="lg" my="5px" />
-        {mapDetails.stage}
+        {t("game;" + mapDetails.stage)}
         <Icon
           name={mapDetails.mode.toLowerCase() as any}
           color={themeColorWithShade}
@@ -134,7 +136,9 @@ const DetailedMapCard: React.FC<DetailedMapCardProps> = ({
               alignItems="center"
             >
               <Box color={grayWithShade} textAlign="center">
-                {index === 0 ? "VICTORY" : "DEFEAT"}
+                {index === 0
+                  ? t("tournaments;VICTORY")
+                  : t("tournaments;DEFEAT")}
               </Box>
               <Box color={themeColorWithShade}>
                 {teamInfo.score === 100 ? "KO" : teamInfo.score}
@@ -144,7 +148,7 @@ const DetailedMapCard: React.FC<DetailedMapCardProps> = ({
               </Box>
             </Flex>
             <Flex flexWrap="wrap" justifyContent="center">
-              {teamInfo.players.map((player, index) => (
+              {teamInfo.players.map((player) => (
                 <Grid
                   key={`${player.discord_user.username}#${player.discord_user.discriminator}`}
                   gridTemplateColumns="repeat(3, 1fr)"
@@ -169,7 +173,8 @@ const DetailedMapCard: React.FC<DetailedMapCardProps> = ({
                     color={grayWithShade}
                     fontWeight={600}
                   >
-                    {player.paint}p
+                    {player.paint}
+                    {t("draft;paintShort")}
                   </Flex>
                   <Flex gridArea="3 / 2 / 4 / 3" justifyContent="center">
                     <WeaponImage englishName={player.weapon} size="SMALL" />
@@ -240,6 +245,7 @@ const CollapsedMapCard: React.FC<CollapsedMapCardProps> = ({
   mapDetails,
   loading,
 }) => {
+  const { t } = useTranslation()
   const { grayWithShade } = useContext(MyThemeContext)
   const winnerTeamName = mapDetails[0].winners.team_name
   const loserTeamName = mapDetails[0].losers.team_name
@@ -288,7 +294,7 @@ const CollapsedMapCard: React.FC<CollapsedMapCardProps> = ({
         </React.Fragment>
       ))}
       <Button onClick={() => expand()} loading={loading}>
-        Expand
+        {t("draft;Expand")}
       </Button>
     </Flex>
   )
@@ -297,6 +303,7 @@ const CollapsedMapCard: React.FC<CollapsedMapCardProps> = ({
 const DraftCupDetails: React.FC<RouteComponentProps & DraftCupDetailsProps> = ({
   id,
 }) => {
+  const { t } = useTranslation()
   const { themeColorWithShade, grayWithShade } = useContext(MyThemeContext)
   const idParts = id!.split("-")
   const { data, error, loading } = useQuery<
@@ -330,7 +337,7 @@ const DraftCupDetails: React.FC<RouteComponentProps & DraftCupDetailsProps> = ({
       <Box mb="1em">
         <Link to="/draft">
           <Button outlined icon={FaLongArrowAltLeft}>
-            Back to Draft Cup home
+            {t("draft;Back to Draft Cup home")}
           </Button>
         </Link>
       </Box>
@@ -338,7 +345,7 @@ const DraftCupDetails: React.FC<RouteComponentProps & DraftCupDetailsProps> = ({
       <Box mt="1em">
         <a href={tournament.bracket_url}>
           <Button icon={FaExternalLinkAlt} outlined>
-            Bracket
+            {t("draft;Bracket")}
           </Button>
         </a>
       </Box>

frontend-react/src/components/plusdraftcup/DraftCupPage.tsx

@@ -13,8 +13,10 @@ import { Helmet } from "react-helmet-async"
 import DraftTournamentCards from "./DraftTournamentCards"
 import { Box } from "@chakra-ui/core"
 import MyThemeContext from "../../themeContext"
+import { useTranslation } from "react-i18next"
 
 const DraftCupPage: React.FC<RouteComponentProps> = () => {
+  const { t } = useTranslation()
   const { grayWithShade } = useContext(MyThemeContext)
   const { data, error, loading } = useQuery<PlusDraftCupsData>(PLUS_DRAFT_CUPS)
 
@@ -24,13 +26,10 @@ const DraftCupPage: React.FC<RouteComponentProps> = () => {
   return (
     <>
       <Helmet>
-        <title>Draft Cup Home | sendou.ink</title>
+        <title>{t("navigation;Draft Cup")} | sendou.ink</title>
       </Helmet>
-      <PageHeader title="Plus Server Draft Cups" />
-      <Box color={grayWithShade}>
-        Draft Cup is a tournament series open for +1 and +2 members. On this
-        page you can browse the leaderboards and detailed match reports.
-      </Box>
+      <PageHeader title={t("navigation;Draft Cup")} />
+      <Box color={grayWithShade}>{t("draft;draftExplanation")}</Box>
 
       <DraftTournamentCards tournaments={data!.plusDraftCups.tournaments} />
       <Box mt="1em">

frontend-react/src/components/plusdraftcup/DraftLeaderboard.tsx

@@ -14,7 +14,6 @@ import MyThemeContext from "../../themeContext"
 import UserAvatar from "../common/UserAvatar"
 import { Link } from "@reach/router"
 import { medalEmoji } from "../../assets/imageImports"
-import { ordinal_suffix_of } from "../../utils/helperFunctions"
 import useBreakPoints from "../../hooks/useBreakPoints"
 
 interface LeaderboardPlayer {
@@ -83,12 +82,7 @@ const DraftLeaderboard: React.FC<DraftLeaderboardProps> = ({
                 alignItems="center"
                 ml="0.5em"
               >
-                {(print || i === 0) && (
-                  <>
-                    {placement}
-                    {ordinal_suffix_of(placement)}
-                  </>
-                )}
+                {(print || i === 0) && <>{placement}</>}
               </Flex>
 
               <Link to={`/u/${player.discord_user.discord_id}`}>

frontend-react/src/components/plusdraftcup/DraftTournamentCards.tsx

@@ -6,6 +6,7 @@ import { months } from "../../utils/lists"
 import { Link } from "@reach/router"
 import { medalEmoji } from "../../assets/imageImports"
 import Button from "../elements/Button"
+import { useTranslation } from "react-i18next"
 
 interface DraftTournamentCardsProps {
   tournaments: {
@@ -55,11 +56,8 @@ export const DraftTournamentCard: React.FC<DraftTournamentCardProps> = ({
   tournament,
   link,
 }) => {
+  const { t, i18n } = useTranslation()
   const { grayWithShade, themeColorHexLighter } = useContext(MyThemeContext)
-  const a = new Date(parseInt(tournament.date))
-  const dateStr = `${a.getDate()} ${
-    months[a.getMonth() + 1]
-  } ${a.getFullYear()}`
 
   const MedalRow: React.FC<MedalRowProps> = ({
     players,
@@ -119,8 +117,13 @@ export const DraftTournamentCard: React.FC<DraftTournamentCardProps> = ({
         fontSize="xs"
         mt="0.5em"
         textAlign="center"
+        textTransform="capitalize"
       >
-        {dateStr}
+        {new Date(parseInt(tournament.date)).toLocaleString(i18n.language, {
+          month: "long",
+          day: "numeric",
+          year: "numeric",
+        })}
       </Box>
       <MedalRow
         players={tournament.top_3_discord_users[0]}
@@ -139,7 +142,7 @@ export const DraftTournamentCard: React.FC<DraftTournamentCardProps> = ({
       {link && (
         <Box mt="2em">
           <Link to={link}>
-            <Button outlined>View matches</Button>
+            <Button outlined>{t("draft;View matches")}</Button>
           </Link>
         </Box>
       )}

frontend-react/src/components/root/SideNavContent.tsx

@@ -131,7 +131,7 @@ const languages = [
   { code: "nl", name: "Nederlands" },
   { code: "pt-BR", name: "Português" },
   { code: "fi", name: "Suomi" },
-  { code: "se", name: "Svenska" },
+  { code: "sv", name: "Svenska" },
   { code: "el", name: "Ελληνικά" },
   { code: "ru", name: "Русский" },
   { code: "ja", name: "日本語" },

frontend-react/src/components/xsearch/Top500BrowserPage.tsx

@@ -14,7 +14,6 @@ import {
 import useBreakPoints from "../../hooks/useBreakPoints"
 import MyThemeContext from "../../themeContext"
 import { Weapon } from "../../types"
-import { ordinal_suffix_of } from "../../utils/helperFunctions"
 import { modesShort, months } from "../../utils/lists"
 import Error from "../common/Error"
 import Loading from "../common/Loading"
@@ -168,10 +167,7 @@ const Top500BrowserPage: React.FC<RouteComponentProps> = () => {
                       </Flex>
                     </Td>
                     <Td>{placement.x_power}</Td>
-                    <Td>
-                      {placement.rank}
-                      {ordinal_suffix_of(placement.rank)}
-                    </Td>
+                    <Td>{placement.rank}</Td>
                     <Td>
                       <Icon
                         name={modesShort[placement.mode] as any}

frontend-react/src/graphql/queries/plusDraftCups.ts

@@ -22,6 +22,7 @@ export interface PlusDraftCupsData {
           discord_id: string
           discriminator: string
           twitter_name?: string
+          avatar?: string
         }
         first: number
         second: number
@@ -56,6 +57,7 @@ export const PLUS_DRAFT_CUPS: DocumentNode = gql`
             discord_id
             discriminator
             twitter_name
+            avatar
           }
           first
           second

frontend-react/src/utils/helperFunctions.ts

@@ -3,21 +3,6 @@ export function choose(choices: any[]) {
   return choices[index]
 }
 
-export function ordinal_suffix_of(i: number) {
-  var j = i % 10,
-    k = i % 100
-  if (j === 1 && k !== 11) {
-    return "st"
-  }
-  if (j === 2 && k !== 12) {
-    return "nd"
-  }
-  if (j === 3 && k !== 13) {
-    return "rd"
-  }
-  return "th"
-}
-
 export function importAll(r: __WebpackModuleApi.RequireContext) {
   const images: any = {}
   r.keys().forEach((item) => {