☰

lidarts Rest Score Input

adding restscore functionalty to lidarts

当前为 2023-07-26 提交的版本，查看 最新版本。

// ==UserScript==
// @name         lidarts Rest Score Input
// @version      0.1
// @description  adding restscore functionalty to lidarts
// @author       AlexisDot
// @license      MIT
// @match        https://lidarts.org/game/*
// @namespace    https://gf.zukizuki.org/en/users/913506-alexisdot
// ==/UserScript==
/*jshint esversion: 6 */

(function () {
  'use strict';

  let scoreSelfElement = null;
  let scoreInputForm = document.querySelector('#score_input');
  let scoreInput = scoreInputForm.querySelector('#score_value');

  if (scoreInput) {
    document.head.insertAdjacentHTML(
      'beforeend',
      /*html*/ `
    <style>
      .p1_turn_name_card .card-body.select-highlight, .p2_turn_name_card .card-body.select-highlight{
          background: red;
          animation: mymove 3s infinite;
          cursor: pointer;
        }

        @keyframes mymove {
          from {background-color: inherit;}
          50% {background-color: rgb(227,172,17);}
          to {background-color: inherit;}
        }
    </style>`
    );

    document.querySelector('.container').insertAdjacentHTML(
      'afterbegin',
      /*html*/ `
    <div id="player-select-notice">
    <h2 class="text-light text-center">
    Please click on your name!
    </h2>
    <br>
    <h4 class="text-light text-center">
    Reload if you selected the wrong player
    </h4>
    <br>
    <h4 class="text-light text-center">
    How to use: Enter rest score, click rest, ..., enjoy.
    </h4>
    </div>`
    );

    document
      .querySelector('.p1_turn_name_card .card-body')
      .classList.add('select-highlight');
    document
      .querySelector('.p2_turn_name_card .card-body')
      .classList.add('select-highlight');

    document.querySelectorAll('.select-highlight').forEach((el) =>
      el.addEventListener('click', (e) => {
        scoreSelfElement = e.currentTarget.parentElement
          .closest('.card-body')
          .querySelector('[id$=_score]');

        document
          .querySelectorAll('.select-highlight')
          .forEach((el) => el.classList.remove('select-highlight'));

        document.querySelector('#player-select-notice').remove();
      })
    );

    let dummyDiv = document.createElement('div');
    dummyDiv.innerHTML = /*html*/ `
    <button type="button" class="mt-3 btn btn-lg btn-outline-info btn-block" id="rest-score-input">Rest</button>
  `;

    let restScoreInput = dummyDiv
      .querySelector('#rest-score-input')
      .cloneNode(true);

    scoreInputForm.insertAdjacentElement('afterend', restScoreInput);

    restScoreInput.addEventListener('click', (e) => {
      e.preventDefault();
      let restScore = scoreInput.value;
      let currentScore = parseInt(scoreSelfElement.innerText);
      let thrownScore = currentScore - restScore;

      scoreInput.value = thrownScore;
      scoreInput.focus();

      $(scoreInputForm).submit();
    });
  }
})();