danoniplus 37.0.1 → 37.2.0

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2024/06/20
+ * Revised : 2024/06/29
  * 
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 37.0.1`;
-const g_revisedDate = `2024/06/20`;
+const g_version = `Ver 37.2.0`;
+const g_revisedDate = `2024/06/29`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
@@ -43,6 +43,7 @@ const g_remoteFlg = g_rootPath.match(`^https://cwtickle.github.io/danoniplus/`)
 const g_randTime = Date.now();
 const g_isFile = location.href.match(/^file/);
 const g_isLocal = location.href.match(/^file/) || location.href.indexOf(`localhost`) !== -1;
+const isLocalMusicFile = _scoreId => g_isFile && !listMatching(getMusicUrl(g_stateObj.scoreId), [`.js`, `.txt`], { suffix: `$` });
 
 window.onload = async () => {
 	g_loadObj.main = true;
@@ -4605,7 +4606,7 @@ const makeDifList = (_difList, _targetKey = ``) => {
 	});
 	if (document.getElementById(`lblDifCnt`) === null) {
 		difCover.appendChild(createDivCss2Label(`lblDifCnt`, ``, {
-			x: 0, y: 22.5, w: g_limitObj.difCoverWidth, h: 16, siz: 12, fontWeight: `bold`,
+			x: 0, y: 27, w: g_limitObj.difCoverWidth, h: 16, siz: 12, fontWeight: `bold`,
 		}));
 	}
 	lblDifCnt.innerHTML = `${_targetKey === '' ? 'ALL' : _targetKey + 'k'}: ${curk === -1 ? '-' : curk + 1} / ${k}`;
