add bio

frontend-react/src/components/elements/Emoji.tsx

@@ -3,6 +3,18 @@ import WeaponImage from "../common/WeaponImage"
 import { weaponCodes, abilityCodes, gearCodes } from "../../utils/lists"
 import AbilityIcon from "../builds/AbilityIcon"
 import GearImage from "../builds/GearImage"
+import sz from "../../assets/sz.png"
+import tc from "../../assets/tc.png"
+import rm from "../../assets/rm.png"
+import cb from "../../assets/cb.png"
+import { Image } from "@chakra-ui/core"
+
+const modeCodes: Record<string, string> = {
+  sz,
+  tc,
+  rm,
+  cb,
+} as const
 
 interface EmojiProps {
   value: string
@@ -21,6 +33,10 @@ const Emoji: React.FC<EmojiProps> = (props) => {
   const gearName = gearCodes[value]
   if (!!gearName) return <GearImage englishName={gearName} mini />
 
+  const mode = modeCodes[value]
+  if (!!mode)
+    return <Image src={mode} display="inline-block" w="32px" h="32px" />
+
   return <>{props.value}</>
 }
 

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

@@ -14,7 +14,7 @@ const Logo: React.FC<LogoProps> = ({ mobile = false }) => {
         as="span"
         display="inline-block"
         transform="translateY(-7px)"
-        fontSize="30px"
+        fontSize={mobile ? "25px" : "30px"}
         fontFamily="'Pacifico', cursive"
         transition="1.1s"
       >
@@ -25,7 +25,7 @@ const Logo: React.FC<LogoProps> = ({ mobile = false }) => {
         as="span"
         display="inline-block"
         transform="translateY(7px)"
-        fontSize="30px"
+        fontSize={mobile ? "25px" : "30px"}
         fontFamily="'Pacifico', cursive"
         transition="1.1s"
       >

frontend-react/src/components/user/MarkdownInput.tsx

@@ -9,12 +9,14 @@ interface MarkdownInputProps {
   value: string
   setValue: (value: string) => void
   label: string
+  limit?: number
 }
 
 const MarkdownInput: React.FC<MarkdownInputProps> = ({
   value,
   setValue,
   label,
+  limit,
 }) => {
   const [preview, setPreview] = useState(false)
   return (
@@ -30,6 +32,7 @@ const MarkdownInput: React.FC<MarkdownInputProps> = ({
           setValue={setValue}
           label={label}
           height="150px"
+          limit={limit}
         />
       )}
       <Box mt="0.5em">

frontend-react/src/components/user/ProfileModal.tsx

@@ -16,7 +16,6 @@ import { useContext } from "react"
 import MyThemeContext from "../../themeContext"
 import { useEffect } from "react"
 import MarkdownInput from "./MarkdownInput"
-import SubHeader from "../common/SubHeader"
 
 interface ProfileModalProps {
   closeModal: () => void
@@ -51,7 +50,7 @@ const ProfileModal: React.FC<ProfileModalProps> = ({
     } else if (profile.custom_url && profile.custom_url.length < 2) {
       setError("Custom URL has to be over 2 characters long")
     } else if (profile.custom_url && profile.custom_url.length > 32) {
-      setError("Custom URL has to be under 32 characters long")
+      setError("Custom URL can be at most 32 characters long")
     } else if (profile.custom_url && !isNaN(profile.custom_url as any)) {
       setError("Custom URL has to contain at least one letter")
     } else if (

frontend-react/src/components/user/UserPage.tsx

@@ -2,13 +2,15 @@ import React, { useContext } from "react"
 import { RouteComponentProps, Redirect } from "@reach/router"
 import { useQuery } from "@apollo/react-hooks"
 
-import { SEARCH_FOR_USER } from "../../graphql/queries/searchForUser"
+import {
+  SEARCH_FOR_USER,
+  SearchForUserData,
+  SearchForUserVars,
+} from "../../graphql/queries/searchForUser"
 import { USER } from "../../graphql/queries/user"
 import Loading from "../common/Loading"
 import Error from "../common/Error"
 import {
-  SearchForUserData,
-  SearchForUserVars,
   UserData,
   SearchForBuildsData,
   SearchForBuildsVars,
@@ -27,6 +29,9 @@ import MyThemeContext from "../../themeContext"
 import { PLAYER_INFO } from "../../graphql/queries/playerInfo"
 import XRankTab from "./XRankTab"
 import { weapons } from "../../utils/lists"
+import Alert from "../elements/Alert"
+import Markdown from "../elements/Markdown"
+import SubHeader from "../common/SubHeader"
 
 interface Tab {
   id: number
@@ -124,7 +129,11 @@ const UserPage: React.FC<RouteComponentProps & UserPageProps> = ({ id }) => {
       title: "X Rank Top 500",
       content: (
         <TabPanel key={2}>
-          <p>to do</p>
+          <Alert status="info">
+            If you have reached Top 500 in a finished X Rank season you can have
+            it displayed here! Just contact Sendou#0043 on Discord with your
+            in-game nick.
+          </Alert>
         </TabPanel>
       ),
     })
@@ -146,9 +155,15 @@ const UserPage: React.FC<RouteComponentProps & UserPageProps> = ({ id }) => {
           <WeaponPool weapons={user.weapons} />
         </Box>
       )}
+      {user.bio && (
+        <Box my="1em">
+          <SubHeader>Bio</SubHeader>
+          <Markdown value={user.bio} />
+        </Box>
+      )}
       <Tabs isFitted variant="line" mt="2em" variantColor={themeColor}>
         <TabList mb="1em">
-          {tabs.map(tabObj => (
+          {tabs.map((tabObj) => (
             <Tab key={tabObj.id} color={textColor}>
               <Box
                 as={tabObj.icon}
@@ -160,7 +175,7 @@ const UserPage: React.FC<RouteComponentProps & UserPageProps> = ({ id }) => {
             </Tab>
           ))}
         </TabList>
-        <TabPanels>{tabs.map(tabObj => tabObj.content)}</TabPanels>
+        <TabPanels>{tabs.map((tabObj) => tabObj.content)}</TabPanels>
       </Tabs>
     </>
   )

frontend-react/src/graphql/mutations/updateUser.ts

@@ -7,6 +7,7 @@ export const UPDATE_USER: DocumentNode = gql`
     $stick_sens: Float
     $weapons: [String!]
     $custom_url: String
+    $bio: String
   ) {
     updateUser(
       country: $country
@@ -14,6 +15,7 @@ export const UPDATE_USER: DocumentNode = gql`
       stick_sens: $stick_sens
       weapons: $weapons
       custom_url: $custom_url
+      bio: $bio
     )
   }
 `

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

@@ -1,4 +1,14 @@
 import { gql, DocumentNode } from "apollo-boost"
+import { User } from "../../types"
+
+export interface SearchForUserData {
+  searchForUser?: User
+}
+
+export interface SearchForUserVars {
+  discord_id?: string
+  custom_url?: string
+}
 
 export const SEARCH_FOR_USER: DocumentNode = gql`
   query searchForUser($discord_id: String, $custom_url: String) {
@@ -13,6 +23,7 @@ export const SEARCH_FOR_USER: DocumentNode = gql`
       weapons
       top500
       custom_url
+      bio
       sens {
         stick
         motion

frontend-react/src/types.ts

@@ -79,6 +79,7 @@ export interface User {
   weapons?: Weapon[]
   top500: boolean
   custom_url?: string
+  bio?: string
   sens?: {
     stick: number
     motion?: number
@@ -216,15 +217,6 @@ export interface UserData {
   user?: UserLean
 }
 
-export interface SearchForUserData {
-  searchForUser?: User
-}
-
-export interface SearchForUserVars {
-  discord_id?: string
-  custom_url?: string
-}
-
 export interface SearchForBuildsData {
   searchForBuilds: Build[]
 }

graphql-schemas/detailedtournament.js

@@ -294,7 +294,6 @@ const resolvers = {
       return { leaderboards, tournaments }
     },
     searchForDraftCup: async (root, args) => {
-      console.log("args.name", args.name)
       const tournament = await DetailedTournament.findOne({
         name: { $regex: new RegExp(args.name, "i") },
       }).populate("top_3_discord_users")

graphql-schemas/user.js

@@ -188,6 +188,12 @@ const resolvers = {
         }
       }
 
+      if (args.bio && args.bio.length > 1000000) {
+        throw new UserInputError("bio too long", {
+          invalidArgs: args,
+        })
+      }
+
       const user = ctx.user
 
       if (args.custom_url) {