☰

巴哈姆特勇者福利社++

改進巴哈姆特的勇者福利社，動態載入全部商品、加入過濾隱藏功能、標示競標目前出價等。

// ==UserScript==
// @name         巴哈姆特勇者福利社++
// @namespace    https://github.com/DonkeyBear
// @version      0.8.3
// @description  改進巴哈姆特的勇者福利社，動態載入全部商品、加入過濾隱藏功能、標示競標目前出價等。
// @author       DonkeyBear
// @match        https://fuli.gamer.com.tw/shop.php*
// @icon         https://fuli.gamer.com.tw/favicon.ico
// @grant        none
// ==/UserScript==

const $ = jQuery;
const isDarkMode = $(document.documentElement).data('theme') === 'dark';

const stylesheet = /* css */`
  #BH-wrapper {
    padding-top: 0;
  }

  .items-card {
    ${isDarkMode ? '' : 'z-index: -1;'}
  }

  #tabs-btn-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .tabs-btn-box {
    margin-top: 0;
  }

  .fuli-enhance-btn-box {
    overflow: visible;
  }

  .btn-distance.fuli-enhance {
    width: auto;
  }

  .btn-distance.fuli-enhance > [type=checkbox] {
    margin-right: .35rem;
  }

  .filter-by-title,
  .filter-by-type,
  .filter-by-state,
  #BH-pagebtn {
    display: none;
  }

  .digital.unaffordable {
    color: #DF4747;
  }

  .fuli-enhance.btn-search {
    padding: 0 .65rem;
  }

  .fuli-enhance.btn-filter {
    cursor: pointer;
    padding-left: 1.5rem;
    padding-right: 1.2rem;
    position: relative;
    border-right: 1px solid;
    ${isDarkMode ? 'border-color: #444444;' : ''};
  }

  .fuli-enhance.btn-filter:hover {
    ${isDarkMode ? '' : 'opacity: 1;'}
  }

  .search-bar {
    display: flex;
    align-items: center;
    border: 1px solid;
    border-radius: 4px;
    background-color: white;
    padding: .2rem .3rem;
  }

  .search-bar > [type=text] {
    width: 9rem;
    border: 0;
  }

  .search-bar > [type=text]:focus-visible {
    outline: 0;
  }

  .icon {
    width: 1rem;
    height: 1rem;
  }

  .icon-search {
    border-left: 1px solid;
    padding-left: .35rem;
    margin-left: .2rem;
  }

  .icon-close {
    transform: translate(2px, 2px);
    cursor: pointer;
  }

  .icon-filter {
    margin-left: .3rem;
  }

  .btn-filter:hover > #filter-popup {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    width: max-content;
  }

  #filter-popup {
    padding: .5rem;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 100%;
    z-index: 1;
    display: none;
    cursor: default;
    overflow: visible;
    background-color: ${isDarkMode ? '#272728' : '#FBFBFB'};
    ${isDarkMode ? 'color: #C7C6CB;' : ''}
  }

  #filter-popup::before {
    content: '';
    width: 0;
    height: 0;
    border: .4rem solid transparent;
    border-bottom: .35rem solid currentColor !important;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: 100%;
  }

  #filter-popup label {
    cursor: pointer;
  }

  #exchange-item-counter,
  #bid-item-counter,
  #lottery-item-counter {
    color: #11AAC1;
  }

  #exchange-item-counter,
  #bid-item-counter {
    margin-right: .75rem;
  }

  .digital.current-bid {
    margin-left: 8px;
  }
`;
$('<style>').text(stylesheet).appendTo('head');

// 依照 URL Param 判斷是否執行後續程式
const newUrl = new URL(window.location);
const getParam = (param) => newUrl.searchParams.get(param);
const isOnHistoryPage = getParam('history') !== null && getParam('history') !== '0';
const isOnFirstPage = getParam('page') === null || getParam('page') === '1';
if (isOnHistoryPage) { return }
if (!isOnFirstPage) { window.location.replace('https://fuli.gamer.com.tw/shop.php') }

