☰

91 Plus M

打造91譜的最佳體驗

بۇ قوليازمىنى قاچىلاش؟
ئاپتورنىڭ تەۋسىيەلىگەن قوليازمىسى

سىز بەلكىم 91 Plus نى ياقتۇرۇشىڭىز مۇمكىن.

بۇ قوليازمىنى قاچىلاش 
// ==UserScript==
// @name         91 Plus M
// @namespace    https://github.com/DonkeyBear
// @version      1.0.2
// @description  打造91譜的最佳體驗
// @author       DonkeyBear
// @match        *://www.91pu.com.tw/m/*
// @match        *://www.91pu.com.tw/song/*
// @icon         https://www.91pu.com.tw/icons/favicon-32x32.png
// @antifeature  tracking
// @grant        none
// ==/UserScript==

/* global $ */

/** 若樂譜頁面為電腦版，跳轉至行動版 */
function redirect () {
  const currentUrl = window.location.href;
  if ((/\/song\//).test(currentUrl)) {
    const sheetId = currentUrl.match(/(?<=\/)\d+(?=\.)/)[0];
    const newUrl = `https://www.91pu.com.tw/m/tone.shtml?id=${sheetId}`;
    window.location.replace(newUrl);
  }
}

/** 引入 Google Analytics */
function injectGtag () {
  const newScript = document.createElement('script');
  newScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-JF4S3HZY31';
  newScript.async = true;
  document.head.appendChild(newScript);
  newScript.onload = () => {
    // 此區塊由 Google Analytics 生成
    window.dataLayer = window.dataLayer || [];
    function gtag () { window.dataLayer.push(arguments) }
    gtag('js', new Date());
    gtag('config', 'G-JF4S3HZY31');
  };
}

/** 注入頁面樣式 */
function injectStyle () {
  const stylesheet = /* css */`
    html {
      background: #fafafa url(/templets/pu/images/tone-bg.gif); 
    }

    header {
      background-color: rgba(25, 20, 90, 0.5);
      backdrop-filter: blur(5px) saturate(80%);
      -webkit-backdrop-filter: blur(5px) saturate(80%);
      display: flex;
      justify-content: center;
      font-family: system-ui;
    }

    header > .set {
      width: 768px;
    }

    .tfunc2 {
      margin: 10px;
    }

    .setint {
      border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .setint,
    .plays .capo {
      display: flex;
      justify-content: space-between;
    }

    #mtitle {
      font-family: system-ui;
    }

    .setint {
      border-top: 0;
      padding: 10px;
    }

    .setint > .hr {
      margin-right: 15px;
      padding: 0 15px;
    }

    .capo-section {
      flex-grow: 1;
      margin-right: 0 !important;
      display: flex !important;
      justify-content: space-between !important;
    }

    .capo-button.decrease {
      padding-right: 20px;
    }

    .capo-button.increase {
      padding-left: 20px;
    }

    /* 需要倒數才能關閉的蓋版廣告 */
    #viptoneWindow.window,
    /* 在頁面最底部的廣告 */
    #bottomad,
    /* 最上方提醒升級VIP的廣告 */
    .update_vip_bar,
    /* 譜上的LOGO和浮水印 */
    .wmask,
    /* 彈出式頁尾 */
    footer,
    /* 自動滾動頁面捲軸 */
    .autoscroll,
    /* 頁首的返回列 */
    .backplace,
    /* 頁首的多餘列 */
    .set .keys,
    .set .plays,
    .set .clear,
    /* 功能列上多餘的按鈕 */
    .setint .hr:nth-child(4),
    .setint .hr:nth-child(5),
    .setint .hr:nth-child(6),
    /* 其餘的Google廣告 */
    .adsbygoogle {
      display: none !important;
    }
  `;
  const style = document.createElement('style');
  style.innerText = stylesheet;
  document.head.appendChild(style);
}

/**
 * @typedef {object} Params
 * @prop {number} transpose
 * @prop {boolean} darkMode
 */
/**
 * 從 URL 取得參數
 * @returns {Params}
 */
function getQueryParams () {
  const url = new URL(window.location.href);
  const params = {
    transpose: +url.searchParams.get('transpose'),
    darkMode: !!url.searchParams.get('darkmode')
  };
  return params;
}

/** 用於操作和弦字串 */
class Chord {
  static sharps = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
  static flats = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B'];

  /** @param {string} chordString  */
  constructor (chordString) {
    this.chordString = chordString;
  }

  /** @param {number} delta */
  transpose (delta) {
    this.chordString = this.chordString.replaceAll(/[A-G][#b]?/g, (note) => {
      const isSharp = Chord.sharps.includes(note);
      const scale = isSharp ? Chord.sharps : Chord.flats;
      const noteIndex = scale.indexOf(note);
      const transposedIndex = (noteIndex + delta + 12) % 12;
      const transposedNote = scale[transposedIndex];
      return transposedNote;
    });
    return this;
  }

  switchModifier () {
    this.chordString = this.chordString.replaceAll(/[A-G][#b]/g, (note) => {
      const scale = note.includes('#') ? Chord.sharps : Chord.flats;
      const newScale = note.includes('#') ? Chord.flats : Chord.sharps;
      const noteIndex = scale.indexOf(note);
      return newScale[noteIndex];
    });
    return this;
  }

  useSharpModifier () {
    this.chordString = this.chordString.replaceAll(/[A-G]b/g, (note) => {
      const noteIndex = Chord.flats.indexOf(note);
      return Chord.sharps[noteIndex];
    });
    return this;
  }

  useFlatModifier () {
    this.chordString = this.chordString.replaceAll(/[A-G]#/g, (note) => {
      const noteIndex = Chord.sharps.indexOf(note);
      return Chord.flats[noteIndex];
    });
    return this;
  }

  toString () {
    return this.chordString;
  }

  toFormattedString () {
    return this.chordString.replaceAll(/[#b]/g, /* html */`<sup>$&</sup>`); // eslint-disable-line quotes
  }
}

/** 用於修改樂譜 */
class ChordSheetElement {
  /** @param {HTMLElement} chordSheetElement  */
  constructor (chordSheetElement) {
    this.chordSheetElement = chordSheetElement;
  }

  formatUnderlines () {
    const underlineEl = this.chordSheetElement.querySelectorAll('u');
    const doubleUnderlineEl = this.chordSheetElement.querySelectorAll('abbr');
    underlineEl.forEach((el) => { el.innerText = `{_${el.innerText}_}` });
    doubleUnderlineEl.forEach((el) => { el.innerText = `{=${el.innerText}=}` });
    return this;
  }

  unformatUnderlines () {
    const underlineEl = this.chordSheetElement.querySelectorAll('u');
    const doubleUnderlineEl = this.chordSheetElement.querySelectorAll('abbr');
    const unformat = (nodeList) => {
      nodeList.forEach((el) => {
        el.innerHTML = el.innerText
          .replaceAll(/{_|{=|=}|_}/g, '')
          .replaceAll(/[a-zA-Z0-9#/]+/g, /* html */`<span class="tf">$&</span>`); // eslint-disable-line quotes
      });
    };
    unformat(underlineEl);
    unformat(doubleUnderlineEl);
    return this;
  }
}

/** 用於取得樂譜相關資訊 */
class ChordSheetDocument {
  constructor () {
    this.el = {
      mtitle: document.getElementById('mtitle'),
      tkinfo: document.querySelector('.tkinfo'),
      capoSelect: document.querySelector('.capo .select'),
      tinfo: document.querySelector('.tinfo'),
      tone_z: document.getElementById('tone_z')
    };
  }

  getId () {
    const urlParams = new URLSearchParams(window.location.search);
    return Number(urlParams.get('id'));
  }

  getTitle () {
    return this.el.mtitle.innerText.trim();
  }

  getKey () {
    const match = this.el.tkinfo?.innerText.match(/(?<=原調：)\w*/);
    return match ? match[0].trim() : '';
  }

  getPlay () {
    const match = this.el.capoSelect?.innerText.split(/\s*\/\s*/);
    return match ? match[1].trim() : '';
  }

  getCapo () {
    const match = this.el.capoSelect?.innerText.split(/\s*\/\s*/);
    return match ? Number(match[0]) : 0;
  }

  getSinger () {
    const match = this.el.tinfo?.innerText.match(/(?<=演唱：).*(?=\n|$)/);
    return match ? match[0].trim() : '';
  }

  getComposer () {
    const match = this.el.tinfo?.innerText.match(/(?<=曲：).*?(?=詞：|$)/);
    return match ? match[0].trim() : '';
  }

  getLyricist () {
    const match = this.el.tinfo?.innerText.match(/(?<=詞：).*?(?=曲：|$)/);
    return match ? match[0].trim() : '';
  }

  getBpm () {
    const match = this.el.tkinfo?.innerText.match(/\d+/);
    return match ? Number(match[0]) : 0;
  }

  getSheetText () {
    const formattedChordSheet = this.el.tone_z.innerText
      .replaceAll(/\s+?\n/g, '\n')
      .replaceAll('\n\n', '\n')
      .trim()
      .replaceAll(/\s+/g, (match) => { return `{%${match.length}%}` });
    return formattedChordSheet;
  }
}

/**
 * 將 Header 和譜上的和弦移調，並實質修改於 DOM
 * @param {number} delta
 */
function transposeSheet (delta) {
  // 修改 Header 上的 Capo
  const $spanCapo = $('.capo-button > .text-capo');
  const newSpanCapoText = (+$spanCapo.text() + delta) % 12;
  $spanCapo.text(newSpanCapoText);

  // 修改 Header 上的 Key
  const $spanKey = $('.capo-button > .text-key');
  const keyName = new Chord($spanKey.text());
  const newSpanCapoHTML = keyName.transpose(-delta).toFormattedString();
  $spanKey.html(newSpanCapoHTML);

  // 修改譜上的和弦
  $('#tone_z .tf').each(function () {
    const chord = new Chord($(this).text());
    const newChordHTML = chord.transpose(-delta).toFormattedString();
    $(this).html(newChordHTML);
  });
};

/** 初始化並綁定大部分事件 */
function initEventHandlers () {
  /** @type {number} */
  let originalCapo;

  // 頁面動態讀取完成時觸發
  $('body').on('mutation.done', () => {
    // 記錄原調
    const $textCapo = $('.capo-button > .text-capo');
    originalCapo = +$textCapo.text();

    // 依照 URL 參數進行移調
    if (getQueryParams().transpose) {
      transposeSheet(getQueryParams().transpose);
    }
  });

  // 點擊移調按鈕時進行移調
  $('body').on('click', '.capo-section > .capo-button.decrease', () => { transposeSheet(-1) });
  $('body').on('click', '.capo-section > .capo-button.increase', () => { transposeSheet(1) });
  $('body').on('click', '.capo-section > .capo-button.info', () => {
    const $textCapo = $('.capo-button > .text-capo');
    const currentCapo = +$textCapo.text();
    transposeSheet(originalCapo - currentCapo);
  });
}

/**
 * 將網頁標題替換為自訂格式
 * @returns {boolean} 是否完成
 */
function changeTitle () {
  const $mtitle = $('#mtitle');
  const newTitle = $mtitle.text().trim();
  if (newTitle) {
    document.title = `${newTitle} | 91+ M`;
    return true;
  } else {
    return false;
  }
}

/**
 * 修改 Header：替換移調按鈕、增加自訂按鈕等
 * @returns {boolean} 是否完成
 */
function modifyHeader () {
  const capoSelectText = $('.capo .select').eq(0).text().trim();
  if (!capoSelectText) { return false }

  const stringCapo = capoSelectText.split(/\s*\/\s*/)[0]; // CAPO
  const stringKey = capoSelectText.split(/\s*\/\s*/)[1]; // 調

  // 新增功能鈕
  const newFunctionDiv = document.createElement('div');
  newFunctionDiv.classList.add('hr', 'capo-section');
  newFunctionDiv.innerHTML = /* html */`
    <button class="scf capo-button decrease">◀</button>
    <button class="scf capo-button info">
      CAPO：<span class="text-capo">${stringCapo}</span>
      （<span class="text-key">${
        stringKey.replaceAll(/[#b]/g, /* html */`<sup>$&</sup>`) // eslint-disable-line quotes
      }</span>）
    </button>
    <button class="scf capo-button increase">▶</button>
  `;
  document.querySelector('.setint').appendChild(newFunctionDiv);

  return true;
}

/**
 * 發送請求至 API，雲端備份樂譜
 * @returns {boolean} 是否完成
 */
function archiveChordSheet () {
  const sheet = document.getElementById('tone_z');
  if (!sheet?.innerText.trim()) { return false }

  const chordSheetDocument = new ChordSheetDocument();
  try {
    const chordSheetElement = new ChordSheetElement(sheet);
    chordSheetElement.formatUnderlines();

    const formBody = {
      id: chordSheetDocument.getId(),
      title: chordSheetDocument.getTitle(),
      key: chordSheetDocument.getKey(),
      play: chordSheetDocument.getPlay(),
      capo: chordSheetDocument.getCapo(),
      singer: chordSheetDocument.getSinger(),
      composer: chordSheetDocument.getComposer(),
      lyricist: chordSheetDocument.getLyricist(),
      bpm: chordSheetDocument.getBpm(),
      sheet_text: chordSheetDocument.getSheetText()
    };
    chordSheetElement.unformatUnderlines();

    fetch('https://91-plus-plus-api.fly.dev/archive', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formBody)
    })
      .then(response => { console.log('雲端樂譜備份成功：', response) })
      .catch(error => { console.error('雲端樂譜備份失敗：', error) });
  } catch {
    console.warn('樂譜解析失敗，無法備份');
    fetch(`https://91-plus-plus-api.fly.dev/report?id=${chordSheetDocument.getId()}`);
  }

  return true;
}

/**
 * @typedef {object} ObserverCheckList
 * @prop {boolean} changeTitle 是否已替換頁面標題
 * @prop {boolean} modifyHeader 是否已替換 Header
 * @prop {boolean} archiveChordSheet 是否已將樂譜進行雲端備份
 */
/**
 * 透過 MutationObserver 觸發的處理函式
 * @param {ObserverCheckList} checkList
 */
function observerHandler (checkList) {
  if (!checkList.changeTitle) {
    checkList.changeTitle = changeTitle();
  }
  if (!checkList.modifyHeader) {
    checkList.modifyHeader = modifyHeader();
  }
  if (!checkList.archiveChordSheet) {
    checkList.archiveChordSheet = archiveChordSheet();
  }

  // 如果已全數完成，則觸發 body 上的 mutation.done 事件
  let isAllClear = true;
  for (const checked of Object.values(checkList)) {
    if (!checked) { isAllClear = false }
  }
  if (isAllClear) { $('body').trigger('mutation.done') }
}

/** 初始化 MutationObserver */
function initMutationObserver () {
  /** @type {ObserverCheckList} */
  const observerCheckList = {
    changeTitle: false,
    modifyHeader: false,
    archiveChordSheet: false
  };

  const observer = new MutationObserver(() => {
    observerHandler(observerCheckList);
  });
  observer.observe(document.body, { childList: true, subtree: true });
  $('body').on('mutation.done', () => { observer.disconnect() });
}

/** 於每天第一次使用時跳出升級建議 */
function askToUpdate () {
  const currentUrl = window.location.href;
  if ((/\/song\//).test(currentUrl)) { return }

  const storageKey = 'plus91-last-visit';
  const lastVisit = localStorage.getItem(storageKey);
  const formatDate = (date) => {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return `${year}-${month}-${day}`;
  };
  const currentDate = formatDate(new Date());
  if (currentDate !== lastVisit) {
    localStorage.setItem(storageKey, currentDate);
    const ans = confirm('91 Plus M 已經停止更新和維護了，\n建議升級至全新版本的 91 Plus！\n\n（本訊息僅會在每天第一次使用時跳出）');
    if (ans) {
      window.location.replace('https://github.com/DonkeyBear/91Plus/wiki/91-Plus-%E8%88%87-91-Plus-M');
    }
  }
}

/** 主程式進入點 */
function main () {
  redirect();
  injectGtag();
  injectStyle();
  initEventHandlers();
  initMutationObserver();
  askToUpdate();
}

main();