more team page demo

frontend-react/src/components/team/TeamPage.tsx

@@ -5,6 +5,8 @@ import { Helmet } from "react-helmet-async"
 import Chart from "./Chart"
 import TeamPlayer from "./TeamPlayer"
 import LogoHeader from "./LogoHeader"
+import USAChart from "./USAChart"
+import Markdown from "../elements/Markdown"
 
 const TeamPage: React.FC<RouteComponentProps> = () => {
   /*const { data, error, loading } = useQuery<
@@ -27,15 +29,35 @@ const TeamPage: React.FC<RouteComponentProps> = () => {
   const team = data.searchForTeam
   const user = userData.user*/
 
+  const bio = `# Bio!
+
+  It is identical to the one you have in your profile
+  
+  # Tournament results
+  
+  🥇 Tournament  
+  🥉 Tournament  
+  🥇 Tournament
+  
+  # You can put whatever you want here
+  
+  :rainmaker:  
+  `
+
   return (
     <>
       <Helmet>
         <title>Scoze Gaming | sendou.ink</title>
       </Helmet>
       <Chart countries={["fi", "fr", "nl"]} />
+      {/* <USAChart states={["Wisconsin", "Texas", "California", "Florida"]} />*/}
       <LogoHeader name="Scoze Gaming" />
+      <Box my="1.5em">
+        <Markdown value={bio} />
+      </Box>
       <TeamPlayer
         username="Sendou"
+        discordId="79237403620945920"
         avatar="https://cdn.discordapp.com/avatars/79237403620945920/a22c9557975494f859242aaf9b317058."
         weapons={[
           "Tenta Brella",
@@ -49,12 +71,14 @@ const TeamPage: React.FC<RouteComponentProps> = () => {
       <Box my="4em">
         <TeamPlayer
           username="Brian"
+          discordId="79237403620945920"
           avatar="https://cdn.discordapp.com/avatars/81154649993785344/6632c59857ad4266f61eabc62d917ef6."
           weapons={[
             "Splatterscope",
             "Heavy Splatling Remix",
             "Explosher",
             "Sploosh-o-matic 7",
+            "Bamboozler 14 Mk I",
           ]}
           role="Backline"
           country="nl"
@@ -63,6 +87,7 @@ const TeamPage: React.FC<RouteComponentProps> = () => {
       <Box my="4em">
         <TeamPlayer
           username="kurisu"
+          discordId="601212946420334635"
           avatar="https://cdn.discordapp.com/avatars/601212946420334635/7125efcf758514841c93e6398f17de3a."
           weapons={[
             "Kensa Splattershot",
@@ -76,6 +101,7 @@ const TeamPage: React.FC<RouteComponentProps> = () => {
       <Box my="4em">
         <TeamPlayer
           username="SkoXay"
+          discordId="427319047785545759"
           avatar="https://cdn.discordapp.com/avatars/427319047785545759/a_e371e275e604e31b155c7f66e3cbce48."
           weapons={["L-3 Nozzlenose", "L-3 Nozzlenose D"]}
           role="Frontline"

frontend-react/src/components/team/TeamPlayer.tsx

@@ -5,9 +5,12 @@ import MyThemeContext from "../../themeContext"
 import WeaponImage from "../common/WeaponImage"
 import { Weapon, CountryCode } from "../../types"
 import Flag from "../common/Flag"
+import useBreakPoints from "../../hooks/useBreakPoints"
+import { Link } from "@reach/router"
 
 interface TeamPlayerProps {
   username: string
+  discordId: string
   avatar?: string
   weapons?: Weapon[]
   role?: string
@@ -16,12 +19,14 @@ interface TeamPlayerProps {
 
 const TeamPlayer: React.FC<TeamPlayerProps> = ({
   username,
+  discordId,
   avatar,
   weapons,
   role,
   country,
 }) => {
-  const { themeColorWithShade, grayWithShade } = useContext(MyThemeContext)
+  const { themeColorWithShade } = useContext(MyThemeContext)
+  const isSmall = useBreakPoints(850)
   return (
     <>
       <Flex>
@@ -50,10 +55,16 @@ const TeamPlayer: React.FC<TeamPlayerProps> = ({
           justifyContent="space-between"
           alignItems="flex-end"
         >
-          <Box ml="0.5em" fontSize="1.7em" fontWeight="bold">
-            {username} {country && <Flag code={country} size="32" />}
+          <Box
+            ml="0.5em"
+            fontSize="1.7em"
+            fontWeight="bold"
+            whiteSpace="nowrap"
+          >
+            <Link to={`/u/${discordId}`}> {username}</Link>
+            {country && <Flag code={country} size="32" />}
           </Box>
-          {weapons && weapons.length > 0 && (
+          {weapons && !isSmall && (
             <Flex mt="0.2rem">
               {weapons.map((wpn) => (
                 <Box m="0.4em" key={wpn}>
@@ -74,6 +85,15 @@ const TeamPlayer: React.FC<TeamPlayerProps> = ({
       >
         {role}
       </Box>
+      {weapons && isSmall && (
+        <Flex mt="0.2rem" justifyContent="space-between">
+          {weapons.map((wpn) => (
+            <Box m="0.4em" key={wpn}>
+              <WeaponImage englishName={wpn} size="SMALL" />
+            </Box>
+          ))}
+        </Flex>
+      )}
     </>
   )
 }

frontend-react/src/components/team/USAChart.tsx

@@ -0,0 +1,44 @@
+import React, { useContext } from "react"
+import { ComposableMap, Geographies, Geography } from "react-simple-maps"
+import { Box } from "@chakra-ui/core"
+import MyThemeContext from "../../themeContext"
+
+interface USAChartProps {
+  states: string[]
+}
+
+const USAChart: React.FC<USAChartProps> = ({ states }) => {
+  const { bgColor, themeColorHex } = useContext(MyThemeContext)
+  return (
+    <Box w="75%" mx="auto">
+      <ComposableMap projection="geoAlbersUsa">
+        <Geographies geography="https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json">
+          {({ geographies }) => (
+            <>
+              {geographies.map((geo) => {
+                console.log("geo", geo)
+                return (
+                  <Geography
+                    key={geo.rsmKey}
+                    stroke={themeColorHex}
+                    geography={geo}
+                    fill={
+                      states.includes(geo.properties.name)
+                        ? themeColorHex
+                        : bgColor
+                    }
+                  />
+                )
+              })}
+              {geographies.map((geo) => {
+                return <g key={geo.rsmKey + "-name"} />
+              })}
+            </>
+          )}
+        </Geographies>
+      </ComposableMap>
+    </Box>
+  )
+}
+
+export default USAChart