danoniplus 47.1.1 → 47.3.2

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2026/04/22
+ * Revised : 2026/04/25
  *
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 47.1.1`;
-const g_revisedDate = `2026/04/22`;
+const g_version = `Ver 47.3.2`;
+const g_revisedDate = `2026/04/25`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
@@ -3451,7 +3451,11 @@ const createSplitCanvases = (_width, _totalHeight, _dpr) => {
 
 /**
  * 描画対象のCanvasを判定して描画を実行する
- * @param {HTMLCanvasElement[]} _canvases
+ * @param {object[]} _canvases
+ * @param {HTMLCanvasElement} _canvases[].canvas 分割されたCanvas要素
+ * @param {CanvasRenderingContext2D} _canvases[].ctx Canvasの描画コンテキスト
+ * @param {number} _canvases[].offsetTop Canvasの論理上のオフセット位置
+ * @param {number} _canvases[].logicalHeight Canvasの論理上の高さ
  * @param {number} _y
  * @param {number} _h
  * @param {number} _dpr
@@ -7286,6 +7290,7 @@ const drawSpeedGraph = _scoreId => {
 		speed: { frame: [0], speed: [1], cnt: 0, strokeColor: g_graphColorObj.speed },
 		boost: { frame: [0], speed: [1], cnt: 0, strokeColor: g_graphColorObj.boost }
 	};
+	const dpr = window.devicePixelRatio || 1;
 
 	const tmpSpeedPoint = [0];
 	Object.keys(speedObj).forEach(speedType => {
@@ -7837,18 +7842,40 @@ const makeHighScore = _scoreId => {
 	}
 };
 
-const drawMinimap = (_scoreId, _initFlg = false) => {
+/**
+ * 譜面ミニマップを描画し、適切なスクロール位置へ調整する。
+ * デフォルトはスクロール反転で、現在位置を保つように上下反転する。
+ * @param {string} _scoreId - 描画対象の譜面ID
+ * @param {object} [_options={}] - オプションパラメータ
+ * @param {boolean} [_options._initFlg=false] - 譜面切替モード
+ * - 前の譜面での演奏進行度（時間軸の比率）を算出し、新しい譜面でも同じ進行位置を表示する。
+ *   位置記憶がない場合はフェードイン設定に基づく初期位置を表示。
+ * @param {boolean} [_options._fadeinFlg=false] - フェードインモード。フェードイン設定値を優先して移動する。
+ */
+const drawMinimap = (_scoreId, { _initFlg = false, _fadeinFlg = false } = {}) => {
 	const detailMiniMap = document.getElementById(`detailMiniMap`);
 	if (detailMiniMap === null) return;   // scoreDetailUse=false 等で未生成の場合は何もしない
 
-	const currentScrollTop = document.getElementById(`detailMiniMapSub`)
-		? document.getElementById(`detailMiniMapSub`).scrollTop : 0;
+	const isRev = g_stateObj.miniMapRevFlg;
+	const subEl = document.getElementById(`detailMiniMapSub`);
+	const currentScrollTop = subEl ? subEl.scrollTop : 0;
+
+	// 前の譜面でスクロール可能な状態だったかを判定
+	const hasPreviousScrollRange = subEl && subEl.scrollHeight > subEl.clientHeight;
+
+	// 前の譜面での「スクロール位置の比率」を計算
+	// 完全に一番上のときは 0、一番下のときは 1 となる比率
+	let progressRatio = 0;
+	if (hasPreviousScrollRange) {
+		const rawRatio = currentScrollTop / (subEl.scrollHeight - subEl.clientHeight);
+		// リバース時は「上が終点」なので、進行度としては反転させる
+		progressRatio = isRev ? (1.0 - rawRatio) : rawRatio;
+	}
 
 	// 再描画のため一度クリア
 	deleteChildspriteAll(`detailMiniMap`);
 
-	// drawMinimap 内の Canvas 追加部分
-	const isRev = g_stateObj.miniMapRevFlg;
+	// --- ミニマップ生成/取得 (Lazy Generation) ---
 	let savedCanvases = isRev
 		? g_detailObj.scoreMinimapReverse[_scoreId]
 		: g_detailObj.scoreMinimap[_scoreId];
@@ -7868,27 +7895,25 @@ const drawMinimap = (_scoreId, _initFlg = false) => {
 
 	// --- ヘッダー部分 ---
 	const detailMiniMapHeader = createEmptySprite(detailMiniMap, `detailMiniMapHeader`, g_windowObj.detailMiniMapHeader);
-	$id(`detailMiniMapHeader`).top = (g_stateObj.miniMapRevFlg ? 230 : 0) + `px`;
+	$id(`detailMiniMapHeader`).top = (g_stateObj.miniMapRevFlg ? 230 + g_sHeight - 500 : 0) + `px`;
 	detailMiniMapHeader.appendChild(g_detailObj.scoreMinimapHeader[_scoreId]);
 
 	// --- メイン（譜面）部分 ---
 	const detailMiniMapSub = createEmptySprite(detailMiniMap, `detailMiniMapSub`, g_windowObj.detailMiniMapSub);
 	$id(`detailMiniMapSub`).top = (g_stateObj.miniMapRevFlg ? 0 : 15) + `px`;
 
-	detailMiniMapSub.style.overflowX = 'hidden';
-	detailMiniMapSub.style.overflowY = 'auto';
-	detailMiniMapSub.style.pointerEvents = 'auto';
-	detailMiniMapSub.style.display = 'block';
-	detailMiniMapSub.style.textAlign = 'left';
+	Object.assign(detailMiniMapSub.style, {
+		overflowX: 'hidden',
+		overflowY: 'auto',
+		pointerEvents: 'auto',
+		display: 'block',
+		textAlign: 'left',
+	});
 
 	if (savedCanvases && Array.isArray(savedCanvases)) {
 		// 退避したCanvasそのものをDOMに追加（再描画不要で高速）
-		detailMiniMapSub.style.overflow = C_DIS_AUTO;
-		detailMiniMapSub.style.pointerEvents = C_DIS_AUTO;
 		savedCanvases.forEach(canvas => {
-			canvas.style.position = 'static';
-			canvas.style.display = 'block';
-			canvas.style.height = 'auto';
+			Object.assign(canvas.style, { position: 'static', display: 'block', height: 'auto' });
 			detailMiniMapSub.appendChild(canvas);
 		});
 	}
@@ -7901,16 +7926,36 @@ const drawMinimap = (_scoreId, _initFlg = false) => {
 		getStartFrame(lastFrame, g_stateObj.fadein, _scoreId) - firstArrowFrame
 	));
 	const fadeinScrollTop = scrollHeight * fadeinFrameOffset / playingFrame;
-	detailMiniMapSub.scrollTop = g_stateObj.miniMapRevFlg
-		? (_initFlg ? scrollHeight - currentScrollTop : scrollHeight - fadeinScrollTop)
-		: (_initFlg ? scrollHeight - currentScrollTop : fadeinScrollTop);
+	const visualFadeinPos = isRev ? scrollHeight - fadeinScrollTop : fadeinScrollTop;
+
+	// --- スクロール位置の決定ロジック
+	let targetScrollTop = 0;
+
+	if (_fadeinFlg) {
+		// 【最優先】フェードイン操作時：設定値を強制適用
+		targetScrollTop = visualFadeinPos;
+	} else if (_initFlg) {
+		// 【譜面切替時】
+		if (hasPreviousScrollRange) {
+			// 以前の進行度を継承
+			const visualRatio = isRev ? (1.0 - progressRatio) : progressRatio;
+			targetScrollTop = scrollHeight * visualRatio;
+		} else {
+			// 初回はフェードイン位置
+			targetScrollTop = visualFadeinPos;
+		}
+	} else {
+		// 【リバース切替時】物理反転
+		targetScrollTop = scrollHeight - currentScrollTop;
+	}
+	detailMiniMapSub.scrollTop = targetScrollTop;
 
 	if (document.getElementById(`lnkMiniMapRev`) === null) {
 		scoreDetail.appendChild(
 			makeDifLblCssButton(`lnkMiniMapRev`, g_lblNameObj.s_rev + `${g_stateObj.miniMapRevFlg ? `↑` : `↓`}`, 8, () => {
 				g_stateObj.miniMapRevFlg = !g_stateObj.miniMapRevFlg;
 				lnkMiniMapRev.textContent = g_lblNameObj.s_rev + `${g_stateObj.miniMapRevFlg ? `↑` : `↓`}`;
-				drawMinimap(g_stateObj.scoreId, true);
+				drawMinimap(g_stateObj.scoreId);
 				createScText(lnkMiniMapRev, `MiniMapRev`, { targetLabel: `lnkMiniMapRev`, x: -12 });
 			}, g_lblPosObj.lnkMiniMapRev)
 		);
@@ -8106,7 +8151,7 @@ const setDifficulty = (_initFlg) => {
 		drawDensityGraph(g_stateObj.scoreId);
 		makeDifInfo(g_stateObj.scoreId);
 		makeHighScore(g_stateObj.scoreId);
-		drawMinimap(g_stateObj.scoreId);
+		drawMinimap(g_stateObj.scoreId, { _initFlg: true });
 	}
 
 	// 楽曲データの表示
@@ -8189,13 +8234,18 @@ const createOptionWindow = _sprite => {
 				const bkColor = window.getComputedStyle(textBaseObj, ``).backgroundColor;
 
 				graphObj.id = `graph${_name}${j > 0 ? j + 1 : ``}`;
-				graphObj.width = g_limitObj.graphWidth;
-				graphObj.height = g_limitObj.graphHeight;
+				const dpr = window.devicePixelRatio || 1;
+				graphObj.width = g_limitObj.graphWidth * dpr;
+				graphObj.height = g_limitObj.graphHeight * dpr;
+				graphObj.style.width = wUnit(g_limitObj.graphWidth);
+				graphObj.style.height = wUnit(g_limitObj.graphHeight);
 				graphObj.style.left = wUnit(125);
 				graphObj.style.top = wUnit(0);
 				graphObj.style.position = `absolute`;
 				graphObj.style.background = j === 0 ? bkColor : `#ffffff00`;
 				graphObj.style.border = `dotted ${wUnit(2)}`;
