UI调整

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wuhu-torn-helper",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "芜湖助手",
   "dependencies": {},
   "scripts": {

src/class/ZhongIcon.ts

@@ -26,7 +26,7 @@ import DEV_DETAILS_HTML from "../static/html/zhong/setting/dev_details.html";
 import QUICK_FLY_CSS from "../static/css/quick_fly.css";
 import QUICK_LINK_CSS from "../static/css/quick_link.css";
 import MDUtils from "./utils/MDUtils";
-import InfoUtils from "./utils/InfoUtils";
+import TornStyleBlock from "./utils/TornStyleBlock";
 
 export default class ZhongIcon extends WuhuBase {
     public static ZhongNode: MyHTMLElement = null;
@@ -765,29 +765,7 @@ export default class ZhongIcon extends WuhuBase {
             clickFunc: async function () {
                 Log.info('测试开始');
 
-                try {
+                new TornStyleBlock('123').insert2Dom();
-
-                    Log.info(ZhongIcon.getPool());
-
-
-                    // Log.info(await CommonUtils.ajaxFetch({
-                    //     url: window.addRFC('https://www.torn.com/loader.php?sid=lotteryPlay&step=buyTicket&lotteryID=1'),
-                    //     method: 'get',
-                    //     referrer: '/loader.php?sid=lottery',
-                    // }));
-
-                } catch (e) {
-                    Log.error(e);
-                }
-
-                // window.setImmediate(async () => {
-                let i = 0;
-                while (i < 10) {
-                    await InfoUtils.getInstance().sleep(5000);
-                    Log.info(performance.now());
-                    i++;
-                }
-                // });
 
                 Log.info('测试结束');
             },

src/class/action/LotteryHelper.ts

@@ -3,12 +3,11 @@ import Log from "../Log";
 import InfoUtils from "../utils/InfoUtils";
 import MathUtils from "../utils/MathUtils";
 import CommonUtils from "../utils/CommonUtils";
+import TornStyleBlock from "../utils/TornStyleBlock";
 
 export default class LotteryHelper extends WuhuBase {
     private loopFlag = true;
 
-    private container: HTMLElement = null;
-    private title: HTMLElement = null;
     private radioDaily: HTMLInputElement = null;
     private radioWeekly: HTMLInputElement = null;
     private radioMonthly: HTMLInputElement = null;
@@ -25,8 +24,6 @@ export default class LotteryHelper extends WuhuBase {
         let startTime = performance.now();
         Log.info('彩票助手初始化开始');
 
-        this.container = document.createElement('div');
-        this.title = document.createElement('div');
         let radioLabelDaily = document.createElement('label');
         let radioLabelWeekly = document.createElement('label');
         let radioLabelMonthly = document.createElement('label');
@@ -40,8 +37,6 @@ export default class LotteryHelper extends WuhuBase {
         this.status = document.createElement('div');
         this.desc = document.createElement('p');
         let {
-            container,
-            title,
             radioDaily,
             radioWeekly,
             radioMonthly,
@@ -52,11 +47,8 @@ export default class LotteryHelper extends WuhuBase {
             status,
             desc
         } = this;
+        let progressBarBg = document.createElement('div');
 
-        container.classList.add('cont-gray', 'top-round');
-        title.innerHTML = '彩票助手';
-        title.classList.add('title-black', 'm-top10', 'top-round');
-        title.style.marginBottom = '0.5em';
         radioDaily.type = 'radio';
         radioDaily.name = 'lottery_type';
         radioDaily.checked = true;
@@ -75,12 +67,19 @@ export default class LotteryHelper extends WuhuBase {
         stopBtn.disabled = true;
         stopBtn.addEventListener('click', () => this.stop());
         stopBtn.classList.add('torn-btn');
+        progressBarBg.style.width = '100%';
+        progressBarBg.style.height = '1em';
+        progressBarBg.style.backgroundColor = '#cecece';
+        progressBarBg.style.marginTop = '1em';
         progressBar.style.width = '0';
         progressBar.style.height = '1em';
         progressBar.style.backgroundColor = '#00ff00';
+        progressBar.style.marginTop = '-1em';
+        progressBar.style.marginBottom = '1em';
         status.innerHTML = '0/0';
-        status.style.marginTop = '-1em';
+        status.style.marginTop = '-2em';
         status.style.textAlign = 'center';
+        desc.style.marginTop = '1em';
         desc.innerHTML = '批量买彩票';
 
         radioLabelDaily.append(radioDaily);
@@ -91,12 +90,13 @@ export default class LotteryHelper extends WuhuBase {
         radioLabelMonthly.append(radioMonthly);
         radioLabelMonthly.append(' 月彩 $1m');
 
-        container.append(title,
+        // container.append(title,
+        new TornStyleBlock('彩票助手').append(
             radioLabelDaily, radioLabelWeekly, radioLabelMonthly, document.createElement('br'),
             time, document.createElement('br'),
             startBtn, stopBtn,
-            progressBar, status, desc);
+            progressBarBg, progressBar, status, desc).insert2Dom();
-        document.querySelector('#websocketConnectionData').after(container);
+        // document.querySelector('#websocketConnectionData').after(container);
 
         Log.info('彩票助手初始化结束，耗时：' + (performance.now() - startTime) + 'ms');
     }

src/class/utils/TornStyleBlock.ts

@@ -1,6 +1,70 @@
-export default class TornStyleBlock {
+import Log from "../Log";
-    private elem: HTMLElement;
+import MathUtils from "./MathUtils";
 
-    constructor(title: string) {
+export default class TornStyleBlock {
+    private readonly baseElement: HTMLElement;
+    private readonly headElement: HTMLElement;
+    private readonly elem: HTMLElement;
+
+    public constructor(title: string) {
+        this.baseElement = document.createElement('div');
+        this.headElement = document.createElement('div');
+        this.elem = document.createElement('div');
+
+        this.headElement.classList.add('title-black', 'm-top10', 'top-round');
+        this.headElement.innerHTML = title;
+        this.elem.classList.add('cont-gray', 'bottom-round');
+        this.elem.style.padding = '0.5em';
+
+        this.baseElement.append(this.headElement, this.elem);
+        this.baseElement.id = 'WHTornStyleBlock' + MathUtils.getInstance().getRandomInt(0, 100);
+    }
+
+    public append(...el: Element[]): TornStyleBlock {
+        this.elem.append(...el);
+        return this;
+    }
+
+    public appendChild(...el: Element[]): TornStyleBlock {
+        return this.append(...el)
+    }
+
+    public getBase(): HTMLElement {
+        return this.baseElement;
+    }
+
+    public getElement(): HTMLElement {
+        return this.elem;
+    }
+
+    public insert2Dom(after: string = '#websocketConnectionData'): TornStyleBlock {
+        let anchor = document.querySelector(after);
+        if (anchor) {
+            anchor.after(this.baseElement);
+        } else {
+            Log.error('[#websocketConnectionData] 不存在，无法将block加入dom树');
+            throw '芜湖！[#websocketConnectionData] 不存在，无法将block加入dom树';
+        }
+        return this;
+    }
+
+    public remove(): void {
+        this.baseElement.remove();
+    }
+
+    public setTitle(str: string): void {
+        this.headElement.innerHTML = str;
+    }
+
+    public setContent(html: string): void {
+        this.elem.innerHTML = html;
+    }
+
+    public querySelector(str: string): HTMLElement {
+        return this.baseElement.querySelector(str);
+    }
+
+    public querySelectorAll(str: string): NodeListOf<HTMLElement> {
+        return this.baseElement.querySelectorAll(str);
     }
 }

src/func/module/cityFinder.ts

@@ -1,69 +1,29 @@
 import toThousands from "../utils/toThousands";
-import log from "../utils/@deprecated/log";
 import CommonUtils from "../../class/utils/CommonUtils";
 import Log from "../../class/Log";
+import CITY_FINDER_CSS from "../../static/css/city_finder.css";
+import TornStyleBlock from "../../class/utils/TornStyleBlock";
 
 export default function cityFinder(): void {
-    CommonUtils.addStyle(`
+    CommonUtils.addStyle(CITY_FINDER_CSS);
-.wh-city-finds .leaflet-marker-pane img[src*="torn.com/images/items/"]{
-display: block !important;
-box-sizing: border-box;
-width: 40px !important;
-height: 40px !important;
-left: -20px !important;
-top: -20px !important;
-padding: 10px 0;
-border: none;
-border-radius: 100%;
-background-color:#d2d2d28c;
-box-shadow:0 0 10px 5px #000;
-z-index: 999 !important;
-}
-.wh-city-finds .leaflet-marker-pane.leaflet-marker-icon.user-item-pinpoint.leaflet-clickable{display: none !important;}
-#wh-city-finder{
-box-shadow: 0 0 3px 0px #696969;
-border-radius: 4px;
-}
-#wh-city-finder-header{
-background-color: #3f51b5;
-color: white;
-padding: 8px;
-font-size: 15px;
-border-radius: 4px 4px 0 0;
-text-shadow: 0 0 2px black;
-background-image: linear-gradient(90deg,transparent 50%,rgba(0,0,0,.07) 0);
-background-size: 4px;
-}
-#wh-city-finder-cont{
-background: #616161;
-padding: 8px;
-color: #c7c7c7;
-border-radius: 0 0 4px 4px;
-font-size: 13px;
-}
-#wh-city-finder-cont span{
-margin:2px 4px 2px 0;
-padding:2px;
-border-radius:2px;
-background:green;
-color:white;
-display:inline-block;
-}
-`);
     // 物品名与价格
     let items = null;
-    const base = document.createElement('div');
+    // const base = document.createElement('div');
-    base.id = 'wh-city-finder';
+    // base.id = 'wh-city-finder';
-    const container = document.createElement('div');
+    // const container = document.createElement('div');
-    container.id = 'wh-city-finder-cont';
+    // container.id = 'wh-city-finder-cont';
-    const header = document.createElement('div');
+    // const header = document.createElement('div');
-    header.id = 'wh-city-finder-header';
+    // header.id = 'wh-city-finder-header';
-    header.innerHTML = '捡垃圾助手';
+    // header.innerHTML = '捡垃圾助手';
     const info = document.createElement('div');
     info.innerHTML = '已找到物品：';
-    container.append(info);
+    // container.append(info);
-    base.append(header);
+    // base.append(header);
-    base.append(container);
+    // base.append(container);
+
+    let _base = new TornStyleBlock('捡垃圾助手').insert2Dom().append(info);
+    document.body.classList.add('wh-city-finds');
+
     CommonUtils.COFetch('https://jjins.github.io/item_price_raw.json')
         .then(r => items = JSON.parse(r))
         .catch(err => {
@@ -71,8 +31,8 @@ display:inline-block;
             items = undefined
         });
     CommonUtils.elementReady('div.leaflet-marker-pane').then(elem => {
-        document.querySelector('#map').classList.add('wh-city-finds');
+        // document.querySelector('.content-wrapper').prepend(base);
-        document.querySelector('.content-wrapper').prepend(base);
+
         // 发现的物品id与map img node
         const founds = [];
         elem.querySelectorAll('img.map-user-item-icon').forEach(node => {
@@ -81,11 +41,11 @@ display:inline-block;
             finder_item.id = 'wh-city-finder-item' + item_id;
             finder_item.innerHTML = item_id;
             founds.push({ 'id': item_id, 'node': finder_item, 'map_item': node });
-            container.append(finder_item);
+            // container.append(finder_item);
+            _base.append(finder_item);
         });
         // 未发现物品 返回
         if (founds.length === 0) {
-            // header.innerHTML = '捡垃圾助手';
             info.innerHTML = '空空如也，请大佬明天再来';
             return;
         }
@@ -102,13 +62,14 @@ display:inline-block;
                 else if (value < 1000000) el.node.style.backgroundColor = '#4caf50';
                 // 蓝色 25m以下
                 else if (value < 25000000) el.node.style.backgroundColor = '#03a9f4';
-                // 橙色 500m以下
+                // 橙色 449m以下
-                else if (value < 500000000) el.node.style.backgroundColor = '#ffc107';
+                else if (value < 449000000) el.node.style.backgroundColor = '#ffc107';
-                // 红色 >500m
+                // 红色 >449m
-                else if (value >= 500000000) el.node.style.backgroundColor = '#f44336';
+                else if (value >= 449000000) el.node.style.backgroundColor = '#f44336';
                 total += items[el.id]['price'];
             });
-            header.innerHTML = `捡垃圾助手 - ${ founds.length } 个物品，总价值 $${ toThousands(total) }`;
+            // header.innerHTML = `捡垃圾助手 - ${ founds.length } 个物品，总价值 $${ toThousands(total) }`;
+            _base.setTitle(`捡垃圾助手 - ${ founds.length } 个物品，总价值 $${ toThousands(total) }`);
         };
         // 未取到数据时添加循环来调用函数
         if (items === null) {
@@ -118,11 +79,11 @@ display:inline-block;
                 timeout--;
                 if (items !== null) {
                     displayNamePrice();
-                    clearInterval(interval);
+                    window.clearInterval(interval);
                 }
                 if (0 === timeout) {
-                    log.info('获取物品名称与价格信息超时')
+                    Log.info('获取物品名称与价格信息超时')
-                    clearInterval(interval)
+                    window.clearInterval(interval)
                 }
             }, 500);
         }

src/static/css/city_finder.css

@@ -0,0 +1,48 @@
+.wh-city-finds .leaflet-marker-pane img[src*="torn.com/images/items/"] {
+    display: block !important;
+    box-sizing: border-box;
+    width: 40px !important;
+    height: 40px !important;
+    left: -20px !important;
+    top: -20px !important;
+    padding: 10px 0;
+    border: none;
+    border-radius: 100%;
+    background-color: #d2d2d28c;
+    box-shadow: 0 0 10px 5px #000;
+    z-index: 999 !important;
+}
+
+.wh-city-finds .leaflet-marker-pane.leaflet-marker-icon.user-item-pinpoint.leaflet-clickable {
+    display: none !important;
+}
+
+/*#wh-city-finder{*/
+/*    box-shadow: 0 0 3px 0px #696969;*/
+/*    border-radius: 4px;*/
+/*}*/
+/*#wh-city-finder-header{*/
+/*    background-color: #3f51b5;*/
+/*    color: white;*/
+/*    padding: 8px;*/
+/*    font-size: 15px;*/
+/*    border-radius: 4px 4px 0 0;*/
+/*    text-shadow: 0 0 2px black;*/
+/*    background-image: linear-gradient(90deg,transparent 50%,rgba(0,0,0,.07) 0);*/
+/*    background-size: 4px;*/
+/*}*/
+/*#wh-city-finder-cont{*/
+/*    background: #616161;*/
+/*    padding: 8px;*/
+/*    color: #c7c7c7;*/
+/*    border-radius: 0 0 4px 4px;*/
+/*    font-size: 13px;*/
+/*}*/
+/*#wh-city-finder-cont span{*/
+/*    margin:2px 4px 2px 0;*/
+/*    padding:2px;*/
+/*    border-radius:2px;*/
+/*    background:green;*/
+/*    color:white;*/
+/*    display:inline-block;*/
+/*}*/

src/static/css/common.css

@@ -99,7 +99,7 @@ div#effectiveness-wrap {
     width: 100%;
     height: 100%;
     background: #00000090;
-    color: #333;
+    /*color: #333;*/
 }
 
 div#wh-popup::after {
@@ -114,14 +114,14 @@ div#wh-popup::after {
 #wh-popup-container {
     max-width: 568px;
     margin: 5em auto 0;
-    background: #d7d7d7;
+    /*background: #d7d7d7;*/
     min-height: 120px;
     box-shadow: 0 0 5px 1px #898989;
-    border-radius: 4px;
+    /*border-radius: 4px;*/
 }
 
 #wh-popup-title p {
-    padding: 1em 0;
+    /*padding: 1em 0;*/
     font-size: 16px;
     font-weight: bold;
     text-align: center;
@@ -207,21 +207,25 @@ div#wh-popup::after {
     display: none !important;
 }
 
-#wh-gym-info-cont {
+.wh-gym-stack #gymroot {
-    background-color: #363636;
+    display: none !important;
-    color: white;
-    padding: 8px;
-    font-size: 15px;
-    border-radius: 4px;
-    text-shadow: 0 0 2px black;
-    background-image: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, .07) 0);
-    background-size: 4px;
-    line-height: 20px;
 }
 
-#wh-gym-info-cont button {
+/*#wh-gym-info-cont {*/
-    cursor: pointer;
+/*    background-color: #363636;*/
-}
+/*    color: white;*/
+/*    padding: 8px;*/
+/*    font-size: 15px;*/
+/*    border-radius: 4px;*/
+/*    text-shadow: 0 0 2px black;*/
+/*    background-image: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, .07) 0);*/
+/*    background-size: 4px;*/
+/*    line-height: 20px;*/
+/*}*/
+
+/*#wh-gym-info-cont button {*/
+/*    cursor: pointer;*/
+/*}*/
 
 #wh-notify {
     display: inline-block;
@@ -268,3 +272,7 @@ div#wh-popup::after {
 #wh-notify .wh-notify-item .wh-notify-msg {
     padding: 12px;
 }
+
+.non-selection {
+    user-select: none;
+}

src/static/html/danger_zone.html

@@ -1,5 +1,5 @@
 <p>即将打开危险功能，使用这些功能可能会造成账号封禁。请自行考虑是否使用。</p>
 <p><label><input type="checkbox" {{}}/> 知道了，开启</label></p>
 <div>
-    <button disabled>保存</button>
+    <button class="torn-btn" disabled>保存</button>
 </div>

src/static/html/popup.html

@@ -1,7 +1,7 @@
-<div id="wh-popup-container">
+<style>html {
-    <style>html {
+    overflow: hidden !important;
-        overflow: hidden !important;
+}</style>
-    }</style>
+<div class="border-round" id="wh-popup-container">
-    <div id="wh-popup-title"><p>{{}}</p></div>
+    <div class="title-black top-round" id="wh-popup-title"><p>{{}}</p></div>
-    <div id="wh-popup-cont">{{}}</div>
+    <div class="scroll-area scrollbar-transparent cont-gray bottom-round" id="wh-popup-cont">{{}}</div>
 </div>