@@ -4654,7 +4655,7 @@ const createDifWindow = (_key = ``) => {
 
 	// 全リスト
 	difCover.appendChild(
-		makeDifLblCssButton(`keyFilter`, `ALL`, 1.7, _ => {
+		makeDifLblCssButton(`keyFilter`, `ALL`, 1.9, _ => {
 			resetDifWindow();
 			g_stateObj.filterKeys = ``;
 			createDifWindow();
@@ -4739,48 +4740,56 @@ const drawSpeedGraph = _scoreId => {
 
 	const canvas = document.getElementById(`graphSpeed`);
 	const context = canvas.getContext(`2d`);
-	drawBaseLine(context);
+	const [_a, _b] = [-75, 100];
+	const [_min, _max] = [-0.2, 2.2];
+	drawBaseLine(context, { _fixed: 1, _mark: `x`, _a, _b, _min, _max });
 
 	const avgX = [0, 0];
-	const avgSubX = [1, 1];
-	const lineX = [125, 210];
+	const avgSubX = [0, 0];
+	const lineX = [0, 150], lineY = 208;
 	Object.keys(speedObj).forEach((speedType, j) => {
+		const frame = speedObj[speedType].frame;
+		const speed = speedObj[speedType].speed;
+
 		context.beginPath();
 		let preY;
-		let avgSubFrame = playingFrame;
+		let avgSubFrame = 0;
 
-		for (let i = 0; i < speedObj[speedType].frame.length; i++) {
-			const x = speedObj[speedType].frame[i] * (g_limitObj.graphWidth - 30) / playingFrame + 30;
-			const y = (speedObj[speedType].speed[i] - 1) * -90 + 105;
+		for (let i = 0; i < frame.length; i++) {
+			const x = frame[i] * (g_limitObj.graphWidth - 30) / playingFrame + 30;
+			const y = (Math.min(Math.max(speed[i], _min - 0.05), _max + 0.05) - 1) * _a + _b;
 
 			context.lineTo(x, preY);
 			context.lineTo(x, y);
 			preY = y;
 
-			const deltaFrame = speedObj[speedType].frame[i] - (speedObj[speedType].frame[i - 1] ?? startFrame);
-			avgX[j] += deltaFrame * (speedObj[speedType].speed[i - 1] ?? 1);
-			if ((speedObj[speedType].speed[i - 1] ?? 1) === 1) {
-				avgSubFrame -= deltaFrame;
-			} else {
-				avgSubX[j] += deltaFrame * (speedObj[speedType].speed[i - 1]);
+			const deltaFrame = frame[i] - (frame[i - 1] ?? startFrame);
+			avgX[j] += deltaFrame * (speed[i - 1] ?? 1);
+			if ((speed[i - 1] ?? 1) !== 1) {
+				avgSubFrame += deltaFrame;
+				avgSubX[j] += deltaFrame * (speed[i - 1]);
 			}
 		}
 		avgX[j] /= playingFrame;
 		avgSubX[j] /= Math.max(avgSubFrame, 1);
 
-		context.lineWidth = 1;
+		context.lineWidth = 2;
 		context.strokeStyle = speedObj[speedType].strokeColor;
 		context.stroke();
 
 		context.beginPath();
-		context.moveTo(lineX[j], 215);
-		context.lineTo(lineX[j] + 25, 215);
+		context.moveTo(lineX[j], lineY);
+		context.lineTo(lineX[j] + 25, lineY);
 		context.stroke();
-		context.font = `${wUnit(g_limitObj.difSelectorSiz)} ${getBasicFont()}`;
-		context.fillText(g_lblNameObj[`s_${speedType}`], lineX[j] + 30, 218);
-
+		context.font = `${wUnit(g_limitObj.mainSiz)} ${getBasicFont()}`;
+		context.fillText(g_lblNameObj[`s_${speedType}`], lineX[j] + 30, lineY + 3);
+
+		const maxSpeed = Math.max(...speed);
+		const minSpeed = Math.min(...speed);
+		context.font = `${wUnit(g_limitObj.graphMiniSiz)} ${getBasicFont()}`;
+		context.fillText(`(${minSpeed.toFixed(2)}x` + (minSpeed === maxSpeed ? `` : ` -- ${Math.max(...speed).toFixed(2)}x`) + `)`, lineX[j] + 30, lineY + 16);
+		context.fillText(`Avg. ` + (avgX[j] === 1 ? `----` : `${(avgSubX[j]).toFixed(2)}x`), lineX[j] + 30, lineY + 29);
 		updateScoreDetailLabel(`Speed`, `${speedType}S`, speedObj[speedType].cnt, j, g_lblNameObj[`s_${speedType}`]);
-		updateScoreDetailLabel(`Speed`, `avgD${speedType}`, avgSubX[j] === 1 ? `----` : `${(avgSubX[j]).toFixed(2)}x`, j + 4, g_lblNameObj[`s_avgD${speedType}`]);
 	});
 	updateScoreDetailLabel(`Speed`, `avgS`, `${(avgX[0] * avgX[1]).toFixed(2)}x`, 2, g_lblNameObj.s_avg);
 };
@@ -4855,13 +4864,16 @@ const updateScoreDetailLabel = (_name, _label, _value, _pos = 0, _labelname = _l
  * @param {object} _context 
  * @param {number} _resolution 
  */
-const drawBaseLine = (_context, _resolution = 10) => {
+const drawBaseLine = (_context, { _fixed = 2, _mark = ``, _resolution = 10, _a = -90, _b = 105, _min = 0, _max = 2 } = {}) => {
 	_context.clearRect(0, 0, g_limitObj.graphWidth, g_limitObj.graphHeight);
 
-	for (let j = 0; j <= 2 * _resolution; j += 5) {
-		drawLine(_context, j / _resolution, `main`, 2);
-		for (let k = 1; k < 5; k++) {
-			drawLine(_context, (j + k) / _resolution, `sub`, 2);
+	for (let j = _min * _resolution; j <= _max * _resolution; j += 5) {
+		for (let k = 0; k < 5; k++) {
+			if ((j + k) % 5 === 0) {
+				drawLine(_context, (j + k) / _resolution, `main`, { _fixed, _mark, _a, _b });
+			} else {
+				drawLine(_context, (j + k) / _resolution, `sub`, { _fixed, _mark, _a, _b });
+			}
 		}
 	}
 };
@@ -4873,8 +4885,8 @@ const drawBaseLine = (_context, _resolution = 10) => {
  * @param {string} _lineType 
  * @param {number} _fixed
  */
-const drawLine = (_context, _y, _lineType, _fixed = 0) => {
-	const lineY = (_y - 1) * -90 + 105;
+const drawLine = (_context, _y, _lineType, { _fixed, _mark, _a, _b } = {}) => {
+	const lineY = (_y - 1) * _a + _b;
 	_context.beginPath();
 	_context.moveTo(30, lineY);
 	_context.lineTo(g_limitObj.graphWidth, lineY);
@@ -4886,7 +4898,7 @@ const drawLine = (_context, _y, _lineType, _fixed = 0) => {
 		_context.strokeStyle = textColor;
 		_context.font = `${wUnit(12)} ${getBasicFont()}`;
 		_context.fillStyle = textColor;
-		_context.fillText(_y.toFixed(_fixed), 0, lineY + 4);
+		_context.fillText(_y.toFixed(_fixed) + _mark, 2, lineY + 4);
 	} else {
 		_context.strokeStyle = `#646464`;
 	}
@@ -5515,7 +5527,6 @@ const createOptionWindow = _sprite => {
 	// 縦位置: 5.5
 	createGeneralSetting(spriteList.shuffle, `shuffle`, g_settings.scoreDetails.length > 0 ? {
 		addRFunc: _ => makeHighScore(g_stateObj.scoreId),
-		addLFunc: _ => makeHighScore(g_stateObj.scoreId),
 	} : {});
 
 	// ---------------------------------------------------
@@ -5523,7 +5534,6 @@ const createOptionWindow = _sprite => {
 	// 縦位置: 6.5
 	createGeneralSetting(spriteList.autoPlay, `autoPlay`, g_settings.scoreDetails.length > 0 ? {
 		addRFunc: _ => makeHighScore(g_stateObj.scoreId),
-		addLFunc: _ => makeHighScore(g_stateObj.scoreId),
 	} : {});
 
 	// ---------------------------------------------------
@@ -5567,9 +5577,22 @@ const createOptionWindow = _sprite => {
 	// 縦位置: 10.5  短縮ショートカットあり
 	createGeneralSetting(spriteList.adjustment, `adjustment`, {
 		skipTerms: g_settings.adjustmentTerms, hiddenBtn: true, scLabel: g_lblNameObj.sc_adjustment, roundNum: 5,
-		unitName: g_lblNameObj.frame,
+		unitName: g_lblNameObj.frame, addRFunc: _ => viewAdjustment(),
 	});
 
+	const viewAdjustment = _ => {
+		if (g_headerObj.playbackRate !== 1) {
+			const adjustmentVal = isLocalMusicFile(g_stateObj.scoreId) ?
+				Math.round(g_stateObj.adjustment / g_headerObj.playbackRate) :
+				(g_stateObj.adjustment / g_headerObj.playbackRate).toFixed(1);
+			document.getElementById(`lnkAdjustment`).innerHTML = `${adjustmentVal}${g_lblNameObj.frame}`
+				+ `<span style="font-size:${g_limitObj.adjustmentViewOrgSiz}px"> (${g_stateObj.adjustment.toFixed(1)}${g_localStorage.adjustment === g_stateObj.adjustment ? '*' : ''})</span>`;
+			document.getElementById(`lnkAdjustment`).style.fontSize = `${g_limitObj.adjustmentViewSiz}px`;
+			document.getElementById(`lnkAdjustment`).style.lineHeight = `${g_limitObj.adjustmentLineHeight}px`;
+		}
+	};
+	viewAdjustment();
+
 	// ---------------------------------------------------
 	// フェードイン (Fadein)
 	// 縦位置: 11.5 スライダーあり
@@ -5624,7 +5647,7 @@ const createOptionWindow = _sprite => {
  * @param {object} _options
  */
 const createGeneralSetting = (_obj, _settingName, { unitName = ``,
-	skipTerms = fillArray(3, 1), hiddenBtn = false, addRFunc = _ => { }, addLFunc = _ => { },
+	skipTerms = fillArray(3, 1), hiddenBtn = false, addRFunc = _ => { }, addLFunc = addRFunc,
 	settingLabel = _settingName, displayName = g_currentPage, scLabel = ``, roundNum = 0, adjY = 0 } = {}) => {
 
 	const settingUpper = toCapitalize(_settingName);
@@ -5637,47 +5660,47 @@ const createGeneralSetting = (_obj, _settingName, { unitName = ``,
 		multiAppend(_obj,
 			makeSettingLblCssButton(linkId, `${initName}${g_localStorage[_settingName] === g_stateObj[_settingName] ? ' *' : ''}`, 0,
 				_ => {
-					setSetting(skipTerms[1], _settingName, unitName, roundNum);
-					addRFunc();
+					setSetting(skipTerms[1], _settingName, unitName, roundNum, { func: _ => addRFunc() });
 				}, {
 				cxtFunc: _ => {
-					setSetting(skipTerms[1] * (-1), _settingName, unitName, roundNum);
-					addLFunc();
+					setSetting(skipTerms[1] * (-1), _settingName, unitName, roundNum, { func: _ => addLFunc() });
 				}
 			}),
 
 			// 右回し・左回しボタン（外側）
-			makeMiniCssButton(linkId, `R`, 0, _ => {
-				setSetting(skipTerms[0], _settingName, unitName, roundNum);
-				addRFunc();
-			}),
-			makeMiniCssButton(linkId, `L`, 0, _ => {
-				setSetting(skipTerms[0] * (-1), _settingName, unitName, roundNum);
-				addLFunc();
-			}),
+			makeMiniCssButton(linkId, `R`, 0, _ =>
+				setSetting(skipTerms[0], _settingName, unitName, roundNum, { func: _ => addRFunc() })),
+			makeMiniCssButton(linkId, `L`, 0, _ =>
+				setSetting(skipTerms[0] * (-1), _settingName, unitName, roundNum, { func: _ => addLFunc() })),
 		);
 
 		// 右回し・左回しボタン（内側）
 		if (skipTerms[1] > 1) {
 			multiAppend(_obj,
-				makeMiniCssButton(linkId, `RR`, 0, _ => setSetting(skipTerms[1], _settingName, unitName, roundNum)),
-				makeMiniCssButton(linkId, `LL`, 0, _ => setSetting(skipTerms[1] * (-1), _settingName, unitName, roundNum)),
+				makeMiniCssButton(linkId, `RR`, 0, _ =>
+					setSetting(skipTerms[1], _settingName, unitName, roundNum, { func: _ => addRFunc() })),
+				makeMiniCssButton(linkId, `LL`, 0, _ =>
+					setSetting(skipTerms[1] * (-1), _settingName, unitName, roundNum, { func: _ => addLFunc() })),
 			);
 		}
 
 		// 右回し・左回しボタン（最内側）
 		if (skipTerms[2] > 1) {
 			multiAppend(_obj,
-				makeMiniCssButton(linkId, `RRR`, 0, _ => setSetting(skipTerms[2], _settingName, unitName, roundNum), { dw: -g_limitObj.setMiniWidth / 2 }),
-				makeMiniCssButton(linkId, `LLL`, 0, _ => setSetting(skipTerms[2] * (-1), _settingName, unitName, roundNum), { dw: -g_limitObj.setMiniWidth / 2 }),
+				makeMiniCssButton(linkId, `RRR`, 0, _ =>
+					setSetting(skipTerms[2], _settingName, unitName, roundNum, { func: _ => addRFunc() })
+					, { dw: -g_limitObj.setMiniWidth / 2 }),
+				makeMiniCssButton(linkId, `LLL`, 0, _ =>
+					setSetting(skipTerms[2] * (-1), _settingName, unitName, roundNum, { func: _ => addLFunc() })
+					, { dw: -g_limitObj.setMiniWidth / 2 }),
 			);
 		}
 
 		// 右回し・左回しボタン（不可視）
 		if (hiddenBtn) {
 			multiAppend(_obj,
-				makeMiniCssButton(linkId, `HR`, 0, _ => setSetting(1, _settingName, unitName, roundNum), { visibility: `hidden` }),
-				makeMiniCssButton(linkId, `HL`, 0, _ => setSetting(-1, _settingName, unitName, roundNum), { visibility: `hidden` }),
+				makeMiniCssButton(linkId, `HR`, 0, _ => setSetting(1, _settingName, unitName, roundNum, { func: _ => addRFunc() }), { visibility: `hidden` }),
+				makeMiniCssButton(linkId, `HL`, 0, _ => setSetting(-1, _settingName, unitName, roundNum, { func: _ => addLFunc() }), { visibility: `hidden` }),
 			);
 		}
 
@@ -5720,7 +5743,7 @@ const getStgDetailName = _name => {
  * @param {string} _unitName
  * @param {number} _roundNum
  */
-const setSetting = (_scrollNum, _settingName, _unitName = ``, _roundNum = 0) => {
+const setSetting = (_scrollNum, _settingName, _unitName = ``, _roundNum = 0, { func = _ => true } = {}) => {
 	let settingNum = g_settings[`${_settingName}Num`];
 	const settingList = g_settings[`${_settingName}s`];
 	const settingMax = settingList.length - 1;
@@ -5741,6 +5764,7 @@ const setSetting = (_scrollNum, _settingName, _unitName = ``, _roundNum = 0) =>
 	g_settings[`${_settingName}Num`] = settingNum;
 	document.getElementById(`lnk${toCapitalize(_settingName)}`).textContent =
 		`${getStgDetailName(g_stateObj[_settingName])}${_unitName}${g_localStorage[_settingName] === g_stateObj[_settingName] ? ' *' : ''}`;
+	func();
 };
 
 /**
@@ -6240,7 +6264,6 @@ const createSettingsDisplayWindow = _sprite => {
 	// 縦位置: 7.4
 	createGeneralSetting(spriteList.appearance, `appearance`, {
 		addRFunc: _ => dispAppearanceSlider(),
-		addLFunc: _ => dispAppearanceSlider(),
 	});
 
 	// Hidden+/Sudden+初期値用スライダー、ロックボタン
@@ -7740,10 +7763,11 @@ const scoreConvert = (_dosObj, _scoreId, _preblankFrame, _dummyNo = ``,
 	obj.dummyArrowData = [];
 	obj.dummyFrzData = [];
 
-	// realAdjustment: 全体, intAdjustment: 整数値のみ(切り捨て), decimalAdjustment: 小数値のみ
+	// realAdjustment: 全体, intAdjustment: 整数値のみ(切り捨て、ファイル時のみ四捨五入), decimalAdjustment: 小数値のみ
 	const headerAdjustment = parseFloat(g_headerObj.adjustment[g_stateObj.scoreId] || g_headerObj.adjustment[0]);
-	g_stateObj.realAdjustment = parseFloat(g_stateObj.adjustment) + headerAdjustment + _preblankFrame;
-	g_stateObj.intAdjustment = Math.floor(g_stateObj.realAdjustment);
+	g_stateObj.realAdjustment = (parseFloat(g_stateObj.adjustment) + headerAdjustment) / g_headerObj.playbackRate + _preblankFrame;
+	g_stateObj.intAdjustment = isLocalMusicFile(g_stateObj.scoreId) ?
+		Math.round(g_stateObj.realAdjustment) : Math.floor(g_stateObj.realAdjustment);
 	g_stateObj.decimalAdjustment = g_stateObj.realAdjustment - g_stateObj.intAdjustment;
 
 	const blankFrame = g_headerObj.blankFrame;
@@ -9393,7 +9417,8 @@ const mainInit = _ => {
 	}
 
 	// 曲名・アーティスト名、譜面名表示
-	const musicTitle = g_headerObj.musicTitles[g_headerObj.musicNos[g_stateObj.scoreId]] || g_headerObj.musicTitle;
+	const playbackView = (g_headerObj.playbackRate === 1 ? `` : ` [Rate:${g_headerObj.playbackRate}]`);
+	const musicTitle = (g_headerObj.musicTitles[g_headerObj.musicNos[g_stateObj.scoreId]] || g_headerObj.musicTitle) + playbackView;
 	const artistName = g_headerObj.artistNames[g_headerObj.musicNos[g_stateObj.scoreId]] || g_headerObj.artistName;
 	const assistFlg = (g_autoPlaysBase.includes(g_stateObj.autoPlay) ? `` : `-${getStgDetailName(g_stateObj.autoPlay)}${getStgDetailName('less')}`);
 	const shuffleName = (g_stateObj.shuffle !== C_FLG_OFF ? `: ${getStgDetailName(g_stateObj.shuffle)}` : ``);
@@ -11058,7 +11083,7 @@ const resultInit = _ => {
 		return result;
 	};
 	const bayesExVal = 6 * bayesFunc(0, diffLength) / (diffLength * (diffLength + 1) * (diffLength + 2));
-	const estimatedAdj = (diffLength <= 20 ? `` : Math.round((g_stateObj.adjustment - bayesExVal) * 10) / 10);
+	const estimatedAdj = (diffLength <= 20 ? `` : Math.round((g_stateObj.adjustment / g_headerObj.playbackRate - bayesExVal) * 10) / 10);
 
 	// 背景スプライトを作成
 	createMultipleSprite(`backResultSprite`, g_headerObj.backResultMaxDepth);
@@ -11103,12 +11128,13 @@ const resultInit = _ => {
 	}
 
 	// 曲名・オプション描画
-	const musicTitle = g_headerObj.musicTitles[g_headerObj.musicNos[g_stateObj.scoreId]] || g_headerObj.musicTitle;
+	const playbackView = (g_headerObj.playbackRate === 1 ? `` : ` [Rate:${g_headerObj.playbackRate}]`);
+	const musicTitle = (g_headerObj.musicTitles[g_headerObj.musicNos[g_stateObj.scoreId]] || g_headerObj.musicTitle) + playbackView;
 
-	const mTitleForView = [g_headerObj.musicTitleForView[0], g_headerObj.musicTitleForView[1] || ``];
+	const mTitleForView = [g_headerObj.musicTitleForView[0], (g_headerObj.musicTitleForView[1] || ``) + playbackView];
 	if (g_headerObj.musicTitlesForView[g_headerObj.musicNos[g_stateObj.scoreId]] !== undefined) {
 		mTitleForView.forEach((mTitle, j) =>
-			mTitleForView[j] = g_headerObj.musicTitlesForView[g_headerObj.musicNos[g_stateObj.scoreId]][j]);
+			mTitleForView[j] = g_headerObj.musicTitlesForView[g_headerObj.musicNos[g_stateObj.scoreId]][j] + (j === 1 ? playbackView : ``));
 	}
 
 	const keyCtrlPtn = `${g_keyObj.currentKey}_${g_keyObj.currentPtn}`;
@@ -11274,7 +11300,8 @@ const resultInit = _ => {
 		maxCombo: 0, fmaxCombo: 0, score: 0,
 	};
 
-	const highscoreCondition = (g_stateObj.autoAll === C_FLG_OFF && (g_stateObj.shuffle === C_FLG_OFF || (mirrorName !== `` && orgShuffleFlg)));
+	const highscoreCondition = (g_stateObj.autoAll === C_FLG_OFF && g_headerObj.playbackRate === 1 &&
+		(g_stateObj.shuffle === C_FLG_OFF || (mirrorName !== `` && orgShuffleFlg)));
 	if (highscoreCondition) {
 
 		// ハイスコア差分描画

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2024/06/15 (v37.0.0)
+ * Revised : 2024/06/29 (v37.2.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -30,6 +30,11 @@ const g_limitObj = {
     adjustment: 30,
     hitPosition: 50,
 
+    // playbackRate有効時のAdjustmentの設定値の文字サイズ、行幅
+    adjustmentViewSiz: 14,
+    adjustmentViewOrgSiz: 11,
+    adjustmentLineHeight: 12,
+
     // 譜面密度グラフの分割数、上位色付け数
     densityDivision: 16,
     densityMaxVals: 3,
@@ -67,7 +72,8 @@ const g_limitObj = {
 
     // グラフ表示部分の幅、高さ
     graphWidth: 286,
-    graphHeight: 226,
+    graphHeight: 240,
+    graphMiniSiz: 12,
 
     // その他のフォントサイズ
     titleSiz: 32,
@@ -158,11 +164,11 @@ const g_lblPosObj = {};
 const updateWindowSiz = _ => {
     Object.assign(g_windowObj, {
         optionSprite: { x: (g_sWidth - 450) / 2, y: 65, w: 450, h: 325 },
-        difList: { x: 165, y: 60, w: 280, h: 265 + g_sHeight - 500, overflow: `auto` },
-        difCover: { x: 20, y: 60, w: 145, h: 265 + g_sHeight - 500, opacity: 0.95 },
-        difFilter: { x: 0, y: 61, w: 140, h: 204 + g_sHeight - 500, overflow: `auto` },
+        difList: { x: 165, y: 60, w: 280, h: 270 + g_sHeight - 500, overflow: `auto` },
+        difCover: { x: 20, y: 60, w: 145, h: 270 + g_sHeight - 500, opacity: 0.95 },
+        difFilter: { x: 0, y: 66, w: 140, h: 204 + g_sHeight - 500, overflow: `auto` },
         displaySprite: { x: 25, y: 30, w: (g_sWidth - 450) / 2, h: g_limitObj.setLblHeight * 5 },
-        scoreDetail: { x: 20, y: 85, w: (g_sWidth - 500) / 2 + 420, h: 240, visibility: `hidden` },
+        scoreDetail: { x: 20, y: 85, w: (g_sWidth - 500) / 2 + 420, h: 245, visibility: `hidden` },
         detailObj: { w: (g_sWidth - 500) / 2 + 420, h: 230, visibility: `hidden` },
         keyconSprite: { y: 105, h: g_sHeight - 105, overflow: `auto` },
         loader: { y: g_sHeight - 10, h: 10, backgroundColor: `#333333` },
@@ -1589,6 +1595,7 @@ const g_shortcutObj = {
         ShiftLeft_KeyA: { id: `lnkAppearanceL` },
         ShiftRight_KeyA: { id: `lnkAppearanceL` },
         KeyA: { id: `lnkAppearanceR` },
+        KeyL: { id: `lnkLockBtn` },
         ShiftLeft_KeyO: { id: `lnkOpacityL` },
         ShiftRight_KeyO: { id: `lnkOpacityL` },
         KeyO: { id: `lnkOpacityR` },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "danoniplus",
-  "version": "37.0.1",
+  "version": "37.2.0",
   "description": "Dancing☆Onigiri (CW Edition) - Web-based Rhythm Game",
   "main": "index.js",
   "scripts": {