+				const ctx = graphObj.getContext(`2d`);
+				ctx.scale(dpr, dpr);
 
 				detailObj.appendChild(graphObj);
 			}
@@ -8404,7 +8454,7 @@ const createOptionWindow = _sprite => {
 		fadeinSlider.value = g_stateObj.fadein;
 		lnkFadein.textContent = `${g_stateObj.fadein}${g_lblNameObj.percent}`;
 		updateSettingSummary();
-		drawMinimap(g_stateObj.scoreId);
+		drawMinimap(g_stateObj.scoreId, { _fadeinFlg: true });
 	};
 
 	multiAppend(spriteList.fadein,
@@ -8423,7 +8473,7 @@ const createOptionWindow = _sprite => {
 	fadeinSlider.addEventListener(`input`, () => {
 		g_stateObj.fadein = inputSlider(fadeinSlider, lnkFadein, `fadein`);
 		updateSettingSummary();
-		drawMinimap(g_stateObj.scoreId);
+		drawMinimap(g_stateObj.scoreId, { _fadeinFlg: true });
 	}, false);
 
 	// ---------------------------------------------------
@@ -11808,6 +11858,7 @@ const pushArrows = (_dataObj, _speedOnFrame, _firstArrivalFrame) => {
 		g_workObj.arrivalFrame[frmPrev] = tmpObj.arrivalFrm;
 		g_workObj.motionFrame[frmPrev] = tmpObj.motionFrm;
 		g_workObj.initBoostY[frmPrev] = calcInitBoostY(frmPrev);
+		let minNotesFrame = startPoint[lastk];
 
 		if (_frzFlg) {
 			g_workObj[`mk${camelHeader}Length`][_j] = [];
@@ -11856,6 +11907,41 @@ const pushArrows = (_dataObj, _speedOnFrame, _firstArrivalFrame) => {
 				g_workObj.initBoostY[frmPrev] = calcInitBoostY(frmPrev);
 			}
 
+			// --- 逆転検知ロジック ---
+			// 後ろからループしているため、minNotesFrameには「自分より譜面上後ろにあるノーツ」の
+			// 最小生成フレーム（最も早く出現するもの）が入っている。
+
+			// 「自分より後ろのノーツ」の方が、「自分」よりも早く出現する場合、
+			// 配列の順序と出現時間の順序が入れ替わっている（逆転）とみなす。
+			// 逆転している場合は、最小生成フレームまでさらに遡って、出現フレームを再計算する。
+			if (minNotesFrame < startPoint[k]) {
+
+				const getAdjArrowStartFrame = (_obj, _speedOnFrame, _targetFrame) => {
+					while (_obj.frm > _targetFrame) {
+						_obj.startY += _speedOnFrame[_obj.frm - 1];
+
+						if (_speedOnFrame[_obj.frm - 1] !== 0) {
+							_obj.motionFrm++;
+						}
+						_obj.frm--;
+						_obj.arrivalFrm++;
+					}
+					return _obj;
+				};
+				tmpObj = getAdjArrowStartFrame(tmpObj, _speedOnFrame, minNotesFrame);
+				startPoint[k] = tmpObj.frm;
+				frmPrev = tmpObj.frm;
+				g_workObj.initY[frmPrev] = tmpObj.startY;
+				g_workObj.arrivalFrame[frmPrev] = tmpObj.arrivalFrm;
+				g_workObj.motionFrame[frmPrev] = tmpObj.motionFrm;
+				g_workObj.initBoostY[frmPrev] = calcInitBoostY(frmPrev);
+			}
+
+			// 最小値を更新
+			if (startPoint[k] < minNotesFrame) {
+				minNotesFrame = startPoint[k];
+			}
+
 			// 出現タイミングを保存
 			setNotes(_j, k, _data, startPoint[k], camelHeader, _frzFlg,
 				{ initY: tmpObj.startY, initBoostY: g_workObj.initBoostY[frmPrev], arrivalFrame: tmpObj.arrivalFrm, motionFrame: tmpObj.motionFrm }
@@ -15382,8 +15468,12 @@ const resultInit = () => {
 	for (let j = 0; j < 2; j++) {
 		const canvas = document.createElement(`canvas`);
 		canvas.id = `graphGaugeTransition${j > 0 ? j + 1 : ``}`;
-		canvas.width = g_limitObj.gaugeTransitionWidth;
-		canvas.height = g_limitObj.gaugeTransitionHeight;
+		const dpr = window.devicePixelRatio || 1;
+		canvas.width = g_limitObj.gaugeTransitionWidth * dpr;
+		canvas.height = g_limitObj.gaugeTransitionHeight * dpr;
+		canvas.style.width = wUnit(g_limitObj.gaugeTransitionWidth);
+		canvas.style.height = wUnit(g_limitObj.gaugeTransitionHeight);
+		canvas.getContext(`2d`).scale(dpr, dpr);
 		canvas.style.left = wUnit(0);
 		canvas.style.top = wUnit(0);
 		canvas.style.position = `absolute`;
@@ -15510,13 +15600,14 @@ const resultInit = () => {
 
 		const canvas = document.getElementById(`graphGaugeTransition2`);
 		const ctx = canvas.getContext(`2d`);
-		const x = cursorFrame / playingFrame * canvas.width;
-		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		const [w, h] = [parseInt(canvas.style.width), parseInt(canvas.style.height)];
+		const x = cursorFrame / playingFrame * w;
+		ctx.clearRect(0, 0, w, h);
 
 		// 縦線
 		ctx.beginPath();
 		ctx.moveTo(x, 0);
-		ctx.lineTo(x, canvas.height);
+		ctx.lineTo(x, h);
 		ctx.strokeStyle = "#009999";
 		ctx.lineWidth = 1.5;
 		ctx.stroke();
@@ -15525,10 +15616,10 @@ const resultInit = () => {
 		const timer = transFrameToTimer(cursorFrame + startFrame);
 		ctx.font = `14px ${getBasicFont()}`;
 		ctx.fillStyle = "#009999";
-		ctx.textAlign = x > canvas.width * 0.8 ? C_ALIGN_RIGHT : C_ALIGN_LEFT;
+		ctx.textAlign = x > w * 0.8 ? C_ALIGN_RIGHT : C_ALIGN_LEFT;
 		ctx.fillText(
 			`${timer}`,
-			x > canvas.width * 0.8 ? x - 5 : x + 5,
+			x > w * 0.8 ? x - 5 : x + 5,
 			g_limitObj.gaugeTransitionHeight - 35
 		);
 	};
@@ -15693,22 +15784,28 @@ const resultInit = () => {
 		tmpDiv.style.background = `#000000cc`;
 		const canvas = document.createElement(`canvas`);
 		const artistName = g_headerObj.artistNames[g_headerObj.musicNos[g_stateObj.scoreId]] || g_headerObj.artistName;
+		const dpr = window.devicePixelRatio || 1;
+		const logicalWidth = 400;
+		const logicalHeight = g_sHeight - 90;
 
 		canvas.id = `resultImage`;
-		canvas.width = 400;
-		canvas.height = g_sHeight - 90;
-		canvas.style.left = wUnit((g_sWidth - canvas.width) / 2);
+		canvas.width = logicalWidth * dpr;
+		canvas.height = logicalHeight * dpr;
+		canvas.style.width = wUnit(logicalWidth);
+		canvas.style.height = wUnit(logicalHeight);
+		canvas.style.left = wUnit((g_sWidth - parseFloat(canvas.style.width)) / 2);
 		canvas.style.top = wUnit(20);
 		canvas.style.position = `absolute`;
 
 		const context = canvas.getContext(`2d`);
+		context.scale(dpr, dpr);
 		const drawText = (_text, { x = 30, dy = 0, hy, siz = 15, color = `#cccccc`, align = C_ALIGN_LEFT, font } = {}) => {
 			context.font = `${wUnit(siz)} ${getBasicFont(font)}`;
 			context.fillStyle = color;
 			context.textAlign = align;
 			context.fillText(_text, x, 35 + hy * 18 + dy);
 		};
-		makeBgCanvas(context, { h: canvas.height });
+		makeBgCanvas(context, { w: logicalWidth, h: logicalHeight });
 
 		drawText(`R`, { dy: -5, hy: 0, siz: 40, color: `#9999ff` });
 		drawText(`ESULT`, { x: 57, dy: -5, hy: 0, siz: 25 });

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2026/04/21 (v47.1.0)
+ * Revised : 2026/04/25 (v47.3.2)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -212,9 +212,9 @@ const updateWindowSiz = () => {
         difCover: { x: 20, y: 60, w: 145, h: 270 + g_sHeight - 500, opacity: 0.95, pointerEvents: C_DIS_AUTO },
         difFilter: { x: 0, y: 66, w: 140, h: 204 + g_sHeight - 500, overflow: C_DIS_AUTO, pointerEvents: C_DIS_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: 245, visibility: `hidden`, pointerEvents: C_DIS_AUTO },
+        scoreDetail: { x: 20, y: 85, w: (g_sWidth - 500) / 2 + 420, h: 245 + g_sHeight - 500, visibility: `hidden`, pointerEvents: C_DIS_AUTO },
         detailMiniMapHeader: { x: 110, y: 0, w: (g_sWidth - 500) / 2 + 310, h: 15 },
-        detailMiniMapSub: { x: 110, y: 15, w: (g_sWidth - 500) / 2 + 310, h: 230, overflow: C_DIS_AUTO, pointerEvents: C_DIS_AUTO },
+        detailMiniMapSub: { x: 110, y: 15, w: (g_sWidth - 500) / 2 + 310, h: 230 + g_sHeight - 500, overflow: C_DIS_AUTO, pointerEvents: C_DIS_AUTO },
         detailObj: { w: (g_sWidth - 500) / 2 + 420, h: 230, visibility: `hidden` },
         keyconSprite: { y: 105, h: g_sHeight - 105, overflow: C_DIS_AUTO },
         loader: { y: g_sHeight - 10, h: 10, backgroundColor: `#333333` },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "danoniplus",
-  "version": "47.1.1",
+  "version": "47.3.2",
   "description": "Dancing☆Onigiri (CW Edition) - Web-based Rhythm Game",
   "main": "./js/danoni_main.js",
   "jsdelivr": "./js/danoni_main.js",