map voting history displayed

2026-04-24 23:19:39 -05:00 · 2020-03-19 22:53:08 +02:00 · 2020-03-19 22:53:08 +02:00 · 1dbd9c3918
commit 1dbd9c3918
parent fd6fdf6b3d
7 changed files with 153 additions and 43 deletions
--- a/frontend-react/package-lock.json
+++ b/frontend-react/package-lock.json
@ -11975,9 +11975,9 @@
      }
    },
    "react": {
-      "version": "16.13.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.13.0.tgz",
-      "integrity": "sha512-TSavZz2iSLkq5/oiE7gnFzmURKZMltmi193rm5HEoUDAXpzT9Kzw6oNZnGoai/4+fUnm7FqS5dwgUL34TujcWQ==",
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
+      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1",
@ -12162,14 +12162,14 @@
      }
    },
    "react-dom": {
-      "version": "16.13.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.0.tgz",
-      "integrity": "sha512-y09d2c4cG220DzdlFkPTnVvGTszVvNpC73v+AaLGLHbkpy3SSgvYq8x0rNwPJ/Rk/CicTNgk0hbHNw1gMEZAXg==",
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
+      "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1",
        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.0"
+        "scheduler": "^0.19.1"
      }
    },
    "react-draggable": {
@ -13183,9 +13183,9 @@
      }
    },
    "scheduler": {
-      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.0.tgz",
-      "integrity": "sha512-xowbVaTPe9r7y7RUejcK73/j8tt2jfiyTednOvHbA8JoClvMYCp+r8QegLwK/n8zWQAtZb1fFnER4XLBZXrCxA==",
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1"
--- a/frontend-react/package.json
+++ b/frontend-react/package.json
@ -28,10 +28,10 @@
    "graphql": "^14.6.0",
    "jstz": "^2.1.1",
    "node-sass": "^4.13.1",
-    "react": "^16.13.0",
+    "react": "^16.13.1",
    "react-color": "^2.18.0",
    "react-datepicker": "^2.14.0",
-    "react-dom": "^16.13.0",
+    "react-dom": "^16.13.1",
    "react-draggable": "^4.2.0",
    "react-helmet-async": "^1.0.4",
    "react-hotkeys-hook": "^1.6.0",
--- a/frontend-react/src/components/elements/IconButton.tsx
+++ b/frontend-react/src/components/elements/IconButton.tsx
@ -8,9 +8,15 @@ interface IconButtonProps {
  icon: IconType
  onClick?: () => void
  colored?: boolean
+  disabled?: boolean
 }

-const IconButton: React.FC<IconButtonProps> = ({ colored, icon, onClick }) => {
+const IconButton: React.FC<IconButtonProps> = ({
+  colored,
+  icon,
+  disabled,
+  onClick,
+}) => {
  const { themeColor } = useContext(MyThemeContext)
  return (
    <ChakraIconButton
@ -21,6 +27,7 @@ const IconButton: React.FC<IconButtonProps> = ({ colored, icon, onClick }) => {
      onClick={onClick}
      size="lg"
      variantColor={colored ? themeColor : undefined}
+      isDisabled={disabled}
    />
  )
 }
--- a/frontend-react/src/components/plus/MapVotingHistoryPage.tsx
+++ b/frontend-react/src/components/plus/MapVotingHistoryPage.tsx
@ -4,7 +4,7 @@ import Loading from "../common/Loading"
 import Error from "../common/Error"
 import { months } from "../../utils/lists"
 import { RouteComponentProps } from "@reach/router"
-import { Flex, Heading, Avatar } from "@chakra-ui/core"
+import { Flex, Heading, Avatar, Box, Icon } from "@chakra-ui/core"
 import PageHeader from "../common/PageHeader"
 import { Helmet } from "react-helmet-async"
 import {
@ -14,9 +14,12 @@ import {
 import MyThemeContext from "../../themeContext"
 import { Stage } from "../../types"
 import { mapIcons } from "../../assets/imageImports"
+import { FaCheck, FaArrowLeft, FaArrowRight } from "react-icons/fa"
+import Alert from "../elements/Alert"
+import IconButton from "../elements/IconButton"

 interface MaplistCardProps {
-  title: string
+  maplist: Stage[]
  voteCounts: {
    name: Stage
    sz: number[]
@ -24,10 +27,36 @@ interface MaplistCardProps {
    rm: number[]
    cb: number[]
  }[]
+  modeShort: "sz" | "tc" | "rm" | "cb"
 }

-/*const MaplistCard: React.FC<MaplistCardProps> = ({ title, voteCounts }) => {
-  const { themeColorHex } = useContext(MyThemeContext)
+const MaplistCard: React.FC<MaplistCardProps> = ({
+  maplist,
+  voteCounts,
+  modeShort,
+}) => {
+  const {
+    grayWithShade,
+    themeColorHex,
+    colorMode,
+    themeColorWithShade,
+  } = useContext(MyThemeContext)
+
+  const votedMaps = voteCounts.reduce((acc, cur) => {
+    const maxScore =
+      (cur[modeShort][0] + cur[modeShort][1] + cur[modeShort][2]) * 2
+    const score = +(
+      ((cur[modeShort][1] * 1 + cur[modeShort][2] * 2) / maxScore) *
+      100
+    ).toFixed(2)
+    const mapObject = { name: cur.name, score, votes: cur[modeShort] }
+    return [...acc, mapObject]
+  }, [] as { name: string; score: number; votes: number[] }[])
+
+  votedMaps.sort((a, b) => b.score - a.score)
+
+  const shade = colorMode === "light" ? "600" : "400"
+
  return (
    <>
      <Flex
@ -41,19 +70,46 @@ interface MaplistCardProps {
        w="350px"
      >
        <Heading textAlign="center" mb="0.5em" color={themeColorHex}>
-          {title}
+          <Icon
+            name={modeShort as any}
+            color={themeColorWithShade}
+            size="2em"
+          />
        </Heading>
-        <Flex alignItems="center" justifyContent="center" flexWrap="wrap">
-          {voteCounts.map(stage => {
+        <Flex alignItems="center" flexWrap="wrap">
+          {votedMaps.map(stage => {
            return (
-              <Flex key={stage}>
+              <Flex key={stage.name} my="0.5em">
                <Avatar
-                  src={mapIcons[stage]}
+                  src={mapIcons[stage.name]}
                  size="lg"
                  my="5px"
                  mr="0.5em"
-                  title={stage}
+                  title={stage.name}
                />
+                <Flex flexDirection="column">
+                  <Box
+                    color={
+                      maplist.indexOf(stage.name) !== -1
+                        ? "green.500"
+                        : grayWithShade
+                    }
+                  >
+                    <b>{stage.name}</b>
+                  </Box>
+                  <Box fontSize="20px">
+                    <b>{stage.score}%</b>
+                  </Box>
+                  <Box fontSize="18px">
+                    <Box as="span" color={`red.${shade}`}>
+                      {stage.votes[0]}
+                    </Box>{" "}
+                    {stage.votes[1]}{" "}
+                    <Box as="span" color={`green.${shade}`}>
+                      {stage.votes[2]}
+                    </Box>
+                  </Box>
+                </Flex>
              </Flex>
            )
          })}
@ -61,7 +117,7 @@ interface MaplistCardProps {
      </Flex>
    </>
  )
-}*/
+}

 const MapVotingHistoryPage: React.FC<RouteComponentProps> = () => {
  const { data, error, loading } = useQuery<PlusMaplistsData>(PLUS_MAPLISTS)
@ -70,13 +126,49 @@ const MapVotingHistoryPage: React.FC<RouteComponentProps> = () => {
  if (error) return <Error errorMessage={error.message} />
  if (loading || !data) return <Loading />

+  const maplistObject = data.plusMaplists[index]
+
  return (
    <>
      <Helmet>
        <title>Plus Server Map Voting History | sendou.ink</title>
      </Helmet>
      <PageHeader title="Map Voting History" />
-      {/*<MaplistCard />*/}
+      <Flex justifyContent="center" alignItems="center">
+        <IconButton
+          icon={FaArrowLeft}
+          disabled={index === 0}
+          onClick={() => setIndex(index - 1)}
+        />
+        <Heading size="lg">{maplistObject.name}</Heading>
+        <IconButton
+          icon={FaArrowRight}
+          disabled={index === data.plusMaplists.length - 1}
+          onClick={() => setIndex(index + 1)}
+        />
+      </Flex>
+      <Flex flexWrap="wrap" mt="1em" justifyContent="center">
+        <MaplistCard
+          modeShort="sz"
+          maplist={maplistObject.sz}
+          voteCounts={maplistObject.plus.vote_counts}
+        />
+        <MaplistCard
+          modeShort="tc"
+          maplist={maplistObject.tc}
+          voteCounts={maplistObject.plus.vote_counts}
+        />
+        <MaplistCard
+          modeShort="rm"
+          maplist={maplistObject.rm}
+          voteCounts={maplistObject.plus.vote_counts}
+        />
+        <MaplistCard
+          modeShort="cb"
+          maplist={maplistObject.cb}
+          voteCounts={maplistObject.plus.vote_counts}
+        />
+      </Flex>
    </>
  )
 }
--- a/frontend-react/src/components/plus/Maplist.tsx
+++ b/frontend-react/src/components/plus/Maplist.tsx
@ -1,16 +1,16 @@
 import React, { useContext } from "react"
-import { Heading, Flex, Box, Avatar } from "@chakra-ui/core"
+import { Heading, Flex, Box, Avatar, Icon } from "@chakra-ui/core"
 import { mapIcons } from "../../assets/imageImports"
 import MyThemeContext from "../../themeContext"
 import { Stage } from "../../types"

 interface MaplistCardProps {
-  title: string
+  modeShort: string
  stages: Stage[]
 }

-const MaplistCard: React.FC<MaplistCardProps> = ({ title, stages }) => {
-  const { themeColorHex } = useContext(MyThemeContext)
+const MaplistCard: React.FC<MaplistCardProps> = ({ modeShort, stages }) => {
+  const { themeColorHex, themeColorWithShade } = useContext(MyThemeContext)
  return (
    <Flex
      flexDirection="column"
@ -23,7 +23,7 @@ const MaplistCard: React.FC<MaplistCardProps> = ({ title, stages }) => {
      w="350px"
    >
      <Heading textAlign="center" mb="0.5em" color={themeColorHex}>
-        {title}
+        <Icon name={modeShort as any} color={themeColorWithShade} size="2em" />
      </Heading>
      <Flex alignItems="center" justifyContent="center" flexWrap="wrap">
        {stages.map(stage => {
@ -65,10 +65,10 @@ const Maplist: React.FC<MaplistProps> = ({
      <Heading size="lg">{name} maps</Heading>
      <Box>Based on {voterCount} votes</Box>
      <Flex flexWrap="wrap" pt="1em">
-        <MaplistCard stages={sz} title="Splat Zones" />
-        <MaplistCard stages={tc} title="Tower Control" />
-        <MaplistCard stages={rm} title="Rainmaker" />
-        <MaplistCard stages={cb} title="Clam Blitz" />
+        <MaplistCard stages={sz} modeShort="sz" />
+        <MaplistCard stages={tc} modeShort="tc" />
+        <MaplistCard stages={rm} modeShort="rm" />
+        <MaplistCard stages={cb} modeShort="cb" />
      </Flex>
    </>
  )
--- a/frontend-react/src/components/plus/PlusPage.tsx
+++ b/frontend-react/src/components/plus/PlusPage.tsx
@ -9,7 +9,7 @@ import { USER } from "../../graphql/queries/user"
 //import Voting from "./Voting"
 import { Redirect, RouteComponentProps, Link } from "@reach/router"
 import PageHeader from "../common/PageHeader"
-import { FaHistory, FaVoteYea } from "react-icons/fa"
+import { FaHistory, FaVoteYea, FaMapMarkedAlt } from "react-icons/fa"
 import Button from "../elements/Button"
 import { Helmet } from "react-helmet-async"
 import { Flex, Box } from "@chakra-ui/core"
@ -79,19 +79,28 @@ const PlusPage: React.FC<RouteComponentProps> = () => {
          handleError={handleError}
        />
      )*/}
-      <Flex mb="1em">
-        <Box mr="1em">
+      <Flex mb="1em" flexWrap="wrap">
+        <Box mr="1em" mt="1em">
          <Link to="/plus/history">
            <Button outlined icon={FaHistory}>
-              Show voting history
+              Show player voting history
+            </Button>
+          </Link>
+        </Box>
+        <Box mr="1em" mt="1em">
+          <Link to="/plus/maphistory">
+            <Button outlined icon={FaMapMarkedAlt}>
+              Show map voting history
+            </Button>
+          </Link>
+        </Box>
+        <Box mr="1em" mt="1em">
+          <Link to="/plus/mapvoting">
+            <Button outlined icon={FaVoteYea}>
+              Vote on maps
            </Button>
          </Link>
        </Box>
-        <Link to="/plus/mapvoting">
-          <Button outlined icon={FaVoteYea}>
-            Vote on maps
-          </Button>
-        </Link>
      </Flex>
      <Maplist
        name={maplist.name}
--- a/frontend-react/src/components/root/Routes.tsx
+++ b/frontend-react/src/components/root/Routes.tsx
@ -19,6 +19,7 @@ const XSearch = lazy(() => import("../xsearch/Top500BrowserPage"))
 const PlusPage = lazy(() => import("../plus/PlusPage"))
 const Access = lazy(() => import("./Access"))
 const VotingHistoryPage = lazy(() => import("../plus/VotingHistoryPage"))
+const MapVotingHistoryPage = lazy(() => import("../plus/MapVotingHistoryPage"))
 const MapVoting = lazy(() => import("../plus/MapVoting"))
 const About = lazy(() => import("./About"))
 const Links = lazy(() => import("./Links"))
@ -43,6 +44,7 @@ const Routes: React.FC = () => {
          <Access path="/access" />
          <PlusPage path="/plus" />
          <VotingHistoryPage path="/plus/history" />
+          <MapVotingHistoryPage path="/plus/maphistory" />
          <MapVoting path="/plus/mapvoting" />
          <NotFound default />
        </ScrollToTop>