chore: lint & format

GZTimeWalker · Dec 10, 2024 · a0905f8 · a0905f8
1 parent fb2a667
commit a0905f8
Show file tree

Hide file tree

Showing 89 changed files with 362 additions and 1,309 deletions.
diff --git a/src/GZCTF/ClientApp/eslint.config.mjs b/src/GZCTF/ClientApp/eslint.config.mjs
@@ -49,9 +49,6 @@ export default [
 
     rules: {
       '@typescript-eslint/no-explicit-any': 'off',
-      '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
-      '@typescript-eslint/no-non-null-assertion': 'off',
-      '@typescript-eslint/no-unused-expressions': 'off',
       'react-hooks/exhaustive-deps': 'off',
       'react/display-name': 'off',
       'react/jsx-key': 'off',

diff --git a/src/GZCTF/ClientApp/prettier.config.mjs b/src/GZCTF/ClientApp/prettier.config.mjs
@@ -5,7 +5,7 @@ export default {
   singleQuote: true,
   trailingComma: 'es5',
   semi: false,
-  printWidth: 100,
+  printWidth: 120,
   htmlWhitespaceSensitivity: 'ignore',
   jsonRecursiveSort: true,
   plugins: ['@trivago/prettier-plugin-sort-imports', 'prettier-plugin-sort-json'],

diff --git a/src/GZCTF/ClientApp/src/App.tsx b/src/GZCTF/ClientApp/src/App.tsx
@@ -34,9 +34,7 @@ export const App: FC = () => {
         <ErrorBoundary FallbackComponent={ErrorFallback}>
           <Notifications zIndex={5000} />
           <DatesProvider settings={{ locale }}>
-            <ModalsProvider
-              labels={{ confirm: t('common.modal.confirm'), cancel: t('common.modal.cancel') }}
-            >
+            <ModalsProvider labels={{ confirm: t('common.modal.confirm'), cancel: t('common.modal.cancel') }}>
               <SWRConfig
                 value={{
                   refreshInterval: 10000,

diff --git a/src/GZCTF/ClientApp/src/components/ActionIconWithConfirm.tsx b/src/GZCTF/ClientApp/src/components/ActionIconWithConfirm.tsx
@@ -1,13 +1,4 @@
-import {
-  ActionIcon,
-  Button,
-  Group,
-  MantineColor,
-  MantineSpacing,
-  Popover,
-  Stack,
-  Text,
-} from '@mantine/core'
+import { ActionIcon, Button, Group, MantineColor, MantineSpacing, Popover, Stack, Text } from '@mantine/core'
 import { Icon } from '@mdi/react'
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -48,13 +39,7 @@ export const ActionIconWithConfirm: FC<ActionIconWithConfirmProps> = (props) =>
           </Text>
 
           <Group w="100%" justify="space-between">
-            <Button
-              size="xs"
-              py={2}
-              variant="outline"
-              disabled={props.disabled}
-              onClick={() => setOpened(false)}
-            >
+            <Button size="xs" py={2} variant="outline" disabled={props.disabled} onClick={() => setOpened(false)}>
               {t('common.modal.cancel')}
             </Button>
             <Button

diff --git a/src/GZCTF/ClientApp/src/components/AppHeader.tsx b/src/GZCTF/ClientApp/src/components/AppHeader.tsx
@@ -55,24 +55,14 @@ export const AppHeader: FC<AppControlProps> = ({ openColorModal }) => {
               ))}
             </Menu.Dropdown>
           </Menu>
-          <Menu
-            shadow="md"
-            opened={opened}
-            onClose={() => setOpened(false)}
-            width={200}
-            offset={13}
-          >
+          <Menu shadow="md" opened={opened} onClose={() => setOpened(false)} width={200} offset={13}>
             <Menu.Target>
               <Burger opened={opened} onClick={() => setOpened((o) => !o)} />
             </Menu.Target>
             <Menu.Dropdown>
               {user && !error ? (
                 <>
-                  <Menu.Item
-                    component={Link}
-                    to="/teams"
-                    leftSection={<Icon path={mdiAccountGroupOutline} size={1} />}
-                  >
+                  <Menu.Item component={Link} to="/teams" leftSection={<Icon path={mdiAccountGroupOutline} size={1} />}>
                     {t('common.tab.team')}
                   </Menu.Item>
                   <Menu.Item
@@ -82,11 +72,7 @@ export const AppHeader: FC<AppControlProps> = ({ openColorModal }) => {
                   >
                     {t('common.tab.account.profile')}
                   </Menu.Item>
-                  <Menu.Item
-                    color="red"
-                    onClick={logout}
-                    leftSection={<Icon path={mdiLogout} size={1} />}
-                  >
+                  <Menu.Item color="red" onClick={logout} leftSection={<Icon path={mdiLogout} size={1} />}>
                     {t('common.tab.account.logout')}
                   </Menu.Item>
                 </>
@@ -112,10 +98,7 @@ export const AppHeader: FC<AppControlProps> = ({ openColorModal }) => {
                 onClick={() => toggleColorScheme()}
               >
                 {t('common.tab.theme.switch_to', {
-                  theme:
-                    colorScheme === 'dark'
-                      ? t('common.tab.theme.light')
-                      : t('common.tab.theme.dark'),
+                  theme: colorScheme === 'dark' ? t('common.tab.theme.light') : t('common.tab.theme.dark'),
                 })}
               </Menu.Item>
               <Menu.Item onClick={clearLocalCache} leftSection={<Icon path={mdiCached} size={1} />}>

diff --git a/src/GZCTF/ClientApp/src/components/AppNavbar.tsx b/src/GZCTF/ClientApp/src/components/AppNavbar.tsx
@@ -1,13 +1,4 @@
-import {
-  ActionIcon,
-  AppShell,
-  Avatar,
-  Menu,
-  MenuDivider,
-  Stack,
-  Tooltip,
-  useMantineColorScheme,
-} from '@mantine/core'
+import { ActionIcon, AppShell, Avatar, Menu, MenuDivider, Stack, Tooltip, useMantineColorScheme } from '@mantine/core'
 import {
   mdiAccountCircleOutline,
   mdiAccountGroupOutline,
@@ -122,9 +113,7 @@ export const AppNavbar: FC<AppControlProps> = ({ openColorModal }) => {
       </AppShell.Section>
 
       {/* Common Nav */}
-      <AppShell.Section className={cx(classes.section, misc.justifyCenter)}>
-        {links}
-      </AppShell.Section>
+      <AppShell.Section className={cx(classes.section, misc.justifyCenter)}>{links}</AppShell.Section>
 
       <AppShell.Section className={cx(classes.section, misc.justifyEnd)}>
         <Stack w="100%" align="center" justify="center" gap={5}>
@@ -148,8 +137,7 @@ export const AppNavbar: FC<AppControlProps> = ({ openColorModal }) => {
           {/* Color Mode */}
           <Tooltip
             label={t('common.tab.theme.switch_to', {
-              theme:
-                colorScheme === 'dark' ? t('common.tab.theme.light') : t('common.tab.theme.dark'),
+              theme: colorScheme === 'dark' ? t('common.tab.theme.light') : t('common.tab.theme.dark'),
             })}
             classNames={classes}
             position="right"
@@ -197,11 +185,7 @@ export const AppNavbar: FC<AppControlProps> = ({ openColorModal }) => {
               </Menu.Item>
               <MenuDivider />
               {loggedIn ? (
-                <Menu.Item
-                  color="red"
-                  onClick={logout}
-                  leftSection={<Icon path={mdiLogout} size={1} />}
-                >
+                <Menu.Item color="red" onClick={logout} leftSection={<Icon path={mdiLogout} size={1} />}>
                   {t('common.tab.account.logout')}
                 </Menu.Item>
               ) : (

diff --git a/src/GZCTF/ClientApp/src/components/ChallengeModal.tsx b/src/GZCTF/ClientApp/src/components/ChallengeModal.tsx
@@ -66,16 +66,13 @@ export const ChallengeModal: FC<ChallengeModalProps> = (props) => {
   }, [challenge])
 
   const isContainer =
-    challenge?.type === ChallengeType.StaticContainer ||
-    challenge?.type === ChallengeType.DynamicContainer
+    challenge?.type === ChallengeType.StaticContainer || challenge?.type === ChallengeType.DynamicContainer
 
   const title = (
     <Stack gap="xs">
       <Group wrap="nowrap" w="100%" justify="space-between" gap="sm">
         <Group wrap="nowrap" gap="sm" w="calc(100% - 6.75rem)">
-          {cateData && (
-            <Icon path={cateData.icon} size={1.2} color={theme.colors[cateData?.color][5]} />
-          )}
+          {cateData && <Icon path={cateData.icon} size={1.2} color={theme.colors[cateData?.color][5]} />}
           <Title order={4} lineClamp={1}>
             {challenge?.title ?? ''}
           </Title>

diff --git a/src/GZCTF/ClientApp/src/components/ChallengePanel.tsx b/src/GZCTF/ClientApp/src/components/ChallengePanel.tsx
@@ -53,8 +53,7 @@ export const ChallengePanel: FC = () => {
     challenges &&
     (activeTab !== 'All' ? (challenges[activeTab] ?? []) : allChallenges).filter(
       (chal) =>
-        !hideSolved ||
-        (teamInfo && teamInfo.rank?.solvedChallenges?.find((c) => c.id === chal.id)) === undefined
+        !hideSolved || (teamInfo && teamInfo.rank?.solvedChallenges?.find((c) => c.id === chal.id)) === undefined
     )
 
   const [challenge, setChallenge] = useState<ChallengeInfo | null>(null)
@@ -194,12 +193,7 @@ export const ChallengePanel: FC = () => {
             {categories.map((tab) => {
               const data = challengeCategoryLabelMap.get(tab as ChallengeCategory)!
               return (
-                <Tabs.Tab
-                  key={tab}
-                  value={tab}
-                  leftSection={<Icon path={data?.icon} size={1} />}
-                  color={data?.color}
-                >
+                <Tabs.Tab key={tab} value={tab} leftSection={<Icon path={data?.icon} size={1} />} color={data?.color}>
                   <Group justify="space-between" wrap="nowrap" gap={2}>
                     <Text fz="sm" fw="bold">
                       {data?.name}
@@ -290,9 +284,7 @@ export const ChallengePanel: FC = () => {
           gameEnded={dayjs(game?.end) < dayjs()}
           status={teamInfo?.rank?.solvedChallenges?.find((c) => c.id === challenge?.id)?.type}
           cateData={
-            challengeCategoryLabelMap.get(
-              (challenge?.category as ChallengeCategory) ?? ChallengeCategory.Misc
-            )!
+            challengeCategoryLabelMap.get((challenge?.category as ChallengeCategory) ?? ChallengeCategory.Misc)!
           }
           title={challenge?.title ?? ''}
           score={challenge?.score ?? 0}

diff --git a/src/GZCTF/ClientApp/src/components/CustomColorModal.tsx b/src/GZCTF/ClientApp/src/components/CustomColorModal.tsx
@@ -1,15 +1,5 @@
 import { generateColors } from '@mantine/colors-generator'
-import {
-  Text,
-  ColorInput,
-  Group,
-  Modal,
-  ModalProps,
-  Radio,
-  Stack,
-  InputBase,
-  useMantineTheme,
-} from '@mantine/core'
+import { Text, ColorInput, Group, Modal, ModalProps, Radio, Stack, InputBase, useMantineTheme } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
 import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -29,10 +19,7 @@ export const CustomColorModal: FC<ModalProps> = (props) => {
 
   const valid = colorRegex.test(color.color)
 
-  const colors =
-    color.provider === ColorProvider.Custom && valid
-      ? generateColors(color.color)
-      : theme.colors.brand
+  const colors = color.provider === ColorProvider.Custom && valid ? generateColors(color.color) : theme.colors.brand
 
   useEffect(() => {
     setColor(customColor)

diff --git a/src/GZCTF/ClientApp/src/components/GameCard.tsx b/src/GZCTF/ClientApp/src/components/GameCard.tsx
@@ -53,9 +53,7 @@ export const GameCard: FC<GameCardProps> = ({ game, ...others }) => {
       <Card.Section>
         <Group wrap="nowrap" align="flex-start">
           <BackgroundImage src={poster ?? ''} h="10rem" maw="20rem" miw="20rem">
-            <Center h="100%">
-              {!poster && <Icon path={mdiFlagOutline} size={4} color={theme.colors.gray[5]} />}
-            </Center>
+            <Center h="100%">{!poster && <Icon path={mdiFlagOutline} size={4} color={theme.colors.gray[5]} />}</Center>
           </BackgroundImage>
           <Stack gap="sm" p="md" w="100%">
             <Group gap={0} justify="space-between" align="flex-start">

diff --git a/src/GZCTF/ClientApp/src/components/GameChallengeModal.tsx b/src/GZCTF/ClientApp/src/components/GameChallengeModal.tsx
@@ -34,8 +34,7 @@ export const GameChallengeModal: FC<GameChallengeModalProps> = (props) => {
   }) as string[]
 
   const isDynamic =
-    challenge?.type === ChallengeType.StaticContainer ||
-    challenge?.type === ChallengeType.DynamicContainer
+    challenge?.type === ChallengeType.StaticContainer || challenge?.type === ChallengeType.DynamicContainer
 
   const [disabled, setDisabled] = useState(false)
   const [submitId, setSubmitId] = useState(0)

diff --git a/src/GZCTF/ClientApp/src/components/GameNoticePanel.tsx b/src/GZCTF/ClientApp/src/components/GameNoticePanel.tsx
@@ -1,15 +1,5 @@
-import {
-  Card,
-  Center,
-  List,
-  ScrollArea,
-  SegmentedControl,
-  Stack,
-  Text,
-  useMantineTheme,
-} from '@mantine/core'
+import { Card, Center, List, ScrollArea, SegmentedControl, Stack, Text, useMantineTheme } from '@mantine/core'
 import { showNotification } from '@mantine/notifications'
-import { mdiClose } from '@mdi/js'
 import { Icon } from '@mdi/react'
 import * as signalR from '@microsoft/signalr'
 import dayjs from 'dayjs'
@@ -38,9 +28,7 @@ const ApplyFilter = (notices: GameNotice[], filter: NoticeFilter) => {
     case NoticeFilter.All:
       return notices
     case NoticeFilter.Challenge:
-      return notices.filter(
-        (notice) => notice.type === NoticeType.NewChallenge || notice.type === NoticeType.NewHint
-      )
+      return notices.filter((notice) => notice.type === NoticeType.NewChallenge || notice.type === NoticeType.NewHint)
     case NoticeFilter.Events:
       return notices.filter(
         (notice) =>
@@ -192,12 +180,7 @@ export const GameNoticePanel: FC = () => {
                       {dayjs(notice.time).locale(locale).format('SLL LTS')}
                     </Text>
                     {notice.type === NoticeType.Normal ? (
-                      <InlineMarkdown
-                        fz="sm"
-                        fw={500}
-                        c="dimmed"
-                        source={formatNotice(t, notice)}
-                      />
+                      <InlineMarkdown fz="sm" fw={500} c="dimmed" source={formatNotice(t, notice)} />
                     ) : (
                       <Text fz="sm" fw={500} c="dimmed" className={typoClasses.inline}>
                         {formatNotice(t, notice)}

diff --git a/src/GZCTF/ClientApp/src/components/GameProgress.tsx b/src/GZCTF/ClientApp/src/components/GameProgress.tsx
@@ -1,12 +1,4 @@
-import {
-  BoxProps,
-  Center,
-  Group,
-  MantineColor,
-  em,
-  useMantineColorScheme,
-  useMantineTheme,
-} from '@mantine/core'
+import { BoxProps, Center, Group, MantineColor, em, useMantineColorScheme, useMantineTheme } from '@mantine/core'
 import cx from 'clsx'
 import { FC } from 'react'
 import classes from '@Styles/GameProgress.module.css'
@@ -25,11 +17,7 @@ export const GameProgress: FC<GameProgressProps> = (props: GameProgressProps) =>
   const { colorScheme } = useMantineColorScheme()
 
   const pulsing = percentage < 100
-  const resolvedColor = pulsing
-    ? colorScheme === 'dark'
-      ? 'light'
-      : (color ?? theme.primaryColor)
-    : 'gray'
+  const resolvedColor = pulsing ? (colorScheme === 'dark' ? 'light' : (color ?? theme.primaryColor)) : 'gray'
   const spikeColor = theme.colors[resolvedColor][5]
   const bgColor = theme.colors[resolvedColor][2]
 

diff --git a/src/GZCTF/ClientApp/src/components/HintList.tsx b/src/GZCTF/ClientApp/src/components/HintList.tsx
@@ -1,12 +1,4 @@
-import {
-  ActionIcon,
-  Button,
-  Input,
-  InputWrapperProps,
-  ScrollArea,
-  Stack,
-  TextInput,
-} from '@mantine/core'
+import { ActionIcon, Button, Input, InputWrapperProps, ScrollArea, Stack, TextInput } from '@mantine/core'
 import { mdiClose, mdiPlus } from '@mdi/js'
 import { Icon } from '@mdi/react'
 import { FC } from 'react'

diff --git a/src/GZCTF/ClientApp/src/components/IconTabs.tsx b/src/GZCTF/ClientApp/src/components/IconTabs.tsx
@@ -1,11 +1,4 @@
-import {
-  Box,
-  Group,
-  GroupProps,
-  MantineColor,
-  useMantineColorScheme,
-  useMantineTheme,
-} from '@mantine/core'
+import { Box, Group, GroupProps, MantineColor, useMantineColorScheme, useMantineTheme } from '@mantine/core'
 import { clamp } from '@mantine/hooks'
 import React, { FC, useEffect, useState } from 'react'
 import { LogoHeader } from '@Components/LogoHeader'
@@ -29,9 +22,7 @@ interface IconTabsProps extends GroupProps {
   onTabChange?: (tabIndex: number, tabKey: string) => void
 }
 
-const Tab: FC<TabProps & { active: boolean; onClick?: () => void; disabled?: boolean }> = (
-  props
-) => {
+const Tab: FC<TabProps & { active: boolean; onClick?: () => void; disabled?: boolean }> = (props) => {
   const { color, label, active, icon, tabKey, disabled, ...others } = props
 
   return (
@@ -78,7 +69,7 @@ export const IconTabs: FC<IconTabsProps> = (props) => {
       active={current === index}
       onClick={() => {
         setActiveTab(index)
-        onTabChange && onTabChange(index, tab.tabKey)
+        if (onTabChange) onTabChange(index, tab.tabKey)
       }}
     />
   ))