diff --git a/CHANGELOG.md b/CHANGELOG.md
index 65dcaaa..b48ffe6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+### [1.5.9] - 2024-06-01
+
+#### 优化
+
+- 优化`难度`下拉框和`等级`下拉框的处理逻辑
+
 ### [1.5.8] - 2024-01-04
 
 #### 优化
diff --git a/package.json b/package.json
index 4d045de..519eb4c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sim-phi-vite",
   "private": true,
-  "version": "1.5.8",
+  "version": "1.5.9",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,20 +17,20 @@
     "stackblur-canvas": "^2.7.0"
   },
   "devDependencies": {
-    "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-terser": "^0.4.4",
     "@stylistic/eslint-plugin": "^1.7.0",
-    "@types/eslint": "^8.56.5",
+    "@types/eslint": "^8.56.9",
     "@types/md5": "^2.3.5",
     "@types/prompts": "^2.4.9",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
+    "@typescript-eslint/eslint-plugin": "^7.6.0",
+    "@typescript-eslint/parser": "^7.6.0",
     "eslint": "^8.57.0",
     "eslint-plugin-rulesdir": "^0.2.2",
     "picocolors": "^1.0.0",
     "prompts": "^2.4.2",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.6"
+    "typescript": "^5.4.5",
+    "vite": "^5.2.8"
   }
 }
diff --git a/public/index.html b/public/index.html
index 707683c..81a054d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -82,36 +82,8 @@ <h1 class="title"></h1>
           <div>曲绘：<input id="input-illustrator" class="input" style="width: 7em" placeholder="&#60; nameless &#62;" /></div>
           <div>谱师：<input id="input-charter" class="input" style="width: 7em" placeholder="&#60; nameless &#62;" /></div>
           <br />
-          <div>
-            难度：<select id="select-difficulty" style="width: 3em">
-              <option value="" selected>SP</option>
-              <option value="EZ">EZ</option>
-              <option value="HD">HD</option>
-              <option value="IN">IN</option>
-              <option value="AT">AT</option>
-            </select>
-          </div>
-          <div>
-            等级：<select id="select-level" style="width: 3em">
-              <option value="" selected>?</option>
-              <option value="1">1</option>
-              <option value="2">2</option>
-              <option value="3">3</option>
-              <option value="4">4</option>
-              <option value="5">5</option>
-              <option value="6">6</option>
-              <option value="7">7</option>
-              <option value="8">8</option>
-              <option value="9">9</option>
-              <option value="10">10</option>
-              <option value="11">11</option>
-              <option value="12">12</option>
-              <option value="13">13</option>
-              <option value="14">14</option>
-              <option value="15">15</option>
-              <option value="16">16</option>
-            </select>
-          </div>
+          <div>难度：<select id="select-difficulty" style="width: 3em"></select></div>
+          <div>等级：<select id="select-level" style="width: 3em"></select></div>
           <div>
             音效音量：<select id="select-volume" style="width: 5em">
               <option value="0">0%</option>
diff --git a/scripts/meta.json b/scripts/meta.json
index 47cec22..10eb16f 100644
--- a/scripts/meta.json
+++ b/scripts/meta.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.5.8",
+  "version": "1.5.9",
   "pubdate": 1611795955,
-  "lastupdate": 1704333812
+  "lastupdate": 1717253833
 }
diff --git a/src/components/InfoHandler.ts b/src/components/InfoHandler.ts
new file mode 100644
index 0000000..360c3fe
--- /dev/null
+++ b/src/components/InfoHandler.ts
@@ -0,0 +1,47 @@
+const table = { sp: [0, 0], ez: [1, 7], hd: [3, 13], in: [6, 15], at: [13, 16] } as const;
+const keys = ['ez', 'hd', 'in', 'at'] as const;
+type DifficultyLowerCase = keyof typeof table;
+type Difficulty = Uppercase<DifficultyLowerCase | ''>;
+export class LevelInfoHandler {
+  private readonly selectDifficulty: HTMLSelectElement;
+  private readonly selectLevel: HTMLSelectElement;
+  public text = '';
+  public constructor(selectDifficulty: HTMLSelectElement, selectLevel: HTMLSelectElement) {
+    this.selectDifficulty = selectDifficulty;
+    this.selectLevel = selectLevel;
+    Object.keys(table).forEach(key => this.selectDifficulty.add(new Option(key.toUpperCase())));
+    for (let i = 0; i < 17; i++) this.selectLevel.add(new Option(String(i || '?')));
+    this.selectDifficulty.addEventListener('change', () => this.updateInternal(0));
+    this.selectLevel.addEventListener('change', () => this.updateInternal(1));
+    this.updateInternal(-1);
+  }
+  private updateInternal(type: number): void {
+    let diffStr = (this.selectDifficulty.value || 'SP').toLowerCase() as DifficultyLowerCase;
+    let levelNum = Number(this.selectLevel.value) | 0;
+    if (type === 0) {
+      const diff = table[diffStr];
+      if (levelNum < diff[0]) levelNum = diff[0];
+      if (levelNum > diff[1]) levelNum = diff[1];
+      this.selectLevel.value = String(levelNum || '?');
+    } else if (type === 1) {
+      if (table[diffStr][1] < levelNum) diffStr = keys.find(key => table[key][1] >= levelNum) || 'sp';
+      else if (table[diffStr][0] > levelNum) diffStr = keys.findLast(key => table[key][0] <= levelNum) || 'sp';
+      this.selectDifficulty.value = diffStr.toUpperCase() as Difficulty;
+    }
+    const diffString = this.selectDifficulty.value;
+    const levelString = this.selectLevel.value;
+    this.text = [diffString, levelString].join('\u2002Lv.');
+  }
+  public updateLevelText(level: string): void {
+    this.text = level;
+    const p = this.text.toUpperCase().split('LV.').map(a => a.trim());
+    if (p[0]) this.selectDifficulty.value = p[0];
+    if (p[1]) this.selectLevel.value = p[1];
+  }
+  public getDifficultyIndex(): number {
+    return ['ez', 'hd', 'in', 'at'].indexOf(this.text.slice(0, 2).toLowerCase());
+  }
+  public getLevelNumber(): number {
+    return Number(/\d+$/.exec(this.text));
+  }
+}
diff --git a/src/index.ts b/src/index.ts
index 755a8b3..9435034 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -18,6 +18,7 @@ import { adjustSize } from '@/utils/adjustSize';
 import { fixme } from '@/utils/fixme';
 import { MessageHandler } from '@/components/MessageHandler';
 import { AudioController } from '@/utils/AudioTools';
