snippets - how to achieve quake mode use electron

TypeScript
import { BrowserWindow } from 'electron';
import { optionsType } from './init';

export function didHideAnimation(
  mainWindow: BrowserWindow,
  options: optionsType
): void {
  mainWindow?.setResizable(true);
  mainWindow?.setAlwaysOnTop(true);

  let scale = 1;

  const interval = setInterval(() => {
    mainWindow?.setOpacity(scale);

    const width = options.width || options.winWidth;
    const height = Math.floor((options.height || options.winHeight) * scale);

    mainWindow?.setSize(width, height, true);

    if (scale <= 0.1) {
      mainWindow.setSize(width, options.height || options.winHeight, false);
      mainWindow.hide();
      mainWindow?.setOpacity(0.1);
      mainWindow?.setResizable(false);
      mainWindow?.setAlwaysOnTop(false);
      clearInterval(interval);
    }

    scale = scale - 0.1;
  }, 30);
}

export function didShowAnimation(
  mainWindow: BrowserWindow,
  options: optionsType
): void {
  mainWindow?.setResizable(true);
  mainWindow?.setAlwaysOnTop(true);
  mainWindow?.show();

  let scale = 0.1;

  const interval = setInterval(() => {
    mainWindow?.setOpacity(scale);
    const width = options.width || options.winWidth;
    const height = Math.floor((options.height || options.winHeight) * scale);

    if (height <= options.height || options.winHeight) {
      mainWindow?.setSize(width, height, true);
    }

    if (scale >= 1) {
      mainWindow.setSize(width, options.height || options.winHeight, false);
      mainWindow?.setOpacity(1);
      mainWindow?.setResizable(false);
      mainWindow?.setAlwaysOnTop(false);
      clearInterval(interval);
    }
    scale += 0.1;
  }, 30);
}

TypeScript
import { screen } from 'electron';
import { readFile } from 'fs/promises';
import { join } from 'path';
import { userData } from '../utils/path';

type boundsType = { winWidth: number; winHeight: number; x: number; y: number };

type settingsType = {
  height: number;
  width: number;
  h: number;
  v: number;
  key: string;
  mode: string;
  opacity: number;
  position: string;
  bg: string;
  openApiKey: string;
  GITHUB_TOKEN: string;
};

export type optionsType = boundsType & settingsType;

export async function initSettings(): Promise<settingsType> {
  const settingsFile = join(userData, 'settings.json');
  const settings = await readFile(settingsFile, { encoding: 'utf-8' });
  return JSON.parse(settings);
}

export function initBounds(): boundsType {
  const { width, height } = screen.getPrimaryDisplay().workAreaSize;
  const winWidth = Math.floor(width * 0.6);
  const winHeight = Math.floor(height * 0.6);
  const x = Math.floor((width - winWidth) / 2);
  const y = Math.floor((height - winHeight) / 2);
  console.log({ winWidth, winHeight, x, y });

  return { winWidth, winHeight, x, y };
}

TypeScript
import { is, platform } from '@electron-toolkit/utils';
import { app } from 'electron';
import { join } from 'path';

export const iswindows = platform.isWindows;

export const appRoot = is.dev ? process.cwd() : app.getPath('exe');
app.setPath('userData', join(appRoot, 'userData'));
export const userData = app.getPath('userData');

export const resourcesDir = join(appRoot, 'resources');

JSON
{
  "height": 0,
  "width": 0,
  "h": 0,
  "v": 0,
  "key": "alt+b",
  "mode": "quake",
  "opacity": 0.8,
  "position": "top",
  "bg": "#0d1117"
}