101 lines
4.2 KiB
TypeScript
101 lines
4.2 KiB
TypeScript
import toThousands from "../utils/toThousands";
|
|
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(_base: TornStyleBlock): void {
|
|
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 info = document.createElement('div');
|
|
info.innerHTML = '已找到物品：';
|
|
// container.append(info);
|
|
// base.append(header);
|
|
// base.append(container);
|
|
|
|
_base.append(header, 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 => {
|
|
Log.error(err);
|
|
items = undefined
|
|
});
|
|
CommonUtils.elementReady('div.leaflet-marker-pane').then(elem => {
|
|
// document.querySelector('.content-wrapper').prepend(base);
|
|
|
|
// 发现的物品id与map img node
|
|
const founds = [];
|
|
elem.querySelectorAll('img.map-user-item-icon').forEach(node => {
|
|
const item_id = node.src.split('/')[5];
|
|
const finder_item = document.createElement('span');
|
|
// finder_item.id = 'wh-city-finder-item' + item_id;
|
|
finder_item.classList.add('wh-city-finder-item');
|
|
finder_item.innerHTML = item_id;
|
|
founds.push({ 'id': item_id, 'node': finder_item, 'map_item': node });
|
|
// container.append(finder_item);
|
|
// _base.append(finder_item);
|
|
info.append(finder_item);
|
|
});
|
|
// 未发现物品 返回
|
|
if (founds.length === 0) {
|
|
info.innerHTML = '空空如也，请大佬明天再来';
|
|
return;
|
|
}
|
|
// 将id显示为物品名与价格的函数
|
|
const displayNamePrice = () => {
|
|
// 总价
|
|
let total = 0;
|
|
founds.forEach(el => {
|
|
const value = items[el.id]['price'];
|
|
el.node.innerHTML = `<img src="${ el.map_item.src }" alt="" />${ items[el.id]['name'] } ($${ toThousands(value) })`;
|
|
// 灰色 100k以下
|
|
if (value < 100000) el.node.style.backgroundColor = '#9e9e9e';
|
|
// 绿色 1m以下
|
|
else if (value < 1000000) el.node.style.backgroundColor = '#4caf50';
|
|
// 蓝色 25m以下
|
|
else if (value < 25000000) el.node.style.backgroundColor = '#03a9f4';
|
|
// 橙色 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) }`;
|
|
// _base.setTitle(`捡垃圾助手 - ${ founds.length } 个物品，总价值 $${ toThousands(total) }`);
|
|
};
|
|
// 未取到数据时添加循环来调用函数
|
|
if (items === null) {
|
|
// 15s超时
|
|
let timeout = 30;
|
|
const interval = window.setInterval(() => {
|
|
timeout--;
|
|
if (items !== null) {
|
|
displayNamePrice();
|
|
window.clearInterval(interval);
|
|
}
|
|
if (0 === timeout) {
|
|
Log.info('获取物品名称与价格信息超时')
|
|
window.clearInterval(interval)
|
|
}
|
|
}, 500);
|
|
}
|
|
// 无法跨域获取数据时
|
|
else if (items === undefined) {
|
|
info.innerHTML += '(当前平台暂不支持查询价格)';
|
|
}
|
|
// 调用函数
|
|
else {
|
|
displayNamePrice();
|
|
}
|
|
})
|
|
} |