x rank tab progress

This commit is contained in:
Sendou 2020-01-23 01:43:41 +02:00
parent 8d8ea5617b
commit 62a11ddd41
13 changed files with 305 additions and 51 deletions

View File

@ -0,0 +1,46 @@
import React from "react"
const customIcons = {
//sz.svg
sz: {
path: (
<path
fill="currentColor"
d="M29.2 37.2C1.8 57 1.6 57.2 3.1 58c.7.5 4.1 1.4 7.6 2.1 3.5.7 6.3 1.5 6.3 1.8 0 .3-3.4 3.1-7.5 6.1-4.1 3-7.3 5.9-7.1 6.5.1.5 2 1.3 4.2 1.8 2.1.5 5.6 1.3 7.7 1.8l3.8 1-7.8 6C6 88.4 2.4 91.5 2.2 92c-.2.5 1.2 1.1 3 1.4 1.8.2 13.9 2.3 26.8 4.5s29.6 5.1 37.1 6.3l13.5 2.2 14.6-10.5c8.1-5.7 17.8-12.6 21.7-15.2 3.9-2.6 7.1-5.2 7.1-5.6 0-.5-3.8-1.7-8.5-2.7-4.7-1-8.4-2.2-8.3-2.5.2-.4 4.1-3.5 8.7-6.9 4.6-3.4 7.9-6.5 7.5-6.9-.5-.5-4.2-1.4-8.1-2-4-.7-7.3-1.6-7.3-1.9.1-.4 3.6-3.2 8-6.2s8-5.8 8-6.2c0-.9-3.9-1.6-43.5-8.3-18.1-3-33.8-5.7-34.8-5.9-1-.3-8.2 4.2-18.5 11.6zm51.4.3c15.3 2.5 27.9 4.7 28.1 4.9.5.5-11 8.6-12.2 8.6-.5 0-11.3-1.8-24-4-12.6-2.2-23.9-4-25-4-1.1 0-6.2 2.9-11.3 6.5-7.8 5.5-9.7 6.4-12.2 5.8-1.7-.3-3-.8-3-1.2.1-1 29.2-21.1 30.6-21.1.7 0 13.7 2 29 4.5zm-9.1 16C80.8 55.4 88.7 57 89 57c.2 0-1.9 1.6-4.7 3.5-2.9 1.9-6.3 3.5-7.5 3.5-2.9 0-34.9-5.7-35.5-6.3-.9-.9 10.2-8.6 11.7-8.2.8.2 9.1 2 18.5 4zm34.9 5.4c1.7.7 1.3 1.3-3.3 4.9-5.3 4.2-6.9 4.7-10.5 3.3-1.7-.7-1.1-1.3 4-4.9 6.2-4.3 6.8-4.5 9.8-3.3zm-70.5 6C37.8 66.1 28.6 73 25 73c-4.5 0-4.2-1.2 1.2-5.1 5.4-3.9 7.3-4.5 9.7-3zm33.4 5.5c9.8 1.9 18 3.6 18.3 3.9.2.2-1.6 2-4.1 3.9l-4.4 3.5-10.3-1.9c-10.5-1.9-19.6-3.5-25.6-4.4l-3.4-.5 5.3-4c2.9-2.1 5.5-3.9 5.8-3.9.3 0 8.6 1.5 18.4 3.4zm37.5 7.1c.2.2-2 2.1-4.9 4.3-4.7 3.6-5.5 3.9-8.1 3-3.3-1.2-3.4-1 2.9-5.4 3.5-2.3 5.5-3.1 7.3-2.7 1.4.3 2.6.7 2.8.8zm-59 6.1c5.7.8 11.1 1.8 12 2.3.9.4 7.7 1.6 15 2.6C82 89.6 88 90.7 88 91c0 .3-2.6 2.4-5.7 4.6l-5.8 4-9-1.8c-4.9-.9-14.5-2.6-21.2-3.8-6.7-1.1-15.4-2.7-19.3-3.6l-7.1-1.7 5.5-3.7c4.3-2.8 6.4-3.6 8.9-3.3 1.7.2 7.8 1.1 13.5 1.9z"
/>
),
viewBox: "0 0 128 128",
},
//tc.svg
tc: {
path: (
<path
fill="currentColor"
d="M54 11.1C41.5 22 41 22.7 43.9 24.9c2 1.5 2.2 2.4 1.9 9.6l-.3 7.9-8.5 3.4c-4.7 1.8-14.2 5.4-21.2 7.9C3.7 58 3 58.5 3 61c0 2.3.6 2.9 4 3.9 2.2.6 5.7 2.6 7.6 4.3l3.6 3.2-.3 17.9-.4 17.9 25.2 9.4 25.1 9.3 22.1-10.1 22.1-10.2.1-18c.1-10 .1-18.5 0-18.9-.2-1.1 5.3-5.7 9.8-8.3 2.5-1.5 3.6-2.8 3.6-4.5 0-2.2-1-2.6-19-7-10.4-2.6-20.2-5-21.7-5.3L82 44v-9.4c0-8.5.2-9.4 2-9.9 4.1-1.1 3.6-3.8-1.6-8.5C73.8 8.5 65.9 2 65.2 2c-.4 0-5.5 4.1-11.2 9.1z"
/>
),
viewBox: "0 0 128 128",
},
//rm.svg
rm: {
path: (
<path
fill="currentColor"
d="M62.8 14.9c-6.7 2.2-13.3 10.3-12.6 15.4.3 1.9 1.1 2.3 6.8 2.8 14.9 1.4 22.7 8.7 20 18.7-1.5 5.7-3.2 6.9-6.7 4.4-4.1-2.9-9.3-4.9-14.9-5.7-2.7-.3-6-1.2-7.4-2-2.1-1.1-2.4-1.9-2.1-5.9.2-3.2-.2-4.8-1.1-5.1-1.7-.7-10.2 3-20 8.5-6.5 3.7-7.3 4-10.3 2.9-4.5-1.7-10.5.5-12.3 4.5-1.2 2.3-1.2 3.4.1 7.2.8 2.4 1 4.7.6 5-1.8 1.1-.9 6.5 1.6 8.9C5.8 75.9 7.4 77 8 77c.5 0 1 1.2 1 2.6 0 4.1 2.1 10.2 4.1 12 1.7 1.5 1.9 1.4 3.9-1.7 1.1-1.9 2.3-5.1 2.6-7.2.5-2.9 1.1-3.7 2.8-3.7 3 0 4.2 1 5.9 5.3 2.9 6.9 6.3 5.5 9.7-4 1-2.9 1.9-4 2.7-3.5 1 .6 1 1.7.2 4.7-.6 2.2-.9 6.5-.7 9.6.3 4.4.1 5.6-.9 5.2-1.9-.7-4.1 1.4-4.8 4.7-.9 4-3.5 2.8-3.5-1.5 0-1.8-.7-3.8-1.5-4.5-1.2-1-2.2-.4-6 3.6-6 6.5-6 11-.1 14.2 2.5 1.4 5.5 1.7 15.6 1.5 20.8-.2 34.3-5.1 46.8-16.7 5.3-4.9 6.5-6.8 8-11.7C95 81.8 96 80 97.2 80c.9 0 7.5.7 14.7 1.5 7.3.9 13.6 1.3 14.1 1 1.3-.8-1.4-10.8-4.3-15.8-3-5-7.7-9.5-13.9-13-6.8-3.9-8.6-4.2-11.3-1.7l-2.3 2.2-.7-4.5c-.9-5.8 1.4-10.8 6.8-15.1 3.2-2.6 4.9-3.1 10.8-3.4 6.3-.4 6.9-.6 6.9-2.6 0-3.7-4.4-10-8.5-12.3-5.3-3-14-3.1-19.5-.3-2.1 1.1-4.1 2.4-4.5 3-.4.6-2.6-.1-5.6-1.7-5.4-2.8-12.7-3.8-17.1-2.4z"
/>
),
viewBox: "0 0 128 128",
},
//cb.svg
cb: {
path: (
<path
fill="currentColor"
d="M49.7 22c-19.5 3.1-32.6 11.3-39.6 24.8-2.3 4.3-3 12.7-1.7 18.5C10.6 74.5 14.7 79 36.1 95c27.2 20.4 33.3 22.5 44.5 15.1 3.2-2.1 7.3-5.3 8.9-7.1 1.7-1.7 6.8-6.4 11.5-10.3 19.7-16.4 22-19.6 22-30.4-.1-11.4-6.5-21.5-19.1-29.8-11.1-7.4-21.3-10.5-36.2-11-6.7-.2-14.8 0-18 .5z"
/>
),
viewBox: "0 0 128 128",
},
}
export default customIcons

