nilcheck forcepoll channel

williamsjokvist · Oct 10, 2024 · 34f2aec · 34f2aec
1 parent 3deec18
commit 34f2aec
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 106 deletions.
diff --git a/gui/src/pages/matches.tsx b/gui/src/pages/matches.tsx
@@ -1,126 +1,120 @@
-import React from "react";
-import { useLoaderData, useNavigate } from "react-router-dom";
-import { useTranslation } from "react-i18next";
+import React from 'react'
+import { useLoaderData, useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
 import { Icon } from '@iconify/react'
 
-import * as Page from "@/ui/page";
-import * as Table from "@/ui/table";
+import * as Page from '@/ui/page'
+import * as Table from '@/ui/table'
 
-import type { model } from "@model";
-import { Button } from "@/ui/button";
-import { type LocalizationKey } from "@/main/i18n";
-import { Tooltip } from "@/ui/tooltip";
+import type { model } from '@model'
+import { Button } from '@/ui/button'
+import { type LocalizationKey } from '@/main/i18n'
+import { Tooltip } from '@/ui/tooltip'
 
 export function MatchesListPage() {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const totalMatches = (useLoaderData() ?? []) as model.Match[];
-  const [matches, setMatches] = React.useState(totalMatches);
-  const [totalWinRate, setTotalWinRate] = React.useState(0);
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const totalMatches = (useLoaderData() ?? []) as model.Match[]
+  const [matches, setMatches] = React.useState(totalMatches)
+  const [totalWinRate, setTotalWinRate] = React.useState(0)
 
   React.useEffect(() => {
-    const wonMatches = matches.filter((log) => log.victory === true).length;
-    const winRate = Math.floor((wonMatches / matches.length) * 100);
-    !isNaN(winRate) && setTotalWinRate(winRate);
-  }, [matches]);
+    const wonMatches = matches.filter(log => log.victory === true).length
+    const winRate = Math.floor((wonMatches / matches.length) * 100)
+    !isNaN(winRate) && setTotalWinRate(winRate)
+  }, [matches])
 
   const filterLog = (property: string, value: string) => {
-    setMatches(
-      matches.filter((ml) => ml[property].toLowerCase() === value.toLowerCase())
-    );
-  };
+    setMatches(matches.filter(ml => ml[property].toLowerCase() === value.toLowerCase()))
+  }
 
   if (matches.length === 0) {
     return (
       <Page.Root>
         <Page.Header>
-          <Page.Title>{t("history")}</Page.Title>
+          <Page.Title>{t('history')}</Page.Title>
         </Page.Header>
       </Page.Root>
-    );
+    )
   }
 
   return (
     <Page.Root>
       <Page.Header>
-        <Page.Title>{t("history")}</Page.Title>
+        <Page.Title>{t('history')}</Page.Title>
       </Page.Header>
 
-      <div className="relative w-full">
-        <div className="mb-2 flex h-10 justify-between items-center border-b border-slate-50 border-opacity-10 px-8 pt-1 ">
-          <Button className="py-[2px] px-1 flex gap-1 items-center" style={{ filter: 'hue-rotate(-65deg)' }} onClick={() => {
-            if (matches.length != totalMatches.length) {
-              setMatches(totalMatches)
-            } else {
-              navigate('/sessions')
-            }
-          }}>
-            <Icon width={20} height={20} icon="material-symbols:chevron-left" />
-            <span className="relative top-[2px]">{t('goBack')}</span>
+      <div className='relative w-full'>
+        <div className='mb-2 flex h-10 items-center justify-between border-b border-slate-50 border-opacity-10 px-8 pt-1 '>
+          <Button
+            className='flex items-center gap-1 px-1 py-[2px]'
+            style={{ filter: 'hue-rotate(-65deg)' }}
+            onClick={() => {
+              if (matches.length != totalMatches.length) {
+                setMatches(totalMatches)
+              } else {
+                navigate('/sessions')
+              }
+            }}
+          >
+            <Icon width={20} height={20} icon='material-symbols:chevron-left' />
+            <span className='relative top-[2px]'>{t('goBack')}</span>
           </Button>
           <span>
-            {t("winRate")}: <b>{totalWinRate}</b>%
+            {t('winRate')}: <b>{totalWinRate}</b>%
           </span>
         </div>
         <Table.Page>
           <Table.Content>
             <thead>
               <Table.Tr>
-                <Table.Th className="w-[120px]">{t("date")}</Table.Th>
-                <Table.Th className="w-[70px]">{t("time")}</Table.Th>
-                <Table.Th className="w-[180px]">{t("opponent")}</Table.Th>
-                <Table.Th>{t("league")}</Table.Th>
-                <Table.Th className="text-center">{t("character")}</Table.Th>
-                <Table.Th className="text-center">{t("result")}</Table.Th>
-                <Table.Th className="text-center">{t("replayId")}</Table.Th>
+                <Table.Th className='w-[120px]'>{t('date')}</Table.Th>
+                <Table.Th className='w-[70px]'>{t('time')}</Table.Th>
+                <Table.Th className='w-[180px]'>{t('opponent')}</Table.Th>
+                <Table.Th>{t('league')}</Table.Th>
+                <Table.Th className='text-center'>{t('character')}</Table.Th>
+                <Table.Th className='text-center'>{t('result')}</Table.Th>
+                <Table.Th className='text-center'>{t('replayId')}</Table.Th>
               </Table.Tr>
             </thead>
             <tbody>
-              {matches.map((log) => (
+              {matches.map(log => (
                 <Table.Tr key={`${log.date}${log.time}`}>
-                  <Table.Td
-                    interactive
-                    onClick={() => filterLog("date", log.date)}
-                  >
+                  <Table.Td interactive onClick={() => filterLog('date', log.date)}>
                     {log.date}
                   </Table.Td>
                   <Table.Td>{log.time}</Table.Td>
-                  <Table.Td
-                    interactive
-                    onClick={() => filterLog("opponent", log.opponent)}
-                  >
+                  <Table.Td interactive onClick={() => filterLog('opponent', log.opponent)}>
                     {log.opponent}
                   </Table.Td>
                   <Table.Td
                     interactive
-                    onClick={() =>
-                      filterLog("opponentLeague", log.opponentLeague)
-                    }
+                    onClick={() => filterLog('opponentLeague', log.opponentLeague)}
                   >
                     {t(log.opponentLeague as LocalizationKey)}
                   </Table.Td>
                   <Table.Td
                     interactive
-                    className="text-center"
-                    onClick={() =>
-                      filterLog("opponentCharacter", log.opponentCharacter)
-                    }
+                    className='text-center'
+                    onClick={() => filterLog('opponentCharacter', log.opponentCharacter)}
                   >
                     {log.opponentCharacter}
                   </Table.Td>
                   <Table.Td
-                    className="text-center"
-                    style={{ color: log.victory === true ? "lime" : "red" }}
+                    className='text-center'
+                    style={{ color: log.victory === true ? 'lime' : 'red' }}
                   >
-                    {log.victory === true ? "W" : "L"}
+                    {log.victory === true ? 'W' : 'L'}
                   </Table.Td>
                   <Table.Td
                     onClick={() => navigator.clipboard.writeText(log.replayId)}
-                    className="text-center group"
+                    className='group text-center'
                     interactive
                   >
                     <Tooltip text={t('copy')}>
-                      <span className="block overflow-hidden overflow-ellipsis w-12">{log.replayId}</span>
+                      <span className='block w-12 overflow-hidden overflow-ellipsis'>
+                        {log.replayId}
+                      </span>
                     </Tooltip>
                   </Table.Td>
                 </Table.Tr>
@@ -130,5 +124,5 @@ export function MatchesListPage() {
         </Table.Page>
       </div>
     </Page.Root>
-  );
+  )
 }
diff --git a/gui/src/pages/output.tsx b/gui/src/pages/output.tsx
@@ -14,10 +14,7 @@ import { GetThemes, OpenResultsDirectory } from '@cmd'
 
 import { useErrorPopup } from '@/main/error-popup'
 
-type StatOptions = Omit<
-  Record<keyof model.TrackingState, boolean>,
-  'totalLosses' | 'totalWins'
-> & {
+type StatOptions = Omit<Record<keyof model.TrackingState, boolean>, 'totalLosses' | 'totalWins'> & {
   theme: string
 }
 
@@ -227,7 +224,7 @@ function ThemeSelect(props: { value: string; onSelect: (theme: string) => void }
                   id={`${theme.name}-checkbox`}
                   checked={theme.name === props.value}
                   onChange={e => props.onSelect(theme.name)}
-                  className="my-2"
+                  className='my-2'
                 />
                 <label
                   htmlFor={`${theme.name}-checkbox`}

diff --git a/gui/src/pages/sessions.tsx b/gui/src/pages/sessions.tsx
@@ -62,7 +62,7 @@ export function SessionsListPage() {
                         {groupedSessions[year][month].map(sesh => (
                           <Table.Tr
                             key={sesh.id}
-                            className='cursor-pointer group'
+                            className='group cursor-pointer'
                             onClick={() => navigate(`/sessions/${sesh.id}/matches`)}
                           >
                             <Table.Td>

diff --git a/gui/src/pages/settings.tsx b/gui/src/pages/settings.tsx
@@ -47,7 +47,7 @@ export function SettingsPage() {
           <h3 className='font-bold'>{t('about')}</h3>
           <AppVersion />
           <div className='flex gap-8'>
-            <Link 
+            <Link
               icon={
                 <Icon
                   icon='mdi:scroll'
@@ -57,7 +57,7 @@ export function SettingsPage() {
               text={t('changelog')}
               url='https://cfn.williamsjokvist.se/changelog'
             />
-            <Link 
+            <Link
               icon={
                 <Icon
                   icon='fa6-brands:github'
@@ -70,8 +70,8 @@ export function SettingsPage() {
             <Link
               icon={
                 <Icon
-                icon='fa6-brands:twitter'
-                className='mr-2 h-6 w-6 text-[#49b3f5] transition-colors group-hover:text-white'
+                  icon='fa6-brands:twitter'
+                  className='mr-2 h-6 w-6 text-[#49b3f5] transition-colors group-hover:text-white'
                 />
               }
               text={t('follow')}
@@ -80,8 +80,8 @@ export function SettingsPage() {
             <Link
               icon={
                 <Icon
-                icon='fa6-brands:twitter'
-                className='mr-2 h-6 w-6 text-[#49b3f5] transition-colors group-hover:text-white'
+                  icon='fa6-brands:twitter'
+                  className='mr-2 h-6 w-6 text-[#49b3f5] transition-colors group-hover:text-white'
                 />
               }
               text='enth'
@@ -151,7 +151,11 @@ function ThemeSelect() {
         }}
       >
         {Object.keys(Themes).map(theme => (
-          <Select.Item key={theme} value={theme} className='flex items-center justify-between gap-2'>
+          <Select.Item
+            key={theme}
+            value={theme}
+            className='flex items-center justify-between gap-2'
+          >
             <i style={{ background: Themes[theme][0] }} className={`h-4 w-3 rounded-md`} />
             <i style={{ background: Themes[theme][1] }} className={`h-4 w-3 rounded-md`} />
             <span className='first-letter:uppercase'>{theme}</span>
@@ -214,7 +218,12 @@ function LanguageSelect(props: React.PropsWithChildren) {
   )
 }
 
-function Link(props: { url: string; icon: React.ReactNode; text: React.ReactNode; className?: string }) {
+function Link(props: {
+  url: string
+  icon: React.ReactNode
+  text: React.ReactNode
+  className?: string
+}) {
   return (
     <button
       onClick={() => BrowserOpenURL(props.url)}
@@ -224,7 +233,7 @@ function Link(props: { url: string; icon: React.ReactNode; text: React.ReactNode
         'hover:text-white'
       )}
     >
-      <div className='flex items-center justify-between lowercase whitespace-nowrap'>
+      <div className='flex items-center justify-between whitespace-nowrap lowercase'>
         {props.icon}
         <span>{props.text}</span>
       </div>

diff --git a/gui/src/pages/tracking/tracking-live-updater.tsx b/gui/src/pages/tracking/tracking-live-updater.tsx
@@ -53,7 +53,7 @@ export function TrackingLiveUpdater() {
             {mr > 0 && <SmallStat text='MR' value={`${mr == -1 ? t('placement') : mr}`} />}
           </div>
         </dl>
-        <div className='flex flex-1 h-[calc(100%-32px)] pb-5 pt-3'>
+        <div className='flex h-[calc(100%-32px)] flex-1 pb-5 pt-3'>
           <div className='w-full'>
             <dl className='whitespace-nowrap text-lg'>
               <div className='flex justify-between gap-2'>
@@ -65,8 +65,12 @@ export function TrackingLiveUpdater() {
                 <BigStat text={t('winStreak')} value={winStreak} />
               </div>
               <div className='flex justify-between gap-2'>
-                {lpGain > 0 && <BigStat text={t('lpGain')} value={`${lpGain > 0 ? `+` : ``}${lpGain}`} />}
-                {mrGain > 0 && <BigStat text={t('mrGain')} value={`${mrGain > 0 ? `+` : ``}${mrGain}`} />}
+                {lpGain > 0 && (
+                  <BigStat text={t('lpGain')} value={`${lpGain > 0 ? `+` : ``}${lpGain}`} />
+                )}
+                {mrGain > 0 && (
+                  <BigStat text={t('mrGain')} value={`${mrGain > 0 ? `+` : ``}${mrGain}`} />
+                )}
               </div>
             </dl>
             {opponent != '' && (
@@ -87,10 +91,10 @@ export function TrackingLiveUpdater() {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ delay: 0.35 }}
-            className='relative h-full flex-0 grid'
+            className='flex-0 relative grid h-full'
           >
             <PieChart
-              className='mx-auto w-full h-52'
+              className='mx-auto h-52 w-full'
               animate
               animationDuration={2000}
               lineWidth={85}
@@ -118,7 +122,7 @@ export function TrackingLiveUpdater() {
                 </linearGradient>
               </defs>
             </PieChart>
-            <div className="flex justify-between self-end gap-2">
+            <div className='flex justify-between gap-2 self-end'>
               <Tooltip text={t('cooldown')} disabled={!refreshDisabled}>
                 <Button
                   disabled={refreshDisabled}
@@ -135,9 +139,7 @@ export function TrackingLiveUpdater() {
                   {t('refresh')}
                 </Button>
               </Tooltip>
-              <Button
-                onClick={() => trackingActor.send({ type: 'cease' })}
-              >
+              <Button onClick={() => trackingActor.send({ type: 'cease' })}>
                 <Icon icon='fa6-solid:stop' className='mr-3 h-5 w-5' />
                 {t('stop')}
               </Button>

diff --git a/gui/src/ui/dialog.tsx b/gui/src/ui/dialog.tsx
@@ -38,7 +38,7 @@ export const Content = React.forwardRef<HTMLDivElement, DialogContentProps>((pro
           </div>
           <DialogPrimitive.Close
             aria-label='Close'
-            className={cn('min-w-[44px] h-11 rounded-full', 'bg-[#202020] hover:bg-[#2b2a33]')}
+            className={cn('h-11 min-w-[44px] rounded-full', 'bg-[#202020] hover:bg-[#2b2a33]')}
           >
             <Icon icon='ci:close-big' width={28} className='mx-auto' />
           </DialogPrimitive.Close>

diff --git a/gui/src/ui/table.tsx b/gui/src/ui/table.tsx
@@ -18,10 +18,7 @@ export function Tr(props: React.PropsWithChildren<React.TdHTMLAttributes<HTMLTab
   const { className, ...restProps } = props
   return (
     <tr
-      className={cn(
-        '[&>*:first-child]:rounded-l-xl [&>*:last-child]:rounded-r-xl',
-        className
-      )}
+      className={cn('[&>*:first-child]:rounded-l-xl [&>*:last-child]:rounded-r-xl', className)}
       {...restProps}
     >
       {props.children}