✨ feat: 자동 수락 딜레이 기능 추가

app/app.ts

@@ -37,6 +37,9 @@ class AppContext {
     `${this.RESOURCES_PATH}/icons/${this.IS_MAC ? 'logo@512.png' : 'logo@256.ico'}`,
   );
 
+  // preload script path
+  readonly PRELOAD_PATH = join(__dirname, 'preload/index.js');
+
   // electron window
   window: BrowserWindow | null = null;
 
@@ -86,7 +89,7 @@ class AppContext {
       frame: false,
       icon: this.ICON,
       webPreferences: {
-        preload: join(__dirname, 'preload/index.js'),
+        preload: this.PRELOAD_PATH,
       },
     });
 

app/modules/league/index.ts

@@ -1,3 +1,6 @@
+// import { BrowserWindow } from 'electron';
+// import { OverlayController, OVERLAY_WINDOW_OPTS } from 'electron-overlay-window';
+// import { windowManager } from 'node-window-manager';
 import { ModuleFunction } from '@app/app';
 import { configStore } from '@app/stores/config';
 import IPCServer from '@app/utils/IPCServer';
@@ -39,6 +42,21 @@ const LeagueModule: ModuleFunction = async context => {
   });
 
   client.on('ready', () => {
+    // const clientOverlayWindow = new BrowserWindow({
+    //   ...OVERLAY_WINDOW_OPTS,
+    //   alwaysOnTop: true,
+    //   hasShadow: false,
+    //   webPreferences: {
+    //     preload: context.PRELOAD_PATH,
+    //   },
+    // });
+
+    // clientOverlayWindow.loadURL('http://localhost:3000/#/overlays/client');
+    // clientOverlayWindow.webContents.openDevTools({ mode: 'detach', activate: false });
+
+    // OverlayController.attachByTitle(clientOverlayWindow, 'League of Legends');
+    // OverlayController.activateOverlay();
+
     context.window?.webContents.send('league/connect-change', 'connect');
 
     client.subscribe('/lol-champ-select/v1/session', data => {
@@ -54,11 +72,32 @@ const LeagueModule: ModuleFunction = async context => {
     });
 
     client.subscribe('/lol-matchmaking/v1/ready-check', async data => {
-      if (data?.playerResponse === 'None' && configStore.get('game').autoAccept) {
+      if (!data) return;
+
+      if (data.playerResponse === 'None') {
+        const { autoAccept = false, autoAcceptDelaySeconds = 0 } = configStore.get('game');
+
+        if (!autoAccept) return;
+
+        // clientOverlayWindow.show();
+        // clientOverlayWindow.focus();
+        // OverlayController.focusTarget();
+        // clientOverlayWindow.webContents.send('league/auto-accept', {
+        //   timer: data.timer,
+        //   playerResponse: data.playerResponse,
+        //   autoAcceptDelaySeconds,
+        // });
+
+        if (data.timer < autoAcceptDelaySeconds) return;
+
         await client.request({
           method: 'POST',
           url: '/lol-matchmaking/v1/ready-check/accept',
         });
+      } else {
+        // clientOverlayWindow.webContents.send('league/auto-accept', {
+        //   playerResponse: data.playerResponse,
+        // });
       }
     });
   });

app/stores/config.ts

@@ -10,6 +10,7 @@ export interface ConfigStoreValues {
   };
   game: {
     autoAccept: boolean;
+    autoAcceptDelaySeconds: number;
   };
 }
 
@@ -23,6 +24,7 @@ export const configStore = new Store<ConfigStoreValues>({
     },
     game: {
       autoAccept: false,
+      autoAcceptDelaySeconds: 0,
     },
   },
 });

app/types/index.ts

@@ -0,0 +1,5 @@
+export interface AutoAcceptData {
+  timer?: number;
+  playerResponse: string;
+  autoAcceptDelaySeconds?: number;
+}

package.json

@@ -23,6 +23,7 @@
     "clsx": "^1.2.1",
     "dayjs": "^1.11.7",
     "electron-log": "^4.4.8",
+    "electron-overlay-window": "^3.2.0",
     "electron-store": "^8.1.0",
     "electron-updater": "^5.3.0",
     "fast-deep-equal": "^3.1.3",

