From 61602a2390c74a13c0535ffd75cc904c8ab64b32 Mon Sep 17 00:00:00 2001
From: Sendou <sendou77@gmail.com>
Date: Wed, 8 Apr 2020 00:55:54 +0300
Subject: [PATCH] markdown help

---
 .../components/markdown/MarkdownHelpPage.tsx  | 116 ++++++++++++++++++
 frontend-react/src/components/root/Routes.tsx |   2 +
 .../src/components/user/ProfileModal.tsx      |   6 +
 graphql-schemas/maps.js                       |  43 +++++--
 4 files changed, 154 insertions(+), 13 deletions(-)
 create mode 100644 frontend-react/src/components/markdown/MarkdownHelpPage.tsx

diff --git a/frontend-react/src/components/markdown/MarkdownHelpPage.tsx b/frontend-react/src/components/markdown/MarkdownHelpPage.tsx
new file mode 100644
index 000000000..39123f714
--- /dev/null
+++ b/frontend-react/src/components/markdown/MarkdownHelpPage.tsx
@@ -0,0 +1,116 @@
+import React, { useContext } from "react"
+import { RouteComponentProps } from "@reach/router"
+import PageHeader from "../common/PageHeader"
+import { Box, Link, Flex } from "@chakra-ui/core"
+import MyThemeContext from "../../themeContext"
+import WeaponImage from "../common/WeaponImage"
+import Emoji from "../elements/Emoji"
+
+interface MarkdownHelpPageProps {}
+
+const MarkdownHelpPage: React.FC<RouteComponentProps> = () => {
+  const { themeColorWithShade } = useContext(MyThemeContext)
+  return (
+    <>
+      <PageHeader title="Markdown Help" />
+      <Box>
+        <p>
+          You are already familiar with Markdown since you have used Discord.
+          There are several good resources online to help you learn Markdown.
+          One good one is the one{" "}
+          <Link
+            href="https://guides.github.com/features/mastering-markdown/"
+            color={themeColorWithShade}
+          >
+            GitHub provides.
+          </Link>{" "}
+          Big thing we don't support is embedding images but mostly everything
+          else works. Be mindful of some Markdown quirks such as needing to use
+          double space after a line and before a linebreak for it to display
+          normally.
+        </p>
+        <p style={{ marginTop: "1em" }}>
+          We also support certain special emoji. Below listed are the groups and
+          few representatives as example:
+        </p>
+        <p style={{ marginTop: "0.5em" }}>
+          <b>Weapon emoji</b>
+          <Flex flexDir="column">
+            <Box>
+              :luna_blaster: ->{" "}
+              <WeaponImage size="SMALL" englishName="Luna Blaster" />
+            </Box>
+            <Box>
+              :.96_gal: -> <WeaponImage size="SMALL" englishName=".96 Gal" />
+            </Box>
+            <Box>
+              :custom_e-liter_4k_scope: ->{" "}
+              <WeaponImage size="SMALL" englishName="Custom E-liter 4K Scope" />
+            </Box>
+          </Flex>
+        </p>
+        <p style={{ marginTop: "0.5em" }}>
+          <b>Mode emoji</b>
+          <Flex flexDir="column">
+            <Box>
+              :splat_zones: -> <Emoji value=":splat_zones:" />
+            </Box>
+            <Box>
+              :tower_control: -> <Emoji value=":tower_control:" />
+            </Box>
+            <Box>
+              :rainmaker: -> <Emoji value=":rainmaker:" />
+            </Box>
+            <Box>
+              :clam_blitz: -> <Emoji value=":clam_blitz:" />
+            </Box>
+          </Flex>
+        </p>
+        <p style={{ marginTop: "0.5em" }}>
+          <b>Ability emoji</b>
+          <Flex flexDir="column">
+            <Box>
+              :ssu: -> <Emoji value=":ssu:" />
+            </Box>
+            <Box>
+              :t: -> <Emoji value=":t:" />
+            </Box>
+            <Box>
+              :rp: -> <Emoji value=":rp:" />
+            </Box>
+          </Flex>
+        </p>
+        <p style={{ marginTop: "0.5em" }}>
+          <b>Ability emoji</b>
+          <Flex flexDir="column">
+            <Box>
+              :ssu: -> <Emoji value=":ssu:" />
+            </Box>
+            <Box>
+              :t: -> <Emoji value=":t:" />
+            </Box>
+            <Box>
+              :rp: -> <Emoji value=":rp:" />
+            </Box>
+          </Flex>
+        </p>
+        <p style={{ marginTop: "0.5em" }}>
+          <b>Gear emoji</b>
+          <Flex flexDir="column">
+            <Box>
+              :power_armor: -> <Emoji value=":power_armor:" />
+            </Box>
+            <Box>
+              :olive_zekko_parka: -> <Emoji value=":olive_zekko_parka:" />
+            </Box>
+            <Box>
+              :black_norimaki_750s: -> <Emoji value=":black_norimaki_750s:" />
+            </Box>
+          </Flex>
+        </p>
+      </Box>
+    </>
+  )
+}
+
+export default MarkdownHelpPage
diff --git a/frontend-react/src/components/root/Routes.tsx b/frontend-react/src/components/root/Routes.tsx
index 6af62ca10..b22933870 100644
--- a/frontend-react/src/components/root/Routes.tsx
+++ b/frontend-react/src/components/root/Routes.tsx
@@ -7,6 +7,7 @@ import AdminPage from "../admin/AdminPage"
 
 const HomePage = lazy(() => import("../home/HomePage"))
 const UserPage = lazy(() => import("../user/UserPage"))
