[Change] EXITボタンの挙動を変更

LaFClient · Jan 19, 2022 · d41ecf1 · d41ecf1
1 parent 0eff8ef
commit d41ecf1
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 9 deletions.
diff --git a/app/js/preload/game.js b/app/js/preload/game.js
@@ -4,6 +4,7 @@ const store = require('electron-store');
 const log = require('electron-log');
 const path = require('path');
 const lafTools = require('../util/tools');
+const { exit } = require('process');
 
 const tools = new lafTools.clientTools();
 
@@ -136,23 +137,23 @@ const injectWaterMark = () => {
 };
 
 const injectExitBtn = () => {
+    menuContainer = document.getElementById('menuItemContainer');
     const exitBtn = document.getElementById('clientExit');
     switch (config.get('showExitBtn', 'bottom')) {
         case 'top':
-            menuContainer = document.getElementById('menuItemContainer');
-            menuContainer.removeChild(menuContainer.children[7]);
             menuContainer.insertAdjacentHTML('afterbegin', `
-            <div class="menuItem" onmouseenter="playTick()" onclick="SOUND.play(\`select_0\`,0.15);clientExitPopup()" id="clientExit" style="display: inherit;">
-            <div class="menuItemIcon iconExit"></div>
+            <div class="menuItem" onmouseenter="playTick()" onclick="SOUND.play(\`select_0\`,0.15);clientExitPopup()" id="clientExit2" style="display: inherit;">
+            <span class="material-icons-outlined menBtnIcn" style="color:#fb5555">exit_to_app</span>
             <div class="menuItemTitle" id="menuBtnExit">Exit</div>
             </div>
             `);
-            exitBtn.style.display = 'inherit';
+            exitBtn.style.display = 'none';
             break;
         case 'bottom':
             exitBtn.style.display = 'inherit';
             break;
         case 'disable':
+            exitBtn.style.display = 'none';
             break;
     }
 };

diff --git a/app/js/util/settings.js b/app/js/util/settings.js
@@ -180,13 +180,14 @@ module.exports = {
         cat: 'Customize',
         type: 'select',
         val: config.get('showExitBtn', 'bottom'),
-        restart: true,
+        restart: false,
         default: 'bottom',
         options: {
             top: langPack.settings.topExitBtn,
             bottom: langPack.settings.bottomExitBtn,
             disable: langPack.settings.disableExitBtn,
         },
+        onchange: 'window.gt.injectExitBtn()',
     },
     joinMatchPresentRegion: {
         id: 'joinMatchPresentRegion',

diff --git a/app/js/util/tools.js b/app/js/util/tools.js
@@ -22,11 +22,11 @@ exports.clientTools = class {
             case 'checkbox':
                 return `
                         <label class='switch'>
-                        <input type='checkbox' onclick='window.gt.setSetting("${obj.id}", this.checked)'${config.get(obj.id, obj.default) ? ' checked' : ''}>
+                        <input type='checkbox' onclick='window.gt.setSetting("${obj.id}", this.checked);${obj.onchange ? obj.onchange : ''}'${config.get(obj.id, obj.default) ? ' checked' : ''}>
                         <span class='slider'></span>
                         </label>`;
             case 'select':
-                let tmpHTML = `<select onchange='window.gt.setSetting("${obj.id}", this.value)' class="inputGrey2">`;
+                let tmpHTML = `<select onchange='window.gt.setSetting("${obj.id}", this.value);${obj.onchange ? obj.onchange : ''}' class="inputGrey2">`;
                 Object.keys(obj.options).forEach((k) => {
                     tmpHTML += `<option value="${k}" ${config.get(obj.id, obj.default) === k ? ' selected' : ''}>${obj.options[k]}</option>`;
                 });
@@ -402,4 +402,31 @@ exports.gameTools = class {
             ipcRenderer.invoke('linkTwitch');
         }
     }
+    injectExitBtn() {
+        menuContainer = document.getElementById('menuItemContainer');
+        const exitBtn = document.getElementById('clientExit');
+        const exitBtn2 = document.getElementById('clientExit2') || undefined;
+        switch (config.get('showExitBtn', 'bottom')) {
+            case 'top':
+                if (!exitBtn2) {
+                    menuContainer.insertAdjacentHTML('afterbegin', `
+                    <div class="menuItem" onmouseenter="playTick()" onclick="SOUND.play(\`select_0\`,0.15);clientExitPopup()" id="clientExit2" style="display: inherit;">
+                    <span class="material-icons-outlined menBtnIcn" style="color:#fb5555">exit_to_app</span>
+                    <div class="menuItemTitle" id="menuBtnExit">Exit</div>
+                    </div>
+                    `);
+                }
+                exitBtn.style.display = 'none';
+                alert(langPack.settings.exitBtnAlert);
+                break;
+            case 'bottom':
+                exitBtn.style.display = 'inherit';
+                exitBtn2.remove();
+                break;
+            case 'disable':
+                exitBtn.style.display = 'none';
+                exitBtn2.remove();
+                break;
+        }
+    }
 };
diff --git a/app/lang/en_US.js b/app/lang/en_US.js
@@ -88,6 +88,7 @@ module.exports = {
         shareTimerInfo: 'Share timer info',
         autoPlay: 'Auto play medias',
         enableTimer: 'Menu Timer',
+        exitBtnAlert: 'It can break the UI with some CSS if you set EXIT button\'s position to top.',
     },
     misc: {
         noJoinableGames: 'There are no joinable games',

diff --git a/app/lang/ja_JP.js b/app/lang/ja_JP.js
@@ -88,6 +88,7 @@ module.exports = {
         shareTimerInfo: '試合の残り時間を表示',
         autoPlay: 'メディアの自動再生',
         enableTimer: 'メニュータイマー',
+        exitBtnAlert: 'EXITボタンを上に配置した場合、CSSファイルによってはUIを破壊する恐れがあります。',
     },
     misc: {
         noJoinableGames: '参加可能なゲームがありません',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "laf",
-    "version": "5.6.1",
+    "version": "5.6.2",
     "description": "Lite and Fast Krunker Client",
     "main": "app/main.js",
     "scripts": {