fixes #107

frontend-react/public/locales/en/translation.json

@@ -1384,7 +1384,8 @@
     "Slosher has weird physics so we haven't fully deciphered this parameter.": "Slosher has weird physics so we haven't fully deciphered this parameter.",
     "damage": "damage",
     "pointShort": "p",
-    "Damage taken in enemy ink": "Damage taken in enemy ink"
+    "Damage taken in enemy ink": "Damage taken in enemy ink",
+    "Intensity": "Intensity"
   },
   "users": {
     "Filter by username, Twitter name or Discord ID": "Filter by username, Twitter name or Discord ID",

frontend-react/src/components/analyzer/LdeSlider.tsx

@@ -1,15 +1,17 @@
-import React, { useContext } from "react"
-import MyThemeContext from "../../themeContext"
 import {
-  Flex,
   Box,
-  Slider,
-  SliderTrack,
-  SliderFilledTrack,
-  SliderThumb,
+  Flex,
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  Text,
 } from "@chakra-ui/core"
+import React, { useContext } from "react"
+import { Trans, useTranslation } from "react-i18next"
+import MyThemeContext from "../../themeContext"
 import AbilityIcon from "../builds/AbilityIcon"
-import { useTranslation, Trans } from "react-i18next"
 
 interface LdeSliderProps {
   value: number
@@ -17,9 +19,7 @@ interface LdeSliderProps {
 }
 
 const LdeSlider: React.FC<LdeSliderProps> = ({ value, setValue }) => {
-  const { themeColor, themeColorWithShade, grayWithShade } = useContext(
-    MyThemeContext
-  )
+  const { themeColorWithShade, grayWithShade } = useContext(MyThemeContext)
   const { t } = useTranslation()
   const bonusAp = Math.floor((24 / 21) * value)
 
@@ -42,20 +42,31 @@ const LdeSlider: React.FC<LdeSliderProps> = ({ value, setValue }) => {
       flexDirection="column"
       mb="1em"
     >
-      <Slider
-        value={value}
-        onChange={(value: number) => setValue(value)}
-        max={21}
+      <Text
+        fontSize="sm"
+        color={grayWithShade}
+        textTransform="uppercase"
+        letterSpacing="wider"
+        lineHeight="1rem"
+        fontWeight="medium"
+        mb={1}
       >
-        <SliderTrack bg={`${themeColor}.100`}>
-          <SliderFilledTrack bg={themeColorWithShade} />
-        </SliderTrack>
-        <SliderThumb w={6} h={6}>
-          <Box minW="30px">
-            <AbilityIcon ability="LDE" size="TINY" />
-          </Box>
-        </SliderThumb>
-      </Slider>
+        {t("analyzer;Intensity")}
+      </Text>
+      <NumberInput
+        size="lg"
+        defaultValue={0}
+        min={0}
+        max={21}
+        value={value}
+        onChange={(_, value) => setValue(value)}
+      >
+        <NumberInputField />
+        <NumberInputStepper>
+          <NumberIncrementStepper />
+          <NumberDecrementStepper />
+        </NumberInputStepper>
+      </NumberInput>
       {value > 0 && (
         <Box color={themeColorWithShade} fontWeight="bold" mt="1em">
           +{bonusAp}

frontend-react/src/components/markdown/MarkdownHelpPage.tsx

@@ -1,14 +1,12 @@
-import React, { useContext, useState } from "react"
+import { Box, Collapse, Flex, Link } from "@chakra-ui/core"
 import { RouteComponentProps } from "@reach/router"
-import PageHeader from "../common/PageHeader"
-import { Box, Link, Flex, Collapse } from "@chakra-ui/core"
+import React, { useContext, useState } from "react"
 import MyThemeContext from "../../themeContext"
+import { abilitiesGameOrder, gearCodes, weaponCodes } from "../../utils/lists"
+import PageHeader from "../common/PageHeader"
 import WeaponImage from "../common/WeaponImage"
-import Emoji from "../elements/Emoji"
 import Button from "../elements/Button"
-import { weaponCodes, abilitiesGameOrder, gearCodes } from "../../utils/lists"
-
-interface MarkdownHelpPageProps {}
+import Emoji from "../elements/Emoji"
 
 const MarkdownHelpPage: React.FC<RouteComponentProps> = () => {
   const { themeColorWithShade } = useContext(MyThemeContext)

frontend-react/src/components/plans/DraggableWeaponSelector.tsx

@@ -1,17 +1,17 @@
-import React, { useState, useContext } from "react"
+import { Box, Flex } from "@chakra-ui/core"
+import React, { useContext, useState } from "react"
 import Draggable from "react-draggable"
+import { useTranslation } from "react-i18next"
+import MyThemeContext from "../../themeContext"
+import { Weapon } from "../../types"
 import { weapons } from "../../utils/lists"
 import WeaponImage from "../common/WeaponImage"
-import { Box, Flex } from "@chakra-ui/core"
-import { Weapon } from "../../types"
-import MyThemeContext from "../../themeContext"
-import { useTranslation } from "react-i18next"
 
-interface DraggableWeaponSelector {
+interface DraggableWeaponSelectorProps {
   addWeaponImage: (weapon: Weapon) => void
 }
 
-const DraggableWeaponSelector: React.FC<DraggableWeaponSelector> = ({
+const DraggableWeaponSelector: React.FC<DraggableWeaponSelectorProps> = ({
   addWeaponImage,
 }) => {
   const { darkerBgColor } = useContext(MyThemeContext)

frontend-react/src/components/root/Links.tsx

@@ -1,17 +1,17 @@
-import React, { useContext } from "react"
 import { useQuery } from "@apollo/react-hooks"
-import { LINKS } from "../../graphql/queries/links"
-import Loading from "../common/Loading"
-import Error from "../common/Error"
-import { Helmet } from "react-helmet-async"
-import PageHeader from "../common/PageHeader"
+import { Box, Flex, Heading, Link } from "@chakra-ui/core"
 import { RouteComponentProps } from "@reach/router"
-import { Heading, Link, Flex, Box } from "@chakra-ui/core"
-import MyThemeContext from "../../themeContext"
+import React, { useContext } from "react"
+import { Helmet } from "react-helmet-async"
 import { useTranslation } from "react-i18next"
+import { LINKS } from "../../graphql/queries/links"
+import MyThemeContext from "../../themeContext"
+import Error from "../common/Error"
+import Loading from "../common/Loading"
+import PageHeader from "../common/PageHeader"
 import Alert from "../elements/Alert"
 
-interface Link {
+interface LinkI {
   title: string
   url: string
   description: string
@@ -19,7 +19,7 @@ interface Link {
 }
 
 interface LinksData {
-  links: Link[]
+  links: LinkI[]
 }
 
 const Links: React.FC<RouteComponentProps> = () => {
@@ -31,7 +31,7 @@ const Links: React.FC<RouteComponentProps> = () => {
   if (error) return <Error errorMessage={error.message} />
   const links = data.links
 
-  const linkMap = (link: Link) => (
+  const linkMap = (link: LinkI) => (
     <React.Fragment key={link.title}>
       <Link href={link.url} color={themeColorWithShade}>
         <b>{link.title}</b>

frontend-react/src/components/user/UserPage.tsx

@@ -11,6 +11,7 @@ import {
 import { Redirect, RouteComponentProps } from "@reach/router"
 import React, { useContext } from "react"
 import { Helmet } from "react-helmet-async"
+import { Trans, useTranslation } from "react-i18next"
 import { FaTrophy, FaTshirt } from "react-icons/fa"
 import { IconType } from "react-icons/lib/cjs"
 import { PLAYER_INFO } from "../../graphql/queries/playerInfo"
@@ -29,16 +30,15 @@ import {
   SearchForBuildsVars,
   UserData,
 } from "../../types"
-import { weapons, canAddJpnBuildsIds } from "../../utils/lists"
+import { canAddJpnBuildsIds, weapons } from "../../utils/lists"
 import Error from "../common/Error"
 import Loading from "../common/Loading"
 import Markdown from "../elements/Markdown"
 import AvatarWithInfo from "./AvatarWithInfo"
 import BuildTab from "./BuildTab"
 import XRankTab from "./XRankTab"
-import { useTranslation, Trans } from "react-i18next"
 
-interface Tab {
+interface TabI {
   id: number
   icon: IconType
   title: JSX.Element
@@ -100,7 +100,7 @@ const UserPage: React.FC<RouteComponentProps & UserPageProps> = ({ id }) => {
   const user = data.searchForUser
   const builds = buildsData.searchForBuilds
 
-  const tabs: Tab[] = []
+  const tabs: TabI[] = []
 
   if (builds.length > 0 || userLean?.discord_id === user.discord_id) {
     tabs.push({