Webcamdarts Equalizer User Search

Long overdue search functionality for the Equalizer-Rank-List.

当前为 2022-08-21 提交的版本,查看 最新版本

// ==UserScript==
// @name         Webcamdarts Equalizer User Search
// @version      0.2
// @license      MIT
// @description  Long overdue search functionality for the Equalizer-Rank-List.
// @author       AlexisDot
// @match        https://www.webcamdarts.com/wda-games/equalizer-(ranked)
// @namespace    https://greasyfork.org/en/users/913506-alexisdot

// ==/UserScript==
/*jshint esversion: 6 */

/* --------Add search to EQ Page --------- */
(function () {
  'use strict';

  let curDate = new Date();
  let lastMonth = curDate.getMonth();
  let curMonth = lastMonth + 1;
  let curYear = curDate.getFullYear();
  const rankings = {};

  function fetchCurMonth(errorCorrect = 60) {
    fetch(
      `https://www.webcamdarts.com/EqualizerRanking_Read?month=${curMonth}&year=${curYear}&take=1&skip=0&page=2&pageSize=1`
    )
      .then((response) => response.json())
      .then((data) => {
        fetch(
          `https://www.webcamdarts.com/EqualizerRanking_Read?month=${curMonth}&year=${curYear}&take=${
            data.Total - errorCorrect
          }&skip=0&page=0&pageSize=${data.Total - errorCorrect}`
        )
          .then((response2) => {
            if (response2.ok) {
              return response2.json();
            }

            throw new Error('Something went wrong.');
          })
          .then((data2) => (rankings.curMonth = data2.Data))
          .catch((error) => {
            errorCorrect += 10;
            console.log(`Error correction is set to: ${errorCorrect}`);
            setTimeout(fetchCurMonth(errorCorrect), 200);
          });
      });
  }

  function fetchLastMonth(errorCorrect = 60) {
    fetch(
      `https://www.webcamdarts.com/EqualizerRanking_Read?month=${lastMonth}&year=${curYear}&take=1&skip=0&page=0&pageSize=1`
    )
      .then((response) => response.json())
      .then((data) => {
        let errorCorrect = 60;
        // while (typeof rankings.lastMonth === `undefined`) {
        fetch(
          `https://www.webcamdarts.com/EqualizerRanking_Read?month=${lastMonth}&year=${curYear}&take=${
            data.Total - errorCorrect
          }&skip=0&page=0&pageSize=${data.Total - errorCorrect}`
        )
          .then((response2) => {
            if (response2.ok) {
              return response2.json();
            }

            throw new Error('Something went wrong.');
          })
          .then((data2) => (rankings.lastMonth = data2.Data))
          .catch((error) => {
            errorCorrect += 10;
            console.error('Error:', error);
            console.log(`Error correction is set to: ${errorCorrect}`);
          });
        // if (rankings.lastMonth) break;
        // }
      });
  }

  fetchCurMonth();
  fetchLastMonth();

  const html = /*html*/ `
<div style="height: 250px; padding: 15px; margin-top: 20px" class="liteAccordion rounded dark">
  <h2><strong>Search User</strong></h2>
  <label for="user-search">NickName:</label
  ><input
    type="text"
    id="user-search"
    placeholder="Enter NickName here"
    style="padding: 5px;
    border-radius: 5px;
    width: calc(100% - 83px);
    margin-right: 5px; display: inline-block"
  />
  <button type="button" style="padding: 5px; border-radius: 5px; border: 1px solid; width: 49px; display: inline-block;" id="search-trigger">Search</button>
  <br />
  <br />
  <div class="k-grid">
    <table cellspacing="0" id="search-results">
      <thead>
        <tr>
          <th class="k-header">Month</th>
          <th class="k-header">Nickname</th>
          <th class="k-header">Rank</th>
          <th class="k-header">Battle Points</th>
          <th class="k-header">Avg Leg Value</th>
          <th class="k-header">Average</th>
          <th class="k-header">Best Leg</th>
          <th class="k-header">High Out</th>
          <th class="k-header">180's</th>
          <th class="k-header"># Pld</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</div>

`;

  const element = document.createRange().createContextualFragment(html);
  document.querySelector('.load').parentElement.append(element);
  document.querySelector('.load').classList.remove('load');

  const searchField = document.querySelector('#user-search');
  const searchButton = document.querySelector('#search-trigger');
  const searchResultsTableBody = document.querySelector(
    '#search-results tbody'
  );

  const months = Array.from({ length: 12 }, (e, i) => {
    return new Date(null, i + 1, null).toLocaleDateString('en', {
      month: 'long',
    });
  });

  searchButton.addEventListener('click', getRankings);
  searchField.addEventListener('keypress', function (e) {
    if (e.key === 'Enter') {
      getRankings();
    }
  });

  function getRankings() {
    let curMonthRank = rankings.curMonth.find(
      (user) => user.NickName == searchField.value
    );
    let lastMonthRank = rankings.lastMonth.find(
      (user) => user.NickName == searchField.value
    );

    searchResultsTableBody.innerHTML = '';

    if (curMonthRank) {
      let curMonthHtml = /*html*/ `
    <tr>
      <td>${months[curMonth - 1]}</td>
      <td>${curMonthRank.NickName}</td>
      <td>${curMonthRank.Rank}</td>
      <td>${curMonthRank.Score}</td>
      <td>${curMonthRank.AverageLegValue}</td>
      <td>${curMonthRank.Average.toFixed(2)}</td>
      <td>${curMonthRank.BestLeg}</td>
      <td>${curMonthRank.HighestOut}</td>
      <td>${curMonthRank.OneEighties}</td>
      <td>${curMonthRank.GamesPlayed}</td>
    </tr>
  `;
      searchResultsTableBody.innerHTML += curMonthHtml;
    } else {
      let curMonthHtml = /*html*/ `
    <tr>
      <td>${months[curMonth - 1]}</td>
      <td colspan="9" style="align: center">no results found</td>
    </tr>
  `;

      searchResultsTableBody.innerHTML += curMonthHtml;
    }

    if (lastMonthRank) {
      let lastMonthHtml = /*html*/ `
    <tr>
      <td>${months[lastMonth - 1]}</td>
      <td>${lastMonthRank.NickName}</td>
      <td>${lastMonthRank.Rank}</td>
      <td>${lastMonthRank.Score}</td>
      <td>${lastMonthRank.AverageLegValue}</td>
      <td>${lastMonthRank.Average.toFixed(2)}</td>
      <td>${lastMonthRank.BestLeg}</td>
      <td>${lastMonthRank.HighestOut}</td>
      <td>${lastMonthRank.OneEighties}</td>
      <td>${lastMonthRank.GamesPlayed}</td>
    </tr>
  `;
      searchResultsTableBody.innerHTML += lastMonthHtml;
    } else {
      let lastMonthHtml = /*html*/ `
    <tr>
      <td>${months[lastMonth - 1]}</td>
      <td colspan="9" style="align: center">no results found</td>
    </tr>
  `;

      searchResultsTableBody.innerHTML += lastMonthHtml;
    }
  }
})();