AWBW Music Player

Automaticallys plays the current turn's CO's theme
目前為 2023-02-11 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name         AWBW Music Player
// @namespace    https://awbw.amarriner.com/
// @version      1.14
// @description  Automaticallys plays the current turn's CO's theme
// @author       twiggy_
// @match        https://awbw.amarriner.com/*?games_id=*
// @match        https://awbw.amarriner.com/*?replays_id=*
// @icon         https://awbw.amarriner.com/favicon.ico
// @license MIT
// ==/UserScript==

// tool variables
var replayMenu = document.querySelector('#game-map-menu').parentNode;

var neutralImgLink = 'https://i.imgur.com/DwbUCxA.png';
var playingImgLink = 'https://i.imgur.com/QlXqoiX.gif';

var myName = document.querySelector('#profile-menu').firstElementChild.innerText;

var clicked = false;

var isPlaying = false;

var volume = 0.5;
var val;

var currentTheme = new Audio();
currentTheme.volume = volume;

var themeSource = "";
var loopingTheme;

var playerCOObj = {};

var playerNames = [];

var blackHoleCOs = ["Adder", "Flak", "Hawke", "Jugger", "Kindle", "Koal", "Lash", "Sturm", "Von Bolt"];

var SCOPTheme = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/ydzwtvtssl/25.%20Super%20CO%20Power%21.mp3";
var COPTheme = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/zebjnzlcuo/23.%20Power%21.mp3";
var SCOPThemeBH = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/rluopmwffh/26.%20Black%20Hole%20Super%20CO%20Power%21.mp3";
var COPThemeBH = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/sdgztfjzem/24.%20Black%20Hole%20Power%21.mp3";
var victoryTheme = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/dafabalpbt/29.%20Victory%20Party%21.mp3";
var defeatTheme = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/dkprssaznj/31.%20And%20the%20World.mp3";

var eventHeader = document.querySelector('.event-username');

// build and append button to game menu
var autoReplayDiv = document.createElement('div');
autoReplayDiv.id = 'auto-replay-parent';
autoReplayDiv.classList.add('game-tools-btn');
autoReplayDiv.classList.add('cls-context-menu-root');
autoReplayDiv.style.width = '34px';
autoReplayDiv.style.height = '30px';
autoReplayDiv.style.borderLeft = 'none';

var autoReplayDivHoverSpan = document.createElement('span');
autoReplayDivHoverSpan.id = 'adji-hover-span';
autoReplayDivHoverSpan.classList.add('game-tools-btn-text');
autoReplayDivHoverSpan.classList.add('small_text');
autoReplayDivHoverSpan.classList.add('cls-context-menu-root');
autoReplayDivHoverSpan.innerText = "Play Tunes";

var autoReplayDivBackground = document.createElement('div');
autoReplayDivBackground.id = 'auto-replay-background';
autoReplayDivBackground.classList.add('game-tools-bg');
autoReplayDivBackground.classList.add('cls-context-menu-root');

var autoReplayDivBackgroundSpan = document.createElement('span');
autoReplayDivBackgroundSpan.id = 'auto-replay-background-span';
autoReplayDivBackgroundSpan.classList.add('norm2');
autoReplayDivBackgroundSpan.classList.add('cls-context-menu-root');

var autoReplayDivBackgroundLink = document.createElement('a');
autoReplayDivBackgroundLink.id = 'auto-replay-background-link';
autoReplayDivBackgroundLink.classList.add('norm2');
autoReplayDivBackgroundLink.classList.add('cls-context-menu-root');

var autoReplayDivBackgroundImg = document.createElement('img');
autoReplayDivBackgroundImg.id = 'auto-replay-background-link';
autoReplayDivBackgroundImg.classList.add('cls-context-menu-root');
autoReplayDivBackgroundImg.src = neutralImgLink;
autoReplayDivBackgroundImg.style.verticalAlign = "middle";
autoReplayDivBackgroundImg.style.width = '17px';
autoReplayDivBackgroundImg.style.height = '17px';

