tournament cards

react-ui/src/assets/imageImports.js

@@ -123,5 +123,9 @@ export const modeIcons = {
   "Splat Zones": szIcon,
   "Tower Control": tcIcon,
   Rainmaker: rmIcon,
-  "Clam Blitz": cbIcon
+  "Clam Blitz": cbIcon,
+  SZ: szIcon,
+  TC: tcIcon,
+  RM: rmIcon,
+  CB: cbIcon
 }

react-ui/src/components/root/Routes.js

@@ -10,6 +10,9 @@ const XLeaderboard = lazy(() => import("../xleaderboard/XLeaderboard"))
 const PlayerXRankStats = lazy(() => import("../xsearch/PlayerXRankStats"))
 const XTrends = lazy(() => import("../xtrends/XTrends"))
 const Links = lazy(() => import("../links/Links"))
+const TournamentDetailsPage = lazy(() =>
+  import("../tournament/TournamentDetailsPage")
+)
 
 const Routes = () => {
   return (
@@ -39,6 +42,9 @@ const Routes = () => {
         <Route path="/trends">
           <XTrends />
         </Route>
+        <Route path="/tournaments/:id">
+          <TournamentDetailsPage />
+        </Route>
       </Switch>
     </Suspense>
   )

react-ui/src/components/tournament/TournamentCard.js

@@ -0,0 +1,51 @@
+import React from "react"
+import { Card, Flag, Header } from "semantic-ui-react"
+import { wpnSmall } from "../../assets/imageImports"
+import weaponDict from "../../utils/english_internal.json"
+import { months } from "../../utils/lists"
+
+const TournamentCard = ({ tournament, centered = false }) => {
+  const a = new Date(parseInt(tournament["date"]))
+  const dateStr = `${a.getDate()} ${months[a.getMonth()]} ${a.getFullYear()}`
+  return (
+    <Card raised centered={centered}>
+      <Card.Content>
+        <Card.Header>
+          {tournament["name"]}
+          {tournament["jpn"] && <Flag name="jp" />}
+        </Card.Header>
+        <Card.Meta>{dateStr}</Card.Meta>
+        {tournament.hasOwnProperty("bracket") && (
+          <Card.Description>
+            <a href={tournament["bracket"]}>Bracket</a>
+          </Card.Description>
+        )}
+        <Card.Description>
+          <span role="img" aria-label="trophy">
+            🏆
+          </span>{" "}
+          <b>{tournament["winning_team_name"]}</b>
+        </Card.Description>
+        <Card.Description>
+          {" "}
+          {/*TODO: add link to profile if unique id*/}
+          {tournament["winning_team_players"].map(player => {
+            return <span key={player}>{player} </span>
+          })}
+        </Card.Description>
+      </Card.Content>
+      <Card.Content>
+        <Card.Description>
+          <Header as="h5" color="grey">
+            Popular weapons
+          </Header>
+        </Card.Description>
+        {tournament["popular_weapons"].map(weapon => (
+          <img key={weapon} src={wpnSmall[weaponDict[weapon]]} alt={weapon} />
+        ))}
+      </Card.Content>
+    </Card>
+  )
+}
+
+export default TournamentCard

react-ui/src/components/tournament/TournamentDetailsPage.js

@@ -0,0 +1,55 @@
+import React from "react"
+import Loading from "../common/Loading"
+import Error from "../common/Error"
+import { useQuery } from "@apollo/react-hooks"
+import { Redirect, useParams } from "react-router-dom"
+import { searchForTournamentById } from "../../graphql/queries/searchForTournamentById"
+import TournamentCard from "./TournamentCard"
+import { Divider, Header, Card, Image } from "semantic-ui-react"
+
+import { modeIcons, mapIcons } from "../../assets/imageImports"
+
+const TournamentDetailsPage = () => {
+  const { id } = useParams()
+  const { data, error, loading } = useQuery(searchForTournamentById, {
+    variables: { id }
+  })
+
+  if (loading) return <Loading />
+  if (error) return <Error errorMessage={error.message} />
+  console.log("data", data)
+  return (
+    <>
+      <TournamentCard tournament={data["searchForTournamentById"]} centered />
+      {data["searchForTournamentById"]["rounds"].map(round => {
+        return (
+          <span key={`${round.round_name}_${round.game_number}`}>
+            {round["game_number"] === 1 && (
+              <Divider horizontal>
+                <Header as="h4">{round.round_name}</Header>
+              </Divider>
+            )}
+            <Card.Group centered>
+              <Card style={{ width: "175px" }}>
+                <Image src={mapIcons[round.stage]} />
+
+                <Card.Content textAlign="center">
+                  <Card.Header>{round.game_number}</Card.Header>
+                  <Divider />
+                  <Image
+                    src={modeIcons[round.mode]}
+                    alt={modeIcons[round.mode]}
+                    size="mini"
+                  />
+                  <Card.Description>{round.stage}</Card.Description>
+                </Card.Content>
+              </Card>
+            </Card.Group>
+          </span>
+        )
+      })}
+    </>
+  )
+}
+
+export default TournamentDetailsPage

react-ui/src/graphql/queries/searchForTournamentById.js

@@ -0,0 +1,35 @@
+import { gql } from "apollo-boost"
+
+export const searchForTournamentById = gql`
+  query searchForTournamentById($id: String!) {
+    searchForTournamentById(id: $id) {
+      name
+      jpn
+      google_sheet_url
+      date
+      popular_weapons
+      winning_team_name
+      winning_team_players
+      winning_team_unique_ids
+      rounds {
+        stage
+        mode
+        round_name
+        round_number
+        game_number
+        winning_team_name
+        winning_team_players
+        winning_team_unique_ids
+        winning_team_weapons
+        winning_team_main_abilities
+        winning_team_sub_abilities
+        losing_team_name
+        losing_team_players
+        losing_team_unique_ids
+        losing_team_weapons
+        losing_team_main_abilities
+        losing_team_sub_abilities
+      }
+    }
+  }
+`

schemas/tournament.js

@@ -8,6 +8,7 @@ const typeDef = gql`
   }
   type Tournament {
     name: String!
+    bracket_url: String
     "True if the tournament was a Japanese one"
     jpn: Boolean!
     "Link to the Google Sheet containing ganbawoomy's data"