// 持有的巴幣存款
const DEPOSIT = +$('.brave-assets').text().replaceAll(/\D/g, '');

// .items-card .type-tag 的內文
const TYPE_TAG = {
  exchange: '直購',
  bid: '競標',
  lottery: '抽抽樂'
};

const itemCounter = new Proxy({
  exchange: 0,
  bid: 0,
  lottery: 0
}, {
  set(target, prop, value) {
    target[prop] = +value;
    $(`#${prop}-item-counter`).text(target[prop]);
    return true;
  }
})

class ItemCard {
  /** @param {HTMLElement|jQuery|string} itemCard */
  constructor (itemCard) {
    this.itemCard = itemCard;
    this.$itemCard = $(itemCard);
    this.type = $(itemCard).find('.type-tag').text().trim();
  }

  fetchCurrentBid () {
    if (this.type !== TYPE_TAG.bid) { return this } // 若非競標品則結束函式
    const $priceElement = this.$itemCard.find('.price');
    $priceElement.text('正在讀取目前出價');
    fetch(this.$itemCard.attr('href'), { method: 'GET' })
      .then(res => res.text())
      .then(data => {
        const parser = new DOMParser();
        const virtualDoc = parser.parseFromString(data, 'text/html');


        let currentBid;
        $(virtualDoc).find('.pbox-content').each((idnex, item) => {
          if (!$(item).text().includes('目前出價')) { return }
          if (!Number.isNaN(+currentBid)) { return }
          currentBid = $(item).find('.pbox-content-r').text().match(/[\d|,]+/)[0];
        });
        const newTextHTML = /* html */`目前出價<p class="digital current-bid">${currentBid}</p>巴幣`;
        $priceElement.html(newTextHTML);
        this.colorPriceTag();
      })
      .catch((error) => {
        $priceElement.text('讀取出價失敗！');
        console.error(error);
      });
  }

  colorPriceTag () {
    const $priceNumberElement = this.$itemCard.find('.digital');
    const price = +$priceNumberElement.text().replaceAll(/\D/g, '');
    if (DEPOSIT < price) { $priceNumberElement.addClass('unaffordable') }
  }

  registerCard () {
    // 依照商品卡種類，增加計數和取得目前出價
    switch (this.type) {
      case TYPE_TAG.exchange:
        itemCounter.exchange++;
        break;
      case TYPE_TAG.bid:
        itemCounter.bid++;
        break;
      case TYPE_TAG.lottery:
        itemCounter.lottery++;
        break;
    }
  }
}

class ItemCardList {
  /** @param {HTMLElement|jQuery|string} [itemCardList=$('.item-list-box a.items-card')] */
  constructor (itemCardList = $('.item-list-box a.items-card')) {
    this.$itemCardList = $(itemCardList);
  }

  filterByTitle (filterTitle) {
    this.$itemCardList.each((i, itemCard) => {
      const title = $(itemCard).find('.items-title').text();
      const filterClassName = 'filter-by-title';
      title.includes(filterTitle) ? $(itemCard).removeClass(filterClassName) : $(itemCard).addClass(filterClassName);
    });
  }

  filterByType (filterType) {
    this.$itemCardList.each((i, itemCard) => {
      const type = new ItemCard(itemCard).type;
      if (!type.includes(filterType)) { return }
      const filterClassName = 'filter-by-type';
      $(itemCard).toggleClass(filterClassName);
    });
  }
}

// 放置商品類型計數區塊
$('#forum-lastBoard').after(/* html */`
  <div class="m-hidden">
    <h5>現有商品數量</h5>
    <div class="BH-rbox flex-center">
      <span>直購：</span>
      <span id="exchange-item-counter">0</span>
      <span>競標：</span>
      <span id="bid-item-counter">0</span>
      <span>抽抽樂：</span>
      <span id="lottery-item-counter">0</span>
    </div>
  </div>
`);