autoReplayDiv.appendChild(autoReplayDivBackground);
autoReplayDiv.appendChild(autoReplayDivHoverSpan);
autoReplayDivBackground.appendChild(autoReplayDivBackgroundSpan);
autoReplayDivBackgroundSpan.appendChild(autoReplayDivBackgroundLink);
autoReplayDivBackgroundLink.appendChild(autoReplayDivBackgroundImg);
replayMenu.appendChild(autoReplayDiv);

autoReplayDivBackgroundLink.onclick = autoReplay;

// Button click function
function autoReplay() 
{
    if (clicked == false) 
    {
        isPlaying = true;
        
        playTunes();
        
        autoReplayDivHoverSpan.innerText = "Stop Tunes";
        autoReplayDivBackground.style.backgroundColor = "#e1e1e1";
        clicked = true;
    }
    else 
    {
        isPlaying = false;
        
        stopTunes();
        
        autoReplayDivBackgroundImg.src = neutralImgLink;
        autoReplayDivHoverSpan.innerText = "Play Tunes";
        autoReplayDivBackground.style.backgroundColor = "#ffffff";
        clicked = false;
    }
}

// Determine who the current CO is and generate their theme data
function determineCurrentCO() 
{
    var COName = "";
    
    Object.keys(playersInfo).forEach(playerID => 
    {
      if (playerID == currentTurn) 
      {
          COName = playersInfo[playerID]["co_name"];
      }
      
      playerCOObj[playerID] = playersInfo[playerID]["co_name"];
      playerNames.push(playersInfo[playerID]["users_username"]);
      
    });
    
    switch(COName) 
    {
        case "Andy":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/hyfgbzullk/40.%20Andy%27s%20Theme.mp3";
            break;
        case "Hachi":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/gzyyezcoeq/39.%20Hachi%27s%20Theme.mp3";
            break;
        case "Jake":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/tubklelkxk/36.%20Jake%27s%20Theme.mp3";
            break;
        case "Max":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/dcdnqcsfrx/41.%20Max%27s%20Theme.mp3";
            break;
        case "Nell":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/wqwephsgpg/38.%20Nell%27s%20Theme.mp3";
            break;
        case "Rachel":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/htvhmqtznk/37.%20Rachel%27s%20Theme.mp3";
            break;
        case "Sami":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/osklgsjkln/42.%20Sami%27s%20Theme.mp3";
            break;
        case "Colin":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/ckyqtnbjjr/45.%20Colin%27s%20Theme.mp3";
            break;
        case "Grit":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/ntjyukqakp/44.%20Grit%27s%20Theme.mp3";
            break;
        case "Olaf":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/yhbgeeeurn/43.%20Olaf%27s%20Theme.mp3";
            break;
        case "Sasha":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/tpmfnpfnov/46.%20Sasha%27s%20Theme.mp3";
            break;
        case "Drake":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/xwykabanbo/52.%20Drake%27s%20Theme.mp3";
            break;
        case "Eagle":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/kradskywrj/51.%20Eagle%27s%20Theme.mp3";
            break;
        case "Javier":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/muajdvqyso/54.%20Javier%27s%20Theme.mp3";
            break;
        case "Jess":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/dhrorfzfai/53.%20Jess%27s%20Theme.mp3";
            break;
        case "Grimm":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/sduyhijhos/50.%20Grimm%27s%20Theme.mp3";
            break;
        case "Kanbei":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/rgxczudzdj/47.%20Kanbei%27s%20Theme.mp3";
            break;
        case "Sensei":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/fsuzuehmya/49.%20Sensei%27s%20Theme.mp3";
            break;
        case "Sonja":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/ygeymjvyys/48.%20Sonja%27s%20Theme.mp3";
            break;
        case "Adder":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/plzgrqczug/57.%20Adder%27s%20Theme.mp3";
            break;
        case "Flak":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/qdcwpkzabh/55.%20Flak%27s%20Theme.mp3";
            break;
        case "Hawke":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/abjxdlbvxl/58.%20Hawke%27s%20Theme.mp3";
            break;
        case "Jugger":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/uykmjqnilu/59.%20Jugger%27s%20Theme.mp3";
            break;
        case "Kindle":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/anaqzwjqjw/61.%20Kindle%27s%20Theme.mp3";
            break;
        case "Koal":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/pqyrddrhpn/60.%20Koal%27s%20Theme.mp3";
            break;
        case "Lash":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/cdmuvlemto/56.%20Lash%27s%20Theme.mp3";
            break;
        case "Sturm":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-2-black-hole-rising/cawcgvmldg/37%20Sturm%27s%20Theme.mp3";
            break;
        case "Von Bolt":
            themeSource = "https://vgmsite.com/soundtracks/advance-wars-dual-strike/rmmjlsbpdg/62.%20Von%20Bolt%27s%20Theme.mp3";
            break;
    }
}

