feat: quick play audio + bring back the great divide features

This commit is contained in:
Index 2024-08-04 19:27:45 -05:00
parent f94f43b626
commit f6102eafcc
4 changed files with 331 additions and 0 deletions

View file

@ -122,6 +122,170 @@ let RecordingTimePlayed = false
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.action === 'reload') {
chrome.runtime.reload();
} else if (request.action === 'greatdivide_stats') {
chrome.storage.local.get(['PolyPlus_GreatDivideStats_' + request.userID], async function(result){
let Statistics = result['PolyPlus_GreatDivideStats_' + request.userID]
// cache for 5 minutes
if (Statistics !== undefined && (new Date().getTime() - Statistics.requested < 300000)) {
Statistics = Statistics.data
} else {
Statistics = (await (await fetch('https://stats.silly.mom/player_stats?id=' + request.userID)).json()).results
if (Statistics !== null) { Statistics = Statistics[0] }
chrome.storage.local.set({['PolyPlus_GreatDivideStats_' + request.userID]: {data: Statistics, requested: new Date().getTime()}}, function(){})
}
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs){
chrome.scripting
.executeScript({
target: {tabId: tabs[0].id},
func: LoadStats,
args: [Statistics]
})
})
})
const LoadStats = function(stats){
const GreatDivideCard = document.getElementById('p+greatdivide_card')
if (stats !== null) {
let KDR = (stats.Kills / stats.Deaths)
if (isNaN(KDR)) {
KDR = "N/A"
} else {
KDR = KDR.toFixed(4)
}
if (stats.Team === 'phantoms') {
GreatDivideCard.parentElement.style.backgroundImage = 'linear-gradient(rgba(0.7, 0.7, 0.7, 0.7), rgba(0.7, 0.7, 0.7, 0.7)), url("https://c0.ptacdn.com/assets/N3DH4x5a6iW7raaQ-3lwHpRHHpWShdXc.png")';
GreatDivideCard.parentElement.style.borderColor = '';
GreatDivideCard.parentElement.style.border = '1.25px solid blue !important';
} else {
GreatDivideCard.parentElement.style.backgroundImage = 'linear-gradient(rgba(0.7, 0.7, 0.7, 0.7), rgba(0.7, 0.7, 0.7, 0.7)), url("https://c0.ptacdn.com/assets/1HXpaoDLHJo2rrvwwxqJEDWvDZ6BgvSE.png")';
GreatDivideCard.parentElement.style.borderColor = '';
GreatDivideCard.parentElement.style.border = '1.25px solid green !important';
}
GreatDivideCard.innerHTML = `
<div class="mb-1">
<b>
<i class="fa-duotone fa-eye text-center d-inline-block" style="width:1.2em"></i>
Last Round Seen
</b>
<span class="float-end">
${ (stats.LastRoundSeen === 0) ? '-' : stats.LastRoundSeen }
</span>
</div>
<hr class="mb-3 mt-2">
<div class="mb-1">
<b>
<i class="fa-duotone fa-swords text-center d-inline-block" style="width:1.2em"></i>
Kills
</b>
<span class="float-end">
${stats.Kills.toLocaleString()} <small class="text-muted" style="font-size: 0.8rem;">(${stats.UniqueKills.toLocaleString()} unique)</small>
</span>
</div>
<div class="mb-1">
<b>
<i class="fa-duotone fa-skull text-center d-inline-block" style="width:1.2em"></i>
Deaths
</b>
<span class="float-end">
${stats.Deaths.toLocaleString()}
</span>
</div>
<div class="mb-1">
<b>
<i class="fa-solid fa-percent text-center d-inline-block" style="width:1.2em"></i>
Kill Death Ratio
</b>
<span class="float-end ${ (!isNaN(KDR) && KDR > 1) ? 'text-success' : (!isNaN(KDR) && KDR !== 0) ? 'text-danger' : '' }">
${KDR} <i class="fa-solid fa-circle-info" data-bs-toggle="tooltip" data-bs-title="KDR is a user's kills divided by the amount of times they have died. If their KDR is above 1, they are making a positive contribution. If their KDR is less than 1, that means they die more than they kill."></i>
</span>
</div>
<div class="mb-1">
<b>
<i class="fa-duotone fa-hundred-points text-center d-inline-block" style="width:1.2em"></i>
Points Scored
</b>
<span class="float-end">
${stats.PointsScored.toLocaleString()}
</span>
</div>
<div class="mb-1">
<b>
<i class="fa-solid fa-money-bill-wave text-center d-inline-block" style="width:1.2em"></i>
Cash Earned
</b>
<span class="float-end">
${stats.CashEarned.toLocaleString()}
</span>
</div>
<div class="mb-1">
<b>
<i class="fa-duotone fa-flag text-center d-inline-block" style="width:1.2em"></i>
Flags Captured
</b>
<span class="float-end">
${stats.FlagsCaptured} (${stats.FlagsReturned} returned)
</span>
</div>
<div>
<b>
<i class="fa-solid fa-box-open text-center d-inline-block" style="width:1.2em"></i>
Airdrops Collected
</b>
<span class="float-end">
${stats.AirdropsCollected}
</span>
</div>
<hr class="mb-3 mt-2">
<div class="mb-1">
<b>
<i class="fa-solid fa-chart-pyramid text-center d-inline-block" style="width:1.2em"></i>
Monoliths Destroyed
</b>
<span class="float-end">
${stats.ObelisksDestroyed}
</span>
</div>
<div class="mb-1">
<b>
<i class="fa-duotone fa-block-question text-center d-inline-block" style="width:1.2em"></i>
Blocks Placed
</b>
<span class="float-end">
${stats.BlocksPlaced} (${stats.BlocksDestroyed} destroyed)
</span>
</div>
<div class="mb-1">
<b>
<i class="fa-duotone fa-head-side-brain text-center d-inline-block" style="width:1.2em"></i>
Headshots
</b>
<span class="float-end">
${stats.Headshots}
</span>
</div>
`
const Script = document.createElement('script');
Script.setAttribute('type', 'text/javascript');
Script.setAttribute('src', chrome.runtime.getURL('resources/registerTooltips.js'));
Script.addEventListener('load', function () {
Script.remove();
});
document.body.appendChild(Script);
} else {
GreatDivideCard.classList.add('text-center', 'py-5')
GreatDivideCard.innerHTML = `
<h1 class="display-3"><i class="fa-solid fa-face-thinking"></i></h1>
<h5> Not Drafted </h5>
<p class="mb-0">This user didn't participate in The Great Divide.</p>
`
}
}
return true
} else if (request.action === 'start_time_played') {
if (RecordingTimePlayed === true) {
console.log('Time Played: Already Started Interval')

View file

@ -0,0 +1,61 @@
const AssetGrid = document.getElementById('assets')
const AssetObserver = new MutationObserver(async function (list) {
const SelectedTab = document.getElementsByClassName('nav-link active')[0].getAttribute('data-category')
if (SelectedTab === "audio") {
for (const record of list) {
for (const audio of record.addedNodes) {
if (audio.tagName === 'DIV') {
const PlayButton = document.createElement('button')
PlayButton.classList = 'btn btn-primary btn-sm'
PlayButton.style = 'position: absolute; bottom: 0; right: 0; margin: 5px; margin-bottom: 55px; z-index: 2000;'
PlayButton.innerHTML = '<i class="fa-solid fa-play"></i>'
audio.getElementsByTagName('a')[0].parentElement.insertBefore(PlayButton, audio.getElementsByTagName('a')[0])
audio.children[0].style.position = 'relative'
let AudioElement = null
let Playing = false
PlayButton.addEventListener('click', async function(){
if (!Playing) {
if (AudioElement === null) {
PlayButton.innerHTML = '<div class="spinner-border text-light" role="status" style="--bs-spinner-width: 15px; --bs-spinner-height: 15px; --bs-spinner-border-width: 2px; vertical-align: middle; text-align: center;"><span class="sr-only">Loading...</span></div>'
const AudioURL = (await (await fetch('https://api.polytoria.com/v1/assets/serve-audio/' + audio.querySelector('a[href^="/store"]').getAttribute('href').split('/')[2])).json())
if (AudioURL.success) {
AudioElement = new Audio(AudioURL.url)
} else {
PlayButton.remove();
}
AudioElement.addEventListener("canplaythrough", (event) => {
Playing = true
AudioElement.play();
PlayButton.innerHTML = '<i class="fa-duotone fa-solid fa-play-pause"></i>'
PlayButton.classList = 'btn btn-warning btn-sm'
});
} else {
Playing = true
AudioElement.play();
PlayButton.innerHTML = '<i class="fa-duotone fa-solid fa-play-pause"></i>'
PlayButton.classList = 'btn btn-warning btn-sm'
}
AudioElement.addEventListener("ended", function() {
Playing = false
PlayButton.innerHTML = '<i class="fa-solid fa-play"></i>'
PlayButton.classList = 'btn btn-primary btn-sm'
})
} else {
Playing = false
AudioElement.pause()
PlayButton.innerHTML = '<i class="fa-solid fa-play"></i>'
PlayButton.classList = 'btn btn-primary btn-sm'
}
})
}
}
AssetObserver.observe(AssetGrid, {attributes: false, childList: true, subtree: false});
}
}
});
AssetObserver.observe(AssetGrid, {attributes: false, childList: true, subtree: false});

96
js/the-great-divide.js Normal file
View file

@ -0,0 +1,96 @@
let EventOngoing = true;
let Team;
let HasTeam = true;
const PlaceAllowlist = [
'9656',
'9757'
];
(async () => {
Utilities = await import(chrome.runtime.getURL('resources/utils.js'))
.default
chrome.storage.sync.get(['PolyPlus_Settings'], function(result) {
Settings = result.PolyPlus_Settings || {};
if (Settings.TheGreatDivide.Enabled !== true) {
//return
}
if (Settings.TheGreatDivide.UserStatsOn === true && window.location.pathname.split('/')[1] === 'u') {
if (HasTeam === true) {
UserStatsTab()
} else {
if (EventOngoing === true) {
UserStatsTab()
}
}
}
})
async function UnbalancedServerMarkers() {
const Team = (await (await fetch('https://api.polytoria.com/v1/users/' + JSON.parse(window.localStorage.getItem('p+account_info')).ID + '/greatdivide')).json()).team
if (Team !== undefined) {
const Servers = Array.from(document.getElementById('servers-tabpane').children)
Servers.forEach(server => {
const TeamCounts = {
phantoms: server.getElementsByClassName('border-phantoms').length,
cobras: server.getElementsByClassName('border-cobras').length
}
let Enemy = "cobras"
if (Team === "cobras") { Enemy = "phantoms" }
if (new URLSearchParams(window.location.search).has('forceServerUnbalance')) {
TeamCounts[Enemy] = 1000
}
if (TeamCounts[Team] < TeamCounts[Enemy]) {
const UnbalancedText = document.createElement('p')
UnbalancedText.classList = 'mb-2'
UnbalancedText.style.fontSize = '0.7rem'
UnbalancedText.style.color = 'orange'
UnbalancedText.innerHTML = `*Potentially Unbalanced <i class="fa-solid fa-circle-info" data-bs-toggle="tooltip" data-bs-title="${TeamCounts.cobras} Cobras and ${TeamCounts.phantoms} Phantoms" data-bs-placement="right"></i>`
const ServerInfoColumn = server.getElementsByClassName('col-3')[0]
ServerInfoColumn.children[0].style.marginBottom = '0px'
ServerInfoColumn.insertBefore(UnbalancedText, ServerInfoColumn.children[1])
Utilities.InjectResource("registerTooltips")
}
})
}
}
async function UserStatsTab() {
const EventSection = document.createElement('div')
EventSection.innerHTML = `
<div class="d-grid mt-2 mb-4"></div>
<h6 class="text-center section-title px-3 px-lg-0 fw-bold" style="background-clip:text;-webkit-background-clip:text;color:transparent;background-image: linear-gradient(90deg, #1ad05b, #68f);-webkit-text-fill-color: transparent;">
<i class="fas fa-swords me-1 float-start"></i>
GREATEST DIVISION
<i class="fas fa-swords me-1 float-end"></i>
</h6>
<div class="card mcard mb-4" style="min-height: 226px; background-image: linear-gradient(rgba(0.7, 0.7, 0.7, 0.7), rgba(0.7, 0.7, 0.7, 0.7)), url('https://blog.polytoria.com/content/images/2024/06/TheGreatDivide.png'); background-size: cover; background-position: center; border-color: #000 !important;">
<div class="card-body" id="p+greatdivide_card">
<button class="btn btn-primary btn-sm w-100">Load Statistics</button>
</div>
</div>
`
document.getElementsByClassName('user-right')[0].appendChild(EventSection)
const EventCard = document.getElementById('p+greatdivide_card')
EventCard.innerHTML = `
<small class="d-block text-center text-muted" style="font-size: 0.8rem;">
Loading...
</small>
<lottie-player id="avatar-loading" src="https://c0.ptacdn.com/static/images/lottie/poly-brick-loading.2b51aa85.json" background="transparent" speed="1" style="width: 20%;height: auto;margin: -16px auto 50px;margin-top: 0px;" loop="" autoplay=""></lottie-player>
`
await chrome.runtime.sendMessage({
action: "greatdivide_stats",
userID: document.querySelector('.dropdown-item.text-danger[href^="/report"]').getAttribute('href').split('?')[0].split('/')[3]
});
}
})();

View file

@ -121,6 +121,16 @@
{
"matches": ["https://polytoria.com/games/*", "https://polytoria.com/shop/*", "https://polytoria.com/my/referrals", "https://polytoria.com/create/?t=*", "https://polytoria.com/user/*", "https://polytoria.com/library/*"],
"js": ["/js/site-redirects.js"]
},
{
"matches": ["https://polytoria.com/library"],
"js": ["/js/create/audio-library.js"]
},
{
"matches": ["https://polytoria.com/u/**"],
"js": ["/js/the-great-divide.js"]
}
],
"background": {