View File

@ -47,7 +47,7 @@ const BuildCard: React.FC<BuildCardProps> = ({ build, defaultToAPView }) => {
<Image
src={top500}
alt="x rank top 500 logo"
height="50px"
height="40px"
width="auto"
title="Maker of the build has reached top 500 with this weapon"
/>

View File

@ -12,6 +12,8 @@ import {
UserData,
SearchForBuildsData,
SearchForBuildsVars,
PlayerInfoData,
PlayerInfoVars,
} from "../../types"
import { FaTshirt, FaTrophy } from "react-icons/fa"
import { IconType } from "react-icons/lib/cjs"
@ -22,6 +24,8 @@ import { Helmet } from "react-helmet-async"
import { SEARCH_FOR_BUILDS } from "../../graphql/queries/searchForBuilds"
import BuildTab from "./BuildTab"
import MyThemeContext from "../../themeContext"
import { PLAYER_INFO } from "../../graphql/queries/playerInfo"
import XRankTab from "./XRankTab"
interface Tab {
id: number
@ -41,9 +45,11 @@ const UserPage: React.FC<RouteComponentProps & UserPageProps> = ({ id }) => {
>(SEARCH_FOR_USER, {
variables: isNaN(id as any) ? { custom_url: id } : { discord_id: id },
})
const { data: userData, error: userError, loading: userLoading } = useQuery<
UserData
>(USER)
const {
data: buildsData,
error: buildsError,
@ -53,14 +59,25 @@ const UserPage: React.FC<RouteComponentProps & UserPageProps> = ({ id }) => {
skip: !data || !data.searchForUser,
})
const {
data: playerData,
error: playerError,
loading: playerLoading,
} = useQuery<PlayerInfoData, PlayerInfoVars>(PLAYER_INFO, {
variables: { twitter: data?.searchForUser?.twitter_name as any },
skip: !data || !data.searchForUser || !data.searchForUser.twitter_name,
})
const { textColor, themeColor, themeColorWithShade } = useContext(
MyThemeContext
)
if (loading || userLoading || buildsLoading) return <Loading />
if (loading || userLoading || buildsLoading || playerLoading)
return <Loading />
if (error) return <Error errorMessage={error.message} />
if (userError) return <Error errorMessage={userError.message} />
if (buildsError) return <Error errorMessage={buildsError.message} />
if (playerError) return <Error errorMessage={playerError.message} />
if (!data || !data.searchForUser || !userData || !buildsData)
return <Redirect to="/404" />
@ -70,7 +87,8 @@ const UserPage: React.FC<RouteComponentProps & UserPageProps> = ({ id }) => {
const tabs = [] as Tab[]
if (builds.length > 0 || userLean?.discord_id === user.discord_id) {
//if (builds.length > 0 || userLean?.discord_id === user.discord_id) {
if (false) {
tabs.push({
id: 1,
icon: FaTshirt,
@ -86,14 +104,25 @@ const UserPage: React.FC<RouteComponentProps & UserPageProps> = ({ id }) => {
})
}
if (true) {
if (playerData?.playerInfo?.placements) {
tabs.push({
id: 2,
icon: FaTrophy,
title: "X Rank Top 500",
content: (
<TabPanel key={2}>
<p>hi</p>
<XRankTab placements={playerData.playerInfo.placements} />
</TabPanel>
),
})
} else if (userLean?.discord_id === user.discord_id) {
tabs.push({
id: 2,
icon: FaTrophy,
title: "X Rank Top 500",
content: (
<TabPanel key={2}>
<p>you are noob :)</p>
</TabPanel>
),
})

View File

@ -0,0 +1,164 @@
import React, { useContext } from "react"
import { Placement } from "../../types"
import { modesShort, months } from "../../utils/lists"
import {
Accordion,
AccordionItem,
AccordionHeader,
AccordionIcon,
AccordionPanel,
Flex,
Icon,
Box,
} from "@chakra-ui/core"
import MyThemeContext from "../../themeContext"
interface XRankTabProps {
placements: Placement[]
}
interface AllModesAccordionData {
sz?: ModeAccordionData
tc?: ModeAccordionData
rm?: ModeAccordionData
cb?: ModeAccordionData
}
interface ModeAccordionData {
highestPlacement: number
highestPlacementDate: string
highestXPower: number
highestXPowerDate: string
placements: Placement[]
}
interface StyleBoxProps {
children: string | string[] | number | undefined
color?: string
size?: string
}
const StyledBox: React.FC<StyleBoxProps> = ({ children, color, size }) => (
<Box
color={color ?? undefined}
width="32px"
minH="45px"
letterSpacing="wide"
fontSize={size ?? "xs"}
textTransform="uppercase"
fontWeight="semibold"
textAlign="center"
>
{children}
</Box>
)
const accordionReducer = function(
acc: AllModesAccordionData,
cur: Placement
): AllModesAccordionData {
const key = modesShort[cur.mode]
const modeData = acc[key]
const date = `${months[cur.month]} ${cur.year}`
if (!modeData) {
acc[key] = {
highestPlacement: cur.rank,
highestPlacementDate: date,
highestXPower: cur.x_power,
highestXPowerDate: date,
placements: [cur],
}
} else {
modeData.placements.push(cur)
if (cur.x_power > modeData.highestXPower) {
modeData.highestXPower = cur.x_power
modeData.highestXPowerDate = date
}
if (cur.rank < modeData.highestPlacement) {
modeData.highestPlacement = cur.rank
modeData.highestPlacementDate = date
}
}
return acc
}
const XRankTab: React.FC<XRankTabProps> = ({ placements }) => {
const { themeColorWithShade, grayWithShade } = useContext(MyThemeContext)
const allModesTabsData: AllModesAccordionData = placements.reduce(
accordionReducer,
{}
)
console.log(allModesTabsData)
return (
<>
<Accordion allowMultiple>
{(["sz", "tc", "rm", "cb"] as const)
.filter(key => allModesTabsData.hasOwnProperty(key))
.map(key => {
return (
<AccordionItem key={key}>
<AccordionHeader>
<AccordionIcon size="2em" mr="1em" />
<Flex
justifyContent="flex-start"
w="100%"
alignItems="center"
flexWrap="wrap"
>
<Icon
name={key as any}
color={themeColorWithShade}
size="5em"
/>{" "}
<Flex flexDirection="column" minW="100px" ml="50px">
<StyledBox color={grayWithShade}>
Best placement
</StyledBox>
<StyledBox size="s">
{allModesTabsData[key]?.highestPlacement}
</StyledBox>
<StyledBox color={grayWithShade}>
{allModesTabsData[key]?.highestPlacementDate}
</StyledBox>
</Flex>
<Flex flexDirection="column" minW="120px">
<StyledBox color={grayWithShade}>
Highest X Power
</StyledBox>
<StyledBox size="s">
{allModesTabsData[key]?.highestXPower}
</StyledBox>
<StyledBox color={grayWithShade}>
{allModesTabsData[key]?.highestXPowerDate}
</StyledBox>
</Flex>
<Flex flexDirection="column" minW="100px">
<StyledBox color={grayWithShade}>
Number of placements
</StyledBox>
<StyledBox size="s">
{allModesTabsData[key]?.placements.length}
</StyledBox>
<Box />
</Flex>
</Flex>
</AccordionHeader>
<AccordionPanel pb={4}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</AccordionPanel>
</AccordionItem>
)
})}
</Accordion>
</>
)
}
export default XRankTab

View File

@ -1,34 +0,0 @@
import { gql } from 'apollo-boost'
export const playerInfo = gql`
query playerInfo($uid: String, $twitter: String) {
playerInfo(uid: $uid, twitter: $twitter) {
player {
name
weapons
alias
twitter
discord_id
topTotalScore
topShooterScore
topBlasterScore
topRollerScore
topChargerScore
topSlosherScore
topSplatlingScore
topDualiesScore
topBrellaScore
}
placements {
id
name
weapon
rank
mode
x_power
month
year
}
}
}
`

View File

@ -0,0 +1,18 @@
import { gql, DocumentNode } from "apollo-boost"
export const PLAYER_INFO: DocumentNode = gql`
query playerInfo($twitter: String) {
playerInfo(twitter: $twitter) {
placements {
id
name
weapon
rank
mode
x_power
month
year
}
}
}
`

View File

@ -1,11 +1,17 @@
import React, { StrictMode } from "react"
import ReactDOM from "react-dom"
import App from "./components/root/App"
import { ThemeProvider, ColorModeProvider, CSSReset } from "@chakra-ui/core"
import {
ThemeProvider,
ColorModeProvider,
CSSReset,
theme,
} from "@chakra-ui/core"
import { ApolloProvider } from "@apollo/react-hooks"
import { HelmetProvider } from "react-helmet-async"
import ApolloClient from "apollo-boost"
import * as serviceWorker from "./serviceWorker"
import customIcons from "./assets/icons"
const client = new ApolloClient({
uri:
@ -14,11 +20,13 @@ const client = new ApolloClient({
: "http://localhost:3001/graphql",
})
const customTheme = { ...theme, icons: { ...theme.icons, ...customIcons } }
ReactDOM.render(
<StrictMode>
<HelmetProvider>
<ApolloProvider client={client}>
<ThemeProvider>
<ThemeProvider theme={customTheme}>
<ColorModeProvider>
<CSSReset />
<App />

View File

@ -112,6 +112,18 @@ export interface Build {
top: boolean
}
export interface Placement {
id: string
name: string
weapon: Weapon
rank: number
mode: 1 | 2 | 3 | 4
x_power: number
unique_id: string
month: number
year: number
}
//==============================================================================
// Apollo
//==============================================================================
@ -136,3 +148,13 @@ export interface SearchForBuildsData {
export interface SearchForBuildsVars {
discord_id: string
}
export interface PlayerInfoData {
playerInfo?: {
placements: Placement[]
}
}
export interface PlayerInfoVars {
twitter: string
}

View File

@ -766,6 +766,8 @@ export const modes = [
"Clam Blitz",
] as const
export const modesShort = ["", "sz", "tc", "rm", "cb"] as const
export const months = [
"",
"January",

View File

@ -2,7 +2,7 @@
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,

View File

@ -5,7 +5,7 @@ const Player = require("../mongoose-models/player")
const typeDef = gql`
extend type Query {
topPlayers(weapon: String!): topPlayer!
playerInfo(uid: String, twitter: String): PlayerWithPlacements!
playerInfo(uid: String, twitter: String): PlayerWithPlacements
searchForPlayers(name: String!, exact: Boolean): [Placement]!
searchForPlacements(
name: String
@ -92,12 +92,11 @@ const resolvers = {
})
if (!player) {
throw new UserInputError("player not found", {
invalidArgs: args,
})
return null
}
const placements = await Placement.find({ unique_id: player.unique_id })
.sort({ year: "desc", month: "desc", mode: "asc" })
.sort({ year: "desc", month: "desc" })
.catch(e => {
throw new UserInputError(e.message, {
invalidArgs: args,

6
package-lock.json generated
View File

@ -559,9 +559,9 @@
}
},
"axios": {
"version": "0.19.1",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.1.tgz",
"integrity": "sha512-Yl+7nfreYKaLRvAvjNPkvfjnQHJM1yLBY3zhqAwcJSwR/6ETkanUgylgtIvkvz0xJ+p/vZuNw8X7Hnb7Whsbpw==",
"version": "0.19.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
"requires": {
"follow-redirects": "1.5.10"
}

View File

@ -18,7 +18,7 @@
"@types/react-color": "^3.0.1",
"apollo-server": "^2.9.16",
"apollo-server-express": "^2.9.16",
"axios": "^0.19.1",
"axios": "^0.19.2",
"btoa": "^1.2.1",
"connect-mongo": "^3.2.0",
"cors": "^2.8.5",