// 放置功能按鈕
const $firstTabsBtn = $('.tabs-btn-box');
$firstTabsBtn.wrap(/* html */`<div id="tabs-btn-group"></div>`);
const $tabsBtnGroup = $('#tabs-btn-group');
const $newTabsBtn = $('<div>', { class: 'tabs-btn-box fuli-enhance-btn-box' });
$newTabsBtn.html(/* html */`
  <a class="flex-center btn-distance fuli-enhance btn-filter">
    <span>篩選器</span>
    <svg class="icon icon-filter" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
      <path d="M18.85 1.1A1.99 1.99 0 0 0 17.063 0H2.937a2 2 0 0 0-1.566 3.242L6.99 9.868 7 14a1 1 0 0 0 .4.8l4 3A1 1 0 0 0 13 17l.01-7.134 5.66-6.676a1.99 1.99 0 0 0 .18-2.09Z"/>
    </svg>
    <div id="filter-popup" class="tabs-btn-box">
      <div class="flex-center btn-distance fuli-enhance">
        <input id="hide-exchange-items" type="checkbox" data-keyword="${TYPE_TAG.exchange}">
        <label for="hide-exchange-items">隱藏直購</label>
      </div>
      <div class="flex-center btn-distance fuli-enhance">
        <input id="hide-bid-items" type="checkbox" data-keyword="${TYPE_TAG.bid}">
        <label for="hide-bid-items">隱藏競標</label>
      </div>
      <div class="flex-center btn-distance fuli-enhance">
        <input id="hide-lottery-items" type="checkbox" data-keyword="${TYPE_TAG.lottery}">
        <label for="hide-lottery-items">隱藏抽抽樂</label>
      </div>
    </div>
  </a>
  <a class="flex-center btn-distance fuli-enhance btn-search">
    <div class="search-bar">
      <input type="text">
      <svg class="icon icon-close" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
      </svg>
      <svg class="icon icon-search" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"></path>
      </svg>
    </div>
  </a>
`);
$newTabsBtn.on('change', '[type=checkbox]', function() {
  const typeTag = $(this).data('keyword');
  const itemCardList = new ItemCardList();
  itemCardList.filterByType(typeTag);
});
const iconClose = $newTabsBtn.find('.icon-close');
iconClose.on('click', () => {
  searchBar.value = '';
  const itemCardList = new ItemCardList();
  itemCardList.filterByTitle('');
});
const searchBar = $newTabsBtn.find('.search-bar > [type=text]');
searchBar.on('input', function() {
  const searchText = $(this).val();
  const itemCardList = new ItemCardList();
  itemCardList.filterByTitle(searchText);
});
$tabsBtnGroup.append($newTabsBtn);

$('a.items-card').each((i, card) => {
  // 依照商品卡種類，增加計數和取得目前出價
  const itemCard = new ItemCard($(card));
  itemCard.registerCard();
  if (itemCard.type === TYPE_TAG.bid) { itemCard.fetchCurrentBid() }
});

// 動態載入全部商品
const $itemListBox = $('.item-list-box');
const maxPage = $('.BH-pagebtnA a:last-child').text();
if (maxPage === '1') { return } // 若僅一頁則不需讀取
const observer = new MutationObserver((records) => {
  // 建立觀測器，觀測新加入的商品卡
  records.forEach((record) => {
    record.addedNodes.forEach((newNode) => {
      if (!$(newNode).hasClass('items-card')) { return }
      // 依照商品卡種類，增加計數和取得目前出價
      const itemCard = new ItemCard($(newNode));
      itemCard.registerCard();
      if (itemCard.type === TYPE_TAG.bid) { itemCard.fetchCurrentBid() }
    })
  })
});
observer.observe(document.querySelector('.item-list-box'), { childList: true });

for (let page = 2; page <= maxPage; page++) {
  fetch(`https://fuli.gamer.com.tw/shop.php?page=${page}`, { method: 'GET' })
    .then(res => res.text())
    .then(data => {
      const parser = new DOMParser();
      const virtualDoc = parser.parseFromString(data, 'text/html');

      const $items = $(virtualDoc).find('.item-list-box a.items-card');
      $items.each((i, item) => { $itemListBox.append(item) });
    });
}