public/fonts.css

@@ -33,6 +33,20 @@
   font-display: swap;
 }
 
+@font-face {
+  src: url('./fonts/BeaufortforLOL/BeaufortforLOL-Regular.woff2');
+  font-family: 'BeaufortforLOL';
+  font-weight: normal;
+  font-display: swap;
+}
+
+@font-face {
+  src: url('./fonts/BeaufortforLOL/BeaufortforLOL-Bold.woff2');
+  font-family: 'BeaufortforLOL';
+  font-weight: bold;
+  font-display: swap;
+}
+
 * {
   margin: 0;
   padding: 0;

src/features/overlay/ReadyTimerOverlay/ReadyTimerOverlay.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+
+import clsx from 'clsx';
+
+import { AutoAcceptData } from '@app/types';
+
+import { ReadyTimerOverlayStyled } from './styled';
+
+export interface ReadyTimerOverlayProps {
+  className?: string;
+}
+
+const ReadyTimerOverlay = ({ className }: ReadyTimerOverlayProps) => {
+  const [data, setData] = useState<AutoAcceptData | null>(null);
+
+  useEffect(() => {
+    window.electron.subscribeLeague('auto-accept', (data: AutoAcceptData) => {
+      if (data.playerResponse === 'None') {
+        setData(data);
+      } else {
+        setData(null);
+      }
+    });
+
+    return () => {
+      window.electron.unsubscribeLeague('auto-accept');
+    };
+  }, []);
+
+  if (!data) return null;
+
+  return (
+    <ReadyTimerOverlayStyled className={clsx('ReadyTimerOverlay', className)}>
+      자동 수락까지 {data.autoAcceptDelaySeconds! - data.timer!}초 남았습니다
+    </ReadyTimerOverlayStyled>
+  );
+};
+
+export default ReadyTimerOverlay;

src/features/overlay/ReadyTimerOverlay/index.ts

@@ -0,0 +1,3 @@
+// === Automatically generated file. Don't edit it. ===
+export * from './ReadyTimerOverlay';
+export { default } from './ReadyTimerOverlay';

src/features/overlay/ReadyTimerOverlay/styled.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const ReadyTimerOverlayStyled = styled.div`
+  position: absolute;
+  top: calc(50% + 100px);
+  left: calc(50%);
+  transform: translate(-50%, -50%);
+  color: ${props => props.theme.colors.gold};
+  text-align: center;
+  font-family: 'BeaufortforLOL';
+`;

src/pages/_app.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
 
 import { ConfigProvider, GlobalToken, theme } from 'antd';
 import antdLocaleKR from 'antd/locale/ko_KR';
@@ -33,6 +33,7 @@ const App = () => {
 };
 
 const AppInner = () => {
+  const { pathname } = useLocation();
   const antdToken = theme.useToken();
 
   const [update, setUpdate] = useRecoilState(updateStore);
@@ -81,6 +82,8 @@ const AppInner = () => {
     [],
   );
 
+  const isOverlay = pathname.includes('/overlays');
+
   useEffect(() => {
     bootstrap();
   }, []);
@@ -89,13 +92,17 @@ const AppInner = () => {
     <ThemeProvider theme={styledTheme}>
       <InitGlobalStyled />
 
-      <div id="app">
-        <Titlebar />
+      {isOverlay && <Outlet />}
+
+      {!isOverlay && (
+        <div id="app">
+          <Titlebar />
 
-        <Layout>
-          <Outlet />
-        </Layout>
-      </div>
+          <Layout>
+            <Outlet />
+          </Layout>
+        </div>
+      )}
     </ThemeProvider>
   );
 };

src/pages/overlays/client.tsx

@@ -0,0 +1,12 @@
+import ReadyTimerOverlay from '~/features/overlay/ReadyTimerOverlay';
+import { OverlaysClientPageStyled } from '~/styles/pageStyled/overlaysClientPageStyled';
+
+const OverlaysClient = () => {
+  return (
+    <OverlaysClientPageStyled>
+      <ReadyTimerOverlay />
+    </OverlaysClientPageStyled>
+  );
+};
+
+export default OverlaysClient;

src/pages/settings/game.tsx

@@ -1,6 +1,7 @@
 import { Controller } from 'react-hook-form';
 
-import { Switch } from 'antd';
+import { InputNumber, Switch } from 'antd';
+import clsx from 'clsx';
 import { useRecoilState } from 'recoil';
 
 import LayoutConfig from '~/components/LayoutConfig';
@@ -23,6 +24,8 @@ const GameSettings = () => {
     },
   });
 