// Event listener for when the audio data is actually loaded
currentTheme.onloadedmetadata = function() 
{
    var themeDuration = currentTheme.duration;
    
    autoReplayDivBackgroundImg.src = playingImgLink;
    
    loopingTheme = setInterval(function() {
        currentTheme.play();
    }, themeDuration);
};

// Wrap the event screen to update the current theme
var native = showEventScreen;
showEventScreen = function()
{
    native.apply(showEventScreen, arguments);
    
    if (isPlaying == false) return;
    
    if (eventHeader.innerText.includes("Super") && 
        eventHeader.innerText.includes("Power") &&
        blackHoleCOs.includes(playerCOObj[currentTurn]) == false) 
    {
        stopTunes();
        playSCOPTheme();
    }
    else if (eventHeader.innerText.includes("Super") && 
            eventHeader.innerText.includes("Power") &&
            blackHoleCOs.includes(playerCOObj[currentTurn]) == true) 
    {
        stopTunes();
        playSCOPBHTheme();
    }
    else if (eventHeader.innerText.includes("Super") == false && 
            eventHeader.innerText.includes("Power") &&
            blackHoleCOs.includes(playerCOObj[currentTurn]) == false) 
    {
        stopTunes();
        playCOPTheme();
    }
    else if (eventHeader.innerText.includes("Super") == false && 
            eventHeader.innerText.includes("Power") &&
            blackHoleCOs.includes(playerCOObj[currentTurn]) == true) 
    {
        stopTunes();
        playCOPBHTheme();
    }
    else if (eventHeader.innerText.includes("Day") )
    {
        stopTunes();
        playTunes();
    }
    else if (eventHeader.innerText.includes(myName))
    {
        stopTunes();
        playDefeatTheme();
    }
    else if (eventHeader.innerText.includes(myName) == false)
    {
        stopTunes();
        playVictoryTheme();
    }
};

// Play/Stop functions
function playTunes() 
{
    determineCurrentCO();
    currentTheme.src = themeSource;
    console.log(currentTheme.volume);
}

function playVictoryTheme() 
{
    currentTheme.src = victoryTheme;
}

function playDefeatTheme()
{
    currentTheme.src = defeatTheme;
}

function playSCOPTheme() 
{
    currentTheme.src = SCOPTheme;
}

function playCOPTheme() 
{
    currentTheme.src = COPTheme;
}

function playSCOPBHTheme() 
{
    currentTheme.src = SCOPThemeBH;
}

function playCOPBHTheme()
{
    currentTheme.src = COPThemeBH;
}

function stopTunes() 
{
    clearInterval(loopingTheme);
    currentTheme.src = '';
}

// Custom context menu
var mainMenu = document.querySelector('#game-menu-controls');
var contextMenu = document.createElement('div');
contextMenu.id = 'div-context-menu';
contextMenu.classList.add('cls-context-menu');
mainMenu.appendChild(contextMenu);

const volumeSlider = document.createElement('input');
volumeSlider.id = "vol-slider";
volumeSlider.type = "range";
volumeSlider.max = "1";
volumeSlider.min = "0";
volumeSlider.step = "0.05";
volumeSlider.value = volume;
volumeSlider.style.marginTop = "3.5px";
contextMenu.appendChild(volumeSlider);

// Volume control
function changeVolume(val)
{
    volume = val;
    currentTheme.volume = volume;
    console.log("changing volume to: " + String(volume));
}

function modifyVolume()
{
    changeVolume(volumeSlider.value);
}

