mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-09-14 15:16:09 -05:00
markdown help
This commit is contained in:
116
frontend-react/src/components/markdown/MarkdownHelpPage.tsx
Normal file
116
frontend-react/src/components/markdown/MarkdownHelpPage.tsx
Normal file
@@ -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
|
||||
@@ -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" />
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user