+import { LevelInfoHandler } from '@/components/InfoHandler';
 const meta = ['Phixos', version.split('.'), pubdate, lastupdate] as typeof self._i;
 self._i = meta;
 const $id = (query: string): HTMLElement => document.getElementById(query) || (() => { throw new Error(`Cannot find element: ${query}`) })();
@@ -64,6 +65,7 @@ const inputCharter = $id('input-charter') as HTMLInputElement;
 const inputIllustrator = $id('input-illustrator') as HTMLInputElement;
 const selectDifficulty = $id('select-difficulty') as HTMLSelectElement;
 const selectLevel = $id('select-level') as HTMLSelectElement;
+const levelInfoHandler = new LevelInfoHandler(selectDifficulty, selectLevel);
 const selectVolume = $id('select-volume') as HTMLSelectElement;
 const blockUploaderSelect = $id('uploader-select') as HTMLDivElement;
 const blockUpload = $id('uploader-upload') as HTMLInputElement;
@@ -210,7 +212,6 @@ const status2 = {
     this.text = arr.length === 0 ? '' : `(${arr.join('+')})`;
   }
 };
-let levelText = '';
 class ImageStore {
   public base: ImageBitmap;
   public width: number;
@@ -277,12 +278,7 @@ function adjustInfo() {
     if (selectchart.value.trim() === data.chart) {
       if (data.name != null) inputName.value = data.name;
       if (data.artist != null) inputArtist.value = data.artist;
-      if (data.level != null) {
-        levelText = data.level;
-        const p = levelText.toLocaleUpperCase().split('LV.').map(a => a.trim());
-        if (p[0]) selectDifficulty.value = p[0];
-        if (p[1]) selectLevel.value = p[1];
-      }
+      if (data.level != null) levelInfoHandler.updateLevelText(data.level);
       if (data.illustrator != null) inputIllustrator.value = data.illustrator;
       if (data.charter != null) inputCharter.value = data.charter;
       if (data.music != null && bgms.has(data.music)) selectbgm.value = data.music;
@@ -376,7 +372,12 @@ const uploader = new FileEmitter();
         break;
       }
       case 'chart': {
-        if (data.msg) data.msg.forEach(v => sendWarning(v));
+        if (data.msg) {
+          data.msg.forEach(v => {
+            if (typeof v === 'string') sendWarning(v);
+            else sendWarning({ ...v, target: data.pathname });
+          });
+        }
         if (data.info) chartInfoDataList.push(...data.info);
         if (data.line) chartLineDataList.push(...data.line);
         const basename = getUniqueName(data.pathname, charts);
@@ -455,9 +456,10 @@ const specialClick = {
   click(id: number) {
     const now = performance.now();
     if (now - this.time[id] < 300) {
-      this.func[id]().catch((err: Error) => {
-        console.warn(err);
-        main.toast(`按太多下了！(${err.message})`); // TODO: 忽略操作
+      this.func[id]().catch((e: unknown) => {
+        console.warn(e);
+        const msg = e instanceof Error ? e.message : String(e);
+        main.toast(`按太多下了！(${msg})`); // TODO: 忽略操作
       });
     }
     this.time[id] = now;
@@ -1010,18 +1012,19 @@ async function readResource(raw: {
         if (ext != null && ext.startsWith('m')) {
           const data = ImgAny.decode(img, Number(ext.slice(1)));
           img.close();
-          res[name] = await audio.decode(data).catch(async(_err: DOMException | Error) => {
+          res[name] = await audio.decode(data).catch(async(_e: unknown) => {
             const blob1 = await fetch(raw.alternative[name], {
               referrerPolicy: 'no-referrer'
             }).then(async i => i.blob());
-            return createImageBitmap(blob1).then(ImgAny.decodeAlt).then(async ab => audio.decode(ab)).catch((err: Error) => {
+            return createImageBitmap(blob1).then(ImgAny.decodeAlt).then(async ab => audio.decode(ab)).catch((e: unknown) => {
+              const err = e instanceof Error ? e : new Error('Unknown error');
               sendWarning(`音频加载存在问题，将导致以下音频无法正常播放：\n${name}(${err.message})\n如果多次刷新问题仍然存在，建议更换设备或浏览器。`);
               return audio.mute(1);
             });
           });
         } else res[name] = img;
         sendText(`加载资源：${Math.floor(loadedNum++ / res1.length * 100)}%`);
-      }).catch(err => {
+      }).catch((err: unknown) => {
         console.error(err);
         sendError(`错误：${errorNum++}个资源加载失败（点击查看详情）`, `资源加载失败，请检查您的网络连接然后重试：\n${new URL(url, location.toString()).toString()}`, true);
       });
@@ -1071,11 +1074,11 @@ function mainLoop() {
     ctxfg.fillRect(0, 0, canvasfg.width, canvasfg.height);
     self.setTimeout(() => {
       if (!isOutOver) return; // 避免快速重开后直接结算
-      const difficulty = ['ez', 'hd', 'in', 'at'].indexOf(levelText.slice(0, 2).toLocaleLowerCase());
+      const difficulty = levelInfoHandler.getDifficultyIndex();
       musicController.play(res[`LevelOver${difficulty < 0 ? 2 : difficulty}_v1`] as AudioBuffer, { loop: true });
       timeEnd.reset();
       timeEnd.play();
-      stat.level = Number(/\d+$/.exec(levelText));
+      stat.level = levelInfoHandler.getLevelNumber();
       tempStat = stat.getData(app.playMode === 1, selectspeed.value);
     }, 1e3);
   } // 只让它执行一次
@@ -1147,7 +1150,7 @@ function loopNoCanvas() {
   tmps.artist = inputArtist.value;
   tmps.illustrator = `Illustration designed by ${inputIllustrator.value || inputIllustrator.placeholder}`;
   tmps.charter = `Level designed by ${inputCharter.value || inputCharter.placeholder}`;
-  tmps.level = levelText;
+  tmps.level = levelInfoHandler.text;
   if (stat.combo > 2) {
     tmps.combo = `${stat.combo}`;
     tmps.combo2 = app.playMode === 1 ? 'Autoplay' : 'combo';
@@ -1351,7 +1354,7 @@ function atDraw3(statData: StatData) {
   ctxfg.fillStyle = '#fff';
   ctxfg.textAlign = 'left';
   fillTextNode(inputName.value || inputName.placeholder, 700 * tween.easeOutCubic(clip(timeEnd.second * 1.25)) - 320, 160, 80, 1500);
-  const textWidth = fillTextNode(levelText, 700 * tween.easeOutCubic(clip(timeEnd.second * 1.25)) - 317, 212, 30, 750);
+  const textWidth = fillTextNode(levelInfoHandler.text, 700 * tween.easeOutCubic(clip(timeEnd.second * 1.25)) - 317, 212, 30, 750);
   ctxfg.font = '30px Custom,Noto Sans SC';
   // Rank图标
   ctxfg.globalAlpha = clip((timeEnd.second - 1.87) * 3.75);
@@ -1536,30 +1539,6 @@ function bytefm(byte = 0) {
   if ((result /= 1024) < 1024) return `${result.toFixed(2)}YB`;
   result /= 1024; return `${result}BB`;
 }
-const updateLevelText = (type: number) => {
-  const table = { sp: [0, 0], ez: [1, 7], hd: [3, 12], in: [6, 15], at: [13, 16] } as Record<string, [number, number]>;
-  let diffStr = (selectDifficulty.value || 'SP').toLowerCase();
-  let levelNum = Number(selectLevel.value) | 0;
-  if (type === 0) {
-    const diff = table[diffStr];
-    if (levelNum < diff[0]) levelNum = diff[0];
-    if (levelNum > diff[1]) levelNum = diff[1];
-    selectLevel.value = levelNum.toString();
-    selectLevel.value = selectLevel.value;
-  } else if (type === 1) {
-    const keys = Object.keys(table);
-    if (table[diffStr][1] < levelNum) diffStr = keys.find(key => table[key][1] >= levelNum) ?? 'SP';
-    else if (table[diffStr][0] > levelNum) diffStr = keys.reverse().find(key => table[key][0] <= levelNum) ?? 'SP';
-    selectDifficulty.value = diffStr.toUpperCase();
-    selectDifficulty.value = selectDifficulty.value;
-  }
-  const diffString = selectDifficulty.value || 'SP';
-  const levelString = selectLevel.value || '?';
-  return [diffString, levelString].join('\u2002Lv.');
-};
-levelText = updateLevelText(-1);
-selectDifficulty.addEventListener('change', () => levelText = updateLevelText(0));
-selectLevel.addEventListener('change', () => levelText = updateLevelText(1));
 selectVolume.addEventListener('change', evt => {
   const volume = Number((evt.target as HTMLInputElement).value);
   app.musicVolume = Math.min(1, 1 / volume);
@@ -1653,7 +1632,7 @@ async function mainPlay(): Promise<void> {
     app.prerenderChart(main.modify(charts.get(selectchart.value)!));
     const md5 = chartsMD5.get(selectchart.value)!;
     const format = chartsFormat.get(selectchart.value)!;
-    stat.level = Number(/\d+$/.exec(levelText));
+    stat.level = levelInfoHandler.getLevelNumber();
     if (app.chart != null) stat.reset(app.chart.numOfNotes, md5, format, selectspeed.value);
     await loadLineData({ onwarn: sendWarning });
     duration0 = app.duration / app.speed;
@@ -1825,6 +1804,7 @@ main.use(import('@/plugins/export.js') as unknown as Promise<ModuleBase>);
 main.use(import('@/plugins/gauge.js') as unknown as Promise<ModuleBase>);
 main.use(import('@/plugins/dynamic-score.js') as unknown as Promise<ModuleBase>);
 main.use(import('@/plugins/video-recorder.js') as unknown as Promise<ModuleBase>);
+main.use(import('@/plugins/online.js') as unknown as Promise<ModuleBase>);
 // debug
 self.hook = main;
 export const hook = main;
@@ -1876,7 +1856,7 @@ Object.defineProperty(main, 'time', {
       //   a.scored = 0;
       //   a.holdStatus = 1; });
       // stat.reset();
-      if (isPlaying) await mainPause().catch(console.warn); // FIXME: video+gauge结算时会报错
+      if (isPlaying) await mainPause().catch((e: unknown) => console.error(e)); // FIXME: video+gauge结算时会报错
     };
     handler();
   }
@@ -1920,3 +1900,21 @@ main.afterAll.set('main::cover', () => {
   }
 });
 /* exported hook */
+if (new URLSearchParams(location.search).has('iframe')) {
+  document.body.classList.add('iframe');
+  stage.setFull(true);
+  stage.resize();
+  specialClick.func[3] = async() => Promise.resolve(window.parent.postMessage('full', '*'));
+}
+self.onmessage = evt => {
+  console.log('onmessage', evt);
+  if (evt.data instanceof File) {
+    const reader1 = new FileReader();
+    reader1.readAsArrayBuffer(evt.data);
+    reader1.onload = () => {
+      uploader.fireLoad(evt.data as File, reader1.result as ArrayBuffer);
+    };
+  } else if (evt.data === 'play') {
+    mainPlay();
+  }
+};
diff --git a/src/js/common.js b/src/js/common.js
index e8d5ccf..95d2c83 100644
--- a/src/js/common.js
+++ b/src/js/common.js
@@ -185,6 +185,18 @@ export const isUndefined = name => self[name] === undefined;
       }
     });
   }
+  // Array.prototype.findLast polyfill
+  if (Array.prototype.findLast === undefined) {
+    // eslint-disable-next-line no-extend-native
+    Object.defineProperty(Array.prototype, 'findLast', {
+      value(predicate, thisArg) {
+        for (let i = this.length - 1; i >= 0; i--) {
+          if (predicate.call(thisArg, this[i], i, this)) return this[i];
+        }
+        return undefined;
+      }
+    });
+  }
   // Array.prototype.toReversed polyfill
   if (Array.prototype.toReversed === undefined) {
     // eslint-disable-next-line no-extend-native
diff --git a/src/plugins/demo/reverse.js b/src/plugins/demo/reverse.js
index 0a2bf74..ec49221 100644
--- a/src/plugins/demo/reverse.js
+++ b/src/plugins/demo/reverse.js
@@ -64,108 +64,74 @@ function arrangeLineEvent(events) {
   }
   return JSON.parse(JSON.stringify(newEvents2));
 }
-class JudgeLineEvent {
-  constructor(start, end, start2, end2, startTime, endTime) {
-    this.startTime = startTime;
-    this.endTime = endTime;
-    this.start = start;
-    this.end = end;
-    this.start2 = start2;
-    this.end2 = end2;
-  }
+function reverseLineEvent(evt, tb) {
+  const start = evt.end;
+  evt.end = evt.start;
+  evt.start = start;
+  const start2 = evt.end2;
+  evt.end2 = evt.start2;
+  evt.start2 = start2;
+  const startTime = tb - evt.endTime;
+  evt.endTime = tb - evt.startTime;
+  evt.startTime = startTime;
 }
-class Note {
-  constructor(type, time, positionX, holdTime, speed) {
-    this.type = type;
-    this.time = time;
-    this.positionX = positionX;
-    this.holdTime = holdTime;
-    this.speed = speed;
-    this.floorPosition = 0;
+function reverseNote(note, tb) {
+  note.time = tb - note.time;
+  if (note.type === 3) {
+    note.speed *= note.holdTime;
+    note.holdTime = 1;
   }
 }
-class SpeedEvent {
-  constructor(value, startTime, endTime) {
-    this.startTime = startTime;
-    this.endTime = endTime;
-    this.floorPosition = 0;
-    this.value = value;
-  }
+function reverseSpeedEvent(evt, tb) {
+  const startTime = tb - evt.endTime;
+  evt.endTime = tb - evt.startTime;
+  evt.startTime = startTime;
 }
-class JudgeLine {
-  constructor() {
-    this.numOfNotes = 0;
-    this.numOfNotesAbove = 0;
-    this.numOfNotesBelow = 0;
-    this.bpm = 120;
-    /** @type {SpeedEvent[]} */
-    this.speedEvents = [];
-    /** @type {Note[]} */
-    this.notesAbove = [];
-    /** @type {Note[]} */
-    this.notesBelow = [];
-    /** @type {JudgeLineEvent[]} */
-    this.judgeLineDisappearEvents = [];
-    /** @type {JudgeLineEvent[]} */
-    this.judgeLineMoveEvents = [];
-    /** @type {JudgeLineEvent[]} */
-    this.judgeLineRotateEvents = [];
+function updateSefp(line) {
+  let y = 0;
+  line.speedEvents.sort((a, b) => a.startTime - b.startTime);
+  for (const evt of line.speedEvents) {
+    if (evt.startTime < 0) evt.startTime = 0;
+    evt.floorPosition = y;
+    y += (evt.endTime - evt.startTime) * evt.value / line.bpm * 1.875;
   }
-  updateSefp() {
-    let y = 0;
-    this.speedEvents.sort((a, b) => a.startTime - b.startTime);
-    for (const evt of this.speedEvents) {
-      if (evt.startTime < 0) evt.startTime = 0;
-      evt.floorPosition = y;
-      y += (evt.endTime - evt.startTime) * evt.value / this.bpm * 1.875;
-    }
-    this.speedEvents[this.speedEvents.length - 1].endTime = 1e9;
-    for (const note of this.notesAbove) {
-      let owo = 0;
-      let owo2 = 0;
-      let owo3 = 0;
-      for (const evt of this.speedEvents) {
-        if (note.time % 1e9 > evt.endTime) continue;
-        if (note.time % 1e9 < evt.startTime) break;
-        owo = evt.floorPosition;
-        owo2 = evt.value;
-        owo3 = note.time % 1e9 - evt.startTime;
-      }
-      note.floorPosition = owo + owo2 * owo3 / this.bpm * 1.875;
-      // if (j.type === 3) j.speed *= owo2;
-    }
-    for (const note of this.notesBelow) {
-      let owo = 0;
-      let owo2 = 0;
-      let owo3 = 0;
-      for (const evt of this.speedEvents) {
-        if (note.time % 1e9 > evt.endTime) continue;
-        if (note.time % 1e9 < evt.startTime) break;
-        owo = evt.floorPosition;
-        owo2 = evt.value;
-        owo3 = note.time % 1e9 - evt.startTime;
-      }
-      note.floorPosition = owo + owo2 * owo3 / this.bpm * 1.875;
-      // if (j.type === 3) j.speed *= owo2;
+  line.speedEvents[line.speedEvents.length - 1].endTime = 1e9;
+  for (const note of line.notesAbove) {
+    let owo = 0;
+    let owo2 = 0;
+    let owo3 = 0;
+    for (const evt of line.speedEvents) {
+      if (note.time % 1e9 > evt.endTime) continue;
+      if (note.time % 1e9 < evt.startTime) break;
+      owo = evt.floorPosition;
+      owo2 = evt.value;
+      owo3 = note.time % 1e9 - evt.startTime;
     }
+    note.floorPosition = owo + owo2 * owo3 / line.bpm * 1.875;
+    // if (j.type === 3) j.speed *= owo2;
   }
-  updateDe() {
-    this.judgeLineDisappearEvents.sort((a, b) => a.startTime - b.startTime);
-    this.judgeLineMoveEvents.sort((a, b) => a.startTime - b.startTime);
-    this.judgeLineRotateEvents.sort((a, b) => a.startTime - b.startTime);
-    this.judgeLineDisappearEvents = arrangeLineEvent(this.judgeLineDisappearEvents);
-    this.judgeLineMoveEvents = arrangeLineEvent(this.judgeLineMoveEvents);
-    this.judgeLineRotateEvents = arrangeLineEvent(this.judgeLineRotateEvents);
+  for (const note of line.notesBelow) {
+    let owo = 0;
+    let owo2 = 0;
+    let owo3 = 0;
+    for (const evt of line.speedEvents) {
+      if (note.time % 1e9 > evt.endTime) continue;
+      if (note.time % 1e9 < evt.startTime) break;
+      owo = evt.floorPosition;
+      owo2 = evt.value;
+      owo3 = note.time % 1e9 - evt.startTime;
+    }
+    note.floorPosition = owo + owo2 * owo3 / line.bpm * 1.875;
+    // if (j.type === 3) j.speed *= owo2;
   }
 }
-class Chart {
-  constructor() {
-    this.formatVersion = 3;
-    this.offset = 0;
-    this.numOfNotes = 0;
-    /** @type {JudgeLine[]} */
-    this.judgeLineList = []; // Array.from(Array(24), () => new JudgeLine);
-  }
+function updateDe(line) {
+  line.judgeLineDisappearEvents.sort((a, b) => a.startTime - b.startTime);
+  line.judgeLineMoveEvents.sort((a, b) => a.startTime - b.startTime);
+  line.judgeLineRotateEvents.sort((a, b) => a.startTime - b.startTime);
+  line.judgeLineDisappearEvents = arrangeLineEvent(line.judgeLineDisappearEvents);
+  line.judgeLineMoveEvents = arrangeLineEvent(line.judgeLineMoveEvents);
+  line.judgeLineRotateEvents = arrangeLineEvent(line.judgeLineRotateEvents);
 }
 /** @type {Map<AudioBuffer|null,boolean>|null} */
 let kfcFkXqsVw50 = null;
@@ -177,42 +143,27 @@ hook.before.set('kfcFkXqsVw50', () => {
   hook.modify = hook.awawa ? a => reverse(a, hook.app.duration) : a => a;
 });
 /**
- *
- * @param {Chart} chart json
+ * @param {import('@/utils/Chart').Chart} chart json
  * @param {number} duration time/s
  */
 export function reverse(chart, duration) {
-  const chartNew = new Chart();
-  chartNew.offset = -chart.offset;
-  for (const line of chart.judgeLineList) {
-    const judgeLine = new JudgeLine();
+  const chartNew = chart.duplicate();
+  chartNew.offset = -chartNew.offset;
+  for (const line of chartNew.judgeLineList) {
     const tb = duration * line.bpm / 1.875;
-    judgeLine.bpm = line.bpm;
-    for (const evt of line.speedEvents) judgeLine.speedEvents.push(new SpeedEvent(evt.value, tb - evt.endTime, tb - evt.startTime));
-    for (const note of line.notesAbove) {
-      if (note.type === 3) judgeLine.notesAbove.push(new Note(note.type, tb - note.time, note.positionX, 1, note.speed * note.holdTime));
-      else judgeLine.notesAbove.push(new Note(note.type, tb - note.time, note.positionX, note.holdTime, note.speed));
-      judgeLine.numOfNotesAbove++;
-    }
-    for (const note of line.notesBelow) {
-      if (note.type === 3) judgeLine.notesBelow.push(new Note(note.type, tb - note.time, note.positionX, 1, note.speed * note.holdTime));
-      else judgeLine.notesBelow.push(new Note(note.type, tb - note.time, note.positionX, note.holdTime, note.speed));
-      judgeLine.numOfNotesBelow++;
-    }
-    judgeLine.numOfNotes += judgeLine.numOfNotesAbove + judgeLine.numOfNotesBelow;
-    chartNew.numOfNotes += judgeLine.numOfNotes;
-    //
-    judgeLine.updateSefp();
+    for (const evt of line.speedEvents) reverseSpeedEvent(evt, tb);
+    for (const note of line.notesAbove) reverseNote(note, tb);
+    for (const note of line.notesBelow) reverseNote(note, tb);
+    updateSefp(line);
     line.judgeLineDisappearEvents = arrangeLineEvent(line.judgeLineDisappearEvents);
     line.judgeLineMoveEvents = arrangeLineEvent(line.judgeLineMoveEvents);
     line.judgeLineRotateEvents = arrangeLineEvent(line.judgeLineRotateEvents);
-    for (const evt of line.judgeLineDisappearEvents) judgeLine.judgeLineDisappearEvents.push(new JudgeLineEvent(evt.end, evt.start, evt.end2, evt.start2, tb - evt.endTime, tb - evt.startTime));
-    for (const evt of line.judgeLineMoveEvents) judgeLine.judgeLineMoveEvents.push(new JudgeLineEvent(evt.end, evt.start, evt.end2, evt.start2, tb - evt.endTime, tb - evt.startTime));
-    for (const evt of line.judgeLineRotateEvents) judgeLine.judgeLineRotateEvents.push(new JudgeLineEvent(evt.end, evt.start, evt.end2, evt.start2, tb - evt.endTime, tb - evt.startTime));
-    judgeLine.updateDe();
-    chartNew.judgeLineList.push(judgeLine);
+    for (const evt of line.judgeLineDisappearEvents) reverseLineEvent(evt, tb);
+    for (const evt of line.judgeLineMoveEvents) reverseLineEvent(evt, tb);
+    for (const evt of line.judgeLineRotateEvents) reverseLineEvent(evt, tb);
+    updateDe(line);
   }
-  return JSON.parse(JSON.stringify(chartNew)); // 规范判定线事件
+  return chartNew.duplicate(); // 规范判定线事件
 }
 /**
  * @param {HTMLElement} elem
diff --git a/src/plugins/online.js b/src/plugins/online.js
new file mode 100644
index 0000000..360a466
--- /dev/null
+++ b/src/plugins/online.js
@@ -0,0 +1,138 @@
+import { parseCSV } from '@/utils/parseCSV';
+export default hook.define({
+  name: 'Online Resource',
+  description: 'Provides online resource',
+  contents: [
+    {
+      type: 'command',
+      meta: ['/a', dialog]
+    }
+  ]
+});
+const { sendText, uploader } = hook;
+const host = atob('aHR0cHM6Ly9iay0xMzAyMTcxMzY0LmNvcy5hcC1zaGFuZ2hhaS5teXFjbG91ZC5jb20v');
+const getResourseUrl = (url = '') => new URL(url, host).href;
+// eslint-disable-next-line no-alert
+const vprompt = str => prompt(`${str}`);
+const valert = str => hook.toast(`${str}`);
+const msgNetErr = err => {
+  valert(`无法连接至服务器\n错误代码：${err.message}`);
+  sendText('无法连接至服务器');
+};
+async function dialog(str) {
+  const url = str || vprompt('请输入资源URL');
+  if (url === '' || url == null) { valert('未输入URL，已取消操作'); return }
+  const data = await query(url).catch(msgNetErr);
+  console.log(data);
+}
+async function query(path = '') {
+  const base = getResourseUrl(`${path}/`);
+  sendText('等待服务器响应...');
+  const resList = [];
+  const encoder = new TextEncoder();
+  const resInfo = await fetch(new URL('info.csv', base));
+  if (resInfo.ok) {
+    const textInfo = await resInfo.text();
+    const csvInfo = parseCSV(textInfo, true);
+    // console.log(csvInfo);
+    for (const row of csvInfo) {
+      if (row.Chart) resList.push(new URL(row.Chart, base));
+      if (row.Music) resList.push(new URL(row.Music, base));
+      if (row.Image) resList.push(new URL(row.Image, base));
+    }
+    const info = encoder.encode(textInfo);
+    uploader.fireLoad({ name: 'info.csv' }, info.buffer);
+  } else throw new Error(`${resInfo.status} ${resInfo.statusText}`);
+  const resLine = await fetch(new URL('line.csv', base));
+  if (resLine.ok) {
+    const textLine = await resLine.text();
+    const csvLine = parseCSV(textLine, true);
+    // console.log(csvLine);
+    for (const row of csvLine) {
+      if (row.Chart) resList.push(new URL(row.Chart, base));
+      if (row.Image) resList.push(new URL(row.Image, base));
+    }
+    const line = encoder.encode(textLine);
+    uploader.fireLoad({ name: 'line.csv' }, line.buffer);
+  } // else throw new Error(`${resLine.status} ${resLine.statusText}`);
+  const downloader = new Downloader();
+  await downloader.add(resList, ({ url, status, statusText }) => {
+    valert(`资源 '${url}' 加载失败\n错误代码：${status} ${statusText}`);
+  });
+  await downloader.start(uploader.fireProgress.bind(uploader));
+  const dstr = str => decodeURIComponent(str.match(/[^/]+$/)[0]);
+  for (const res of resList) {
+    const data1 = await downloader.getData(res) || new ArrayBuffer(0);
+    uploader.fireLoad({ name: dstr(res.toString()) }, data1); // 以后添加catch
+  }
+}
+/**
+ * @typedef {(ev:ProgressEvent<XMLHttpRequest>)} XHR
+ * @param {string} url
+ * @param {XHR} onprogress
+ */
+function xhr2(url, onprogress = _ => {}) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    xhr.responseType = 'arraybuffer';
+    xhr.onprogress = onprogress;
+    xhr.onload = evt => (xhr.status === 200 ? resolve : reject)(evt);
+    xhr.onerror = reject;
+    xhr.send();
+  });
+}
+async function getContentLength(url) {
+  try {
+    const res = await fetch(url, { method: 'HEAD' }).catch(() => {
+      throw Object.assign(new Error(), { url, status: 0, statusText: 'Network Error' });
+    });
+    const length = res.headers.get('content-length'); // 踩坑：这里的length是字符串
+    if (length == null) throw new Error('No Content-Length Header');
+    if (res.ok) return Number(length);
+  } catch (_) {
+    const res = await fetch(url, { method: 'GET' }).catch(() => {
+      throw Object.assign(new Error(), { url, status: 0, statusText: 'Network Error' });
+    });
+    res.body.cancel();
+    if (!res.ok) throw Object.assign(new Error(), { url, status: res.status, statusText: res.statusText });
+    return Number(res.headers.get('content-length')) || 0;
+  }
+  throw Object.assign(new Error(), { url, status: 0, statusText: 'Unknown Error' });
+}
+function Downloader() {
+  this.xhrs = Object.create(null);
+}
+Downloader.prototype.add = function(urls = [], onerror = _ => {}) {
+  return Promise.all(urls.
+    filter(url => !this.xhrs[url]).
+    map(async url => {
+      try {
+        const total = await getContentLength(url);
+        this.xhrs[url] = { event: { loaded: 0, total } };
+      } catch (result) {
+        onerror(result);
+      }
+    }));
+};
+Downloader.prototype.start = function(onprogress = (..._) => {}) {
+  const entries = Object.entries(this.xhrs);
+  return Promise.all(entries.map(([url, xhr]) => xhr2(url, evt => {
+    xhr.event = evt;
+    onprogress(this.loaded, this.total);
+  }).then(evt => xhr.event = evt).catch(evt => xhr.event = evt)));
+};
+Downloader.prototype.getData = function(url) {
+  if (!this.xhrs[url]) return null;
+  const { event } = this.xhrs[url];
+  if (event.loaded >= event.total) return event.target.response;
+  return null;
+};
+Object.defineProperty(Downloader.prototype, 'loaded', { get() {
+  const values = Object.values(this.xhrs);
+  return values.reduce((loaded, xhr) => loaded + xhr.event.loaded, 0);
+} });
+Object.defineProperty(Downloader.prototype, 'total', { get() {
+  const values = Object.values(this.xhrs);
+  return values.reduce((total, xhr) => total + Math.max(xhr.event.loaded, xhr.event.total), 0);
+} });
diff --git a/src/style.css b/src/style.css
index fc579e4..26f5602 100644
--- a/src/style.css
+++ b/src/style.css
@@ -268,3 +268,11 @@ body {
 .bm-item:last-child > .bm-rbtn {
   padding-bottom: 0;
 }
+
+body.iframe {
+  visibility: hidden;
+}
+
+body.iframe #stage {
+  visibility: visible;
+}
diff --git a/src/utils/checkSupport.ts b/src/utils/checkSupport.ts
index f286623..3d4ad37 100644
--- a/src/utils/checkSupport.ts
+++ b/src/utils/checkSupport.ts
@@ -32,9 +32,11 @@ export async function checkSupport({
     const errmsg1 = `错误：${name}组件加载失败（点击查看详情）`;
     const errmsg2 = `${name}组件加载失败，请检查您的网络连接然后重试：`;
     const errmsg3 = `${name}组件加载失败，请检查浏览器兼容性`;
-    const errCatch = (e: Error) => errorCallback(errmsg1, e.message.replace(/.+/, errmsg2), true);
     messageCallback(`加载${name}组件...`);
-    await loadJS(urls).catch(errCatch);
+    await loadJS(urls).catch((e: unknown) => {
+      const msg = e instanceof Error ? e.message : String(e);
+      errorCallback(errmsg1, msg.replace(/.+/, errmsg2), true);
+    });
     if (!check()) return true;
     errorCallback(errmsg1, errmsg3, true);
     return false;
diff --git a/src/utils/reader.ts b/src/utils/reader.ts
index 7093158..aaef840 100644
--- a/src/utils/reader.ts
+++ b/src/utils/reader.ts
@@ -66,7 +66,7 @@ export class ZipReader extends EventTarget {
           const result = await this.handler(data.data);
           this.dispatchEvent(new CustomEvent('read', { detail: result }));
         };
-        handler().catch((err: Error) => this.dispatchEvent(new CustomEvent('error', { detail: err })));
+        handler().catch((e: unknown) => this.dispatchEvent(new CustomEvent('error', { detail: e })));
       });
       this.worker = worker;
     }
@@ -181,9 +181,9 @@ async function defaultDecode(arraybuffer: ArrayBuffer) {
   return new Promise((resolve: (value: AudioBuffer) => void, reject) => {
     const a = actx.decodeAudioData(arraybuffer, resolve, reject);
     if (a instanceof Promise) a.then(resolve, reject);
-  }).catch(err => {
-    if (err == null) throw new DOMException('Unable to decode audio data', 'EncodingError');
-    throw err;
+  }).catch((e: unknown) => {
+    if (e instanceof Error) throw e;
+    throw new DOMException('Unable to decode audio data', 'EncodingError');
   });
 }
 function createReader(define: ((readerInit: ReaderInit) => ByteReader)) {
diff --git a/tools/eslint-config-ts.cjs b/tools/eslint-config-ts.cjs
index 4e632d2..aa84bef 100644
--- a/tools/eslint-config-ts.cjs
+++ b/tools/eslint-config-ts.cjs
@@ -36,6 +36,7 @@ module.exports = {
     '@typescript-eslint/prefer-destructuring': 'off',
     '@typescript-eslint/prefer-nullish-coalescing': 'off',
     '@typescript-eslint/prefer-readonly-parameter-types': 'off',
+    '@typescript-eslint/prefer-optional-chain': ['error', { requireNullish: true }],
     'default-param-last': 'off', // qwq
     'no-invalid-this': 'off', // qwq
     'no-redeclare': 'off', // qwq