重构了插件和截图的执行逻辑，为以后的更多修改提供保障

MajsoulPlus · Jan 22, 2019 · 2727e77 · 2727e77
1 parent 220f0be
commit 2727e77
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 96 deletions.
diff --git a/Util.js b/Util.js
@@ -315,7 +315,7 @@ const Util = {
     webContents.send('take-screenshot')
   },
   /**
-   * 初始化播放器
+   * 初始化音频播放器
    */
   initPlayer() {
     audioPlayer = new electron.BrowserWindow({

diff --git a/bin/main/index.html b/bin/main/index.html
@@ -6,10 +6,24 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>雀魂Plus</title>
     <style>
+      @font-face {
+        font-family: '思源黑体 CN';
+        src: url('../../manager/SourceHanSansCN-Light.otf') format('opentype');
+        font-weight: 300;
+      }
+      @font-face {
+        font-family: '思源黑体 CN';
+        src: url('../../manager/SourceHanSansCN-Normal.otf') format('opentype');
+        font-weight: 400;
+      }
+
       * {
         box-sizing: border-box;
         margin: 0;
         padding: 0;
+        user-select: none;
+        font-family: '思源黑体 CN', 'Segoe UI', Tahoma, Geneva, Verdana,
+          sans-serif;
       }
       body {
         overflow: hidden;
@@ -27,11 +41,45 @@
         width: 100%;
         height: 100%;
       }
+      #screenshotLabel {
+        display: block;
+        position: fixed;
+        height: 64px;
+        width: 256px;
+        background-color: #222222;
+        top: 100vh;
+        right: 0;
+        transition: top 300ms linear;
+      }
+      #screenshotLabel.show {
+        top: calc(100vh - 64px);
+      }
+      #screenshotText {
+        font-weight: 300;
+        color: #cccccc;
+        position: absolute;
+        line-height: 64px;
+        font-size: 14px;
+        top: 0;
+        left: 112px;
+        cursor: default;
+      }
+      #screenshotImage {
+        width: 96px;
+        height: 54px;
+        position: absolute;
+        top: 5px;
+        left: 8px;
+      }
     </style>
   </head>
   <body>
     <div id="mainWindowBox">
-      <webview id="mainWindow" src="./loading,html"></webview>
+      <webview id="mainWindow" src="./loading.html"></webview>
+    </div>
+    <div id="screenshotLabel">
+      <img id="screenshotImage" src="#" alt="screenshot" />
+      <p id="screenshotText">screenshotText</p>
     </div>
     <script src="./mainLoader.js"></script>
   </body>

diff --git a/bin/main/mainLoader.js b/bin/main/mainLoader.js
@@ -1,7 +1,10 @@
 /*eslint no-console: ["error", { allow: ["warn", "error"] }] */
 
+const fs = require('fs')
+const path = require('path')
 const electron = require('electron')
 const { ipcRenderer } = electron
+const userConfigs = require('../../configs-user.json')
 
 /**
  * @type {Electron.WebviewTag}
@@ -13,31 +16,112 @@ const mainWindow = document.getElementById('mainWindow')
  */
 const mainWindowBox = document.getElementById('mainWindowBox')
 
-const scalePercent = 400
+const scalePercent = userConfigs.window.renderingMultiple
+
+/**
+ * @type {Electron.webContents}
+ */
+let webContents
+
+const probuildExecuteCode = executeScriptInfo => {
+  let codeEntry = executeScriptInfo.entry
+  if (!codeEntry) {
+    codeEntry = 'script.js'
+  }
+  let code = fs
+    .readFileSync(
+      path.join(executeScriptInfo.filesDir, executeScriptInfo.entry)
+    )
+    .toString('utf-8')
+  if (!executeScriptInfo.sync) {
+    code = `(()=>{
+            let __raf
+            let require = undefined
+            const __rafFun = ()=>{if(window.game){(()=>{${code}})()}else{__raf=requestAnimationFrame(__rafFun)}}
+            __raf = requestAnimationFrame(__rafFun)})()`
+  } else {
+    code = `(()=>{
+            let require = undefined
+            (()=>{${code}})()
+            })()`
+  }
+  return code
+}
+
+let screenshotCounter = 0
+let screenshotTimer
+const showScreenshotLabel = dataURL => {
+  /**
+   * @type {HTMLImageElement}
+   */
+  const screenshotImage = document.getElementById('screenshotImage')
+  const screenshotText = document.getElementById('screenshotText')
+  const screenshotLabel = document.getElementById('screenshotLabel')
+  screenshotImage.src = dataURL
+  screenshotText.innerText = screenshotCounter++
+    ? `已保存${screenshotCounter}张截图`
+    : '截图已保存'
+  screenshotLabel.classList.add('show')
+  clearTimeout(screenshotTimer)
+  screenshotTimer = setTimeout(() => {
+    screenshotCounter = 0
+    screenshotLabel.classList.remove('show')
+  }, 3000)
+}
 
 ipcRenderer.on('load-url', (event, ...args) => {
   const url = args[0]
   console.warn('LoadURL', url)
   mainWindow.loadURL(url)
-  mainWindowBox.style.width = '100%'
-  mainWindowBox.style.height = '100%'
+  mainWindowBox.style.width = '100vw'
+  mainWindowBox.style.height = '100vh'
   mainWindowBox.style.transform = 'none'
 })
 
