diff --git a/frontend-react/src/assets/abilityIcons/AD.png b/frontend-react/src/assets/abilityIcons/AD.png new file mode 100644 index 000000000..d8ac352bd Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/AD.png differ diff --git a/frontend-react/src/assets/abilityIcons/BDU.png b/frontend-react/src/assets/abilityIcons/BDU.png new file mode 100644 index 000000000..dcfe727c7 Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/BDU.png differ diff --git a/frontend-react/src/assets/abilityIcons/BRU.png b/frontend-react/src/assets/abilityIcons/BRU.png new file mode 100644 index 000000000..23e6cf030 Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/BRU.png differ diff --git a/frontend-react/src/assets/abilityIcons/CB.png b/frontend-react/src/assets/abilityIcons/CB.png new file mode 100644 index 000000000..aef7bb0da Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/CB.png differ diff --git a/frontend-react/src/assets/abilityIcons/DR.png b/frontend-react/src/assets/abilityIcons/DR.png new file mode 100644 index 000000000..1ef13663e Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/DR.png differ diff --git a/frontend-react/src/assets/abilityIcons/EMPTY.png b/frontend-react/src/assets/abilityIcons/EMPTY.png new file mode 100644 index 000000000..71c37a8fb Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/EMPTY.png differ diff --git a/frontend-react/src/assets/abilityIcons/H.png b/frontend-react/src/assets/abilityIcons/H.png new file mode 100644 index 000000000..90f757d4e Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/H.png differ diff --git a/frontend-react/src/assets/abilityIcons/ISM.png b/frontend-react/src/assets/abilityIcons/ISM.png new file mode 100644 index 000000000..b3540bffd Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/ISM.png differ diff --git a/frontend-react/src/assets/abilityIcons/ISS.png b/frontend-react/src/assets/abilityIcons/ISS.png new file mode 100644 index 000000000..7d575a133 Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/ISS.png differ diff --git a/frontend-react/src/assets/abilityIcons/LDE.png b/frontend-react/src/assets/abilityIcons/LDE.png new file mode 100644 index 000000000..4695b56b3 Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/LDE.png differ diff --git a/frontend-react/src/assets/abilityIcons/MPU.png b/frontend-react/src/assets/abilityIcons/MPU.png new file mode 100644 index 000000000..0a1eac9d7 Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/MPU.png differ diff --git a/frontend-react/src/assets/abilityIcons/NS.png b/frontend-react/src/assets/abilityIcons/NS.png new file mode 100644 index 000000000..a9c8d2c87 Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/NS.png differ diff --git a/frontend-react/src/assets/abilityIcons/OG.png b/frontend-react/src/assets/abilityIcons/OG.png new file mode 100644 index 000000000..6a47d6806 Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/OG.png differ diff --git a/frontend-react/src/assets/abilityIcons/OS.png b/frontend-react/src/assets/abilityIcons/OS.png new file mode 100644 index 000000000..15beb8453 Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/OS.png differ diff --git a/frontend-react/src/assets/abilityIcons/QR.png b/frontend-react/src/assets/abilityIcons/QR.png new file mode 100644 index 000000000..1777171f6 Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/QR.png differ diff --git a/frontend-react/src/assets/abilityIcons/QSJ.png b/frontend-react/src/assets/abilityIcons/QSJ.png new file mode 100644 index 000000000..2dcbaa32c Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/QSJ.png differ diff --git a/frontend-react/src/assets/abilityIcons/REC.png b/frontend-react/src/assets/abilityIcons/REC.png new file mode 100644 index 000000000..e5c4399ae Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/REC.png differ diff --git a/frontend-react/src/assets/abilityIcons/RES.png b/frontend-react/src/assets/abilityIcons/RES.png new file mode 100644 index 000000000..be3ea4738 Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/RES.png differ diff --git a/frontend-react/src/assets/abilityIcons/RP.png b/frontend-react/src/assets/abilityIcons/RP.png new file mode 100644 index 000000000..533df1266 Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/RP.png differ diff --git a/frontend-react/src/assets/abilityIcons/RSU.png b/frontend-react/src/assets/abilityIcons/RSU.png new file mode 100644 index 000000000..0ebde89f9 Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/RSU.png differ diff --git a/frontend-react/src/assets/abilityIcons/SCU.png b/frontend-react/src/assets/abilityIcons/SCU.png new file mode 100644 index 000000000..56e232c91 Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/SCU.png differ diff --git a/frontend-react/src/assets/abilityIcons/SJ.png b/frontend-react/src/assets/abilityIcons/SJ.png new file mode 100644 index 000000000..6bb4c3f21 Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/SJ.png differ diff --git a/frontend-react/src/assets/abilityIcons/SPU.png b/frontend-react/src/assets/abilityIcons/SPU.png new file mode 100644 index 000000000..ad279c9e5 Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/SPU.png differ diff --git a/frontend-react/src/assets/abilityIcons/SS.png b/frontend-react/src/assets/abilityIcons/SS.png new file mode 100644 index 000000000..e96c05a91 Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/SS.png differ diff --git a/frontend-react/src/assets/abilityIcons/SSU.png b/frontend-react/src/assets/abilityIcons/SSU.png new file mode 100644 index 000000000..73e1dd548 Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/SSU.png differ diff --git a/frontend-react/src/assets/abilityIcons/T.png b/frontend-react/src/assets/abilityIcons/T.png new file mode 100644 index 000000000..7121d7c4a Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/T.png differ diff --git a/frontend-react/src/assets/abilityIcons/TI.png b/frontend-react/src/assets/abilityIcons/TI.png new file mode 100644 index 000000000..33d8b15b0 Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/TI.png differ diff --git a/frontend-react/src/assets/abilityIcons/UNKNOWN.png b/frontend-react/src/assets/abilityIcons/UNKNOWN.png new file mode 100644 index 000000000..2d543e5e5 Binary files /dev/null and b/frontend-react/src/assets/abilityIcons/UNKNOWN.png differ diff --git a/frontend-react/src/assets/imageImports.ts b/frontend-react/src/assets/imageImports.ts index 252a4995e..233f8faa6 100644 --- a/frontend-react/src/assets/imageImports.ts +++ b/frontend-react/src/assets/imageImports.ts @@ -1,3 +1,32 @@ +import BDU from "./abilityIcons/BDU.png" +import BRU from "./abilityIcons/BRU.png" +import CB from "./abilityIcons/CB.png" +import DR from "./abilityIcons/DR.png" +import H from "./abilityIcons/H.png" +import ISM from "./abilityIcons/ISM.png" +import ISS from "./abilityIcons/ISS.png" +import LDE from "./abilityIcons/LDE.png" +import MPU from "./abilityIcons/MPU.png" +import NS from "./abilityIcons/NS.png" +import OG from "./abilityIcons/OG.png" +import QR from "./abilityIcons/QR.png" +import QSJ from "./abilityIcons/QSJ.png" +import REC from "./abilityIcons/REC.png" +import RES from "./abilityIcons/RES.png" +import RP from "./abilityIcons/RP.png" +import RSU from "./abilityIcons/RSU.png" +import SCU from "./abilityIcons/SCU.png" +import SJ from "./abilityIcons/SJ.png" +import SPU from "./abilityIcons/SPU.png" +import SS from "./abilityIcons/SS.png" +import SSU from "./abilityIcons/SSU.png" +import T from "./abilityIcons/T.png" +import TI from "./abilityIcons/TI.png" +import OS from "./abilityIcons/OS.png" +import AD from "./abilityIcons/AD.png" +import UNKNOWN from "./abilityIcons/UNKNOWN.png" +import * as top500logo from "./top500.png" + //https://stackoverflow.com/questions/42118296/dynamically-import-images-from-a-directory-using-webpack export const wpnSmall: object = importAll(require.context("./wpnSmall", false)) export const wpnMedium: object = importAll( @@ -11,3 +40,36 @@ function importAll(r: __WebpackModuleApi.RequireContext) { }) return images } + +export const abilityIcons = { + BDU: BDU, + BRU: BRU, + CB: CB, + DR: DR, + H: H, + ISM: ISM, + ISS: ISS, + LDE: LDE, + MPU: MPU, + NS: NS, + OG: OG, + QR: QR, + QSJ: QSJ, + REC: REC, + RES: RES, + RP: RP, + RSU: RSU, + SCU: SCU, + SJ: SJ, + SPU: SPU, + SS: SS, + SSU: SSU, + T: T, + TI: TI, + OS: OS, + AD: AD, + UNKNOWN: UNKNOWN, + "": UNKNOWN, +} as const + +export const top500 = top500logo diff --git a/frontend-react/src/assets/top500.png b/frontend-react/src/assets/top500.png new file mode 100644 index 000000000..5e4edc051 Binary files /dev/null and b/frontend-react/src/assets/top500.png differ diff --git a/frontend-react/src/components/builds/AbilityIcon.tsx b/frontend-react/src/components/builds/AbilityIcon.tsx new file mode 100644 index 000000000..df6bb20c9 --- /dev/null +++ b/frontend-react/src/components/builds/AbilityIcon.tsx @@ -0,0 +1,58 @@ +import React from "react" +import { + StackableAbility, + HeadOnlyAbility, + ClothingOnlyAbility, + ShoesOnlyAbility, +} from "../../types" +import { abilityIcons } from "../../assets/imageImports" + +const mainAbilityStyle = { + //https://github.com/loadout-ink/splat2-calc + zIndex: 2, + borderRadius: "50%", + width: "50px", + height: "50px", + background: "#000", + border: "2px solid #888", + borderRight: "0px", + borderBottom: "0px", + backgroundSize: "100%", + boxShadow: "0 0 0 1px #000", + userSelect: "none", +} as const +const subAbilityStyle = { + //https://github.com/loadout-ink/splat2-calc + zIndex: 2, + borderRadius: "50%", + width: "40px", + height: "40px", + background: "#000", + border: "2px solid #888", + borderRight: "0px", + borderBottom: "0px", + backgroundSize: "100%", + boxShadow: "0 0 0 1px #000", + userSelect: "none", +} as const + +interface AbilityIconProps { + ability: + | StackableAbility + | HeadOnlyAbility + | ClothingOnlyAbility + | ShoesOnlyAbility + size: "MAIN" | "SUB" +} + +const AbilityIcon: React.FC = ({ ability, size }) => { + return ( + {ability} + ) +} + +export default AbilityIcon diff --git a/frontend-react/src/components/builds/BuildCard.tsx b/frontend-react/src/components/builds/BuildCard.tsx index 4f50f729e..17f890573 100644 --- a/frontend-react/src/components/builds/BuildCard.tsx +++ b/frontend-react/src/components/builds/BuildCard.tsx @@ -1,13 +1,108 @@ -import React from "react" +import React, { useState } from "react" import { Build } from "../../types" -import { Box } from "@chakra-ui/core" +import { + Box, + Flex, + Image, + IconButton, + Popover, + PopoverTrigger, + PopoverContent, + PopoverBody, +} from "@chakra-ui/core" +import useTheme from "../../hooks/useTheme" +import WeaponImage from "../common/WeaponImage" +import { top500 } from "../../assets/imageImports" +import { FaInfo, FaPlus, FaMinus } from "react-icons/fa" +import ViewGear from "./ViewGear" +import ViewAP from "./ViewAP" interface BuildCardProps { build: Build + defaultToAPView: Boolean } -const BuildCard: React.FC = ({ build }) => { - return asd +const BuildCard: React.FC = ({ build, defaultToAPView }) => { + const [apView, setApView] = useState(defaultToAPView) + const { borderStyle, themeColor, darkerBgColor, grayWithShade } = useTheme() + + return ( + + + + + + {build.top && ( + x rank top 500 logo + )} + + + {new Date(parseInt(build.updatedAt)).toLocaleString()} + + {build.title && ( + + {build.title} + + )} + {apView ? : } + + {build.description ? ( + + + + + + + {build.description} + + + + ) : ( + + )} + setApView(!apView)} + /> + + + ) } export default BuildCard diff --git a/frontend-react/src/components/builds/GearImage.tsx b/frontend-react/src/components/builds/GearImage.tsx new file mode 100644 index 000000000..3686bdc31 --- /dev/null +++ b/frontend-react/src/components/builds/GearImage.tsx @@ -0,0 +1,26 @@ +import React from "react" +import { HeadGear, ClothingGear, ShoesGear } from "../../types" +import english_internal from "../../utils/english_internal.json" +import { Box } from "@chakra-ui/core" + +interface GearImageProps { + englishName?: HeadGear | ClothingGear | ShoesGear + renderNullIfNoName: boolean +} + +const GearImage: React.FC = ({ + englishName, + renderNullIfNoName, +}) => { + if (!englishName && renderNullIfNoName) return null + if (!englishName) return + return ( + {englishName} + ) +} + +export default GearImage diff --git a/frontend-react/src/components/builds/ViewAP.tsx b/frontend-react/src/components/builds/ViewAP.tsx new file mode 100644 index 000000000..a8ab25fba --- /dev/null +++ b/frontend-react/src/components/builds/ViewAP.tsx @@ -0,0 +1,122 @@ +// This while is bit of a mess from TS PoV - might be worth while to do it better later + +import React from "react" +import { Build, Ability } from "../../types" +import { Box, Flex } from "@chakra-ui/core" +import DividingBox from "../ui/DividingBox" +import AbilityIcon from "./AbilityIcon" +import useTheme from "../../hooks/useTheme" + +const mainOnlyAbilities = [ + "CB", + "LDE", + "OG", + "T", + "H", + "NS", + "TI", + "RP", + "AD", + "DR", + "SJ", + "OS", +] as const + +interface ViewAPProps { + build: Build +} + +const ViewAP: React.FC = ({ build }) => { + const { grayWithShade } = useTheme() + const abilityArrays: Ability[][] = [ + build.headgear, + build.clothing, + build.shoes, + ] + + const abilityToPoints: Partial> = {} + abilityArrays.forEach(arr => + arr.forEach((ability, index) => { + let abilityPoints = index === 0 ? 10 : 3 + if (mainOnlyAbilities.indexOf(ability as any) !== -1) abilityPoints = 999 + abilityToPoints[ability] = abilityToPoints.hasOwnProperty(ability) + ? (abilityToPoints[ability] as any) + abilityPoints + : abilityPoints + }) + ) + + const pointsToAbilities: Record = {} + ;(Object.keys(abilityToPoints) as Array< + keyof typeof abilityToPoints + >).forEach((ability: Ability) => { + const points = abilityToPoints[ability] + + pointsToAbilities.hasOwnProperty(points as any) + ? pointsToAbilities[points as any].push(ability) + : (pointsToAbilities[points as any] = [ability]) + }) + + const APArrays = (Object.keys(pointsToAbilities) as Array< + keyof typeof pointsToAbilities + >) + .map(points => [points, pointsToAbilities[points as any]]) + .sort((a1, a2) => parseInt(a2[0] as string) - parseInt(a1[0] as string)) + + let indexToPrintAPAt = APArrays[0][0] === "999" ? 1 : 0 + + return ( + + {APArrays.map((arr, index) => { + return ( + + {arr[0] !== "999" ? ( + + + {arr[0] as string} + {indexToPrintAPAt === index ? ( + <> +
+ AP + + ) : null} + + + ) : ( + + )} + {(arr[1] as Array).map((ability, abilityIndex) => ( + 5 + ? `-${(arr[1].length - 5) * 5}px` + : undefined + } + > + + + ))} + + ) + })} + + ) +} + +export default ViewAP diff --git a/frontend-react/src/components/builds/ViewGear.tsx b/frontend-react/src/components/builds/ViewGear.tsx new file mode 100644 index 000000000..c759a1d66 --- /dev/null +++ b/frontend-react/src/components/builds/ViewGear.tsx @@ -0,0 +1,56 @@ +import React from "react" +import { Grid } from "@chakra-ui/core" +import GearImage from "./GearImage" +import { Build } from "../../types" +import AbilityIcon from "./AbilityIcon" + +interface ViewGearProps { + build: Build +} + +const ViewGear: React.FC = ({ build }) => { + const noItems = + !build.headgearItem && !build.clothingItem && !build.clothingItem + return ( + + + {build.headgear.map((ability, index) => ( + + ))} + + {build.clothing.map((ability, index) => ( + + ))} + + {build.shoes.map((ability, index) => ( + + ))} + + ) +} + +export default ViewGear diff --git a/frontend-react/src/components/common/Loading.tsx b/frontend-react/src/components/common/Loading.tsx index 1f4691a6b..98df4f5ee 100644 --- a/frontend-react/src/components/common/Loading.tsx +++ b/frontend-react/src/components/common/Loading.tsx @@ -1,15 +1,15 @@ import React from "react" -import { Spinner, useColorMode, Box } from "@chakra-ui/core" +import { Spinner, Box } from "@chakra-ui/core" +import useTheme from "../../hooks/useTheme" interface LoadingProps {} const Loading: React.FC = () => { - const { colorMode } = useColorMode() - const color = { light: "orange.500", dark: "pink.200" } + const { themeColorWithShade } = useTheme() return ( = ({ englishName, size }) => { const dictToUse: any = size === "MEDIUM" ? wpnMedium : wpnSmall return ( - {englishName} + {englishName} ) } diff --git a/frontend-react/src/components/root/App.tsx b/frontend-react/src/components/root/App.tsx index 5710a3f7f..4000f99d0 100644 --- a/frontend-react/src/components/root/App.tsx +++ b/frontend-react/src/components/root/App.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react" +import React from "react" import { Box } from "@chakra-ui/core" import { MenuBar } from "./MenuBar" @@ -9,15 +9,13 @@ import useTheme from "../../hooks/useTheme" const App: React.FC = () => { const { bgColor, textColor } = useTheme() - useEffect(() => { - document.body.style.backgroundColor = bgColor - }, [bgColor]) - return ( diff --git a/frontend-react/src/components/root/ColorPicker.tsx b/frontend-react/src/components/root/ColorPicker.tsx index 15be9ecae..770f3d0cd 100644 --- a/frontend-react/src/components/root/ColorPicker.tsx +++ b/frontend-react/src/components/root/ColorPicker.tsx @@ -5,7 +5,6 @@ import { Popover, PopoverBody, PopoverContent, - useColorMode, useTheme as useChakraTheme, } from "@chakra-ui/core" import { CirclePicker, ColorResult } from "react-color" @@ -13,12 +12,10 @@ import { writeStorage } from "@rehooks/local-storage" import { themeColors as choices } from "../../utils/lists" import useTheme from "../../hooks/useTheme" -const bgColor = { light: "#eff0f3", dark: "#232946" } as const const size = "20px" as const const ColorPicker: React.FC = () => { - const { colorMode } = useColorMode() - const { themeColorHex } = useTheme() + const { themeColorHex, bgColor } = useTheme() const theme = useChakraTheme() const hexCodes = choices.map(color => @@ -46,11 +43,7 @@ const ColorPicker: React.FC = () => { ml="10px" /> - + import("../user/UserPage")) const Routes: React.FC = () => { return ( - Loading...}> + }> diff --git a/frontend-react/src/components/root/SideNav.tsx b/frontend-react/src/components/root/SideNav.tsx index f6b7bd2e8..5af5121bf 100644 --- a/frontend-react/src/components/root/SideNav.tsx +++ b/frontend-react/src/components/root/SideNav.tsx @@ -1,17 +1,18 @@ -import { Box, useColorMode } from "@chakra-ui/core" +import { Box } from "@chakra-ui/core" import React from "react" import { SideNavContent } from "./SideNavContent" +import useTheme from "../../hooks/useTheme" + +const shadow = { + light: "0px 1px 10px 8px rgba(0,0,0,0.15)", + dark: "0px 1px 10px 8px rgba(255,255,255,0.04)", +} as const const SideNav = () => { - const { colorMode } = useColorMode() - const bgColor = { light: "#D6D7DA", dark: "#0A102D" } - const shadow = { - light: "0px 1px 10px 8px rgba(0,0,0,0.15)", - dark: "0px 1px 10px 8px rgba(255,255,255,0.04)", - } + const { darkerBgColor, colorMode } = useTheme() return ( = ({ children, location, + width = undefined, margin = "0.4em", }) => { const { borderStyle } = useTheme() @@ -22,6 +24,9 @@ const DividingBox: React.FC = ({ mt={location === "top" ? margin : undefined} borderBottom={location === "bottom" ? borderStyle : undefined} mb={location === "bottom" ? margin : undefined} + borderRight={location === "right" ? borderStyle : undefined} + mr={location === "right" ? margin : undefined} + width={width} > {children} diff --git a/frontend-react/src/components/user/AvatarWithInfo.tsx b/frontend-react/src/components/user/AvatarWithInfo.tsx index fa76f10b2..c403e2de6 100644 --- a/frontend-react/src/components/user/AvatarWithInfo.tsx +++ b/frontend-react/src/components/user/AvatarWithInfo.tsx @@ -4,7 +4,6 @@ import { FaUserAlt, FaTwitter, FaTwitch, FaGamepad } from "react-icons/fa" import UserAvatar from "../common/UserAvatar" import { User } from "../../types" -import DividingBox from "../ui/DividingBox" import Flag from "../common/Flag" import { countries } from "../../utils/lists" @@ -22,48 +21,57 @@ interface AvatarWithInfoProps { const AvatarWithInfo: React.FC = ({ user }) => { return ( - + - - + + + + {user.username}#{user.discriminator} + + {user.country && ( - - {user.username}#{user.discriminator} + + {countries.find(obj => obj.code === user.country)?.name} - {user.country && ( - - - {countries.find(obj => obj.code === user.country)?.name} - - )} - {user.twitter_name && ( - - - - {user.twitter_name} - - - )} - {user.twitch_name && ( - - - - {user.twitch_name} - - - )} - {user.sens?.stick && ( - - - {getSensString(user.sens.motion, user.sens.stick)} - - )} - - + )} + {user.twitter_name && ( + + + + {user.twitter_name} + + + )} + {user.twitch_name && ( + + + + {user.twitch_name} + + + )} + {user.sens?.stick && ( + + + {getSensString(user.sens.motion, user.sens.stick)} + + )} + ) } diff --git a/frontend-react/src/components/user/BuildTab.tsx b/frontend-react/src/components/user/BuildTab.tsx new file mode 100644 index 000000000..bb2015c89 --- /dev/null +++ b/frontend-react/src/components/user/BuildTab.tsx @@ -0,0 +1,30 @@ +import React from "react" +import { Build } from "../../types" +import { Flex, Box } from "@chakra-ui/core" +import BuildCard from "../builds/BuildCard" +import useLocalStorage from "@rehooks/local-storage" + +interface BuildTabProps { + builds: Build[] + canModifyBuilds: boolean +} + +const BuildTab: React.FC = ({ builds, canModifyBuilds }) => { + const [APView] = useLocalStorage("prefersAPView") + return ( + <> + + {builds.map(build => ( + + + + ))} + + + ) +} + +export default BuildTab diff --git a/frontend-react/src/components/user/UserPage.tsx b/frontend-react/src/components/user/UserPage.tsx index 7e62e5cf8..e7a1c18e6 100644 --- a/frontend-react/src/components/user/UserPage.tsx +++ b/frontend-react/src/components/user/UserPage.tsx @@ -21,6 +21,7 @@ import { Box, Tabs, TabList, Tab, TabPanels, TabPanel } from "@chakra-ui/core" import useTheme from "../../hooks/useTheme" import { Helmet } from "react-helmet-async" import { SEARCH_FOR_BUILDS } from "../../graphql/queries/searchForBuilds" +import BuildTab from "./BuildTab" interface Tab { id: number @@ -67,14 +68,17 @@ const UserPage: React.FC = ({ id }) => { const tabs = [] as Tab[] - if (builds.length > 0) { + if (builds.length > 0 || userLean?.discord_id === user.discord_id) { tabs.push({ id: 1, icon: FaTshirt, title: "Builds", content: ( -

hi

+ ), }) @@ -100,7 +104,7 @@ const UserPage: React.FC = ({ id }) => { {user.weapons && user.weapons.length > 0 && ( - + )} diff --git a/frontend-react/src/components/user/WeaponPool.tsx b/frontend-react/src/components/user/WeaponPool.tsx index 4bc3a23a8..515fb2270 100644 --- a/frontend-react/src/components/user/WeaponPool.tsx +++ b/frontend-react/src/components/user/WeaponPool.tsx @@ -1,7 +1,8 @@ import React from "react" import { Weapon } from "../../types" -import { Box, Flex, useColorMode } from "@chakra-ui/core" +import { Box, Flex } from "@chakra-ui/core" import WeaponImage from "../common/WeaponImage" +import useTheme from "../../hooks/useTheme" interface WeaponPoolProps { weapons: Weapon[] @@ -13,7 +14,7 @@ const styles = { } as const const WeaponPool: React.FC = ({ weapons }) => { - const { colorMode } = useColorMode() + const { colorMode, grayWithShade } = useTheme() const borderStyle: string = styles[colorMode] return ( @@ -28,12 +29,11 @@ const WeaponPool: React.FC = ({ weapons }) => { > Weapon pool diff --git a/frontend-react/src/hooks/useTheme.tsx b/frontend-react/src/hooks/useTheme.ts similarity index 82% rename from frontend-react/src/hooks/useTheme.tsx rename to frontend-react/src/hooks/useTheme.ts index b2dd7bddc..3b9a1b97b 100644 --- a/frontend-react/src/hooks/useTheme.tsx +++ b/frontend-react/src/hooks/useTheme.ts @@ -3,11 +3,14 @@ import { useLocalStorage } from "@rehooks/local-storage" import { ThemeColor } from "../types" interface Theme { + colorMode: "light" | "dark" bgColor: "#eff0f3" | "#232946" + darkerBgColor: "#D6D7DA" | "#0A102D" textColor: "#0d0d0d" | "#fffffe" borderStyle: | "1px solid rgba(0, 0, 0, .2)" | "1px solid rgba(255, 255, 255, .2)" + grayWithShade: "gray.300" | "gray.600" themeColorWithShade: string themeColorHex: string themeColor: ThemeColor @@ -18,7 +21,9 @@ function useTheme(): Theme { const chakraTheme = useChakraTheme() const light = colorMode === "light" const bgColor = light ? "#eff0f3" : "#232946" + const darkerBgColor = light ? "#D6D7DA" : "#0A102D" const textColor = light ? "#0d0d0d" : "#fffffe" + const grayWithShade = light ? "gray.600" : "gray.300" const borderStyle = light ? "1px solid rgba(0, 0, 0, .2)" : "1px solid rgba(255, 255, 255, .2)" @@ -35,10 +40,13 @@ function useTheme(): Theme { const themeColorHex = chakraTheme.colors[themeColor]["500"] return { + colorMode, bgColor, + darkerBgColor, textColor, borderStyle, themeColorWithShade, + grayWithShade, themeColorHex, themeColor, } diff --git a/frontend-react/src/index.tsx b/frontend-react/src/index.tsx index ef5095661..2076570b8 100644 --- a/frontend-react/src/index.tsx +++ b/frontend-react/src/index.tsx @@ -5,7 +5,6 @@ import { ThemeProvider, ColorModeProvider, CSSReset } from "@chakra-ui/core" import { ApolloProvider } from "@apollo/react-hooks" import { HelmetProvider } from "react-helmet-async" import ApolloClient from "apollo-boost" -import "./index.css" import * as serviceWorker from "./serviceWorker" const client = new ApolloClient({ diff --git a/frontend-react/src/react-app-env.d.ts b/frontend-react/src/react-app-env.d.ts index 6431bc5fc..9dfc9c0ba 100644 --- a/frontend-react/src/react-app-env.d.ts +++ b/frontend-react/src/react-app-env.d.ts @@ -1 +1,6 @@ /// + +declare module "*.png" { + const value: any + export = value +} diff --git a/frontend-react/src/types.ts b/frontend-react/src/types.ts index bff66cda5..e88ce55ca 100644 --- a/frontend-react/src/types.ts +++ b/frontend-react/src/types.ts @@ -21,10 +21,17 @@ type ElementType> = T extends ReadonlyArray< export type Weapon = ElementType export type CountryCode = ElementType export type ThemeColor = ElementType + export type HeadOnlyAbility = ElementType export type ClothingOnlyAbility = ElementType export type ShoesOnlyAbility = ElementType export type StackableAbility = ElementType +export type Ability = + | HeadOnlyAbility + | ClothingOnlyAbility + | ShoesOnlyAbility + | StackableAbility + export type HeadGear = ElementType export type ClothingGear = ElementType export type ShoesGear = ElementType diff --git a/index.js b/index.js index cd42cc3d9..6d612630a 100644 --- a/index.js +++ b/index.js @@ -67,8 +67,9 @@ passport.deserializeUser(function(discord_id, done) { }) console.log("connecting to MongoDB") -const dbName = +let dbName = process.env.NODE_ENV === "development" ? "development" : "production" +if (process.env.USE_PRODUCTION_DB) dbName = "production" mongoose .connect(process.env.MONGODB_URI, { diff --git a/package.json b/package.json index e1ffb0758..5679a6979 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "main": "index.js", "scripts": { "start": "cross-env LOGGED_IN=TRUE node index.js", + "withprod": "cross-env LOGGED_IN=TRUE USE_PRODUCTION_DB=TRUE node index.js", "loggedout": "node index.js", "watch": "cross-env LOGGED_IN=TRUE nodemon index.js", "build": "cd frontend-react && npm install && npm run build && mv build ../build",