display map information
// ==UserScript==
// @name Mapinfo button 2
// @namespace http://tampermonkey.net/
// @version 2.0
// @description display map information
// @author n'wah
// @match https://gpop.io/*
// @icon https://www.google.com/s2/favicons?domain=gpop.io
// @require https://code.jquery.com/jquery-3.6.0.min.js
// @license MIT Apache BSD GPL LGPL MPL EPL
// @grant GM_addStyle
// @grant GM_getValue
// @grant GM_setValue
// ==/UserScript==
(function() {
'use strict';
// Select the element to hide
var elementToHide = document.querySelector('div.playpage-a12-block-c');
// Check if exists
if (elementToHide) {
elementToHide.remove();
}
// Configuration
const PANEL_ID = 'mapInfoPanel';
const SAVE_POSITION = true; // False - disable position saving
// Custom styles
GM_addStyle(`
#${PANEL_ID} {
position: fixed;
top: 20px;
left: 20px;
background: #1a1a1aee;
border-radius: 8px;
z-index: 9999;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
min-width: 260px;
backdrop-filter: blur(4px);
border: 1px solid #ffffff22;
display: none;
}
.panel-header {
padding: 10px;
background: #2a2a2a;
border-radius: 8px 8px 0 0;
cursor: move;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ffffff1a;
}
.panel-title {
color: #fff;
font-weight: bold;
font-size: 14px;
user-select: none;
}
.panel-close {
background: none;
border: none;
color: #ffffff99;
cursor: pointer;
padding: 2px 8px;
font-size: 18px;
transition: color 0.2s;
border-radius: 3px;
}
.panel-close:hover {
color: #fff;
background: #ffffff22;
}
.panel-content {
padding: 12px;
}
.map-info-btn {
width: 100%;
padding: 8px;
background: #2a2a2a;
border: 1px solid #ffffff1a;
color: #fff;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s;
margin-bottom: 10px;
}
.map-info-btn:hover {
background: #3a3a3a;
transform: translateY(-1px);
}
.map-info-results {
background: #2a2a2a;
padding: 12px;
border-radius: 5px;
border: 1px solid #ffffff1a;
}
.map-info-item {
color: #ffffffdd;
font-size: 16px;
margin: 6px 0;
line-height: 1.4;
}
.map-info-highlight {
color: #71ffbd;
font-weight: bold;
}
`);
// Floating panel
const createPanel = () => {
const panelHTML = `
<div id="${PANEL_ID}">
<div class="panel-header">
<span class="panel-title">🎮 Map Analyzer</span>
<button class="panel-close" title="Close">×</button>
</div>
<div class="panel-content">
<button class="map-info-btn">🔄 Generate Map Info</button>
<div class="map-info-results"></div>
</div>
</div>
`;
$('body').append(panelHTML);
return $(`#${PANEL_ID}`);
};
// Draggo
const makeDraggable = (panel) => {
let isDragging = false;
let startX = 0, startY = 0;
let savedX = SAVE_POSITION ? GM_getValue('panelX', 20) : 20;
let savedY = SAVE_POSITION ? GM_getValue('panelY', 20) : 20;
panel.css({ top: `${savedY}px`, left: `${savedX}px` });
panel.find('.panel-header').on('mousedown', function(e) {
isDragging = true;
startX = e.clientX - panel.offset().left;
startY = e.clientY - panel.offset().top;
panel.addClass('dragging');
return false;
});
$(document).on('mousemove', function(e) {
if (!isDragging) return;
const newX = e.clientX - startX;
const newY = e.clientY - startY;
panel.css({
left: `${newX}px`,
top: `${newY}px`
});
if (SAVE_POSITION) {
GM_setValue('panelX', newX);
GM_setValue('panelY', newY);
}
});
$(document).on('mouseup', () => {
isDragging = false;
panel.removeClass('dragging');
});
};
// Main
window.addEventListener('load', () => {
const panel = createPanel();
makeDraggable(panel);
// Panel controls
panel.find('.panel-close').click(() => panel.hide());
panel.find('.map-info-btn').click(updateMapInfo);
// Original button
$('.createpage-right').append(`
<button class="gbutton" id="openPanelBtn" style="margin: 10px;">
🗺️ Show Map Panel
</button>
`);
$('#openPanelBtn').click(() => panel.show());
});
// Map info generation
function genmapinfo(serverData) {
let gamemode = '4k';
if (/"j"/.test(serverData)) { gamemode = '6k'; }
let notedata = (serverData.split("}},")[1]).split("]")[0];
let notes = notedata.split(',');
let streak = 0, score = 0;
let LN = [], N = [];
if (gamemode == '4k') {
LN = [1,3,5,7];
N = [0,2,4,6];
} else {
LN = [1,3,5,7,9,11];
N = [0,2,4,6,8,10];
}
let LNamount = 0, Namount = 0;
for (let i = 0; i < notes.length; i++) {
let note = notes[i] * 1;
if (N.includes(note)) {
let multiplier = Math.min(1.005**streak, 3000);
score += 10*multiplier;
streak++;
Namount++;
}
if (LN.includes(note)) {
let multiplier = Math.min(1.005**streak, 3000);
let noteLength = notes[i+2] * 1;
let LNscore = (noteLength*40) * multiplier;
score += (10*multiplier) + LNscore;
streak++;
LNamount++;
}
}
return [Namount, LNamount, streak, score];
}
function updateMapInfo() {
let serverData;
for (let i = 0; i < 40; i++) {
if (/window.GAMEMODE/.test($(`script:eq(${i})`).text())) {
serverData = $(`script:eq(${i})`).text();
break;
}
}
if (serverData) {
const [Namount, LNamount, streak, score] = genmapinfo(serverData);
const resultsHTML = `
<div class="map-info-item">
🎵 Total Notes: <span class="map-info-highlight">${Namount + LNamount}</span>
</div>
<div class="map-info-item">
⚪ Regular: <span class="map-info-highlight">${Namount}</span>
</div>
<div class="map-info-item">
🔵 Long Notes: <span class="map-info-highlight">${LNamount}</span>
</div>
<div class="map-info-item">
💯 Max Score: <span class="map-info-highlight">${score.toFixed(2)}</span>
</div>
`;
$(`#${PANEL_ID} .map-info-results`).html(resultsHTML);
}
}
})();