-let webContents
+ipcRenderer.on('take-screenshot', () => {
+  if (webContents) {
+    webContents.capturePage(image => {
+      ipcRenderer.send('application-message', 'take-screenshot', image.toPNG())
+      showScreenshotLabel(image.toDataURL())
+    })
+  }
+})
+
+/**
+ * @type {Array<string>}
+ */
+let executeScriptsCodes
+ipcRenderer.on('executes-load', (event, ...args) => {
+  const executeScripts = args[0]
+  executeScriptsCodes = []
+  executeScripts.forEach(executeScript => {
+    const code = probuildExecuteCode(executeScript)
+    executeScriptsCodes.push(code)
+  })
+  ipcRenderer.send('main-loader-message', 'executes-loaded')
+})
+
 mainWindow.addEventListener('dom-ready', () => {
   if (!webContents) {
     webContents = mainWindow.getWebContents()
+    webContents.setZoomFactor(1)
     ipcRenderer.send('main-loader-message', 'main-loader-ready')
 
+    webContents.on('did-finish-load', () => {
+      executeScriptsCodes.forEach(executeScriptCode => {
+        webContents.executeJavaScript(executeScriptCode)
+      })
+    })
+
     if (process.env.NODE_ENV === 'development') {
       mainWindow.openDevTools({ mode: 'detach' })
     }
+  } else {
+    mainWindowBox.style.width = `${scalePercent}vw`
+    mainWindowBox.style.height = `${scalePercent}vh`
+    mainWindowBox.style.transform = `scale(${100 /
+      scalePercent}) translate(${(100 - scalePercent) / 2}%, ${(100 -
+      scalePercent) /
+      2}%)`
   }
-  mainWindowBox.style.width = `${scalePercent}vw`
-  mainWindowBox.style.height = `${scalePercent}vh`
-  mainWindowBox.style.transform = `scale(${100 /
-    scalePercent}) translate(${(100 - scalePercent) / 2}%, ${(100 -
-    scalePercent) /
-    2}%)`
 })
