☰

AWBW Power Banners

Fires up a banner whenever a player has COP/SCOP ready

// ==UserScript==
// @name         AWBW Power Banners
// @namespace    https://awbw.amarriner.com/
// @version      1.03
// @description  Fires up a banner whenever a player has COP/SCOP ready
// @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==

// Vars
let allPlayers = Object.keys(playersInfo);
let playerObjs = {};
let playerContainers = [];
let ahFire = null;
let ahPower = null;
let ahExplode = null;
let exitTimeout = null;
let redStarSrc = "terrain/aw2/redstar.gif";
let blueStarSrc = "terrain/aw2/bluestar.gif";
let powerQueue = [];
const SHOWTIME = 6000;

// HTML
let customEventScreenContainer = document.createElement('div');
customEventScreenContainer.classList.add('custom-event-screen-container');
customEventScreenContainer.addEventListener("click", exitEventScreen);

let customEventScreen = document.createElement('div');
customEventScreen.classList.add('custom-event-screen');

let customEventScreenContent = document.createElement('div');
customEventScreenContent.classList.add('custom-event-screen-content');

let customEventScreenProfile = document.createElement('img');
customEventScreenProfile.classList.add('custom-event-screen-profile');
customEventScreenProfile.src = null;

let customEventScreenProfileStar = document.createElement('img');
customEventScreenProfileStar.classList.add('custom-event-screen-profile-star');
customEventScreenProfileStar.src = redStarSrc;

let customEventScreenTextDiv = document.createElement('div');
customEventScreenTextDiv.classList.add('custom-event-screen-text-div');

let customEventScreenProfileHeader = document.createElement('span');
customEventScreenProfileHeader.classList.add('custom-event-screen-header');
customEventScreenProfileHeader.innerHTML = "SUPER POWER";

let customEventScreenProfileReady = document.createElement('span');
customEventScreenProfileReady.classList.add('custom-event-screen-ready');
customEventScreenProfileReady.innerHTML = "READY";

let powerLine1 = document.createElement('div');
powerLine1.id = 'powerLine1';

let powerLine2 = document.createElement('div');
powerLine2.id = 'powerLine2';

let powerLine3 = document.createElement('div');
powerLine3.id = 'powerLine3';

let powerLine4 = document.createElement('div');
powerLine4.id = 'powerLine4';

let powerLine5 = document.createElement('div');
powerLine4.id = 'powerLine5';

document.getElementById('gamemap-container').appendChild(customEventScreenContainer);
customEventScreenContainer.appendChild(customEventScreen);
customEventScreen.appendChild(customEventScreenContent);
customEventScreenContent.appendChild(customEventScreenProfile);
customEventScreenContent.appendChild(customEventScreenProfileStar)
customEventScreenContent.appendChild(customEventScreenTextDiv);
customEventScreenTextDiv.appendChild(customEventScreenProfileHeader);
customEventScreenTextDiv.appendChild(customEventScreenProfileReady);

customEventScreenContent.appendChild(powerLine1);
customEventScreenContent.appendChild(powerLine2);
customEventScreenContent.appendChild(powerLine3);
customEventScreenContent.appendChild(powerLine4);
customEventScreenContent.appendChild(powerLine5);

// Event screen handler functions
function queueEventProfile(id, type)
{
  queueItem = {};
  queueItem.id = id;
  queueItem.type = type;

  powerQueue.push(queueItem);
}

function buildEventProfile(id, type)
{
  customEventScreenProfile.src = playerObjs[id]["coImg"];
  customEventScreenContent.style.background = playerObjs[id]["countryGradient"];
  customEventScreen.style.borderColor = playerObjs[id]["countryColor"];
  customEventScreenProfileHeader.style.textShadow = 'text-shadow: 1px 1px 2px ' + playerObjs[id]["countryColor"] + ";";
  customEventScreenProfileReady.style.textShadow = 'text-shadow: 1px 1px 2px ' + playerObjs[id]["countryColor"] + ";";

  switch (type)
  {
    case "cop":
      playerObjs[id]["hasSeenCOPStatusScreen"] = true;
      customEventScreenProfileHeader.innerHTML = "POWER";
      customEventScreenProfileStar.src = redStarSrc;
      togglePowerLines(false);
      break;
    case "scop":
      playerObjs[id]["hasSeenSCOPStatusScreen"] = true;
      customEventScreenProfileHeader.innerHTML = "SUPER POWER";
      customEventScreenProfileStar.src = blueStarSrc;
      togglePowerLines(true);
      break;
  }
}

