From 0f9bc620397b5a7f3510b31e9e58a850a834d1eb Mon Sep 17 00:00:00 2001 From: Liwanyi Date: Tue, 11 Oct 2022 18:11:53 +0800 Subject: [PATCH] =?UTF-8?q?UI=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/class/ZhongIcon.ts | 26 +----- src/class/action/LotteryHelper.ts | 28 +++--- src/class/utils/TornStyleBlock.ts | 70 ++++++++++++++- src/func/module/cityFinder.ts | 99 +++++++--------------- src/static/css/city_finder.css | 48 +++++++++++ src/static/css/common.css | 42 +++++---- src/static/html/danger_zone.html | 2 +- src/static/html/popup.html | 12 +-- src/static/json/{css.json => __css__.json} | 0 10 files changed, 194 insertions(+), 135 deletions(-) create mode 100644 src/static/css/city_finder.css rename src/static/json/{css.json => __css__.json} (100%) diff --git a/package.json b/package.json index f2c7298..dfa4b76 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "wuhu-torn-helper", - "version": "0.5.5", + "version": "0.5.6", "description": "芜湖助手", "dependencies": {}, "scripts": { diff --git a/src/class/ZhongIcon.ts b/src/class/ZhongIcon.ts index 3aa54bb..83b6ca0 100644 --- a/src/class/ZhongIcon.ts +++ b/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 { - - 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++; - } - // }); + new TornStyleBlock('123').insert2Dom(); Log.info('测试结束'); }, diff --git a/src/class/action/LotteryHelper.ts b/src/class/action/LotteryHelper.ts index 30d079c..72f529b 100644 --- a/src/class/action/LotteryHelper.ts +++ b/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); - document.querySelector('#websocketConnectionData').after(container); + progressBarBg, progressBar, status, desc).insert2Dom(); + // document.querySelector('#websocketConnectionData').after(container); Log.info('彩票助手初始化结束，耗时：' + (performance.now() - startTime) + 'ms'); } diff --git a/src/class/utils/TornStyleBlock.ts b/src/class/utils/TornStyleBlock.ts index 96a1fdd..0bd7ef9 100644 --- a/src/class/utils/TornStyleBlock.ts +++ b/src/class/utils/TornStyleBlock.ts @@ -1,6 +1,70 @@ -export default class TornStyleBlock { - private elem: HTMLElement; +import Log from "../Log"; +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 { + return this.baseElement.querySelectorAll(str); } } \ No newline at end of file diff --git a/src/func/module/cityFinder.ts b/src/func/module/cityFinder.ts index f3a1918..6272040 100644 --- a/src/func/module/cityFinder.ts +++ b/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(` -.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; -} -`); + CommonUtils.addStyle(CITY_FINDER_CSS); // 物品名与价格 let items = null; - const base = document.createElement('div'); - base.id = 'wh-city-finder'; - const container = document.createElement('div'); - container.id = 'wh-city-finder-cont'; - const header = document.createElement('div'); - header.id = 'wh-city-finder-header'; - header.innerHTML = '捡垃圾助手'; + // const base = document.createElement('div'); + // base.id = 'wh-city-finder'; + // const container = document.createElement('div'); + // container.id = 'wh-city-finder-cont'; + // const header = document.createElement('div'); + // header.id = 'wh-city-finder-header'; + // header.innerHTML = '捡垃圾助手'; const info = document.createElement('div'); info.innerHTML = '已找到物品：'; - container.append(info); - base.append(header); - base.append(container); + // container.append(info); + // base.append(header); + // 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以下 - else if (value < 500000000) el.node.style.backgroundColor = '#ffc107'; - // 红色 >500m - else if (value >= 500000000) el.node.style.backgroundColor = '#f44336'; + // 橙色 449m以下 + else if (value < 449000000) el.node.style.backgroundColor = '#ffc107'; + // 红色 >449m + 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('获取物品名称与价格信息超时') - clearInterval(interval) + Log.info('获取物品名称与价格信息超时') + window.clearInterval(interval) } }, 500); } diff --git a/src/static/css/city_finder.css b/src/static/css/city_finder.css new file mode 100644 index 0000000..76a88aa --- /dev/null +++ b/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;*/ +/*}*/ \ No newline at end of file diff --git a/src/static/css/common.css b/src/static/css/common.css index 565eef0..75cd21e 100644 --- a/src/static/css/common.css +++ b/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 { - 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-stack #gymroot { + display: none !important; } -#wh-gym-info-cont button { - cursor: pointer; -} +/*#wh-gym-info-cont {*/ +/* 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; @@ -267,4 +271,8 @@ div#wh-popup::after { #wh-notify .wh-notify-item .wh-notify-msg { padding: 12px; +} + +.non-selection { + user-select: none; } \ No newline at end of file diff --git a/src/static/html/danger_zone.html b/src/static/html/danger_zone.html index 5876310..a80e41f 100644 --- a/src/static/html/danger_zone.html +++ b/src/static/html/danger_zone.html @@ -1,5 +1,5 @@

即将打开危险功能，使用这些功能可能会造成账号封禁。请自行考虑是否使用。

- +
\ No newline at end of file diff --git a/src/static/html/popup.html b/src/static/html/popup.html index 938758a..59755be 100644 --- a/src/static/html/popup.html +++ b/src/static/html/popup.html @@ -1,7 +1,7 @@ -
- -

{{}}

-
{{}}
+ +
+

{{}}

+
{{}}
\ No newline at end of file diff --git a/src/static/json/css.json b/src/static/json/__css__.json similarity index 100% rename from src/static/json/css.json rename to src/static/json/__css__.json