// I know this is stupid af but nothing else worked
// contextMenu.innerHTML = "<input id=\"vol-slider\" type=\"range\" value=\"0.5\" max=\"1\" min=\"0\" step=\"0.05\" oninput=\"changeVolume(this.value)\">";
document.querySelector('#vol-slider').oninput = modifyVolume;

function setVolume()
{
    var s = String(volume);
    contextMenu.innerHTML = "<input id=\"vol-slider\" type=\"range\" value=" + s + " max=\"1\" min=\"0\" step=\"0.05\" oninput=\"changeVolume(this.value)\">";
}

document.onclick = function(e) {
    if (e.target.id == "div-context-menu" ||
    e.target.id == "vol-slider") return;
    contextMenu.style.display = 'none';
}

document.oncontextmenu = function(e){
   // alert(e.target.id)
   var elmnt = e.target
   if (elmnt.className.startsWith ( "cls-context-menu")) {
      e.preventDefault();
      var eid = elmnt.id.replace(/link-/,"");
      contextMenu.style.left = '240px';
      contextMenu.style.top = '37px';
      contextMenu.style.display = 'block';
      var toRepl = "to=" + eid.toString();
      document.querySelector('#vol-slider').oninput = modifyVolume;
      setVolume();
      contextMenu.innerHTML = contextMenu.innerHTML.replace(/to=\d+/g,toRepl);
   }
}

// Custom styling for context menu
var styles = `
    // Context Menu
    .cls-context-menu-link {
        display:block;
        padding:20px;
        background:#ECECEC;
    }
    
    .cls-context-menu { 
        position:absolute; 
        display:none; 
        width: 175px;
        height: 30px;
        padding-top: 4px;
    }
    
    .cls-context-menu ul, #context-menu li {
        list-style:none;
        margin:0; padding:0;
        background:white;
    }
    
    .cls-context-menu { border: 1px solid #888888 !important;}
    .cls-context-menu li { border: 1px solid #888888; }
    .cls-context-menu li:last-child { border:none; }
    .cls-context-menu li a {
        display:block;
        padding:5px 10px; 
        text-decoration:none;
        color:blue;
    }
    .cls-context-menu li a:hover {
        background:blue;
        color:#FFF;
    }
    
    // Input Range
    :root {
      --shadow-len: -60px;
    }
    input[type="range"] { 
        margin: auto;
        -webkit-appearance: none;
        position: relative;
        overflow: hidden;
        height: 25px;
        cursor: pointer;
        border-radius: 0; /* iOS */
    }
    
    ::-webkit-slider-runnable-track {
        background: #ddd;
    }
    
    /*
     * 1. Set to 0 width and remove border for a slider without a thumb
     * 2. Shadow is negative the full width of the input and has a spread 
     *    of the width of the input.
     */
    ::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px; /* 1 */
        height: 25px;
        background: #fff;
        box-shadow: -200px 0 0 200px #0066CC; /* 2 */
        border: 2px solid #888888; /* 1 */
        clip-path: inset(0px 0px 0px var(--shadow-len));
    }
    
    ::-moz-range-track {
        height: 25px;
        background: #888888;
    }
    
    ::-moz-range-thumb {
        background: #fff;
        height: 25px;
        width: 20px;
        border: 3px solid #888888;
        border-radius: 0 !important;
        box-shadow: -200px 0 0 200px #0066CC;
        box-sizing: border-box;
        clip-path: inset(0px 0px 0px var(--shadow-len));
    }
    
    ::-ms-fill-lower { 
        background: #0066CC;
    }
    
    ::-ms-thumb { 
        background: #fff;
        border: 2px solid #999;
        height: 25px;
        width: 20px;
        box-sizing: border-box;
    }
    
    ::-ms-ticks-after { 
        display: none; 
    }
    
    ::-ms-ticks-before { 
        display: none; 
    }
    
    ::-ms-track { 
        background: #888888;
        color: transparent;
        height: 25px;
        border: none;
    }
    
    ::-ms-tooltip { 
        display: none;
    }
`

var styleSheet = document.createElement("style")
styleSheet.innerText = styles
document.head.appendChild(styleSheet);