diff --git a/configs-user.json b/configs-user.json
@@ -1,7 +1,7 @@
 {
   "window": {
     "zoomFactor": 1,
-    "gameMSAA": 1,
+    "renderingMultiple": 100,
     "isKioskModeOn": false
   },
   "update": {

diff --git a/index.js b/index.js
@@ -110,53 +110,6 @@ const windowControl = {
     return executeScripts
   },
 
-  _getExecuteCode: executeScriptInfo => {
-    let codeEntry = executeScriptInfo.entry
-    if (!codeEntry) {
-      codeEntry = 'script.js'
-    }
-    let code = fs
-      .readFileSync(
-        path.join(executeScriptInfo.filesDir, executeScriptInfo.entry)
-      )
-      .toString('utf-8')
-    if (!executeScriptInfo.sync) {
-      code = `(()=>{
-              let __raf
-              let require = undefined
-              const __rafFun = ()=>{if(window.game){(()=>{${code}})()}else{__raf=requestAnimationFrame(__rafFun)}}
-              __raf = requestAnimationFrame(__rafFun)})()`
-    } else {
-      code = `(()=>{
-              let require = undefined
-              (()=>{${code}})()
-              })()`
-    }
-    return code
-  },
-
-  _execute: gameWindow => {
-    const executeScripts = windowControl._getExecuteScripts()
-    executeScripts.forEach(executeScript => {
-      const code = windowControl._getExecuteCode(executeScript)
-      gameWindow.webContents.executeJavaScript(code)
-    })
-    gameWindow.webContents.executeJavaScript(`
-    (()=>{
-      let __raf 
-      const __rafFun = ()=>{if(window.game){(()=>{
-        const layaCanvas = document.getElementById('layaCanvas')
-        const ipcRenderer = require('electron').ipcRenderer
-        ipcRenderer.on('take-screenshot',()=>{
-          console.log('Taking ScreenShot')
-          const dataURL = Laya.stage.drawToCanvas(layaCanvas.width, layaCanvas.height, 0, 0).getCanvas().toDataURL()
-          ipcRenderer.send('application-message','take-screenshot',{buffer:dataURL})
-        })
-        console.log('ScreenShoter')
-      })()}else{__raf=requestAnimationFrame(__rafFun)}}
-      __raf = requestAnimationFrame(__rafFun)})()`)
-  },
-
   _getLocalUrlWithParams: url => {
     if (url.includes('?')) {
       return `https://localhost:${sererHttps.address().port}/0/${url.substring(
@@ -243,32 +196,13 @@ const windowControl = {
       Util.shutoffPlayer()
     })
     Util.initPlayer()
-    gameWindow.webContents.on('did-finish-load', () =>
-      windowControl._execute(gameWindow)
-    )
     gameWindow.webContents.on('crashed', () =>
       console.warn('web contents crashed')
     )
     gameWindow.once('ready-to-show', () => {
-      gameWindow.webContents.setZoomFactor(1 / userConfigs.window.gameMSAA)
+      gameWindow.webContents.setZoomFactor(1)
       gameWindow.show()
     })
-    gameWindow.webContents.on('will-navigate', (evt, url) => {
-      gameWindow.webContents.getZoomFactor(number => {
-        console.warn('ZoomFactor ' + number)
-      })
-      if (windowControl._testRedirectGameWindow(url)) {
-        evt.preventDefault()
-        windowControl._redirectGameWindow(url, gameWindow)
-      } else {
-        gameWindow.webContents.setZoomFactor(1)
-      }
-      if (windowControl._testIsLocalGameWindow(url)) {
-        gameWindow.webContents.setZoomFactor(1 / userConfigs.window.gameMSAA)
-      } else {
-        gameWindow.webContents.setZoomFactor(1)
-      }
-    })
     gameWindow.webContents.on('console-message', (
       evt,
       level,
@@ -383,13 +317,6 @@ const windowControl = {
     windowControl.windowMap['game'] = gameWindow
   },
 
-  mainLoaderReady(){
-    windowControl.windowMap['game'].webContents.send(
-      'load-url',
-      `https://localhost:${sererHttps.address().port}/0/`
-    )
-  },
-
   closeManagerWindow: () => {
     const managerWindow = windowControl.windowMap['manager']
     managerWindow && managerWindow.close()
@@ -450,10 +377,7 @@ const windowControl = {
             break
           }
           case 'take-screenshot': {
-            const buffer = new Buffer(
-              args[1].buffer.replace(/^data:image\/\w+;base64,/, ''),
-              'base64'
-            )
+            const buffer = args[1]
             Util.writeFile(
               path.join(
                 electron.app.getPath('pictures'),
@@ -473,7 +397,18 @@ const windowControl = {
       if (args && args.length > 0) {
         switch (args[0]) {
           case 'main-loader-ready': {
-            windowControl.mainLoaderReady()
+            const executeScripts = windowControl._getExecuteScripts()
+            windowControl.windowMap['game'].webContents.send(
+              'executes-load',
+              executeScripts
+            )
+            break
+          }
+          case 'executes-loaded': {
+            windowControl.windowMap['game'].webContents.send(
+              'load-url',
+              `https://localhost:${sererHttps.address().port}/0/`
+            )
             break
           }
           default:

diff --git a/manager/manager.js b/manager/manager.js
@@ -274,8 +274,8 @@ const saveSettings = () => {
   modLaunched = modLaunched.filter(element => {
     return modsWindowList.includes(`${element.name}|${element.author}`)
   })
-  modLaunched.forEach(modInfo=>{
-    if(modInfo.execute){
+  modLaunched.forEach(modInfo => {
+    if (modInfo.execute) {
       modInfo.execute.filesDir = modInfo.filesDir
       executeLaunched.push(modInfo.execute)
     }
@@ -1183,6 +1183,7 @@ const getKeyText = key => {
     window: '窗口',
     zoomFactor: '资源管理器缩放(Zoom Factor)',
     gameMSAA: '游戏渲染分辨率倍数(MSAA)',
+    renderingMultiple: '% 渲染比率(Rendering Multiple)',
     isKioskModeOn: '使用原生模式代替默认全屏幕模式(Use Kiosk Fullscreen Mode)',
     update: '更新',
     prerelease: '获取浏览版(Get Pre-releases)',
@@ -1192,7 +1193,7 @@ const getKeyText = key => {
     isInProcessGpuOn: '启用进程内GPU处理(Turn in-process-gpu On)',
     loaclVersion: '雀魂Plus 当前版本'
   }
-  return lang[key] ? lang[key] : false
+  return lang[key] ? lang[key] : key
 }
 const userConfigInit = () => {
   const settingInner = document.getElementById('settingInner')

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "majsoul-plus-client",
-  "version": "1.7.6",
+  "version": "1.8.0",
   "productName": "Majsoul Plus",
   "author": "MajsoulPlus Team",
   "description": "Majsoul Plus",