☰

osu!web enhancement

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

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

  1. // ==UserScript==
  2. // @name osu!web enhancement
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.6.1.1
  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. // @match https://lazer.ppy.sh/*
  9. // @icon http://ppy.sh/favicon.ico
  10. // @grant none
  11. // @run-at document-end
  12. // ==/UserScript==
  13. const ShowPopup = (m, t = "info") => {
  14.     window.popup(m, t);
  15.     [["info", console.log], ["warning", console.warn], ["danger", console.error]].find(g => g[0] === t)[1](m);
  16. }
  17. const svg_osu_miss = URL.createObjectURL(new Blob(
  18. [`<svg viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  19.     <filter id="blur">
  20.         <feFlood flood-color="red" flood-opacity="0.5" in="SourceGraphic" />
  21.         <feComposite operator="in" in2="SourceGraphic" />
  22.         <feGaussianBlur stdDeviation="6" />
  23.         <feComponentTransfer result="glow1"> <feFuncA type="linear" slope="10" intercept="0" /> </feComponentTransfer>
  24.         <feGaussianBlur in="glow1" stdDeviation="1" result="glow2" />
  25.         <feMerge> <feMergeNode in="SourceGraphic" /> <feMergeNode in="glow2" /> </feMerge>
  26.     </filter>
  27.     <filter id="blur2"> <feGaussianBlur stdDeviation="0.2"/> </filter>
  28.     <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" />
  29.     <use href="#cross" stroke="red" stroke-width="2" fill="transparent" filter="url(#blur)"/>
  30.     <use href="#cross" fill="white" stroke="transparent" filter="url(#blur2)"/>
  31. </svg>`], {type: "image/svg+xml"}));
  32. const svg_green_tick = URL.createObjectURL(new Blob([
  33. `<svg viewBox="0 0 18 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  34.     <polyline points="2,8 7,14 16,2" stroke="#62ee56" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
  35. </svg>`], {type: "image/svg+xml"}));
  36. const inj_style = 
  37. `#osu-db-input{
  38.     display: none;
  39. }
  40. .osu-db-button{
  41.     align-items: center;
  42.     padding: 10px;
  43. }
  44. .osu-db-button:hover{
  45.     cursor: pointer;
  46. }
  47. .beatmapsets__item.owned-beatmapset{
  48.     opacity: 1.0;
  49. }
  50. .beatmapsets__item.owned-beatmapset .beatmapset-panel__menu-container{
  51.     background-color: #87dda8;
  52. }
  53. .beatmapsets__item.owned-beatmapset .fas, .beatmapsets__item.owned-beatmapset .far{
  54.     color: #5c9170;
  55. }
  56. .owned-beatmap-link{
  57.     color: #87dda8;
  58. }
  59. .play-detail__accuracy{
  60.     margin: 0px 12px;
  61. }
  62. .play-detail__accuracy.ppAcc{
  63.     color: #8ef9f1;
  64.     padding: 0;
  65. }
  66. .play-detail__weighted-pp{
  67.     margin: 0px;
  68. }
  69. .play-detail__pp{
  70.     flex-direction: column;
  71. }
  72. .lost-pp{
  73.     font-size: 10px;
  74.     position: relative;
  75.     right: 7px;
  76.     font-weight: 600;
  77. }
  78. .score-detail{
  79.     display: inline-block;
  80. }
  81. .score-detail-data-text{
  82.     margin-left: 5px;
  83.     margin-right: 10px;
  84.     width: auto;
  85.     display: inline-block;
  86. }
  87. @keyframes rainbow{
  88.     0%{
  89.         color: #be19ff;
  90.     }
  91.     25%{
  92.         color: #0075ff;
  93.     }
  94.     50%{
  95.         color: #4ddf86;
  96.     }
  97.     75%{
  98.         color: #e9ea00;
  99.     }
  100.     100%{
  101.         color: #ff7800;
  102.     }
  103. }
  104. .play-detail__accuracy-and-weighted-pp{
  105.     display: flex;
  106.     flex-direction: row;
  107. }
  108. .play-detail__before{
  109.     flex-grow: 1;
  110. }
  111. .mania-max{
  112.     animation: 0.16s infinite alternate rainbow;
  113. }
  114. .mania-300{
  115.     color: #fbff00;
  116. }
  117. .osu-100, .fruits-100, .taiko-150{
  118.     color: #67ff5b;
  119. }
  120. .mania-200{
  121.     color: #6cd800;
  122. }
  123. .osu-300, .fruits-300, .taiko-300{
  124.     color: #7dfbff;
  125. }
  126. .mania-100{
  127.     color: #257aea;
  128. }
  129. .mania-50{
  130.     color: #d2d2d2;
  131. }
  132. .osu-50, .fruits-50-miss{
  133.     color: #ffbf00;
  134. }
  135. .mania-miss, .taiko-miss, .fruits-miss{
  136.     color: #cc2626;
  137. }
  138. .mania-max, .mania-300, .mania-200, .mania-100, .mania-50, .mania-miss, .osu-300, .osu-100, .osu-50, .osu-miss{
  139.     font-weight: 600;
  140. }
  141. .score-detail-data-text{
  142.     font-weight: 500;
  143. }
  144. .osu-miss{
  145.     display: inline-block;
  146. }
  147. .osu-miss > img{
  148.     width: 14px;
  149.     height: 14px;
  150.     bottom: 1px;
  151.     position: relative;
  152. } 
  153. .play-detail__Accuracy, .play-detail__Accuracy2, .combo, .max-combo, .play-detail__combo{
  154.     display: inline-block;
  155.     width: auto;
  156. }
  157. .play-detail__Accuracy{
  158.     text-align: left;
  159.     color: #fc2;
  160. }
  161. .play-detail__Accuracy2{
  162.     text-align: left;
  163.     color: rgb(142, 249, 241);
  164. }
  165. .play-detail__combo, .play-detail__Accuracy2, .play-detail__Accuracy{
  166.     margin-right: 13px;
  167. }
  168. .play-detail__combo{
  169.     text-align: right;
  170. }
  171. .combo, .max-combo{
  172.     margin: 0px 1px;
  173. }
  174. .max-combo, .legacy-perfect-combo{
  175.     color: hsl(var(--hsl-lime-1));
  176. }
  177. div.bar__exp-info{
  178.     position: relative;
  179.     bottom: 100%;
  180. }
  181. .play-detail__group--background, .beatmap-playcount__background{
  182.     position: absolute;
  183.     width: 90%;
  184.     height: 100%;
  185.     left: 0px;
  186.     margin: 0px;
  187.     pointer-events: none;
  188.     z-index: 1;
  189.     border-radius: 10px 0px 0px 10px;
  190.     background-size: cover;
  191.     background-position-y: -100%;
  192.     mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
  193.     -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
  194. }
  195. @media(max-width: 900px){
  196.     .play-detail__group--background, .beatmap-playcount__background{
  197.         background-position-y: 0%;
  198.         mask-image: linear-gradient(to bottom, #0007, #0004);
  199.         -webkit-mask-image: linear-gradient(to bottom, #0007, #0004);
  200.         width: 100%;
  201.     }
  202.     .lost-pp{
  203.         left: 3px;
  204.     }
  205.     .play-detail__group.play-detail__group--bottom{
  206.         z-index: 1;
  207.     }
  208.     .play-detail__before{
  209.         flex-grow: 0;
  210.     }
  211. }
  212. .play-detail.play-detail--highlightable.play-detail--pin-sortable.js-score-pin-sortable .play-detail__group--background{
  213.     left: 20px;
  214. }
  215. .beatmap-playcount__background{
  216.     width: 100%;
  217.     border-radius: 6px;
  218.     mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
  219.     -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
  220. }
  221. .beatmap-playcount__info, .beatmap-playcount__detail-count, .play-detail__group.play-detail__group--top *{
  222.     z-index: 1;
  223. }
  224. div.play-detail-list time.js-timeago, span.beatmap-playcount__mapper, span.beatmap-playcount__mapper > a{
  225.     color: #ccc;
  226. }
  227. button.show-more-link{
  228.     z-index: 4;
  229. }
  230. a.beatmap-download-link{
  231.     margin: 0px 5px;
  232.     color: hsl(var(--hsl-l1));
  233. }
  234. a.beatmap-download-link:hover, a.beatmap-pack-item-download-link span:hover{
  235.     color: #fff;
  236. }
  237. a.beatmap-pack-item-download-link span{
  238.     color: hsl(var(--hsl-l1));
  239. }
  240. .play-detail.play-detail--highlightable.audio-player{
  241.     max-width: none;
  242.     height: unset;
  243.     padding: unset;
  244.     align-items: unset;
  245. }
  246. .play-detail.play-detail--highlightable.audio-player__button{
  247.     align-items: unset;
  248.     padding: unset;
  249. }
  250. .play-detail.play-detail--highlightable.audio-player__button:hover{
  251.     color: unset;
  252. }
  253. `;
  254. let scriptContent = 
  255. String.raw`console.log("page script injected from osu!web enhancement");
  256. if(window.oldXHROpen === undefined){
  257.     window.oldXHROpen = window.XMLHttpRequest.prototype.open;
  258.     window.XMLHttpRequest.prototype.open = function() {
  259.         this.addEventListener("load", function() {
  260.             const url = this.responseURL;
  261.             const trreg = /https:\/\/(?<subdomain>osu|lazer)\.ppy\.sh\/users\/(?<id>[0-9]+)\/extra-pages\/(?<type>top_ranks|historical)\?mode=(?<mode>osu|taiko|fruits|mania)/.exec(url);
  262.             const adreg = /https:\/\/(?<subdomain>osu|lazer)\.ppy\.sh\/users\/(?<id>[0-9]+)\/scores\/(?<type>firsts|best|recent|pinned)\?mode=(?<mode>osu|taiko|fruits|mania)&limit=[0-9]*&offset=[0-9]*/.exec(url);
  263.             let reg = trreg ?? (adreg ?? null);
  264.             if(!reg){
  265.                 const bmsreg = /https:\/\/(?:osu|lazer)\.ppy\.sh\/beatmapsets\/search\?/;
  266.                 return;
  267.             }
  268.             let info = {
  269.                 type: reg.groups.type,
  270.                 userId: Number(reg.groups.id),
  271.                 mode: reg.groups.mode,
  272.                 subdomain: reg.groups.subdomain,
  273.             };
  274.             const responseBody = this.responseText;
  275.             info.data = JSON.parse(responseBody);
  276.             info.id = "osu!web enhancement";
  277.             window.postMessage(info, "*");
  278.         });
  279.         return oldXHROpen.apply(this, arguments);
  280.     };
  281. }`;
  282. const scriptId = "osu-web-enhancement-XHR-script";
  283. if(!document.querySelector(`script#${scriptId}`)){
  284.     const script = document.createElement("script");
  285.     script.textContent = scriptContent;
  286.     document.body.appendChild(script);
  287. }
  288. const HTML = (tagname, attrs, ...children) => {
  289.     if(attrs === undefined) return document.createTextNode(tagname);
  290.     const ele = document.createElement(tagname);
  291.     if(attrs) for(let [key, value] of Object.entries(attrs)){
  292.         if(key === "eventListener"){
  293.             for(let listener of value){
  294.                 ele.addEventListener(listener.type, listener.listener, listener.options);
  295.             }
  296.         }
  297.         else ele.setAttribute(key, value);
  298.     }
  299.     for(let child of children) if(child) ele.append(child);
  300.     return ele;
  301. };
  302. const html = (html) => {
  303.     const t = document.createElement("template");
  304.     t.innerHTML = html;
  305.     return t.content.firstElementChild;
  306. };
  307. const PostMessage = (msg) => { console.error(msg); };
  308. const OsuMod = {
  309.     NoFail:         1 << 0,
  310.     Easy:           1 << 1,
  311.     TouchDevice:    1 << 2,
  312.     NoVideo:        1 << 2,
  313.     Hidden:         1 << 3,
  314.     HardRock:       1 << 4,
  315.     SuddenDeath:    1 << 5,
  316.     DoubleTime:     1 << 6,
  317.     Relax:          1 << 7,
  318.     HalfTime:       1 << 8,
  319.     Nightcore:      1 << 9, // always with DT
  320.     Flashlight:     1 << 10,
  321.     Autoplay:       1 << 11,
  322.     SpunOut:        1 << 12,
  323.     Autopilot:      1 << 13,
  324.     Perfect:        1 << 14,
  325.     Key4:           1 << 15,
  326.     Key5:           1 << 16,
  327.     Key6:           1 << 17,
  328.     Key7:           1 << 18,
  329.     Key8:           1 << 19,
  330.     KeyMod:         1 << 19 | 1 << 18 | 1 << 17 | 1 << 16 | 1 << 15,
  331.     FadeIn:         1 << 20,
  332.     Random:         1 << 21,
  333.     Cinema:         1 << 22,
  334.     TargetPractice: 1 << 23,
  335.     Key9:           1 << 24,
  336.     Coop:           1 << 25,
  337.     Key1:           1 << 26,
  338.     Key3:           1 << 27,
  339.     Key2:           1 << 28,
  340.     ScoreV2:        1 << 29,
  341.     Mirror:         1 << 30,
  342. };
  343. class Byte{ value = 0; constructor(arr, iter){ this.value = arr[iter.nxtpos++]; } };
  344. class RankedStatus extends Byte{
  345.     constructor(arr, iter){
  346.         super(arr, iter);
  347.         switch(this.value){
  348.             case 1: this.description = "unsubmitted"; break;
  349.             case 2: this.description = "pending/wip/graveyard"; break;
  350.             case 3: this.description = "unused"; break;
  351.             case 4: this.description = "ranked"; break;
  352.             case 5: this.description = "approved"; break;
  353.             case 6: this.description = "qualified"; break;
  354.             case 7: this.description = "loved"; break;
  355.             default: this.description = "unknown"; this.value = 0;
  356.         }
  357.     }
  358. };
  359. class OsuMode extends Byte{
  360.     constructor(arr, iter){
  361.         super(arr, iter);
  362.         switch(this.value){
  363.             case 1: this.description = "taiko"; break;
  364.             case 2: this.description = "catch"; break;
  365.             case 3: this.description = "mania"; break;
  366.             default: this.value = 0; this.description = "osu";
  367.         }
  368.     }
  369. };
  370. class Grade extends Byte{
  371.     constructor(arr, iter){
  372.         super(arr, iter);
  373.         switch(this.value){
  374.             case 0: this.description = "SSH"; break;
  375.             case 1: this.description = "SH"; break;
  376.             case 2: this.description = "SS"; break;
  377.             case 3: this.description = "S"; break;
  378.             case 4: this.description = "A"; break;
  379.             case 5: this.description = "B"; break;
  380.             case 6: this.description = "C"; break;
  381.             case 7: this.description = "D"; break;
  382.             default: this.description = "not played";
  383.         }
  384.     }
  385. };
  386. class Short{ value = 0; constructor(arr, iter){ this.value = arr[iter.nxtpos++] | arr[iter.nxtpos++] << 8; } };
  387. class Int{ value = 0; constructor(arr, iter){ this.value = arr[iter.nxtpos++] | arr[iter.nxtpos++] << 8 | arr[iter.nxtpos++] << 16 | arr[iter.nxtpos++] << 24; } };
  388. class Long{ value = 0n; constructor(arr, iter){ this.value = new DataView(arr.buffer, iter.nxtpos, 8).getBigUint64(0, true); iter.nxtpos += 8; } };
  389. class ULEB128{
  390.     value = 0n;
  391.     constructor(arr, iter){
  392.         let shift = 0n;
  393.         while(true){
  394.             let peek = BigInt(arr[iter.nxtpos++]);
  395.             this.value |= (peek & 0x7Fn) << shift;
  396.             if((peek & 0x80n) === 0n) break;
  397.             shift += 7n;
  398.         }
  399.     }
  400. };
  401. class Single{ value = 0; constructor(arr, iter){ this.value = new DataView(arr.buffer, iter.nxtpos, 4).getFloat32(0, true); iter.nxtpos += 4; } };
  402. class Double{ value = 0; constructor(arr, iter){ this.value = new DataView(arr.buffer, iter.nxtpos, 8).getFloat64(0, true); iter.nxtpos += 8; } };
  403. class Boolean{ value = false; constructor(arr, iter){ this.value = arr[iter.nxtpos++] !== 0x00; } };
  404. class OString{
  405.     value = "";
  406.     constructor(arr, iter){
  407.         switch(arr[iter.nxtpos++]){
  408.             case 0: break;
  409.             case 0x0b: {
  410.                 const l = new ULEB128(arr, iter).value;
  411.                 const bv = new Uint8Array(arr.buffer, iter.nxtpos, Number(l));
  412.                 this.value = new TextDecoder().decode(bv);
  413.                 iter.nxtpos += Number(l);
  414.                 break;
  415.             }
  416.             default: console.assert(false, `error occurred while parsing osu string with the first byte.`);
  417.         }
  418.     }
  419. };
  420. class IntDouble{
  421.     int = 0;
  422.     double = 0;
  423.     constructor(arr, iter){
  424.         const m1 = arr[iter.nxtpos++];
  425.         console.assert(m1 === 0x08, `error occurred while parsing Int-Double pair at ${iter.nxtpos - 1} with value 0x${m1.toString(16)}: should be 0x8.`);
  426.         this.int = new Int(arr, iter).value;
  427.         const m2 = arr[iter.nxtpos++];
  428.         console.assert(m2 === 0x0d, `error occurred while parsing Int-Double pair at ${iter.nxtpos - 1} with value 0x${m1.toString(16)}: should be 0x8.`);
  429.         this.double = new Double(arr, iter).value;
  430.     }
  431. };
  432. class IntDoubleArray extends Array{
  433.     constructor(arr, iter){
  434.         super(new Int(arr, iter).value);
  435.         for(let i = 0; i < this.length; i++) this[i] = new IntDouble(arr, iter);
  436.     }
  437. };
  438. class TimingPoint{
  439.     BPM = 0;
  440.     offset = 0;
  441.     notInherited = false;
  442.     constructor(arr, iter){
  443.         this.BPM = new Double(arr, iter).value;
  444.         this.offset = new Double(arr, iter).value;
  445.         this.notInherited = new Boolean(arr, iter).value;
  446.     }
  447. };
  448. class TimingPointArray extends Array{
  449.     constructor(arr, iter){
  450.         super(new Int(arr, iter).value);
  451.         for(let i = 0; i < this.length; i++) this[i] = new TimingPoint(arr, iter);
  452.     }
  453. };
  454. class DateTime extends Long{};
  455. class Beatmap{
  456.     constructor(arr, iter){
  457.         if(iter.osuVersion < 20191106) this.bytes = new Int(arr, iter);
  458.         this.artistName = new OString(arr, iter);
  459.         this.artistNameUnicode = new OString(arr, iter);
  460.         this.songTitle = new OString(arr, iter);
  461.         this.songTitleUnicode = new OString(arr, iter);
  462.         this.creatorName = new OString(arr, iter);
  463.         this.difficultyName = new OString(arr, iter);
  464.         this.audioFilename = new OString(arr, iter);
  465.         this.MD5Hash = new OString(arr, iter);
  466.         this.beatmapFilename = new OString(arr, iter);
  467.         this.rankedStatus = new RankedStatus(arr, iter);
  468.         this.hitcircleCount = new Short(arr, iter);
  469.         this.sliderCount = new Short(arr, iter);
  470.         this.spinnerCount = new Short(arr, iter);
  471.         this.lastModified = new Long(arr, iter);
  472.         this.AR = iter.osuVersion < 20140609 ? new Byte(arr, iter) : new Single(arr, iter);
  473.         this.CS = iter.osuVersion < 20140609 ? new Byte(arr, iter) : new Single(arr, iter);
  474.         this.HP = iter.osuVersion < 20140609 ? new Byte(arr, iter) : new Single(arr, iter);
  475.         this.OD = iter.osuVersion < 20140609 ? new Byte(arr, iter) : new Single(arr, iter);
  476.         this.sliderVelocity = new Double(arr, iter);
  477.         if(iter.osuVersion >= 20140609) this.osuSRInfoArr = new IntDoubleArray(arr, iter);
  478.         if(iter.osuVersion >= 20140609) this.taikoSRInfoArr = new IntDoubleArray(arr, iter);
  479.         if(iter.osuVersion >= 20140609) this.catchSRInfoArr = new IntDoubleArray(arr, iter);
  480.         if(iter.osuVersion >= 20140609) this.maniaSRInfoArr = new IntDoubleArray(arr, iter);
  481.         this.drainTime = new Int(arr, iter);
  482.         this.totalTime = new Int(arr, iter);
  483.         this.audioPreviewTime = new Int(arr, iter);
  484.         this.timingPointArr = new TimingPointArray(arr, iter);
  485.         this.difficultyID = new Int(arr, iter);
  486.         this.beatmapID = new Int(arr, iter);
  487.         this.threadID = new Int(arr, iter);
  488.         this.osuGrade = new Grade(arr, iter);
  489.         this.taikoGrade = new Grade(arr, iter);
  490.         this.catchGrade = new Grade(arr, iter);
  491.         this.maniaGrade = new Grade(arr, iter);
  492.         this.offsetLocal = new Short(arr, iter);
  493.         this.stackLeniency = new Single(arr, iter);
  494.         this.mode = new OsuMode(arr, iter);
  495.         this.sourceStr = new OString(arr, iter);
  496.         this.tagStr = new OString(arr, iter);
  497.         this.offsetOnline = new Short(arr, iter);
  498.         this.titleFont = new OString(arr, iter);
  499.         this.unplayed = new Boolean(arr, iter);
  500.         this.lastTimePlayed = new Long(arr, iter);
  501.         this.isOsz2 = new Boolean(arr, iter);
  502.         this.folderName = new OString(arr, iter);
  503.         this.lastTimeChecked = new Long(arr, iter);
  504.         this.ignoreBeatmapSound = new Boolean(arr, iter);
  505.         this.ignoreBeatmapSkin = new Boolean(arr, iter);
  506.         this.disableStoryboard = new Boolean(arr, iter);
  507.         this.disableVideo = new Boolean(arr, iter);
  508.         this.visualOverride = new Boolean(arr, iter);
  509.         if(iter.osuVersion < 20140609) this.uselessShort = new Short(arr, iter);
  510.         this.lastModified = new Int(arr, iter);
  511.         this.scrollSpeedMania = new Byte(arr, iter);
  512.     }
  513. };
  514. class BeatmapArray extends Array{
  515.     constructor(arr, iter){
  516.         super(new Int(arr, iter).value);
  517.         for(let i = 0; i < this.length; i++) this[i] = new Beatmap(arr, iter);
  518.     }
  519. };
  520. class OsuDb{
  521.     constructor(arr, iter){
  522.         this.version = new Int(arr, iter);
  523.         iter.osuVersion = this.version.value;
  524.         this.folderCount = new Int(arr, iter);
  525.         this.accountUnlocked = new Boolean(arr, iter);
  526.         this.timeTillUnlock = new DateTime(arr, iter);
  527.         this.playerName = new OString(arr, iter);
  528.         this.beatmapArray = new BeatmapArray(arr, iter);
  529.         this.permission = new Int(arr, iter);
  530.     }
  531. };
  532. const beatmapsets = new Set();
  533. const beatmaps = new Set();
  534. const bmsReg = /https:\/\/(?:osu|lazer)\.ppy\.sh\/beatmapsets\/([0-9]+)/;
  535. const bmsdlReg = /https:\/\/(?:osu|lazer)\.ppy\.sh\/beatmapsets\/([0-9]+)\/download/;
  536. const bmReg = /https:\/\/(?:osu|lazer)\.ppy\.sh\/beatmapsets\/(?:[0-9]+)#(?:mania|osu|fruits|taiko)\/([0-9]+)/;
  537. const BeatmapsetRefresh = () => {
  538.     for(const bm of window.osudb.beatmapArray){
  539.         beatmaps.add(bm.difficultyID.value);
  540.         beatmapsets.add(bm.beatmapID.value);
  541.     }
  542.     OnMutation();
  543. };
  544. const NewOsuDb = (r) => {
  545.     return new Promise((resolve, reject) => {
  546.         const start = performance.now();
  547.         const result = new Uint8Array(r.result);
  548.         const length = result.length;
  549.         console.log(`start reading osu!.db(${length} Bytes).`);
  550.         const iter = {
  551.             nxtpos: 0,
  552.         };
  553.         window.osudb = new OsuDb(result, iter);
  554.         if(iter.nxtpos !== length) ShowPopup("There are still remaining unread bytes, something may be wrong.", "danger");
  555.         ShowPopup(`Finished reading osu!.db in ${performance.now() - start} ms.`);
  556.         resolve();
  557.     })
  558. };
  559. const ReadOsuDb = (file) => {
  560.     if(file.name !== "osu!.db"){ console.assert( false, "filename should be 'osu!.db'."); return; }
  561.     const r = new FileReader();
  562.     r.onload = () => {
  563.         NewOsuDb(r);
  564.         BeatmapsetRefresh();
  565.     };
  566.     r.onerror = () => console.assert(false, "error occurred while reading file.");
  567.     r.readAsArrayBuffer(file);
  568. };
  569. const SelectOsuDb = (event) => {
  570.     const t = event.target;
  571.     const l = t.files;
  572.     console.assert(l && l.length === 1, "No file or multiple files are selected.");
  573.     ReadOsuDb(l[0]);
  574. };
  575. const CheckForUpdate = () => {
  576.     const verReg = /<dd class="script-show-version"><span>([0-9\.]+)<\/span><\/dd>/;
  577.     fetch("https://greasyfork.org/en/scripts/475417-osu-web-enhancement", {
  578.         credentials: "omit"
  579.     }).then(response => response.text()).then((html) => {
  580.         const ver = verReg.exec(html);
  581.         if(ver){
  582.             const result = (() => {
  583.                 const verList = ver[1].split(".");
  584.                 const thisVer = GM_info.script.version;
  585.                 console.log(`latest version is: ${ver[1]}, current version is: ${thisVer}`);
  586.                 const thisVerList = thisVer.split(".");
  587.                 for(let i = 0; i < verList.length; i++){
  588.                     if(Number(verList[i]) > Number(thisVerList[i] ?? 0)) return true;
  589.                     else if(Number(verList[i]) < Number(thisVerList[i] ?? 0)) return false;
  590.                 }
  591.                 return false;
  592.             })();
  593.             if(result){
  594.                 const a = HTML("a", {href: "https://greasyfork.org/scripts/475417-osu-web-enhancement/code/osu!web%20enhancement.user.js", download: "", style: "display:none;"});
  595.                 a.click();
  596.             }
  597.             else{
  598.                 ShowPopup("The lastest version is already installed!")
  599.             }
  600.         }
  601.     });
  602. };
  603. window.addEventListener
  604. const AddMenu = () => {
  605.     const menuId = "osu-web-enhancement-toolbar";
  606.     if(document.getElementById(menuId)) return;
  607.     const anc = document.querySelector("div.nav2__col.nav2__col--menu.js-react--quick-search-button");
  608.     const i = HTML("input", {type: "file", id: "osu-db-input", accept: ".db", eventListener: [{
  609.         type: "change",
  610.         listener: SelectOsuDb,
  611.         options: false,
  612.     }]});
  613.     const menuClass = "simple-menu simple-menu--nav2 simple-menu--nav2-left-aligned simple-menu--nav2-transparent js-menu";
  614.     const menuItemClass = "simple-menu__item u-section-community--before-bg-normal";
  615.     const menuTgtId = "osu-web-enhancement";
  616.     anc.insertAdjacentElement("beforebegin",
  617.         HTML("div", {class: "nav2__col nav2__col--menu", id: menuId},
  618.             HTML("div", {class: "nav2__menu-link-main js-menu", "data-menu-target": `nav2-menu-popup-${menuTgtId}`, "data-menu-show-delay":"0", style:"flex-direction: column; cursor: default;"}, 
  619.                 HTML("span", {style: "flex-grow: 1;"}),
  620.                 HTML("span", {style: "font-size: 10px;"}, HTML("osu!web")),
  621.                 HTML("span", {style: "font-size: 10px;"}, HTML("enhancement")),
  622.                 HTML("span", {style: "flex-grow: 1;"}),
  623.             ),
  624.             HTML("div", {class: "nav2__menu-popup"},
  625.                 HTML("div", {class: `${menuClass}`, "data-menu-id": `nav2-menu-popup-${menuTgtId}`, "data-visibility": "hidden"},
  626.                     HTML("div", {class: `${menuItemClass}`, style: "cursor: pointer;", id: "import-osu-db-button", eventListener: [{
  627.                         type: "click",
  628.                         listener: () => {if(i) i.click();},
  629.                         options: false,
  630.                     }]}, HTML("Import osu!.db")),
  631.                     HTML("div", {class: `${menuItemClass}`, style: "cursor: pointer;", eventListener: [{
  632.                         type: "click", 
  633.                         listener: CheckForUpdate,
  634.                     }]}, HTML("Check for update")),
  635.                     HTML("a", {class: `${menuItemClass}`, style: "cursor: pointer;", href: "https://greasyfork.org/en/scripts/475417-osu-web-enhancement", target: "_blank"}, HTML("Go to GreasyFork page"))
  636.                 ),
  637.             )
  638.         )
  639.     );
  640.     const mobMenuItmCls = "navbar-mobile-item__submenu-item js-click-menu--close";
  641.     const mob = document.querySelector(`div.mobile-menu__item.js-click-menu[data-click-menu-id="mobile-nav"]`);
  642.     mob.insertAdjacentElement("beforeend",
  643.         HTML("div", {class: "navbar-mobile-item"},
  644.             HTML("div", {class: "navbar-mobile-item__main js-click-menu", "data-click-menu-target": `nav-mobile-${menuTgtId}`, style: "cursor: pointer;"},
  645.                 HTML("span", {class: "navbar-mobile-item__icon navbar-mobile-item__icon--closed"},
  646.                     HTML("i", {class: "fas fa-chevron-right"})
  647.                 ),
  648.                 HTML("span", {class: "navbar-mobile-item__icon navbar-mobile-item__icon--opened"},
  649.                     HTML("i", {class: "fas fa-chevron-down"})
  650.                 ),
  651.                 HTML("osu!web enhancement"),
  652.             ),
  653.             HTML("ul", {class: "navbar-mobile-item__submenu js-click-menu", "data-click-menu-id": `nav-mobile-${menuTgtId}`, "data-visibility": "hidden"},
  654.                 HTML("li", {}, HTML("div", {class: mobMenuItmCls, style: "cursor: pointer;", eventListener: [{
  655.                     type: "click",
  656.                     listener: () => {if(i) i.click();},
  657.                 }]}, HTML("Import osu!.db"))),
  658.                 HTML("li", {}, HTML("div", {class: mobMenuItmCls, style: "cursor: pointer;", eventListener: [{
  659.                     type: "click",
  660.                     listener: CheckForUpdate,
  661.                 }]}, HTML("Check for update"))),
  662.                 HTML("a", {class: `${mobMenuItmCls}`, style: "cursor: pointer;", href: "https://greasyfork.org/en/scripts/475417-osu-web-enhancement", target: "_blank"}, HTML("Go to GreasyFork page"))
  663.             )
  664.         )
  665.     );
  666.     document.body.appendChild(i);
  667. };
  668. const FilterBeatmapSet = () => {
  669.     document.querySelectorAll(".beatmapsets__item").forEach((item) => {
  670.         const bmsID = Number(bmsReg.exec(item.innerHTML)?.[1]);
  671.         if(bmsID && beatmapsets.has(bmsID)){
  672.             item.classList.add("owned-beatmapset");
  673.         }
  674.     });
  675.     document.querySelectorAll("div.bbcode a, a.osu-md__link").forEach(item => {
  676.         if(item.classList.contains("owned-beatmap-link") || item.classList.contains("beatmap-download-link")) return;
  677.         const e = bmsReg.exec(item.href);
  678.         if(e && beatmapsets.has(Number(e[1]))){
  679.             item.classList.add("owned-beatmap-link");
  680.             if(item.nextElementSibling?.classList?.contains("beatmap-download-link")) item.nextElementSibling.remove();
  681.             const box = item.getBoundingClientRect();
  682.             const size = Math.round(box.height / 16 * 14);
  683.             const vert = Math.round(size * 4 / 14) / 2;
  684.             item.after(HTML("img", {src: svg_green_tick, title: "Owned", alt: "owned beatmap", style: `margin: 0px 5px; width: ${size}px; height: ${size}px; vertical-align: -${vert}px;`}));
  685.         }else if(e && !item.nextElementSibling?.classList?.contains("beatmap-download-link")){
  686.             item.after(
  687.                 HTML("a", {class: "beatmap-download-link", href: `https://osu.ppy.sh/beatmapsets/${e[1]}/download`, download: ""},
  688.                     HTML("span", {class: "fas fa-file-download", title: "Download"})
  689.                 )
  690.             );
  691.         }
  692.     });
  693.     document.querySelectorAll("li.beatmap-pack-items__set").forEach(item => {
  694.         if(item.classList.contains("owned-beatmap-pack-item")) return;
  695.         const a = item.querySelector("a.beatmap-pack-items__link");
  696.         const e = bmsReg.exec(a.href);
  697.         if(e && beatmapsets.has(Number(e[1]))){
  698.             item.classList.add("owned-beatmap-pack-item");
  699.             const span = item.querySelector("span.fal");
  700.             span.setAttribute("title", "Owned");
  701.             span.dataset.origTitle = "owned";
  702.             span.setAttribute("class", "");
  703.             span.append(HTML("img", {src: svg_green_tick, alt: "owned beatmap", style: `width: 16px; height: 16px; vertical-align: -2px;`}));
  704.             const parent = item.querySelector(".beatmap-pack-item-download-link");
  705.             if(parent){
  706.                 console.assert(parent.parentElement === item, "unexpected error occurred!");
  707.                 item.insertBefore(span, parent);
  708.                 parent.remove();
  709.             }
  710.         }else if(e){
  711.             const icon = item.querySelector(".beatmap-pack-items__icon");
  712.             icon.setAttribute("title", "Download");
  713.             icon.setAttribute("class", "fas fa-file-download beatmap-pack-items__icon");
  714.             if(icon.parentElement === item){
  715.                 const dl = HTML("a", {class: "beatmap-pack-item-download-link", href: `https://osu.ppy.sh/beatmapsets/${e[1]}/download`, download: ""});
  716.                 item.insertBefore(dl, icon);
  717.                 dl.append(icon);
  718.             }
  719.         }
  720.     })
  721. };
  722. const AdjustStyle = (modestr, sectionName) => {
  723.     const styleSheetId = `userscript-generated-stylesheet-${sectionName}`;
  724.     let e = document.getElementById(styleSheetId);
  725.     if(!e){
  726.         e = document.createElement("style");
  727.         e.id = styleSheetId;
  728.         document.head.appendChild(e);
  729.     }
  730.     const s = e.sheet;
  731.     while(s.cssRules.length) s.deleteRule(0);
  732.     const sectionSelector = `div.js-sortable--page[data-page-id="${sectionName}"]`;
  733.     let ll = [];
  734.     switch(modestr){
  735.         case "mania": ll = [".mania-300", ".mania-200", ".mania-100", ".mania-50", ".mania-miss"]; break;
  736.         case "fruits": ll = [".fruits-300", ".fruits-100", ".fruits-50-miss", ".fruits-miss"]; break;
  737.         case "taiko": ll = [".taiko-300", ".taiko-150", ".taiko-miss"]; break;
  738.         case "osu": ll = [".osu-300", ".osu-100", ".osu-50", ".osu-miss"]; break;
  739.     }
  740.     class FasterCalc{
  741.         _map = new Map();
  742.         Calculate = (ele) => {
  743.             const t = ele.textContent;
  744.             let w = 0, changed = false;
  745.             for(const c of t){
  746.                 let wc = this._map.get(c);
  747.                 if(!wc){
  748.                     ele.textContent = c;
  749.                     wc = ele.clientWidth;
  750.                     this._map.set(c, wc);
  751.                     changed = true;
  752.                 }
  753.                 w += wc;
  754.             }
  755.             if(changed) ele.textContent = t;
  756.             return w;
  757.         };
  758.     };
  759.     let past = performance.now(), curr;
  760.     let fc = new FasterCalc();
  761.     ll.forEach((str) =>
  762.         s.insertRule(
  763.             `${sectionSelector} ${str} + .score-detail-data-text {
  764.                 width: ${[...document.querySelectorAll(`${sectionSelector} ${str} + .score-detail-data-text`)].reduce((max, ele) => { const w = fc.Calculate(ele); return w > max ? w : max }, 0) + 2}px;
  765.             }` ,0
  766.         )
  767.     );
  768.     curr = performance.now();
  769.     console.log(`AdjustStyle Stage 1: ${curr - past}ms`);
  770.     past = performance.now();
  771.     fc = new FasterCalc();
  772.     [".play-detail__combo", ".play-detail__Accuracy", ".play-detail__Accuracy2"].forEach((str) =>
  773.         s.insertRule(
  774.             `${sectionSelector} ${str}{
  775.                 min-width: ${Math.ceil([...document.querySelectorAll(`${sectionSelector} ${str}`)].reduce((max, ele) => {const w = fc.Calculate(ele); return w > max ? w : max;}, 0)) + 1}px;
  776.             }`
  777.             ,0
  778.         )
  779.     );
  780.     curr = performance.now();
  781.     console.log(`AdjustStyle Stage 2: ${curr - past}ms`);
  782.     past = performance.now();
  783.     [".play-detail__pp"].forEach((str) =>
  784.         s.insertRule(
  785.             `${sectionSelector} ${str}{
  786.                 min-width: ${Math.ceil([...document.querySelectorAll(`${sectionSelector} ${str}`)].reduce((max, ele) => {const w = ele.clientWidth; return w > max ? w : max;}, 0)) + 1}px;
  787.             }`
  788.             ,0
  789.         )
  790.     );
  791.     curr = performance.now();
  792.     console.log(`AdjustStyle Stage 3: ${curr - past}ms`);
  793.     past = performance.now();
  794. };
  795. const TopRanksWorker = (userId, modestr, addedNodes = [document.body]) => {
  796.     const isLazer = window.location.hostname.split(".")[0] === "lazer"; // assume that hostname can only be osu.ppy.sh or lazer.ppy.sh
  797.     const subdomain = isLazer ? "lazer": "osu";
  798.     let sectionNames = new Set();
  799.     const GetSection = (ele) => {
  800.         let count = 0;
  801.         while(ele){
  802.             if(ele.tagName === "DIV" && ele.className === "js-sortable--page") return ele.dataset.pageId;
  803.             ele = ele.parentElement;
  804.             count++;
  805.             if(count > 50) console.log(ele);
  806.         }
  807.     };
  808.     addedNodes.forEach((eles) => {
  809.         if(eles instanceof Element) eles.querySelectorAll(":scope div.play-detail.play-detail--highlightable").forEach((ele) => {
  810.             if(ele.getAttribute("improved") !== null) return;
  811.             const a = ele.querySelector(":scope time.js-timeago");
  812.             const t = a.getAttribute("datetime");
  813.             const data = messageCache.get(`${userId},${modestr},${subdomain},${t}`);
  814.             if(data){
  815.                 sectionNames.add(GetSection(ele));
  816.                 ListItemWorker(ele, data, isLazer);
  817.             }
  818.         });
  819.     });
  820.     sectionNames.forEach(sectionName => AdjustStyle(modestr, sectionName));
  821. };
  822. const DiffToColour = (diff, stops = [0.1, 1.25, 2, 2.5, 3.3, 4.2, 4.9, 5.8, 6.7, 7.7, 9], vals = ['#4290FB', '#4FC0FF', '#4FFFD5', '#7CFF4F', '#F6F05C', '#FF8068', '#FF4E6F', '#C645B8', '#6563DE', '#18158E', '#000000']) => {
  823.     const len = stops.length;
  824.     diff = Math.min(Math.max(diff, stops[0]), stops[len - 1]);
  825.     let r = stops.findIndex(stop => stop > diff);
  826.     if(r === -1) r = len - 1;
  827.     const d = stops[r] - stops[r - 1];
  828.     return `#${[[1, 3], [3, 5], [5, 7]]
  829.         .map(_ => [Number.parseInt(vals[r].slice(..._), 16), Number.parseInt(vals[r-1].slice(..._), 16)])
  830.         .map(_ => Math.round((_[0] ** 2.2 * (diff - stops[r-1]) / d + _[1] ** 2.2 * (stops[r] - diff) / d) ** (1 / 2.2)).toString(16).padStart(2, "0")) 
  831.         .join("")
  832.     }`;
  833. };
  834. const ListItemWorker = (ele, data, isLazer) => {
  835.     if(ele.getAttribute("improved") !== null) return;
  836.     ele.setAttribute("improved", "");
  837.     if(data.pp){
  838.         data.pp = Number(data.pp);
  839.         const pptext = ele.querySelector(".play-detail__pp > span").childNodes[0];
  840.         pptext.nodeValue = data.pp >= 1 ? data.pp.toPrecision(5) : (data.pp < 0.00005 ? 0 : data.pp.toFixed(4));
  841.         if(data.weight) pptext.title = `${data.weight.pp >= 1 ? data.weight.pp.toPrecision(5) : (data.weight.pp < 0.00005 ? 0 : data.weight.pp.toFixed(4))} of total pp`;
  842.     }
  843.     const left = ele.querySelector("div.play-detail__group.play-detail__group--top");
  844.     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);`});
  845.     left.insertAdjacentElement("beforebegin", leftc);
  846.     const detail= ele.querySelector("div.play-detail__score-detail-top-right");
  847.     const du = detail.children[0];
  848.     if(!detail.children[1]) detail.append(HTML("div", {classList: "play-detail__pp-weight"}));
  849.     const db = detail.children[1];
  850.     data.statistics.perfect ??= 0, data.statistics.great ??= 0, data.statistics.good ??= 0, data.statistics.ok ??= 0, data.statistics.meh ??= 0, data.statistics.miss ??= 0;
  851.     const bmName = ele.querySelector("span.play-detail__beatmap");
  852.     const sr = HTML("div", {class: `difficulty-badge ${data.beatmap.difficulty_rating >= 6.7 ? "difficulty-badge--expert-plus" : ""}`, style: `--bg: ${DiffToColour(data.beatmap.difficulty_rating)}`},
  853.         HTML("span", {class: "difficulty-badge__icon"}, HTML("span", {class: "fas fa-star"})),
  854.         HTML("span", {class: "difficulty-badge__rating"}, HTML(`${data.beatmap.difficulty_rating.toFixed(2)}`))
  855.     );
  856.     /*
  857.     const ic = ele;
  858.     ic.classList.add("audio-player", "js-audio--player");
  859.     ic.setAttribute("data-audio-url", `https://b.ppy.sh/preview/${data.beatmap.beatmapset_id}.mp3`)
  860.     ic.setAttribute("data-audio-state", "paused");
  861.     const gr = ele;
  862.     gr.classList.add("audio-player__button", "audio-player__button--play", "js-audio--play");
  863.     */
  864.     bmName.parentElement.insertBefore(sr, bmName);
  865.     const bma = ele.querySelector("a.play-detail__title");
  866.     bma.onclick = (e) => {e.stopPropagation();};
  867.     switch(data.ruleset_id){
  868.         case 0:{
  869.             du.replaceChildren(
  870.                 HTML("span", {class: "play-detail__before"}),
  871.                 HTML("span", {class: "play-detail__Accuracy", title: `${isLazer ? "V2" : "V1"} Accuracy`}, HTML(`${(data.accuracy * 100).toFixed(2)}%`)),
  872.                 HTML("span", {class: "play-detail__combo", title: `Combo${isLazer ? "/Max Combo" : ""}`}, 
  873.                     HTML("span", {class: `combo ${isLazer ?(data.max_combo === (data.maximum_statistics.great ?? 0) + (data.maximum_statistics.legacy_combo_increase ?? 0) ? "legacy-perfect-combo" : ""):(data.legacy_perfect ? "legacy-perfect-combo" : "")}`}, HTML(`${data.max_combo}`)),
  874.                     isLazer ? HTML("/") : null,
  875.                     isLazer ? HTML("span", {class: "max-combo"}, HTML(`${(data.maximum_statistics.great ?? 0) + (data.maximum_statistics.legacy_combo_increase ?? 0)}`)) : null,
  876.                     HTML("x"),
  877.                 ),
  878.             );
  879.             const m_300 = HTML("span", {class: "score-detail score-detail-osu-300"}, 
  880.                 HTML("span", {class: "osu-300"}, 
  881.                     HTML("300")
  882.                 ),
  883.                 HTML("span", {class: "score-detail-data-text"},
  884.                     HTML(`${data.statistics.great + data.statistics.perfect}`)
  885.                 )
  886.             );
  887.             const s100 = HTML("span", {class: "score-detail score-detail-osu-100"}, 
  888.                 HTML("span", {class: "osu-100"}, 
  889.                     HTML("100")
  890.                 ),
  891.                 HTML("span", {class: "score-detail-data-text"},
  892.                     HTML(`${data.statistics.ok + data.statistics.good}`)
  893.                 )
  894.             );
  895.             const s50 = HTML("span", {class: "score-detail score-detail-osu-50"}, 
  896.                 HTML("span", {class: "osu-50"}, 
  897.                     HTML("50")
  898.                 ),
  899.                 HTML("span", {class: "score-detail-data-text"},
  900.                     HTML(`${data.statistics.meh}`)
  901.                 )
  902.             );
  903.             const s0 = HTML("span", {class: "score-detail score-detail-osu-miss"},
  904.                 HTML("span", {class: "osu-miss"},
  905.                     HTML("img", {src: svg_osu_miss, alt: "miss"})
  906.                 ),
  907.                 HTML("span", {class: "score-detail-data-text"},
  908.                     HTML(`${data.statistics.miss}`)
  909.                 )
  910.             );
  911.             db.replaceChildren(m_300, s100, s50, s0);
  912.             break;
  913.         }
  914.         case 1:{
  915.             const cur = [data.statistics.great ?? 0, data.statistics.ok ?? 0, data.statistics.miss ?? 0];
  916.             const mx = cur[0] + cur[1] + cur[2];
  917.             du.replaceChildren(
  918.                 HTML("span", {class: "play-detail__before"}),
  919.                 HTML("span", {class: "play-detail__Accuracy"}, HTML(`Acc: ${(data.accuracy * 100).toFixed(2)}%`)),
  920.                 HTML("span", {class: "play-detail__combo", title: `Combo/Max Combo`},
  921.                     HTML("span", {class: `combo ${(data.max_combo === mx ? "legacy-perfect-combo" : "")}`}, HTML(`${data.max_combo}`)),
  922.                     HTML("/"),
  923.                     HTML("span", {class: "max-combo"}, HTML(`${mx}`)),
  924.                     HTML("x"),
  925.                 ),
  926.             );
  927.             db.replaceChildren(
  928.                 HTML("span", {class: "score-detail score-detail-taiko-300"},
  929.                         HTML("span", {class: "taiko-300"}, HTML("300")),
  930.                         HTML("span", {class: "score-detail-data-text"}, HTML(data.statistics.great ?? 0))
  931.                 ),
  932.                 HTML("span", {class: "score-detail score-detail-taiko-150"},
  933.                         HTML("span", {class: "taiko-150"}, HTML("150")),
  934.                         HTML("span", {class: "score-detail-data-text"}, HTML(data.statistics.ok ?? 0))
  935.                 ),
  936.                 HTML("span", {class: "score-detail score-detail-fruits-combo"},
  937.                     HTML("span", {class: "taiko-miss"}, HTML("miss")),
  938.                     HTML("span", {class: "score-detail-data-text"}, HTML(data.statistics.miss ?? 0))
  939.                 ),
  940.             );
  941.             break;
  942.         }
  943.         case 2:{
  944.             if (isLazer) {
  945.                 const cur = [data.statistics.great ?? 0, data.statistics.large_tick_hit ?? 0, data.statistics.small_tick_hit ?? 0];
  946.                 const mx = [data.maximum_statistics.great ?? 0, data.maximum_statistics.large_tick_hit ?? 0, data.maximum_statistics.small_tick_hit ?? 0];
  947.                 du.replaceChildren(
  948.                     HTML("span", {class: "play-detail__before"}),
  949.                     HTML("span", {class: "play-detail__Accuracy"}, HTML(`Acc: ${(data.accuracy * 100).toFixed(2)}%`)),
  950.                     HTML("span", {class: "play-detail__combo", title: `Combo/Max Combo`}, 
  951.                         HTML("span", {class: `combo ${(data.max_combo === mx[0] + mx[1] ? "legacy-perfect-combo" : "")}`}, HTML(`${data.max_combo}`)),
  952.                         isLazer ? HTML("/") : null,
  953.                         isLazer ? HTML("span", {class: "max-combo"}, HTML(`${mx[0] + mx[1]}`)) : null,
  954.                         HTML("x"),
  955.                     ),
  956.                 );
  957.                 db.replaceChildren(
  958.                     HTML("span", {class: "score-detail score-detail-fruits-300"},
  959.                         HTML("span", {class: "fruits-300"}, HTML("fruits")),
  960.                         HTML("span", {class: "score-detail-data-text"}, HTML(cur[0] + "/" + mx[0]))
  961.                     ),
  962.                     HTML("span", {class: "score-detail score-detail-fruits-100"},
  963.                         HTML("span", {class: "fruits-100"}, HTML("ticks")),
  964.                         HTML("span", {class: "score-detail-data-text"}, HTML(cur[1] + "/" + mx[1]))
  965.                     ),
  966.                     HTML("span", {class: "score-detail score-detail-fruits-50-miss"},
  967.                         HTML("span", {class: "fruits-50-miss"}, HTML("drops")),
  968.                         HTML("span", {class: "score-detail-data-text"}, HTML(cur[2] + "/" + mx[2]))
  969.                     )
  970.                 );
  971.             } else {
  972.                 du.replaceChildren(
  973.                     HTML("span", {class: "play-detail__before"}),
  974.                     HTML("span", {class: "play-detail__Accuracy"}, HTML(`Acc: ${(data.accuracy * 100).toFixed(2)}%`)),
  975.                 );
  976.                 db.replaceChildren(
  977.                     HTML("span", {class: "score-detail score-detail-fruits-300"},
  978.                         HTML("span", {class: "fruits-300"}, HTML("FRUIT")),
  979.                         HTML("span", {class: "score-detail-data-text"}, HTML(data.statistics.great ?? 0))
  980.                     ),
  981.                     HTML("span", {class: "score-detail score-detail-fruits-100"},
  982.                         HTML("span", {class: "fruits-100"}, HTML("tick")),
  983.                         HTML("span", {class: "score-detail-data-text"}, HTML(data.statistics.large_tick_hit ?? 0))
  984.                     ),
  985.                     HTML("span", {class: "score-detail score-detail-fruits-50-miss"},
  986.                         HTML("span", {class: "fruits-50-miss"}, HTML("miss")),
  987.                         HTML("span", {class: "score-detail-data-text"}, HTML(data.statistics.small_tick_miss ?? 0))
  988.                     ),
  989.                     HTML("span", {class: "score-detail score-detail-fruits-miss"},
  990.                         HTML("span", {class: "fruits-miss"}, HTML("MISS")),
  991.                         HTML("span", {class: "score-detail-data-text"}, HTML(data.statistics.miss ?? 0))
  992.                     )
  993.                 );
  994.             }
  995.             break;
  996.         }
  997.         case 3:{
  998.             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));
  999.             const MCombo = (data.maximum_statistics.perfect ?? 0) + (data.maximum_statistics.legacy_combo_increase ?? 0);
  1000.             const isMCombo = isLazer ? data.max_combo >= MCombo : data.legacy_perfect;
  1001.             du.replaceChildren(
  1002.                 HTML("span", {class: "play-detail__before"}),
  1003.                 HTML("span", {class: "play-detail__Accuracy2", title: `pp Accuracy`}, HTML(`${(v2acc * 100).toFixed(2)}%`)),
  1004.                 HTML("span", {class: "play-detail__Accuracy", title: `Score${isLazer ? "V2" : "V1"} Accuracy`}, HTML(`${(data.accuracy * 100).toFixed(2)}%`)),
  1005.                 HTML("span", {class: "play-detail__combo", title: `Combo${isLazer ? "/Max Combo" : ""}`}, 
  1006.                     HTML("span", {class: `combo ${isMCombo ? "legacy-perfect-combo" : ""}`}, HTML(`${data.max_combo}`)),
  1007.                     isLazer ? HTML("/") : null,
  1008.                     isLazer ? HTML("span", {class: "max-combo"}, HTML(MCombo)) : null,
  1009.                     HTML("x"),
  1010.                 ),
  1011.             );
  1012.             if(data.pp){
  1013.                 const lostpp = data.pp * (0.2 / (Math.min(Math.max(v2acc, 0.8), 1) - 0.8) - 1);
  1014.                 ele.querySelector(".play-detail__pp").appendChild(HTML("span", {class: "lost-pp"}, HTML(`-${lostpp.toPrecision(4)}`)));
  1015.             }
  1016.             const M_300 = Number(data.statistics.perfect) / Math.max(Number(data.statistics.great), 1);
  1017.             db.replaceChildren(
  1018.                 HTML("span", {class: "score-detail score-detail-mania-max-300"},
  1019.                     HTML("span", {class: "mania-max"}, HTML("M")),
  1020.                     HTML("/"),
  1021.                     HTML("span", {class: "mania-300"}, HTML("300")),
  1022.                     HTML("span", {class: "score-detail-data-text"}, HTML(`${M_300 >= 1000 ? Math.round(M_300) : (M_300 < 1 ? M_300.toFixed(2): M_300.toPrecision(3))}`))
  1023.                 ),
  1024.                 HTML("span", {class: "score-detail score-detail-mania-max-200"},
  1025.                     HTML("span", {class: "mania-200"}, HTML("200")),
  1026.                     HTML("span", {class: "score-detail-data-text"}, HTML(data.statistics.good))
  1027.                 ),
  1028.                 HTML("span", {class: "score-detail score-detail-mania-max-100"},
  1029.                     HTML("span", {class: "mania-100"}, HTML("100")),
  1030.                     HTML("span", {class: "score-detail-data-text"}, HTML(data.statistics.ok))
  1031.                 ),
  1032.                 HTML("span", {class: "score-detail score-detail-mania-max-50"},
  1033.                     HTML("span", {class: "mania-50"}, HTML("50")),
  1034.                     HTML("span", {class: "score-detail-data-text"}, HTML(data.statistics.meh))
  1035.                 ),
  1036.                 HTML("span", {class: "score-detail score-detail-mania-max-0"},
  1037.                     HTML("span", {class: "mania-miss"}, HTML("miss")),
  1038.                     HTML("span", {class: "score-detail-data-text"}, HTML(data.statistics.miss))
  1039.                 )
  1040.             );
  1041.             break;
  1042.         }
  1043.     }
  1044. }
  1045. let lastInitData;
  1046. const OsuLevelToExp = (n) => {
  1047.     if(n <= 100) return 5000 / 3 * (4 * n ** 3 - 3 * n ** 2 - n) + 1.25 * 1.8 ** (n - 60);
  1048.     else return 26_931_190_827 + 99_999_999_999 * (n - 100);
  1049. }
  1050. const OsuExpValToStr = (num) => {
  1051.     let exp = Math.log10(num);
  1052.     if(exp >= 12){
  1053.         return `${(num / 10 ** 12).toPrecision(4)}T`;
  1054.     }
  1055.     else if(exp >= 9){
  1056.         return `${(num / 10 ** 9).toPrecision(4)}B`;
  1057.     }
  1058.     else if(exp >= 6){
  1059.         return `${(num / 10 ** 6).toPrecision(4)}M`;
  1060.     }
  1061.     else if(exp >= 4){
  1062.         return `${(num / 10 ** 3).toPrecision(4)}K`;
  1063.     }
  1064.     else return `${num}`;
  1065. }
  1066. const messageCache = new Map();
  1067. window.messageCache = messageCache;
  1068. const profUrlReg = /https:\/\/(?:osu|lazer)\.ppy\.sh\/users\/[0-9]+(?:|\/osu|\/taiko|\/fruits|\/mania)/;
  1069. const ImproveProfile = (mulist) => {
  1070.     let initData, wloc = window.location.toString();
  1071.     if(!profUrlReg.exec(wloc)) return;
  1072.     const initDataEle = document.querySelector(".js-react--profile-page.osu-layout.osu-layout--full");
  1073.     if(!initDataEle) return;
  1074.     initData = JSON.parse(initDataEle.dataset.initialData);
  1075.     const userId = initData.user.id, modestr = initData.current_mode;
  1076.     if(initData !== lastInitData){
  1077.         let ppDiv;
  1078.         document.querySelectorAll("div.value-display.value-display--plain").forEach((ele) => {
  1079.             if(ele.querySelector("div.value-display__label").textContent === "pp") ppDiv = ele;
  1080.         });
  1081.         if(ppDiv){
  1082.             const ttscore = initData.user.statistics.total_score;
  1083.             const lvl = initData.user.statistics.level.current;
  1084.             const upgradescore = Math.round(OsuLevelToExp(lvl + 1) - OsuLevelToExp(lvl));
  1085.             const lvlscore = ttscore - Math.round(OsuLevelToExp(lvl));
  1086.             lastInitData = initData;
  1087.             document.querySelector("div.bar__text").textContent = `${OsuExpValToStr(lvlscore)}/${OsuExpValToStr(upgradescore)} (${(lvlscore/upgradescore * 100).toPrecision(3)}%)`;
  1088.             const _pp = initData.user.statistics.pp;
  1089.             ppDiv.querySelector(".value-display__value > div").textContent = _pp >= 1 ? _pp.toPrecision(6) : (_pp < 0.000005 ? 0 : _pp.toFixed(5));
  1090.         }
  1091.     }
  1092.     if(mulist !== undefined) mulist.forEach((record) => {
  1093.         if(record.type === "childList" && record.addedNodes) TopRanksWorker(userId, modestr, record.addedNodes);
  1094.     });
  1095. }
  1096. let wloc = "";
  1097. const WindowLocationChanged = () => {
  1098.     if(window.location !== wloc){
  1099.         wloc = window.location;
  1100.         return true;
  1101.     }
  1102.     else return false;
  1103. }
  1104. const InsertStyleSheet = () => {
  1105.     //const sheetId = "osu-web-enhancement-general-stylesheet";
  1106.     const s = new CSSStyleSheet();
  1107.     s.replaceSync(inj_style);
  1108.     document.adoptedStyleSheets = [...document.adoptedStyleSheets, s];
  1109. }
  1110. const OnBeatmapsetDownload = (message) => {
  1111.     beatmapsets.add(message.beatmapsetId);
  1112. }
  1113. const ImproveBeatmapPlaycountItems = () => {
  1114.     for(const item of [...document.querySelectorAll("div.beatmap-playcount")]){
  1115.         if(item.getAttribute("improved") !== null) continue;
  1116.         item.setAttribute("improved", "");
  1117.         const a = item.querySelector("a");
  1118.         const bms = bmsReg.exec(a.href);
  1119.         if(!bms?.[1]) continue;
  1120.         const d = item.querySelector("div.beatmap-playcount__detail");
  1121.         const b = HTML("div", {class: "beatmap-playcount__background", style: `background-image: url(https://assets.ppy.sh/beatmaps/${bms[1]}/covers/card@2x.jpg)`});
  1122.         if(d.childElementCount > 0) d.insertBefore(b, d.children[0]);
  1123.         else d.append(b);
  1124.     }
  1125. }
  1126. const CloseScoreCardPopup = () => {
  1127.     document.querySelector("div.score-card-popup-window").remove();
  1128. }
  1129. const ShowScoreCardPopup = () => {
  1130.     const p = document.querySelector("div.js-portal");
  1131.     if(!p) return;
  1132.     document.body.append(
  1133.         HTML("div", {class: "score-card-popup-window"},
  1134.             HTML("div", {class: "score-card-popup-menu"},
  1135.                 HTML("button", {class: "score-card-close-button", eventListener: {type: "click", listener: CloseScoreCardPopup}}),
  1136.                 HTML("button", {class: "score-card-copy-to-clipboard-button", ev}),
  1137.             ),
  1138.             HTML("div", {class: "score-card"},
  1139.             )
  1140.         )
  1141.     );
  1142. };
  1143. const AddPopupButton = () => {
  1144.     const p = document.querySelector("div.js-portal")?.querySelector("div.simple-menu");
  1145.     if(!p || p.querySelector("button.score-card-popup-button")) return;
  1146.     p.append(HTML("button", {class: "score-card-popup-button simple-menu__item", type: "button", eventListener: [{type: "click", listener: ShowScoreCardPopup}]}, HTML("Popup")));
  1147. };
  1148. const OnMutation = (mulist) => {
  1149.     mut.disconnect();
  1150.     AddMenu();
  1151.     FilterBeatmapSet();
  1152.     ImproveBeatmapPlaycountItems();
  1153.     ImproveProfile(mulist);
  1154.     //AddPopupButton();
  1155.     mut.observe(document, {childList: true, subtree: true});
  1156. };
  1157. const MessageFilter = (message) => {
  1158.     info = `${message.userId},${message.mode},${message.subdomain}`;
  1159.     switch(message.type){
  1160.         case "beatmapset_download_complete": OnBeatmapsetDownload(message); break;
  1161.         case "top_ranks":
  1162.             [message.data.pinned.items, message.data.best.items, message.data.firsts.items].forEach(items => items.forEach(item => {
  1163.                 messageCache.set(`${info},${item.ended_at}`, item);
  1164.             }));
  1165.             TopRanksWorker(message.userId, message.mode);
  1166.             break;
  1167.         case "firsts": case "pinned": case "best": case "recent":
  1168.             message.data.forEach(item => { messageCache.set(`${info},${item.ended_at}`, item); });
  1169.             TopRanksWorker(message.userId, message.mode);
  1170.             break;
  1171.         case "historical":
  1172.             message.data.recent.items.forEach(item => { messageCache.set(`${info},${item.ended_at}`, item); });
  1173.             TopRanksWorker(message.userId, message.mode);
  1174.             break;
  1175.     }
  1176. }
  1177. const WindowMessageFilter = (event) => {
  1178.     if(event.source === window && event?.data?.id === "osu!web enhancement"){
  1179.         MessageFilter(event.data);
  1180.     }
  1181. }
  1182. const OnClick = (event) => {
  1183.     let t = event.target;
  1184.     while(t){
  1185.         if(t.tagName === "A"){
  1186.             const e = bmsdlReg.exec(t.href);
  1187.             if(!e) continue;
  1188.             beatmapsets.add(Number(e[1]));
  1189.             FilterBeatmapSet();
  1190.             break;
  1191.         }
  1192.         t = t.parentElement;
  1193.     }
  1194. }
  1195. //document.addEventListener("click", OnClick);
  1196. window.addEventListener("message", WindowMessageFilter);
  1197. const mut = new MutationObserver(OnMutation);
  1198. mut.observe(document, {childList: true, subtree: true});
  1199. InsertStyleSheet();
  1200. //{id, mode} -> (bmid -> record)
  1201. console.log("osu!web enhancement loaded");