Merge remote-tracking branch 'origin/feat/game-overlay' into feat/gam…

…e-overlay
nature-heart-software · Jan 12, 2025 · 3f0c27a · 3f0c27a
2 parents a8f80ce + 1ef398d
commit 3f0c27a
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 60 deletions.
diff --git a/apps/app/src/electron/events/main.ts b/apps/app/src/electron/events/main.ts
@@ -1,7 +1,9 @@
 import { processes } from '@/types/electron'
 import { ipcMain } from 'electron-postman'
 
-export const onIPCProcessError = (callback: (error: Error, process: string) => any) => {
+export const onIPCProcessError = (
+  callback: (error: Error, process: string) => any,
+) => {
   processes.forEach((process) => {
     ipcMain.on(process, 'error', (payload: { name: string; message: string }) =>
       callback(payload, process),
@@ -11,17 +13,13 @@ export const onIPCProcessError = (callback: (error: Error, process: string) => a
 
 export const onIPCGameOverlayStartIntercept = (callback: () => any) => {
   processes.forEach((process) => {
-    ipcMain.on(process, 'game-overlay-start-intercept', () =>
-      callback(),
-    )
+    ipcMain.on(process, 'game-overlay-start-intercept', () => callback())
   })
 }
 
 export const onIPCGameOverlayStopIntercept = (callback: () => any) => {
   processes.forEach((process) => {
-    ipcMain.on(process, 'game-overlay-stop-intercept', () =>
-      callback(),
-    )
+    ipcMain.on(process, 'game-overlay-stop-intercept', () => callback())
   })
 }
 
@@ -37,10 +35,16 @@ export const emitIPCOverlayInputCharacter = (character: string) => {
   ipcMain.sendTo('overlay', 'overlay-input-character', character)
 }
 
-export const emitIPCOverlayInputCommand = (command: string, args: any[] = []) => {
+export const emitIPCOverlayInputCommand = (
+  command: string,
+  args: any[] = [],
+) => {
   ipcMain.sendTo('overlay', 'overlay-input-command', [command, ...args])
 }
 
-export const emitIPCGameOverlayResize = (size: { width: number, height: number }) => {
+export const emitIPCGameOverlayResize = (size: {
+  width: number
+  height: number
+}) => {
   ipcMain.sendTo('messenger-game-overlay', 'resize', size)
 }
diff --git a/apps/app/src/electron/events/renderer.ts b/apps/app/src/electron/events/renderer.ts
@@ -3,7 +3,10 @@ import { IzabelaMessage } from '@/modules/izabela/types'
 
 const { ipc } = window
 
-export const emitIPCProcessError = (payload: { name: string; message: string }) => {
+export const emitIPCProcessError = (payload: {
+  name: string
+  message: string
+}) => {
   processes.forEach((process) => {
     ipc.sendTo(process, 'error', payload)
   })
@@ -54,7 +57,9 @@ export const onIPCOverlayInputCommand = (callback: (args: any[]) => void) => {
   })
 }
 
-export const onIPCGameOverlayResize = (callback: (size: { width: number, height: number }) => void) => {
+export const onIPCGameOverlayResize = (
+  callback: (size: { width: number; height: number }) => void,
+) => {
   processes.forEach((process) => {
     ipc.on(process, 'resize', callback)
   })

diff --git a/apps/app/src/electron/game-overlay.ts b/apps/app/src/electron/game-overlay.ts
@@ -79,12 +79,12 @@ class GameOverlay {
           const { top, left, right, bottom } = Window.getByPid(
             payload.pid,
           ).getDimensions()
-          const width = right-left
-          const height = bottom-top
+          const width = right - left
+          const height = bottom - top
 
           mouse.getPosition().then(async (initialPosition) => {
             await mouse.setPosition(
-              new Point(left+width / 2, top+height / 2),
+              new Point(left + width / 2, top + height / 2),
             )
             await mouse.leftClick()
             await mouse.setPosition(initialPosition)
@@ -242,7 +242,7 @@ class GameOverlay {
     for (const window of this.Overlay.getTopWindows()) {
       if (window.processId === pid) {
         console.log(
-          `--------------------\n injecting ${ JSON.stringify(window) }`,
+          `--------------------\n injecting ${JSON.stringify(window)}`,
         )
         this.Overlay.injectProcess(window)
       }

diff --git a/apps/app/src/electron/renderer.ts b/apps/app/src/electron/renderer.ts
@@ -4,6 +4,6 @@ import { onIPCGameOverlayResize } from '@/electron/events/renderer.ts'
 
 onIPCGameOverlayResize(({ width, height }) => {
   const appEl = document.getElementById('app')
-  appEl.style.width = width+'px'
-  appEl.style.height = height+'px'
-})
+  appEl.style.width = width + 'px'
+  appEl.style.height = height + 'px'
+})
diff --git a/apps/app/src/teams/messenger/components/NvMessenger.vue b/apps/app/src/teams/messenger/components/NvMessenger.vue
@@ -58,7 +58,16 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ComponentPublicInstance, computed, defineProps, onMounted, provide, ref, unref, watch } from 'vue'
+import {
+  ComponentPublicInstance,
+  computed,
+  defineProps,
+  onMounted,
+  provide,
+  ref,
+  unref,
+  watch,
+} from 'vue'
 import Moveable from 'vue3-moveable'
 import { NvGroup } from '@packages/ui'
 import { RouteLocationRaw, useRouter } from 'vue-router'
@@ -142,23 +151,31 @@ provide('messenger', {
   navigateTo,
   isViewShown,
 })
-const isGameOverlay = new URLSearchParams(window.location.search).has('game-overlay')
+const isGameOverlay = new URLSearchParams(window.location.search).has(
+  'game-overlay',
+)
 
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 // TODO: refactor to use only app dimensions
 // Note: Game overlay can only be resized using body for now
-const { width: appWidth, height: appHeight } = useElementSize(ref(document.getElementById('app')))
+const { width: appWidth, height: appHeight } = useElementSize(
+  ref(document.getElementById('app')),
+)
 const viewport = computed(() => ({
-  width: isGameOverlay ? appWidth.value : Math.max(
-    windowWidth.value,
-    document.documentElement.clientWidth || 0,
-    window.innerWidth || 0,
-  ),
-  height: isGameOverlay ? appHeight.value : Math.max(
-    windowHeight.value,
-    document.documentElement.clientHeight || 0,
-    window.innerHeight || 0,
-  ),
+  width: isGameOverlay
+    ? appWidth.value
+    : Math.max(
+        windowWidth.value,
+        document.documentElement.clientWidth || 0,
+        window.innerWidth || 0,
+      ),
+  height: isGameOverlay
+    ? appHeight.value
+    : Math.max(
+        windowHeight.value,
+        document.documentElement.clientHeight || 0,
+        window.innerHeight || 0,
+      ),
 }))
 const savePosition = debounce((event: any) => {
   const { width, height, translate, transform } = event
@@ -232,17 +249,17 @@ function convertScreenPosition() {
     const { x: currentXValue, y: currentYValue } = parseTransform(
       props.transform,
     )
-    const currentCenteredXValue = currentXValue+moveableTargetWidth.value / 2
-    const currentCenteredYValue = currentYValue+moveableTargetHeight.value / 2
+    const currentCenteredXValue = currentXValue + moveableTargetWidth.value / 2
+    const currentCenteredYValue = currentYValue + moveableTargetHeight.value / 2
     const previousCenteredXPercentage =
       currentCenteredXValue / previousWindowWidth
     const previousCenteredYPercentage =
       currentCenteredYValue / previousWindowHeight
     const newXValue =
-      currentWindowWidth * previousCenteredXPercentage-
+      currentWindowWidth * previousCenteredXPercentage -
       moveableTargetWidth.value / 2
     const newYValue =
-      currentWindowHeight * previousCenteredYPercentage-
+      currentWindowHeight * previousCenteredYPercentage -
       moveableTargetHeight.value / 2
     if (convertScreenPositionTimeout) clearTimeout(convertScreenPositionTimeout)
     convertScreenPositionTimeout = setTimeout(() => {
@@ -271,9 +288,10 @@ let setGameOverlayMessengerPositionTimeout = null
 function setGameOverlayMessengerPosition() {
   const currentWindowWidth = viewport.value.width
   const currentWindowHeight = viewport.value.height
-  const newXValue = currentWindowWidth / 2-moveableTargetWidth.value / 2
-  const newYValue = currentWindowHeight-moveableTargetHeight.value
-  if (setGameOverlayMessengerPositionTimeout) clearTimeout(setGameOverlayMessengerPositionTimeout)
+  const newXValue = currentWindowWidth / 2 - moveableTargetWidth.value / 2
+  const newYValue = currentWindowHeight - moveableTargetHeight.value
+  if (setGameOverlayMessengerPositionTimeout)
+    clearTimeout(setGameOverlayMessengerPositionTimeout)
   setGameOverlayMessengerPositionTimeout = setTimeout(() => {
     if (moveable.value) {
       moveable.value.request(
@@ -306,17 +324,16 @@ onMounted(() => {
   // gsap.set(messenger.value, {
   //   opacity: 0,
   // })
-  const moveableTargetEl = moveableTarget.value
-    ?.$el as HTMLDivElement | null
+  const moveableTargetEl = moveableTarget.value?.$el as HTMLDivElement | null
   if (moveableTargetEl) {
-    if (props.width) moveableTargetEl.style.width = `${ props.width }px`
-    if (props.minWidth) moveableTargetEl.style.minWidth = `${ props.minWidth }px`
-    if (props.maxWidth) moveableTargetEl.style.maxWidth = `${ props.maxWidth }px`
-    if (props.height) moveableTargetEl.style.height = `${ props.height }px`
+    if (props.width) moveableTargetEl.style.width = `${props.width}px`
+    if (props.minWidth) moveableTargetEl.style.minWidth = `${props.minWidth}px`
+    if (props.maxWidth) moveableTargetEl.style.maxWidth = `${props.maxWidth}px`
+    if (props.height) moveableTargetEl.style.height = `${props.height}px`
     if (props.minHeight)
-      moveableTargetEl.style.minHeight = `${ props.minHeight }px`
+      moveableTargetEl.style.minHeight = `${props.minHeight}px`
     if (props.maxHeight)
-      moveableTargetEl.style.maxHeight = `${ props.maxHeight }px`
+      moveableTargetEl.style.maxHeight = `${props.maxHeight}px`
     if (props.transform) moveableTargetEl.style.transform = props.transform
   }
   moveable.value.updateTarget()
@@ -329,8 +346,8 @@ onMounted(() => {
       moveable.value.request(
         'draggable',
         {
-          x: viewport.value.width / 2-width / 2,
-          y: viewport.value.height-height-60,
+          x: viewport.value.width / 2 - width / 2,
+          y: viewport.value.height - height - 60,
         },
         true,
       )

diff --git a/apps/app/src/teams/messenger/electron/overlay-window.ts b/apps/app/src/teams/messenger/electron/overlay-window.ts
@@ -10,7 +10,7 @@ const createWindow = async (name: string): Promise<BrowserWindow> => {
   const url =
     (import.meta.env.VITE_DEV_SERVER_URL
       ? path.join(import.meta.env.VITE_DEV_SERVER_URL as string, filePath)
-      : `app://${ filePath }`)+'?game-overlay'
+      : `app://${filePath}`) + '?game-overlay'
   const overlayDebug = import.meta.env.DEV ? false : false
 
   window = gameOverlay.createWindow(name, {

diff --git a/apps/app/src/teams/messenger/electron/window.ts b/apps/app/src/teams/messenger/electron/window.ts
@@ -39,7 +39,7 @@ const createWindow = async (name: string): Promise<BrowserWindow> => {
 
   ipcMain.registerBrowserWindow(name, window)
 
-  const filePath = `./src/teams/${ name }/index.html`
+  const filePath = `./src/teams/${name}/index.html`
 
   window.webContents.once('did-finish-load', () => {
     if (import.meta.env.DEV) {
@@ -49,7 +49,9 @@ const createWindow = async (name: string): Promise<BrowserWindow> => {
     }
   })
 
-  const url = import.meta.env.VITE_DEV_SERVER_URL ? path.join(import.meta.env.VITE_DEV_SERVER_URL as string, filePath) : `app://${ filePath }`
+  const url = import.meta.env.VITE_DEV_SERVER_URL
+    ? path.join(import.meta.env.VITE_DEV_SERVER_URL as string, filePath)
+    : `app://${filePath}`
   if (import.meta.env.VITE_DEV_SERVER_URL) {
     await window.loadURL(url)
   } else {

diff --git a/apps/app/src/teams/messenger/modules/electron-messenger-window/index.ts b/apps/app/src/teams/messenger/modules/electron-messenger-window/index.ts
@@ -3,7 +3,10 @@ import { mouse } from '@/modules/node-mouse'
 import throttle from 'lodash/throttle'
 import { Hitbox } from '@/modules/vue-hitboxes/types'
 import { BrowserWindow, screen, shell } from 'electron'
-import { useMessengerStore, useMessengerWindowStore } from '@/teams/messenger/store'
+import {
+  useMessengerStore,
+  useMessengerWindowStore,
+} from '@/teams/messenger/store'
 import { useSettingsStore } from '@/features/settings/store'
 import { useHitboxesStore } from '@/modules/vue-hitboxes/hitboxes.store'
 import { Deferred } from '@packages/toolbox'
@@ -182,9 +185,9 @@ export const ElectronMessengerWindow = () => {
           .filter(({ w, h }) => w && h)
           .some(({ x, y, w, h }: Hitbox) => {
             const isWithinXHitbox =
-              mouseX >= windowX+x && mouseX <= windowX+x+w
+              mouseX >= windowX + x && mouseX <= windowX + x + w
             const isWithinYHitbox =
-              mouseY >= windowY+y && mouseY <= windowY+y+h
+              mouseY >= windowY + y && mouseY <= windowY + y + h
             return isWithinXHitbox && isWithinYHitbox
           })
         if (isWithinAnyHitboxes) {

diff --git a/apps/app/src/teams/overlay/electron/window.ts b/apps/app/src/teams/overlay/electron/window.ts
@@ -50,15 +50,15 @@ const createWindow = async (name: string): Promise<BrowserWindow> => {
     }
   })
 
-  const filePath = `./src/teams/${ name }/index.html`
+  const filePath = `./src/teams/${name}/index.html`
 
   if (import.meta.env.VITE_DEV_SERVER_URL) {
     await window.loadURL(
       path.join(import.meta.env.VITE_DEV_SERVER_URL as string, filePath),
     )
   } else {
     createProtocol('app')
-    window.loadURL(`app://${ filePath }`)
+    window.loadURL(`app://${filePath}`)
   }
 
   return window

diff --git a/apps/app/src/teams/speech-worker/electron/window.ts b/apps/app/src/teams/speech-worker/electron/window.ts
@@ -12,8 +12,8 @@ const createWindow = async (name: string): Promise<BrowserWindow> => {
   window = new BrowserWindow({
     width: windowWidth,
     height: windowHeight,
-    x: (topLeftDisplay?.bounds.x ?? 0)-windowWidth,
-    y: (topLeftDisplay?.bounds.y ?? 0)-windowHeight,
+    x: (topLeftDisplay?.bounds.x ?? 0) - windowWidth,
+    y: (topLeftDisplay?.bounds.y ?? 0) - windowHeight,
     show: true,
     transparent: true,
     frame: false,
@@ -55,15 +55,15 @@ const createWindow = async (name: string): Promise<BrowserWindow> => {
     }
   })
 
-  const filePath = `./src/teams/${ name }/index.html`
+  const filePath = `./src/teams/${name}/index.html`
 
   if (import.meta.env.VITE_DEV_SERVER_URL) {
     await window.loadURL(
       path.join(import.meta.env.VITE_DEV_SERVER_URL as string, filePath),
     )
   } else {
     createProtocol('app')
-    window.loadURL(`app://${ filePath }`)
+    window.loadURL(`app://${filePath}`)
   }
 
   return window