+const MarkdownHelpPage = lazy(() => import("../markdown/MarkdownHelpPage"))
 const BuildsPage = lazy(() => import("../builds/BuildsPage"))
 const CalendarPage = lazy(() => import("../calendar/CalendarPage"))
 const TournamentsPage = lazy(() => import("../tournaments/TournamentsPage"))
@@ -35,6 +36,7 @@ const Routes: React.FC = () => {
           <HomePage path="/" />
           <AdminPage path="/admin" />
           <UserPage path="/u/:id" />
+          <MarkdownHelpPage path="/markdown" />
           <TeamPage path="/t/:name" />
           <BuildsPage path="/builds" />
           <MapPlannerPage path="/plans" />
diff --git a/frontend-react/src/components/user/ProfileModal.tsx b/frontend-react/src/components/user/ProfileModal.tsx
index 94979aaf4..e348a3b66 100644
--- a/frontend-react/src/components/user/ProfileModal.tsx
+++ b/frontend-react/src/components/user/ProfileModal.tsx
@@ -168,6 +168,12 @@ const ProfileModal: React.FC<ProfileModalProps> = ({
             label="Bio"
             limit={10000}
           />
+          <Box color={grayWithShade} mt="0.5em" fontSize="15px">
+            Markdown is supported. See:{" "}
+            <a href="/markdown" target="_blank" rel="noreferrer noopener">
+              https://sendou.ink/markdown
+            </a>
+          </Box>
         </Box>
         <Box mt="1em">
           <Button
diff --git a/graphql-schemas/maps.js b/graphql-schemas/maps.js
index 050ad0c8a..ec47ae302 100644
--- a/graphql-schemas/maps.js
+++ b/graphql-schemas/maps.js
@@ -66,7 +66,7 @@ const resolvers = {
     maplists: (root, args) => {
       return Maplist.find({})
         .sort({ order: "asc" })
-        .catch(e => {
+        .catch((e) => {
           throw new UserInputError(e.message, {
             invalidArgs: args,
           })
@@ -88,7 +88,7 @@ const resolvers = {
       })
 
       if (!mapBallot) {
-        return maps.map(map => ({ name: map, sz: 0, tc: 0, rm: 0, cb: 0 }))
+        return maps.map((map) => ({ name: map, sz: 0, tc: 0, rm: 0, cb: 0 }))
       }
 
       return mapBallot.maps
@@ -97,8 +97,8 @@ const resolvers = {
       const ballots = await MapBallot.find({})
 
       const count = {}
-      ballots.forEach(ballot => {
-        ballot.maps.forEach(stage => {
+      ballots.forEach((ballot) => {
+        ballot.maps.forEach((stage) => {
           let toIcrement = 0
           if (stage[args.mode.toLowerCase()] === 1) toIcrement = 1
 
@@ -160,11 +160,11 @@ const resolvers = {
       const ballots = await MapBallot.find({}).populate("discord_user")
 
       const validBallots = ballots.filter(
-        ballot => !!ballot.discord_user.plus.membership_status
+        (ballot) => !!ballot.discord_user.plus.membership_status
       )
 
       const voter_count = validBallots.length
-      const vote_counts = maps.map(stage => ({
+      const vote_counts = maps.map((stage) => ({
         name: stage,
         sz: [0, 0, 0],
         tc: [0, 0, 0],
@@ -172,7 +172,7 @@ const resolvers = {
         cb: [0, 0, 0],
       }))
 
-      validBallots.forEach(ballot =>
+      validBallots.forEach((ballot) =>
         ballot.maps.forEach((stage, index) => {
           const { sz, tc, rm, cb } = stage
           // one is added to the index so -1 vote goes to 0 index, 0 to 1 and 1 to 2
@@ -184,8 +184,8 @@ const resolvers = {
       )
 
       let allMaps = []
-      vote_counts.forEach(count => {
-        ;["sz", "tc", "rm", "cb"].forEach(mode => {
+      vote_counts.forEach((count) => {
+        ;["sz", "tc", "rm", "cb"].forEach((mode) => {
           allMaps.push({
             name: count.name,
             score: +(
@@ -212,7 +212,26 @@ const resolvers = {
       }
 
       const mapCount = {}
-      let modeToAddTo = "sz"
+
+      // we switch monthly to add variance
+      const now = new Date()
+      const month = now.getMonth() + 1
+      const monthModes = [
+        null,
+        "sz",
+        "tc",
+        "rm",
+        "cb",
+        "sz",
+        "tc",
+        "rm",
+        "cb",
+        "sz",
+        "tc",
+        "rm",
+        "cb",
+      ]
+      let modeToAddTo = monthModes[month]
       const nextModeDict = {
         sz: "tc",
         tc: "rm",
@@ -262,8 +281,6 @@ const resolvers = {
       rmMapPool.sort((a, b) => maps.indexOf(a) - maps.indexOf(b))
       cbMapPool.sort((a, b) => maps.indexOf(a) - maps.indexOf(b))
 
-      const now = new Date()
-
       const maplist = {
         name: `Plus Server ${now.toLocaleString("default", {
           month: "long",
@@ -274,7 +291,7 @@ const resolvers = {
         cb: cbMapPool,
         order: 0,
         plus: {
-          month: now.getMonth() + 1,
+          month,
           year: now.getFullYear(),
           voter_count,
           vote_counts,