function enterEventScreen()
{
  let poppedItem = powerQueue.pop();

  buildEventProfile(poppedItem.id, poppedItem.type);

  customEventScreenContainer.style.display = "block";

  customEventScreen.classList.remove('pop-out');
  customEventScreen.classList.add('pop-in');

  exitTimeout = setTimeout(() => { exitEventScreen(); }, SHOWTIME);

}

function exitEventScreen()
{
  clearTimeout(exitTimeout);

  customEventScreen.classList.remove('pop-in');
  customEventScreen.classList.add('pop-out');

  setTimeout(() => { customEventScreenContainer.style.display = "none"; }, 400);

  if (powerQueue.length > 0)
  {
    setTimeout(() => { enterEventScreen(); }, 500);
  }
}

function buildPlayerObjs()
{
  allPlayers.forEach(function(id)
  {
    playerObjs[id] = {};

    let playerContainerString = 'player' + String(id);
    let container = document.getElementById(playerContainerString);

    playerObjs[id]["container"] = container;

    let copStatus = container.getElementsByClassName('cop-star power-star anim-power-bar').length > 0;
    let scopStatus = container.getElementsByClassName('scop-star power-star anim-power-bar').length > 0;

    playerObjs[id]["copStatus"] = copStatus;
    playerObjs[id]["scopStatus"] = scopStatus;

    // loadSettings(id);

    let countryGradient = container.getElementsByTagName("header");
    playerObjs[id]["countryGradient"] = countryGradient[0].style.background;
    let s = countryGradient[0].style.background.split("rgb")[2];
    playerObjs[id]["countryColor"] = "rgb" + s.substring(0, s.length - 1);

    let coImgSrc = container.getElementsByClassName('player-co')[0].firstElementChild.src;
    playerObjs[id]["coImg"] = coImgSrc;

    // console.log(playerObjs);
  });
}

function updatePlayerObjs()
{
  allPlayers.forEach(function(id)
  {
    let copStatus = playerObjs[id]["container"].getElementsByClassName('cop-star power-star anim-power-bar').length > 0;
    let scopStatus = playerObjs[id]["container"].getElementsByClassName('scop-star power-star anim-power-bar').length > 0;

    let copSeen = playerObjs[id]["hasSeenCOPStatusScreen"];
    let scopSeen = playerObjs[id]["hasSeenSCOPStatusScreen"];

    if (copStatus && scopStatus && !scopSeen) { queueEventProfile(id, "scop"); };
    if (copStatus && !scopStatus && !copSeen) { queueEventProfile(id, "cop"); };

    playerObjs[id]["copStatus"] = copStatus;
    playerObjs[id]["scopStatus"] = scopStatus;
  });

  if (powerQueue.length > 0) { enterEventScreen(); }
}

ahFire = actionHandlers.Fire;
actionHandlers.Fire = function()
{
  ahFire.apply(actionHandlers.Fire, arguments);

  setTimeout(()=>{ updatePlayerObjs(); }, 500);
}

ahExplode = actionHandlers.Explode;
actionHandlers.Explode = function()
{
  ahExplode.apply(actionHandlers.Explode, arguments);

  setTimeout(()=>{ updatePlayerObjs(); }, 500);
}

ahPower = actionHandlers.Power;
actionHandlers.Power = function()
{
  ahPower.apply(actionHandlers.Power, arguments);

  switch(arguments[0].coPower)
  {
    case "Y":
      playerObjs[String(arguments[0].playerId)]["hasSeenCOPStatusScreen"] = false;
      break;
    case "S":
      playerObjs[String(arguments[0].playerId)]["hasSeenCOPStatusScreen"] = false;
      playerObjs[String(arguments[0].playerId)]["hasSeenSCOPStatusScreen"] = false;
      break;
  }

  exitEventScreen();
}

function togglePowerLines(bool)
{
  if (bool)
  {
    powerLine1.style.display = 'block';
    powerLine2.style.display = 'block';
    powerLine3.style.display = 'block';
    powerLine4.style.display = 'block';
    powerLine5.style.display = 'block';
  }
  else
  {
    powerLine1.style.display = 'none';
    powerLine2.style.display = 'none';
    powerLine3.style.display = 'none';
    powerLine4.style.display = 'none';
    powerLine5.style.display = 'none';
  }
}