+  const isAutoAccept = form.watch('autoAccept');
+
   return (
     <SettingsPageStyled>
       <LayoutConfig breadcrumbs={['설정', '게임 설정']} />
@@ -36,18 +39,38 @@ const GameSettings = () => {
           </div>
         }
       >
-        <Controller
-          name="autoAccept"
-          control={form.control}
-          render={({ field }) => (
-            <Switch
-              checked={field.value}
-              onChange={checked => field.onChange(checked)}
-              checkedChildren={<i className="bx bx-check" />}
-              unCheckedChildren={<i className="bx bx-x" />}
+        <div className="autoAcceptField">
+          <Controller
+            name="autoAccept"
+            control={form.control}
+            render={({ field }) => (
+              <Switch
+                checked={field.value}
+                onChange={checked => field.onChange(checked)}
+                checkedChildren={<i className="bx bx-check" />}
+                unCheckedChildren={<i className="bx bx-x" />}
+              />
+            )}
+          />
+
+          <div className={clsx('delay', !isAutoAccept && 'disabled')}>
+            <div>자동 수락까지 대기시간</div>
+            <Controller
+              name="autoAcceptDelaySeconds"
+              control={form.control}
+              render={({ field }) => (
+                <InputNumber
+                  min={0}
+                  max={8}
+                  value={field.value}
+                  onChange={value => field.onChange(value)}
+                />
+              )}
             />
-          )}
-        />
+
+            <div>초</div>
+          </div>
+        </div>
       </Section>
 
       <SaveButton defaultValues={config.game} form={form} />

src/styles/init.ts

@@ -79,8 +79,10 @@ export const InitGlobalStyled = memo(createGlobalStyle`
   }
 
   #app {
+    width: 100vw;
     height: 100vh;
     color: ${props => props.theme.colors.textColor1};
+    background-color: ${props => props.theme.colors.sidebarBG};
   }
 
   html {
@@ -89,8 +91,6 @@ export const InitGlobalStyled = memo(createGlobalStyle`
 
   body {
     font-size: 14px;
-    background-color: ${props => props.theme.colors.sidebarBG};
-    color: ${props => props.theme.colors.textColor1};
 
     .ant-switch {
       height: 28px;
@@ -207,6 +207,13 @@ export const InitGlobalStyled = memo(createGlobalStyle`
 
     .ant-input-number-handler {
       border-color: ${props => props.theme.colors.borderColor};
+      background-color: ${props => props.theme.colors.sidebarBG};
+      color: white;
+
+      .ant-input-number-handler-up-inner,
+      .ant-input-number-handler-down-inner {
+        color: ${props => props.theme.colors.textColor2};
+      }
 
       &:active {
         background-color: ${props => props.theme.colors.sidebarBG};

src/styles/pageStyled/overlaysClientPageStyled.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const OverlaysClientPageStyled = styled.div`
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+`;

src/styles/pageStyled/settingsPageStyled.ts

@@ -1,5 +1,27 @@
 import styled from 'styled-components';
 
 export const SettingsPageStyled = styled.div`
-
+  .autoAcceptField {
+    display: inline-flex;
+    align-items: center;
+
+    .delay {
+      display: flex;
+      align-items: center;
+      background: ${props => props.theme.colors.formFieldBG};
+      padding: 0.6rem 1rem;
+      border-radius: 8px;
+      margin-left: 1rem;
+      transition: 250ms opacity;
+
+      &.disabled {
+        opacity: 0.5;
+      }
+
+      .ant-input-number {
+        width: 3.5rem;
+        margin: 0 0.5rem;
+      }
+    }
+  }
 `;

src/styles/themes.ts

@@ -19,6 +19,7 @@ const _colors = {
   error: '#FE6968',
   relic: '#ff6000',
   ancient: '#c9a472',
+  gold: '#e0b667',
 };
 
 _colors.selectedBG = rgba(_colors.primary, 0.1);