Unique user agent per window & Minimal interface

package.json

@@ -2,7 +2,7 @@
   "name": "lindo",
   "productName": "Lindo",
   "private": true,
-  "version": "3.0.0-rc.12",
+  "version": "3.0.0-rc.13",
   "description": "Play Dofus Touch on Linux/OS X/Window",
   "homepage": "https://github.com/prixe/lindo",
   "author": "Zenoxs <[email protected]>",

packages/i18n/en/index.ts

@@ -123,6 +123,7 @@ const en: BaseTranslation = {
       language: 'Language',
       resolution: 'Resolution',
       fullScreen: 'Full screen',
+      minimalInterface: 'Minimal interface',
       hideTab: 'Hide the multi-account tab bar',
       localContent: 'Enable local map download (beta)',
       soundFocus: 'Enable game sound only on foreground window',

packages/i18n/es/index.ts

@@ -38,7 +38,7 @@ const es: Translation = {
         zoomIn: 'Acercar zoom',
         zoomOut: 'Alejar zoom',
         resetZoom: 'Reiniciar zoom',
-        fullScreen: 'Pantalla completa'
+        fullScreen: 'Pantalla completa',
       },
       infos: {
         title: '?',
@@ -124,6 +124,7 @@ const es: Translation = {
       language: 'Lenguaje',
       resolution: 'Resolución',
       fullScreen: 'Pantalla completa',
+      minimalInterface: 'interfaz mínima',
       hideTab: 'Ocultar la barra de pestañas multicuenta',
       localContent: 'Habilitar la descarga de mapas locales (beta)',
       soundFocus: 'Sonido del juego solo en la ventana de primer plano',

packages/i18n/fr/index.ts

@@ -124,6 +124,7 @@ const fr: Translation = {
       language: 'Langue',
       resolution: 'Résolution',
       fullScreen: 'Activer le mode plein écran',
+      minimalInterface: 'Interface minimale',
       hideTab: "Masquer la barre d'onglets multi-compte",
       localContent: 'Activer le téléchargement local des cartes (beta)',
       soundFocus: 'Activer le son du jeu uniquement sur la fenêtre au premier plan',

packages/i18n/i18n-types.ts

@@ -377,6 +377,10 @@ type RootTranslation = {
 			 * Full screen
 			 */
 			fullScreen: string
+			/**
+			 * Minimal interface
+			 */
+			minimalInterface: string
 			/**
 			 * Hide the multi-account tab bar
 			 */
@@ -1451,6 +1455,10 @@ export type TranslationFunctions = {
 			 * Full screen
 			 */
 			fullScreen: () => LocalizedString
+			/**
+			 * Minimal interface
+			 */
+			minimalInterface: () => LocalizedString
 			/**
 			 * Hide the multi-account tab bar
 			 */

packages/main/application.ts

@@ -150,6 +150,18 @@ export class Application {
     } else {
       this.createGameWindow()
     }
+    // Observe changes in minimalInterface option
+    observe(
+      this._rootStore.optionStore.window,
+      'minimalInterface',
+      (change) => {
+          if(change.type === 'update'){
+              for (const gWindow of this._gWindows) {
+                  gWindow._win.reload();
+              }
+          }
+      }
+  )
     observe(
       this._rootStore.optionStore.window,
       'audioMuted',

packages/main/utils/user-agent.ts

@@ -1,39 +1,48 @@
 import crypto from 'crypto'
-import userAgents from './user-agents.json'
+import userAgentsJson from './user-agents.json';
 import ElectronStore from 'electron-store'
 
+
+const USER_AGENT_ARRAY_LENGTH = 16;
+interface UserAgent {
+  ua: string;
+  platformVersion: string;
+  model: string;
+}
+const userAgents: UserAgent[] = userAgentsJson as UserAgent[];
 interface UserAgentStore {
-  userAgent: {
-    ua: string
-    maxAge: string
-  }
+  maxAge: string;
+  userAgents: UserAgent[]
 }
 
-const _getUA = (): string => {
-  const maxIndex = userAgents.length - 1
-  const index = crypto.randomInt(0, maxIndex)
-
-  return userAgents[index]
+const _getUA = (): UserAgent[] => {
+  const maxIndex = userAgents.length - 1;
+  const index = crypto.randomInt(0, maxIndex - USER_AGENT_ARRAY_LENGTH);
+  return userAgents.slice(index, index + USER_AGENT_ARRAY_LENGTH);
 }
 
-export const generateUserArgent = async (appVersion: string) => {
+export const generateUserArgent = async (appVersion: string, index: number = 0) => {
+  if (index < 0 || index > userAgents.length - 1) {
+    index = 0;
+  }
   const storage = new ElectronStore<UserAgentStore>()
   const now = new Date()
 
-  let ua: string
-  if (!storage.get('userAgent') || new Date(storage.get('userAgent').maxAge) < now) {
-    ua = _getUA()
-
+  let uas: UserAgent[]
+  if (!storage.get('userAgents') || new Date(storage.get('maxAge')) < now) {
+    uas = _getUA();
     const expireDay = crypto.randomInt(10, 360)
     const maxAge = new Date(now.setDate(now.getDate() + expireDay)).toString()
-
-    storage.set('userAgent', {
-      ua,
-      maxAge
-    } as UserAgentStore['userAgent'])
+    storage.set('userAgents', uas)
+    storage.set('maxAge', maxAge)
   } else {
-    ua = storage.get('userAgent').ua
+    uas = storage.get('userAgents')
   }
-
-  return ua + ' DofusTouch Client ' + appVersion
+  return uas[index].ua + ' DofusTouch Client ' + appVersion
 }
+
+export const userAgentFromIndex = (index: number = 0): UserAgent => {
+  const storage = new ElectronStore<UserAgentStore>()
+  const uas = storage.get('userAgents');
+  return uas[index]
+}

packages/main/windows/game-window.ts

@@ -4,7 +4,7 @@ import { attachTitlebarToWindow } from 'custom-electron-titlebar/main'
 import { join } from 'path'
 import { EventEmitter } from 'stream'
 import TypedEmitter from 'typed-emitter'
-import { generateUserArgent } from '../utils'
+import { generateUserArgent, userAgentFromIndex } from '../utils'
 import { logger } from '../logger'
 import { observe } from 'mobx'
 import { electronLocalshortcut } from '@hfelix/electron-localshortcut'
@@ -14,7 +14,7 @@ type GameWindowEvents = {
   close: (event: Event) => void
 }
 export class GameWindow extends (EventEmitter as new () => TypedEmitter<GameWindowEvents>) {
-  private readonly _win: BrowserWindow
+  readonly _win: BrowserWindow
   private readonly _store: RootStore
   private readonly _teamWindow?: GameTeamWindow
   private readonly _team?: GameTeam
@@ -75,7 +75,8 @@ export class GameWindow extends (EventEmitter as new () => TypedEmitter<GameWind
         webSecurity: false // require to load dofus files
       }
     })
-
+    const currIndex = JSON.parse(JSON.stringify(this))["_index"];
+    const ua_ch = userAgentFromIndex(currIndex);
     // when Referer is send to the ankama server, the request can be blocked
     this._win.webContents.session.webRequest.onBeforeSendHeaders(
       {
@@ -92,13 +93,17 @@ export class GameWindow extends (EventEmitter as new () => TypedEmitter<GameWind
     // remove sec headers on requests
     this._win.webContents.session.webRequest.onBeforeSendHeaders((details, callback) => {
       const requestHeaders = { ...(details.requestHeaders ?? {}) }
-      delete requestHeaders['sec-ch-ua']
-      delete requestHeaders['sec-ch-ua-mobile']
-      delete requestHeaders['sec-ch-ua-platform']
+      details.requestHeaders['sec-ch-ua-mobile']="?1";
+      details.requestHeaders['sec-ch-ua-platform']="Android";
+      details.requestHeaders['sec-ch-ua-platform-version']=ua_ch.platformVersion
+      details.requestHeaders['sec-ch-ua-model']=ua_ch.model;
+      // delete requestHeaders['sec-ch-ua']
+      // delete requestHeaders['sec-ch-ua-mobile']
+      // delete requestHeaders['sec-ch-ua-platform']
       delete requestHeaders['Sec-Fetch-Site']
       delete requestHeaders['Sec-Fetch-Mode']
       delete requestHeaders['Sec-Fetch-Dest']
-      const beforeSendResponse: BeforeSendResponse = { requestHeaders }
+      const beforeSendResponse: BeforeSendResponse = { requestHeaders: details.requestHeaders }
       callback(beforeSendResponse)
     })
 
@@ -188,7 +193,7 @@ export class GameWindow extends (EventEmitter as new () => TypedEmitter<GameWind
     team?: GameTeam
     teamWindow?: GameTeamWindow
   }): Promise<GameWindow> {
-    const userAgent = await generateUserArgent(store.appStore.appVersion)
+    const userAgent = await generateUserArgent(store.appStore.appVersion, index)
     return new GameWindow({ index, url, userAgent, store, team, teamWindow })
   }
 

packages/renderer/src/screens/main-screen/game-screen/use-game-manager.ts

@@ -1,4 +1,4 @@
-import { Game, RootStore } from '@/store'
+import { Game, RootStore, useStores } from '@/store'
 import { MODS, NotificationsMod } from '@/mods'
 import { Mod } from '@/mods/mod'
 import { DofusWindow } from '@/dofus-window'
@@ -22,7 +22,7 @@ export const useGameManager = ({ game, rootStore, LL }: GameManagerProps) => {
   const windowResized = useRef<Subject<void>>(new Subject())
   let backupMaxZoom: number | undefined
   const disposers = useRef<Array<() => void>>([])
-
+  const { optionStore } = useStores();
   const destroyMods = () => {
     window.lindoAPI.logger.info('destroy mods')()
     for (const mod of mods.current) {
@@ -59,7 +59,7 @@ export const useGameManager = ({ game, rootStore, LL }: GameManagerProps) => {
       const onWindowResized = windowResized.current.pipe(debounceTime(300)).subscribe(() => {
         try {
           dWindow.gui._resizeUi()
-        } catch (e) {}
+        } catch (e) { }
         fixMaxZoom()
       })
 
@@ -105,7 +105,11 @@ export const useGameManager = ({ game, rootStore, LL }: GameManagerProps) => {
         })
         char.rootElement.style.width = '100%'
         char.rootElement.style.height = '100%'
-
+        if (optionStore.window.minimalInterface) {
+          char.canvas.rootElement.style.height = '30px'
+          char.canvas.rootElement.style.marginLeft = '2px'
+          char.canvas.rootElement.style.aspectRatio = '2 / 1'
+        }
         game.setCharacterIcon(char.rootElement)
         startMods()
         fixMaxZoom()

packages/renderer/src/screens/main-screen/side-bar/SideBar.tsx

@@ -24,16 +24,6 @@ import { Game, useStores } from '@/store'
 import { TabAdd, TabGame } from './tab'
 import { Box, IconButton } from '@mui/material'
 
-const SideBarContainer = styled('div')(({ theme }) => ({
-  backgroundColor: theme.palette.background.paper,
-  overflowX: 'hidden',
-  overflowY: 'auto',
-  width: '71px',
-  display: 'flex',
-  alignItems: 'center',
-  flexDirection: 'column'
-}))
-
 const SortableItem = ({ game }: { game: Game }) => {
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: game.id })
 
@@ -49,7 +39,35 @@ const SortableItem = ({ game }: { game: Game }) => {
   )
 }
 export const SideBar = () => {
-  const { gameStore } = useStores()
+  const { gameStore, optionStore } = useStores()
+  const SideBarContainer = styled('div')(({ theme }) => (
+    optionStore.window.minimalInterface ?
+      {
+        backgroundColor: "#ffffff00",
+        overflowX: 'hidden',
+        overflowY: 'hidden',
+        width: 'auto',
+        height: '40px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+        position: 'fixed',
+        left: '50%',
+        transform: "translateX(-50%)",
+        top: '32px',
+        zIndex: '2',
+      } :
+      {
+        backgroundColor: theme.palette.background.paper,
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        width: '71px',
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column'
+      }
+  ))
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -79,7 +97,7 @@ export const SideBar = () => {
   }
 
   return (
-    <SideBarContainer>
+    <SideBarContainer sx={optionStore.window.minimalInterface ? { 'margin-top': "16px" } : {  }}>
       <Observer>
         {() => (
           <DndContext
@@ -99,12 +117,12 @@ export const SideBar = () => {
       <TabAdd />
       <Box sx={{ flex: 1 }} />
 
-      <IconButton onClick={handleToggleVolume} sx={{ mb: 1 }} aria-label='toggle-volume'>
+      <IconButton onClick={handleToggleVolume} sx={optionStore.window.minimalInterface ? { margin: "0px 2px", backgroundColor: "#2E2E2E90", width: "40px", height: "40px" } : { mb: 1 }} aria-label='toggle-volume'>
         <Observer>
           {() => (gameStore.isMuted ? <VolumeOff color={'error'} /> : <VolumeUp color={'primary'} />)}
         </Observer>
       </IconButton>
-      <IconButton onClick={handleOpenOption} sx={{ mb: 1 }} aria-label='settings'>
+      <IconButton onClick={handleOpenOption} sx={optionStore.window.minimalInterface ? { margin: "0px 2px", backgroundColor: "#2E2E2E90", width: "40px", height: "40px" } : { mb: 1 }} aria-label='settings'>
         <Settings />
       </IconButton>
     </SideBarContainer>

packages/renderer/src/screens/main-screen/side-bar/tab/TabAdd.tsx

@@ -10,7 +10,7 @@ interface TabAddProps {
 }
 
 export const TabAdd = styled((props: TabAddProps) => {
-  const { gameStore } = useStores()
+  const { gameStore, optionStore } = useStores()
   const { LL } = useI18nContext()
 
   const handleAddGame = () => {
@@ -23,7 +23,7 @@ export const TabAdd = styled((props: TabAddProps) => {
   }
 
   return (
-    <div onClick={handleAddGame} className={classNames(styles.tab, props.className)}>
+    <div onClick={handleAddGame} className={classNames(optionStore.window.minimalInterface ? styles.tabMini : styles.tab, props.className)}>
       <Icon sx={{ fontSize: 24 }}>add</Icon>
     </div>
   )

packages/renderer/src/screens/main-screen/side-bar/tab/TabGame.tsx

@@ -12,7 +12,7 @@ export interface TabGameProps {
 }
 
 export const TabGame = styled(({ game, className }: TabGameProps) => {
-  const { gameStore } = useStores()
+  const { gameStore, optionStore } = useStores()
   const characterIconRef = useRef<HTMLDivElement>(null)
 
   const handleClose = (event: React.MouseEvent) => {
@@ -50,7 +50,7 @@ export const TabGame = styled(({ game, className }: TabGameProps) => {
           <Tooltip title={game.characterName ?? ''} placement='right'>
             <div
               onClick={() => gameStore.selectGame(game)}
-              className={classNames(styles.tab, styles['tab-game'], className, {
+              className={classNames(optionStore.window.minimalInterface ? styles.tabMini : styles.tab, styles['tab-game'], className, {
                 focus: active,
                 notification: game.hasNotification
               })}