// Custom styling
var styles = `
  .pop-in {
    animation-duration: 0.5s;
    animation-name: pop-in;
    animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
    animation-fill-mode: forwards;
  }

  .pop-out {
    animation-duration: 0.5s;
    animation-name: pop-out;
    animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
    animation-fill-mode: forwards;
  }

  @keyframes pop-in {
    0% {
      opacity: 0;
      -webkit-transform: scale(0.5, 0.5);
    }

    100% {
      opacity: 1;
      -webkit-transform: scale(1, 1);
    }
  }

  @keyframes pop-out {
    0% {
      opacity: 1;
      -webkit-transform: scale(1, 1);
    }

    100% {
      opacity: 0;
      -webkit-transform: scale(0.5, 0.5);
    }
  }

  .custom-event-screen-header {
    font-size: 15px;
    letter-spacing: -1px;
    color: white;
  }

  .custom-event-screen-ready {
    font-size: 35px;
    letter-spacing: -2px;
    color: white;
  }

  .custom-event-screen-text-div {
    display: flex;
    flex-direction: column;
    height: 55px;
    width: 125px;
    margin-left: 5px;
  }

  .custom-event-screen-profile {
    width: 55px;
    height: 55px;
    margin-left: 5px;
    z-index: 1;
  }

  .custom-event-screen-profile-star {
    position: absolute;
    left: 50px;
    bottom: 2.5px;
    z-index: 2;
    width: 22px;
    height: 22px;
  }

  .custom-event-screen-content {
    align-items: center;
    border-style: solid;
    border-width: 4px 2px;
    border-color: white;
    display: flex;
    flex-direction: row;
    justify-content: left;
    padding: 2px 0;
    width: 100%;
    z-index: 2;
  }

  .custom-event-screen-container {
    font-size: 14px;
    left: 50%;
    position: absolute;
    top: 40%;
    transform: translateX(-50%);
    display: none;
  }

  .custom-event-screen {
    background: rgba(255, 255, 255, 0.9);
    border-width: 1px;
    border-color: black;
    border-style: solid;
    display: flex;
    height: 70px;
    justify-content: center;
    overflow: hidden;
    padding: 1px;
    position: relative;
    width: 200px;
    opacity: 0;
    cursor: pointer;
  }

  #powerLine1 {
		position: absolute;
		left: 0px;
    top: 12px;
		height: 3px;
		background: white;
		animation: powerLine 1.75s 1.75s infinite ease;
    animation-delay: 0ms;
	}

  #powerLine2 {
		position: absolute;
		left: 0px;
    top: 22px;
		height: 3px;
		background: white;
		animation: powerLine 2.5s 1.25s infinite ease;
    animation-delay: 250ms;
	}

  #powerLine3 {
		position: absolute;
		left: 0px;
    top: 39px;
		height: 3px;
		background: white;
		animation: powerLine 1s 1.5s infinite ease;
    animation-delay: 100ms;
	}

  #powerLine4 {
		position: absolute;
		left: 0px;
    top: 48px;
		height: 3px;
		background: white;
		animation: powerLine 2s 1.25s infinite ease;
    animation-delay: 400ms;
	}

  #powerLine5 {
		position: absolute;
		left: 0px;
    top: 58px;
		height: 3px;
		background: white;
		animation: powerLine 1.5s 2s infinite ease;
    animation-delay: 100ms;
	}

  @keyframes powerLine {
		0% {
			width: 0%;
		}
		100% {
      width: 100%;opacity: 0;
    }
  }

    .shine {
    	position: relative;
    	overflow: hidden;

    	&::before {
    		background: linear-gradient(
    			to right,
    			fade_out(#fff, 1) 0%,
    			fade_out(#fff, 0.7) 100%
    		);
    		content: "";
    		display: block;
    		height: 100%;
    		left: -75%;
    		position: absolute;
    		top: 0;
    		transform: skewX(-25deg);
    		width: 50%;
    		z-index: 2;
    		animation: shine 1.5s infinite;
    	}

    	@keyframes shine {
    		100% {
    			left: 125%;
    		}
    	}
    }
`;

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

buildPlayerObjs();
updatePlayerObjs();