☰

osu!web enhancement

Some small improvements to osu!web, featuring beatmapset filter and profile page improvement.

当前为 2023-09-16 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name osu!web enhancement
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.4.2
  5. // @description Some small improvements to osu!web, featuring beatmapset filter and profile page improvement.
  6. // @author VoltaXTY
  7. // @match https://osu.ppy.sh/*
  8. // @icon http://ppy.sh/favicon.ico
  9. // @grant none
  10. // @run-at document-end
  11. // ==/UserScript==
  12. console.log("osu!web enhancement loaded");
  13. const inj_style = 
  14. `#osu-db-input{
  15.     display: none;
  16. }
  17. .osu-db-button{
  18.     align-items: center;
  19.     padding: 10px;
  20. }
  21. .osu-db-button:hover{
  22.     cursor: pointer;
  23. }
  24. .beatmapsets__item.owned-beatmapset{
  25.     opacity: 1.0;
  26. }
  27. .beatmapsets__item.owned-beatmapset .beatmapset-panel__menu-container{
  28.     background-color: #87dda8;
  29. }
  30. .beatmapsets__item.owned-beatmapset .fas, .beatmapsets__item.owned-beatmapset .far{
  31.     color: #5c9170;
  32. }
  33. .play-detail__accuracy{
  34.     margin: 0px 12px;
  35. }
  36. .play-detail__accuracy.ppAcc{
  37.     color: #8ef9f1;
  38.     padding: 0;
  39. }
  40. .play-detail__weighted-pp{
  41.     margin: 0px;
  42. }
  43. .play-detail__pp{
  44.     flex-direction: column;
  45. }
  46. .lost-pp{
  47.     font-size: 10px;
  48.     position: relative;
  49.     right: 7px;
  50.     font-weight: 600;
  51.     /* color: #81ff81; */
  52. }
  53. .score-detail{
  54.     display: inline-block;
  55. }
  56. /*
  57. .score-detail-mania-max-300{
  58.     width: 6em;
  59. }
  60. .score-detail-mania-200, .score-detail-mania-100, .score-detail-mania-miss{
  61.     width: 4em;
  62. }
  63. .score-detail-mania-50{
  64.     width: 3.5em;
  65. }
  66. */
  67. .score-detail-data-text{
  68.     margin-left: 5px;
  69.     margin-right: 10px;
  70.     width: auto;
  71.     display: inline-block;
  72. }
  73. @keyframes rainbow{
  74.     0%{
  75.         color: #be19ff;
  76.     }
  77.     25%{
  78.         color: #0075ff;
  79.     }
  80.     50%{
  81.         color: #4ddf86;
  82.     }
  83.     75%{
  84.         color: #e9ea00;
  85.     }
  86.     100%{
  87.         color: #ff7800;
  88.     }
  89. }
  90. .play-detail__accuracy-and-weighted-pp{
  91.     display: flex;
  92.     flex-direction: row-reverse;
  93. }
  94. .mania-max{
  95.     animation: 0.16s infinite alternate rainbow;
  96. }
  97. .mania-300{
  98.     color: #fbff00;
  99. }
  100. .osu-100{
  101.     color: #67ff5b;
  102. }
  103. .mania-200{
  104.     color: #6cd800;
  105. }
  106. .osu-300{
  107.     color: #7dfbff;
  108. }
  109. .mania-100{
  110.     color: #257aea;
  111. }
  112. .mania-50{
  113.     color: #d2d2d2;
  114. }
  115. .osu-50{
  116.     color: #ffbf00;
  117. }
  118. .mania-miss{
  119.     color: #cc2626;
  120. }
  121. .mania-max, .mania-300, .mania-200, .mania-100, .mania-50, .mania-miss, .osu-300, .osu-100, .osu-50, .osu-miss{
  122.     font-weight: 600;
  123. }
  124. .score-detail-data-text{
  125.     font-weight: 500;
  126. }
  127. .osu-miss{
  128.     display: inline-block;
  129. }
  130. .osu-miss > svg{
  131.     width: 14px;
  132.     height: 14px;
  133.     top: 3px;
  134.     position: relative;
  135. } 
  136. div.bar__exp-info{
  137.     position: relative;
  138.     bottom: 100%;
  139. }
  140. .play-detail__group--background{
  141.     position: absolute;
  142.     width: 90%;
  143.     height: 100%;
  144.     left: 0px;
  145.     margin: 0px;
  146.     pointer-events: none;
  147.     z-index: 1;
  148.     border-radius: 10px 0px 0px 10px;
  149.     mask-image: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  150.     -webkit-mask-image: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  151. }
  152. .play-detail__group.play-detail__group--top *{
  153.     z-index: 3;
  154. }
  155. time.js-timeago{
  156.     color: #ccc;
  157. }
  158. button.show-more-link{
  159.     z-index: 4;
  160. }
  161. `;
  162. let scriptContent = 
  163. String.raw`console.log("page script injected from osu!web enhancement");
  164. let oldXHROpen = window.XMLHttpRequest.prototype.open;
  165. window.XMLHttpRequest.prototype.open = function() {
  166.     this.addEventListener("load", function() {
  167.         const url = this.responseURL;
  168.         const trreg = /https:\/\/osu\.ppy\.sh\/users\/([0-9]+)\/extra-pages\/(top_ranks|historical)\?mode=(osu|taiko|fruits|mania)/.exec(url);
  169.         const adreg = /https:\/\/osu\.ppy\.sh\/users\/([0-9]+)\/scores\/(firsts|best|recent|pinned)\?mode=(osu|taiko|fruits|mania)&limit=[0-9]*&offset=[0-9]*/.exec(url);
  170.         let info;
  171.         if(trreg) info = {
  172.             type: trreg[2],
  173.             userId: Number(trreg[1]),
  174.             mode: trreg[3],
  175.         }
  176.         else{
  177.             if(adreg) info = {
  178.                 type: adreg[2],
  179.                 userId: Number(adreg[1]),
  180.                 mode: adreg[3], 
  181.             }
  182.             else return;
  183.         }
  184.         const responseBody = this.responseText;
  185.         info.data = JSON.parse(responseBody);
  186.         info.id = "osu!web enhancement";
  187.         window.postMessage(info, "*");
  188.     });
  189.     return oldXHROpen.apply(this, arguments);
  190. };`;
  191. const scriptId = "osu-web-enhancement-XHR-script";
  192. if(!document.querySelector(`script#${scriptId}`)){
  193.     const script = document.createElement("script");
  194.     script.textContent = scriptContent;
  195.     document.body.appendChild(script);
  196. }
  197. const HTML = (tagname, attrs, ...children) => {
  198.     if(attrs === undefined) return document.createTextNode(tagname);
  199.     const ele = document.createElement(tagname);
  200.     if(attrs) for(let [key, value] of Object.entries(attrs)){
  201.         if(key === "eventListener"){
  202.             for(let listener of value){
  203.                 ele.addEventListener(listener.type, listener.listener, listener.options);
  204.             }
  205.         }
  206.         else ele.setAttribute(key, value);
  207.     }
  208.     for(let child of children) ele.append(child);
  209.     return ele;
  210. };
  211. const html = (html) => {
  212.     const t = document.createElement("template");
  213.     t.innerHTML = html;
  214.     return t.content.firstElementChild;
  215. };
  216. const PostMessage = (msg) => { console.error(msg); };
  217. const OsuMod = {
  218.     NoFail:         1 << 0,
  219.     Easy:           1 << 1,
  220.     TouchDevice:    1 << 2,
  221.     NoVideo:        1 << 2,
  222.     Hidden:         1 << 3,
  223.     HardRock:       1 << 4,
  224.     SuddenDeath:    1 << 5,
  225.     DoubleTime:     1 << 6,
  226.     Relax:          1 << 7,
  227.     HalfTime:       1 << 8,
  228.     Nightcore:      1 << 9, // always with DT
  229.     Flashlight:     1 << 10,
  230.     Autoplay:       1 << 11,
  231.     SpunOut:        1 << 12,
  232.     Autopilot:      1 << 13,
  233.     Perfect:        1 << 14,
  234.     Key4:           1 << 15,
  235.     Key5:           1 << 16,
  236.     Key6:           1 << 17,
  237.     Key7:           1 << 18,
  238.     Key8:           1 << 19,
  239.     KeyMod:         1 << 19 | 1 << 18 | 1 << 17 | 1 << 16 | 1 << 15,
  240.     FadeIn:         1 << 20,
  241.     Random:         1 << 21,
  242.     Cinema:         1 << 22,
  243.     TargetPractice: 1 << 23,
  244.     Key9:           1 << 24,
  245.     Coop:           1 << 25,
  246.     Key1:           1 << 26,
  247.     Key3:           1 << 27,
  248.     Key2:           1 << 28,
  249.     ScoreV2:        1 << 29,
  250.     Mirror:         1 << 30,
  251. };
  252. class Byte{ value = 0; constructor(arr, iter){ this.value = arr[iter.nxtpos++]; } };
  253. class RankedStatus extends Byte{
  254.     constructor(arr, iter){
  255.         super(arr, iter);
  256.         switch(this.value){
  257.             case 1: this.description = "unsubmitted"; break;
  258.             case 2: this.description = "pending/wip/graveyard"; break;
  259.             case 3: this.description = "unused"; break;
  260.             case 4: this.description = "ranked"; break;
  261.             case 5: this.description = "approved"; break;
  262.             case 6: this.description = "qualified"; break;
  263.             case 7: this.description = "loved"; break;
  264.             default: this.description = "unknown"; this.value = 0;
  265.         }
  266.     }
  267. };
  268. class OsuMode extends Byte{
  269.     constructor(arr, iter){
  270.         super(arr, iter);
  271.         switch(this.value){
  272.             case 1: this.description = "taiko"; break;
  273.             case 2: this.description = "catch"; break;
  274.             case 3: this.description = "mania"; break;
  275.             default: this.value = 0; this.description = "osu";
  276.         }
  277.     }
  278. };
  279. class Grade extends Byte{
  280.     constructor(arr, iter){
  281.         super(arr, iter);
  282.         switch(this.value){
  283.             case 0: this.description = "SSH"; break;
  284.             case 1: this.description = "SH"; break;
  285.             case 2: this.description = "SS"; break;
  286.             case 3: this.description = "S"; break;
  287.             case 4: this.description = "A"; break;
  288.             case 5: this.description = "B"; break;
  289.             case 6: this.description = "C"; break;
  290.             case 7: this.description = "D"; break;
  291.             default: this.description = "not played";
  292.         }
  293.     }
  294. };
  295. class Short{ value = 0; constructor(arr, iter){ this.value = arr[iter.nxtpos++] | arr[iter.nxtpos++] << 8; } };
  296. class Int{ value = 0; constructor(arr, iter){ this.value = arr[iter.nxtpos++] | arr[iter.nxtpos++] << 8 | arr[iter.nxtpos++] << 16 | arr[iter.nxtpos++] << 24; } };
  297. class Long{ value = 0n; constructor(arr, iter){ this.value = new DataView(arr.buffer, iter.nxtpos, 8).getBigUint64(0, true); iter.nxtpos += 8; } };
  298. class ULEB128{
  299.     value = 0n;
  300.     constructor(arr, iter){
  301.         let shift = 0n;
  302.         while(true){
  303.             let peek = BigInt(arr[iter.nxtpos++]);
  304.             this.value |= (peek & 0x7Fn) << shift;
  305.             if((peek & 0x80n) === 0n) break;
  306.             shift += 7n;
  307.         }
  308.     }
  309. };
  310. class Single{ value = 0; constructor(arr, iter){ this.value = new DataView(arr.buffer, iter.nxtpos, 4).getFloat32(0, true); iter.nxtpos += 4; } };
  311. class Double{ value = 0; constructor(arr, iter){ this.value = new DataView(arr.buffer, iter.nxtpos, 8).getFloat64(0, true); iter.nxtpos += 8; } };
  312. class Boolean{ value = false; constructor(arr, iter){ this.value = arr[iter.nxtpos++] !== 0x00; } };
  313. class OString{
  314.     value = "";
  315.     constructor(arr, iter){
  316.         switch(arr[iter.nxtpos++]){
  317.             case 0: break;
  318.             case 0x0b:
  319.                 const l = new ULEB128(arr, iter).value;
  320.                 const bv = new Uint8Array(arr.buffer, iter.nxtpos, Number(l));
  321.                 this.value = new TextDecoder().decode(bv);
  322.                 iter.nxtpos += Number(l);
  323.                 break;
  324.             default: console.assert(false, `error occurred while parsing osu string with the first byte.`);
  325.         }
  326.     }
  327. };
  328. class IntDouble{
  329.     int = 0;
  330.     double = 0;
  331.     constructor(arr, iter){
  332.         const m1 = arr[iter.nxtpos++];
  333.         console.assert(m1 === 0x08, `error occurred while parsing Int-Double pair at ${iter.nxtpos - 1} with value 0x${m1.toString(16)}: should be 0x8.`);
  334.         this.int = new Int(arr, iter).value;
  335.         const m2 = arr[iter.nxtpos++];
  336.         console.assert(m2 === 0x0d, `error occurred while parsing Int-Double pair at ${iter.nxtpos - 1} with value 0x${m1.toString(16)}: should be 0x8.`);
  337.         this.double = new Double(arr, iter).value;
  338.     }
  339. };
  340. class IntDoubleArray extends Array{
  341.     constructor(arr, iter){
  342.         super(new Int(arr, iter).value);
  343.         for(let i = 0; i < this.length; i++) this[i] = new IntDouble(arr, iter);
  344.     }
  345. };
  346. class TimingPoint{
  347.     BPM = 0;
  348.     offset = 0;
  349.     notInherited = false;
  350.     constructor(arr, iter){
  351.         this.BPM = new Double(arr, iter).value;
  352.         this.offset = new Double(arr, iter).value;
  353.         this.notInherited = new Boolean(arr, iter).value;
  354.     }
  355. };
  356. class TimingPointArray extends Array{
  357.     constructor(arr, iter){
  358.         super(new Int(arr, iter).value);
  359.         for(let i = 0; i < this.length; i++) this[i] = new TimingPoint(arr, iter);
  360.     }
  361. };
  362. class DateTime extends Long{};
  363. class Beatmap{
  364.     constructor(arr, iter){
  365.         if(iter.osuVersion < 20191106) this.bytes = new Int(arr, iter);
  366.         this.artistName = new OString(arr, iter);
  367.         this.artistNameUnicode = new OString(arr, iter);
  368.         this.songTitle = new OString(arr, iter);
  369.         this.songTitleUnicode = new OString(arr, iter);
  370.         this.creatorName = new OString(arr, iter);
  371.         this.difficultyName = new OString(arr, iter);
  372.         this.audioFilename = new OString(arr, iter);
  373.         this.MD5Hash = new OString(arr, iter);
  374.         this.beatmapFilename = new OString(arr, iter);
  375.         this.rankedStatus = new RankedStatus(arr, iter);
  376.         this.hitcircleCount = new Short(arr, iter);
  377.         this.sliderCount = new Short(arr, iter);
  378.         this.spinnerCount = new Short(arr, iter);
  379.         this.lastModified = new Long(arr, iter);
  380.         this.AR = iter.osuVersion < 20140609 ? new Byte(arr, iter) : new Single(arr, iter);
  381.         this.CS = iter.osuVersion < 20140609 ? new Byte(arr, iter) : new Single(arr, iter);
  382.         this.HP = iter.osuVersion < 20140609 ? new Byte(arr, iter) : new Single(arr, iter);
  383.         this.OD = iter.osuVersion < 20140609 ? new Byte(arr, iter) : new Single(arr, iter);
  384.         this.sliderVelocity = new Double(arr, iter);
  385.         if(iter.osuVersion >= 20140609) this.osuSRInfoArr = new IntDoubleArray(arr, iter);
  386.         if(iter.osuVersion >= 20140609) this.taikoSRInfoArr = new IntDoubleArray(arr, iter);
  387.         if(iter.osuVersion >= 20140609) this.catchSRInfoArr = new IntDoubleArray(arr, iter);
  388.         if(iter.osuVersion >= 20140609) this.maniaSRInfoArr = new IntDoubleArray(arr, iter);
  389.         this.drainTime = new Int(arr, iter);
  390.         this.totalTime = new Int(arr, iter);
  391.         this.audioPreviewTime = new Int(arr, iter);
  392.         this.timingPointArr = new TimingPointArray(arr, iter);
  393.         this.difficultyID = new Int(arr, iter);
  394.         this.beatmapID = new Int(arr, iter);
  395.         this.threadID = new Int(arr, iter);
  396.         this.osuGrade = new Grade(arr, iter);
  397.         this.taikoGrade = new Grade(arr, iter);
  398.         this.catchGrade = new Grade(arr, iter);
  399.         this.maniaGrade = new Grade(arr, iter);
  400.         this.offsetLocal = new Short(arr, iter);
  401.         this.stackLeniency = new Single(arr, iter);
  402.         this.mode = new OsuMode(arr, iter);
  403.         this.sourceStr = new OString(arr, iter);
  404.         this.tagStr = new OString(arr, iter);
  405.         this.offsetOnline = new Short(arr, iter);
  406.         this.titleFont = new OString(arr, iter);
  407.         this.unplayed = new Boolean(arr, iter);
  408.         this.lastTimePlayed = new Long(arr, iter);
  409.         this.isOsz2 = new Boolean(arr, iter);
  410.         this.folderName = new OString(arr, iter);
  411.         this.lastTimeChecked = new Long(arr, iter);
  412.         this.ignoreBeatmapSound = new Boolean(arr, iter);
  413.         this.ignoreBeatmapSkin = new Boolean(arr, iter);
  414.         this.disableStoryboard = new Boolean(arr, iter);
  415.         this.disableVideo = new Boolean(arr, iter);
  416.         this.visualOverride = new Boolean(arr, iter);
  417.         if(iter.osuVersion < 20140609) this.uselessShort = new Short(arr, iter);
  418.         this.lastModified = new Int(arr, iter);
  419.         this.scrollSpeedMania = new Byte(arr, iter);
  420.     }
  421. };
  422. class BeatmapArray extends Array{
  423.     constructor(arr, iter){
  424.         super(new Int(arr, iter).value);
  425.         for(let i = 0; i < this.length; i++) this[i] = new Beatmap(arr, iter);
  426.     }
  427. };
  428. class OsuDb{
  429.     constructor(arr, iter){
  430.         this.version = new Int(arr, iter);
  431.         iter.osuVersion = this.version.value;
  432.         this.folderCount = new Int(arr, iter);
  433.         this.accountUnlocked = new Boolean(arr, iter);
  434.         this.timeTillUnlock = new DateTime(arr, iter);
  435.         this.playerName = new OString(arr, iter);
  436.         this.beatmapArray = new BeatmapArray(arr, iter);
  437.         this.permission = new Int(arr, iter);
  438.     }
  439. };
  440. const beatmapsets = new Set();
  441. const beatmaps = new Set();
  442. const bmsReg = /https:\/\/osu\.ppy\.sh\/beatmapsets\/([0-9]+)/;
  443. const bmReg = /https:\/\/osu\.ppy\.sh\/beatmapsets\/(?:[0-9]+)#(?:mania|osu|fruits|taiko)\/([0-9]+)/;
  444. const BeatmapsetRefresh = () => {
  445.     for(const bm of window.osudb.beatmapArray){
  446.         beatmaps.add(bm.difficultyID.value);
  447.         beatmapsets.add(bm.beatmapID.value);
  448.     }
  449.     OnMutation();
  450. };
  451. const GetBestScores = async (id, mode) => {
  452.     const querystr = new URLSearchParams({
  453.         k: apiK,
  454.         u: id,
  455.         m: mode,
  456.         limit: 100,
  457.         type: "id",
  458.     }).toString();
  459.     const r = await fetch(`${guburl}?${querystr}`);
  460.     return await r.json();
  461. };
  462. const NewOsuDb = (r) => {
  463.     return new Promise((resolve, reject) => {
  464.         const start = performance.now();
  465.         const result = new Uint8Array(r.result);
  466.         const length = result.length;
  467.         console.log(`start reading osu!.db(${length} Bytes).`);
  468.         const iter = {
  469.             nxtpos: 0,
  470.         };
  471.         window.osudb = new OsuDb(result, iter);
  472.         console.assert(iter.nxtpos === length, "there are still remaining unread bytes, something may be wrong. iter: %o", iter);
  473.         console.log(`finished reading osu!.db in ${performance.now() - start} ms.`);
  474.         resolve();
  475.     })
  476. };
  477. const ReadOsuDb = (file) => {
  478.     if(file.name !== "osu!.db"){ console.assert( false, "filename should be 'osu!.db'."); return; }
  479.     const r = new FileReader();
  480.     r.onload = () => {
  481.         NewOsuDb(r);
  482.         BeatmapsetRefresh();
  483.     };
  484.     r.onerror = () => console.assert(false, "error occurred while reading file.");
  485.     r.readAsArrayBuffer(file);
  486. };
  487. const SelectOsuDb = (event) => {
  488.     const t = event.target;
  489.     const l = t.files;
  490.     console.assert(l && l.length === 1, "No file or multiple files are selected.");
  491.     ReadOsuDb(l[0]);
  492. };
  493. const PlaceSelectOsuDbButton = () => {
  494.     if(document.querySelector(".osu-db-button")) return;
  495.     const i = HTML("input", {type: "file", id: "osu-db-input", accept: ".db", eventListener: [{
  496.         type: "change",
  497.         listener: SelectOsuDb,
  498.         options: false,
  499.     }]});
  500.     const d = HTML("div", {class: "osu-db-button nav2__col nav2__col--menu", eventListener: [{
  501.         type: "click",
  502.         listener: () => {if(i) i.click();},
  503.         options: false,
  504.     }]}, HTML("osu!.db"));
  505.     document.body.appendChild(i);
  506.     const a = document.querySelector("div.nav2__col.nav2__col--menu");
  507.     a.parentElement.insertBefore(d, a);
  508. };
  509. const FilterBeatmapSet = () => {
  510.     document.querySelectorAll(".beatmapsets__item").forEach((item) => {
  511.         const bmsID = Number(bmsReg.exec(item.innerHTML)?.[1]);
  512.         if(bmsID && beatmapsets.has(bmsID)){
  513.             item.classList.add("owned-beatmapset");
  514.         }
  515.     });
  516.     ShowBeatmapsSetInfo();
  517. };
  518. const ShowBeatmapsSetInfo = () => {
  519.     const p = document.querySelector(".beatmaps-popup__group");
  520.     if(!p) return;
  521. };
  522. const AdjustStyle = (modeId, sectionName) => {
  523.     const styleSheetId = `userscript-generated-stylesheet-${sectionName}`;
  524.     let e = document.getElementById(styleSheetId);
  525.     if(!e){
  526.         e = document.createElement("style");
  527.         e.id = styleSheetId;
  528.         document.head.appendChild(e);
  529.     }
  530.     const s = e.sheet;
  531.     while(s.cssRules.length) s.deleteRule(0);
  532.     const sectionSelector = `div.js-sortable--page[data-page-id="${sectionName}"]`;
  533.     let ll;
  534.     switch(modeId){
  535.         case 3: ll = [".mania-300", ".mania-200", ".mania-100", ".mania-50", ".mania-miss"]; break;
  536.         case 0: ll = [".osu-300", ".osu-100", ".osu-50", ".osu-miss"]; break;
  537.     }
  538.     ll.forEach((str) =>
  539.         s.insertRule(
  540.             `${sectionSelector} ${str} + .score-detail-data-text {
  541.                 width: ${[...document.querySelectorAll(`${sectionSelector} ${str} + .score-detail-data-text`)].reduce((max, ele) => ele.clientWidth > max ? ele.clientWidth : max, 0) + 2}px;
  542.             }` ,0
  543.         )
  544.     );
  545.     s.insertRule(
  546.         `${sectionSelector} .play-detail__pp{
  547.             width: ${[...document.querySelectorAll(`${sectionSelector} .play-detail__pp`)].reduce((max, ele) => ele.clientWidth > max ? ele.clientWidth : max, 0) + 1}px;
  548.         }`
  549.         ,0
  550.     );
  551. };
  552. const TopRanksWorker = (items, tabId, sectionName = "top_ranks") => {
  553.     if(!items.length) return true;
  554.     const tabEle = document.querySelector(`div.js-sortable--page[data-page-id="${sectionName}"]`);
  555.     if(!tabEle) return false;
  556.     const listEle = tabEle.querySelectorAll(`.title.title--page-extra-small + div.play-detail-list.u-relative`)?.[tabId];
  557.     if(!listEle) return false;
  558.     let completed = true;
  559.     for(const item of [...listEle.querySelectorAll(".play-detail.play-detail--highlightable")]){
  560.         const a = item.querySelector("a.play-detail__title")
  561.         const bm = bmReg.exec(a.href)[1];
  562.         const data = items.find(item => item.beatmap_id === Number(bm));
  563.         if(!data) completed = false;
  564.         else ListItemWorker(item, data);
  565.     }
  566.     if(!completed) return false;
  567.     AdjustStyle(items[0].ruleset_id, sectionName, tabId);
  568.     return true;
  569. };
  570. const ListItemWorker = (ele, data) => {
  571.     if(ele.classList.contains("improved")) return;
  572.     ele.classList.add("improved");
  573.     if(data.pp){
  574.         const pptext = ele.querySelector(".play-detail__pp > span").childNodes[0];
  575.         pptext.nodeValue = Number(data.pp).toPrecision(5);
  576.     }
  577.     const left = ele.querySelector("div.play-detail__group.play-detail__group--top");
  578.     const leftc = HTML("div", {class: "play-detail__group--background", style: `background-image: url(https://assets.ppy.sh/beatmaps/${data.beatmap.beatmapset_id}/covers/card@2x.jpg);`});
  579.     left.parentElement.insertBefore(leftc, left);
  580.     const detail= ele.querySelector("div.play-detail__score-detail-top-right");
  581.     const du = detail.children[0];
  582.     if(!detail.children[1]) detail.append(HTML("div", {classList: "play-detail__pp-weight"}));
  583.     const db = detail.children[1];
  584.     data.statistics.perfect ??= 0, data.statistics.great ??= 0, data.statistics.good ??= 0, data.statistics.ok ??= 0, data.statistics.meh ??= 0, data.statistics.miss ??= 0;
  585.     switch(data.ruleset_id){
  586.         case 0:{
  587.             du.replaceChildren(
  588.                 HTML("span", {class: "play-detail__accuracy"}, HTML(`V1Acc: ${(data.accuracy * 100).toFixed(2)}%`)),
  589.             );
  590.             const m_300 = HTML("span", {class: "score-detail score-detail-osu-300"}, 
  591.                 HTML("span", {class: "osu-300"}, 
  592.                     HTML("300")
  593.                 ),
  594.                 HTML("span", {class: "score-detail-data-text"},
  595.                     HTML(`${data.statistics.great + data.statistics.perfect}`)
  596.                 )
  597.             );
  598.             const s100 = HTML("span", {class: "score-detail score-detail-osu-100"}, 
  599.                 HTML("span", {class: "osu-100"}, 
  600.                     HTML("100")
  601.                 ),
  602.                 HTML("span", {class: "score-detail-data-text"},
  603.                     HTML(`${data.statistics.ok + data.statistics.good}`)
  604.                 )
  605.             );
  606.             const s50 = HTML("span", {class: "score-detail score-detail-osu-50"}, 
  607.                 HTML("span", {class: "osu-50"}, 
  608.                     HTML("50")
  609.                 ),
  610.                 HTML("span", {class: "score-detail-data-text"},
  611.                     HTML(`${data.statistics.meh}`)
  612.                 )
  613.             );
  614.             const s0 = HTML("span", {class: "score-detail score-detail-osu-miss"},
  615.                 HTML("span", {class: "osu-miss"},
  616.                     html(`<svg viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  617.     <filter id="blur">
  618.         <feFlood flood-color="red" flood-opacity="0.5" in="SourceGraphic" />
  619.         <feComposite operator="in" in2="SourceGraphic" />
  620.         <feGaussianBlur stdDeviation="6" />
  621.         <feComponentTransfer result="glow1">
  622.             <feFuncA type="linear" slope="10" intercept="0" />
  623.         </feComponentTransfer>
  624.         <feGaussianBlur in="glow1" stdDeviation="1" result="glow2" />
  625.         <feMerge>
  626.             <feMergeNode in="SourceGraphic" />
  627.             <feMergeNode in="glow2" />
  628.         </feMerge>
  629.     </filter>
  630.     <filter id="blur2"> <feGaussianBlur stdDeviation="0.2"/> </filter>
  631.     <path id="cross" d="M 26 16 l -10 10 l 38 38 l -38 38 l 10 10 l 38 -38 l 38 38 l 10 -10 l -38 -38 l 38 -38 l -10 -10 l -38 38 Z" />
  632.     <use href="#cross" stroke="red" stroke-width="2" fill="transparent" filter="url(#blur)"/>
  633.     <use href="#cross" fill="white" stroke="transparent" filter="url(#blur2)"/>
  634. </svg>`)
  635.                 ),
  636.                 HTML("span", {class: "score-detail-data-text"},
  637.                     HTML(`${data.statistics.miss}`)
  638.                 )
  639.             );
  640.             db.replaceChildren(m_300, s100, s50, s0);
  641.             break;
  642.         }
  643.         case 1:{
  644.             break;
  645.         }
  646.         case 2:{
  647.             break;
  648.         }
  649.         case 3:{
  650.             const v2acc = (320*data.statistics.perfect+300*data.statistics.great+200*data.statistics.good+100*data.statistics.ok+50*data.statistics.meh)/(320*(data.statistics.perfect+data.statistics.great+data.statistics.good+data.statistics.ok+data.statistics.meh+data.statistics.miss));
  651.             du.replaceChildren(
  652.                 HTML("span", {class: "play-detail__accuracy"}, HTML(`V1Acc: ${(data.accuracy * 100).toFixed(2)}%`)),
  653.                 HTML("span", {class: "play-detail__accuracy ppAcc"}, HTML(`PPAcc: ${(v2acc * 100).toFixed(2)}%`)),
  654.             );
  655.             if(data.pp){
  656.                 const lostpp = data.pp * (0.2 / (Math.min(Math.max(v2acc, 0.8), 1) - 0.8) - 1);
  657.                 ele.querySelector(".play-detail__pp").appendChild(HTML("span", {class: "lost-pp"}, HTML(`-${lostpp.toPrecision(4)}`)));
  658.             }
  659.             const M_300 = Number(data.statistics.perfect) / Math.max(Number(data.statistics.great), 1);
  660.             db.replaceChildren(
  661.                 HTML("span", {class: "score-detail score-detail-mania-max-300"},
  662.                     HTML("span", {class: "mania-max"}, HTML("M")),
  663.                     HTML("/"),
  664.                     HTML("span", {class: "mania-300"}, HTML("300")),
  665.                     HTML("span", {class: "score-detail-data-text"}, HTML(`${M_300.toFixed(2)}`))
  666.                 ),
  667.                 HTML("span", {class: "score-detail score-detail-mania-max-200"},
  668.                     HTML("span", {class: "mania-200"}, HTML("200")),
  669.                     HTML("span", {class: "score-detail-data-text"}, HTML(data.statistics.good))
  670.                 ),
  671.                 HTML("span", {class: "score-detail score-detail-mania-max-100"},
  672.                     HTML("span", {class: "mania-100"}, HTML("100")),
  673.                     HTML("span", {class: "score-detail-data-text"}, HTML(data.statistics.ok))
  674.                 ),
  675.                 HTML("span", {class: "score-detail score-detail-mania-max-50"},
  676.                     HTML("span", {class: "mania-50"}, HTML("50")),
  677.                     HTML("span", {class: "score-detail-data-text"}, HTML(data.statistics.meh))
  678.                 ),
  679.                 HTML("span", {class: "score-detail score-detail-mania-max-0"},
  680.                     HTML("span", {class: "mania-miss"}, HTML("miss")),
  681.                     HTML("span", {class: "score-detail-data-text"}, HTML(data.statistics.miss))
  682.                 )
  683.             );
  684.             break;
  685.         }
  686.     }
  687. }
  688. let lastLocationStr = "";
  689. let lastInitData;
  690. const OsuLevelToExp = (n) => {
  691.     if(n <= 100) return 5000 / 3 * (4 * n ** 3 - 3 * n ** 2 - n) + 1.25 * 1.8 ** (n - 60);
  692.     else return 26_931_190_827 + 99_999_999_999 * (n - 100);
  693. }
  694. const OsuExpValToStr = (num) => {
  695.     let suffix = "";
  696.     let exp = Math.log10(num);
  697.     if(exp >= 12){
  698.         return `${(num / 10 ** 12).toPrecision(4)}T`;
  699.     }
  700.     else if(exp >= 9){
  701.         return `${(num / 10 ** 9).toPrecision(4)}B`;
  702.     }
  703.     else if(exp >= 6){
  704.         return `${(num / 10 ** 6).toPrecision(4)}M`;
  705.     }
  706.     else if(exp >= 4){
  707.         return `${(num / 10 ** 3).toPrecision(4)}K`;
  708.     }
  709.     else return `${num.toPrecision(4)}`;
  710. }
  711. const ImproveProfile = (message) => {
  712.     let initData;
  713.     if(window.location.toString() === lastLocationStr){
  714.         initData = lastInitData;
  715.     }
  716.     else{
  717.         initData = JSON.parse(document.querySelector(".js-react--profile-page.osu-layout.osu-layout--full").dataset.initialData);
  718.         lastLocationStr = window.location.toString();
  719.         lastInitData = initData;
  720.     }
  721.     const userId = initData.user.id;
  722.     const modestr = initData.current_mode;
  723.     if(!(userId === message.userId && modestr === message.mode)) return;
  724.     const ttscore = initData.user.statistics.total_score;
  725.     const lvl = initData.user.statistics.level.current;
  726.     const upgradescore = Math.round(OsuLevelToExp(lvl + 1) - OsuLevelToExp(lvl));
  727.     const lvlscore = ttscore - Math.round(OsuLevelToExp(lvl));
  728.     document.querySelector("div.bar__text").textContent = `${OsuExpValToStr(lvlscore)}/${OsuExpValToStr(upgradescore)} (${(lvlscore/upgradescore * 100).toPrecision(3)}%)`;
  729.     let ppDiv;
  730.     document.querySelectorAll("div.value-display.value-display--plain").forEach((ele) => {
  731.         if(ele.querySelector("div.value-display__label").textContent === "pp") ppDiv = ele;
  732.     });
  733.     ppDiv.children[1].children[0].childNodes[0].nodeValue = initData.user.statistics.pp;
  734.     const obcb = () => {
  735.         ob.disconnect();
  736.         let result = true;
  737.         switch(message.type){
  738.             case "top_ranks":
  739.                 result &&= TopRanksWorker(message.data.pinned.items, 0);
  740.                 result &&= TopRanksWorker(message.data.best.items, 1);
  741.                 result &&= TopRanksWorker(message.data.firsts.items, 2);
  742.                 break;
  743.             case "firsts":
  744.                 result &&= TopRanksWorker(message.data, 2);
  745.                 break;
  746.             case "pinned":
  747.                 result &&= TopRanksWorker(message.data, 0);
  748.                 break;
  749.             case "best":
  750.                 result &&= TopRanksWorker(message.data, 1);
  751.                 break;
  752.             case "historical":
  753.                 result &&= TopRanksWorker(message.data.recent.items, 0, "historical");
  754.                 break;
  755.             case "recent":
  756.                 result &&= TopRanksWorker(message.data, 0, "historical");
  757.                 break;
  758.         }
  759.         if(!result) ob.observe(document, {subtree: true, childList: true});
  760.     };
  761.     const ob = new MutationObserver(obcb);
  762.     ob.observe(document, {subtree: true, childList: true});
  763.     obcb();
  764. }
  765. let wloc = "";
  766. const WindowLocationChanged = () => {
  767.     if(window.location !== wloc){
  768.         wloc = window.location;
  769.         return true;
  770.     }
  771.     else return false;
  772. }
  773. const InsertStyleSheet = () => {
  774.     //const sheetId = "osu-web-enhancement-general-stylesheet";
  775.     const s = new CSSStyleSheet();
  776.     s.replaceSync(inj_style);
  777.     document.adoptedStyleSheets = [...document.adoptedStyleSheets, s];
  778. }
  779. const OnBeatmapsetDownload = (message) => {
  780.     beatmapsets.add(message.beatmapsetId);
  781. }
  782. const OnMutation = (mulist) => {
  783.     mut.disconnect();
  784.     PlaceSelectOsuDbButton();
  785.     FilterBeatmapSet();
  786.     mut.observe(document, {childList: true, subtree: true});
  787. };
  788. const MessageFilter = (message) => {
  789.     switch(message.type){
  790.         case "beatmapset_download_complete": OnBeatmapsetDownload(message); break;
  791.     }
  792. }
  793. const WindowMessageFilter = (event) => {
  794.     if(event.source === window && event?.data?.id === "osu!web enhancement"){
  795.         ImproveProfile(event.data);
  796.     }
  797. }
  798. window.addEventListener("message", WindowMessageFilter);
  799. const mut = new MutationObserver(OnMutation);
  800. mut.observe(document, {childList: true, subtree: true});
  801. InsertStyleSheet();