danoniplus 43.3.0 → 43.5.0

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2026/01/02
+ * Revised : 2026/01/12
  *
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 43.3.0`;
-const g_revisedDate = `2026/01/02`;
+const g_version = `Ver 43.5.0`;
+const g_revisedDate = `2026/01/12`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
@@ -3551,10 +3551,6 @@ const headerConvert = _dosObj => {
 			setIntVal(getQueryParamVal(`h`), g_sHeight), g_sHeight);
 		$id(`canvas-frame`).height = wUnit(g_sHeight);
 	}
-	if (!(_dosObj.heightVariable || g_presetObj.heightVariable || false)) {
-		obj.heightLockFlg = true;
-		g_settings.playWindows = g_settings.playWindows.filter(val => !val.endsWith(`Slope`) && !val.endsWith(`SideScroll`));
-	}
 
 	// 曲名
 	obj.musicTitles = [`musicName`];
@@ -8408,8 +8404,6 @@ const exSettingInit = () => {
 	const spriteList = setSpriteList(g_settingPos.exSetting);
 
 	createGeneralSetting(spriteList.playWindow, `playWindow`);
-	lblPlayWindow.title += g_headerObj.heightLockFlg ? g_msgObj.sideScrollDisable : g_msgObj.sideScrollMsg;
-
 	createGeneralSetting(spriteList.stepArea, `stepArea`);
 	createGeneralSetting(spriteList.frzReturn, `frzReturn`);
 	createGeneralSetting(spriteList.shaking, `shaking`);
@@ -11337,6 +11331,7 @@ const getArrowSettings = () => {
 	g_workObj.scrollDir = [];
 	g_workObj.scrollDirDefault = [];
 	g_workObj.dividePos = [];
+	g_workObj.scale = g_keyObj.scale;
 	g_workObj.stepRtn = structuredClone(g_keyObj[`stepRtn${keyCtrlPtn}`]);
 	g_workObj.stepHitRtn = structuredClone(g_keyObj[`stepRtn${keyCtrlPtn}`]);
 	g_workObj.arrowRtn = structuredClone(g_keyObj[`stepRtn${keyCtrlPtn}`]);
@@ -11344,6 +11339,34 @@ const getArrowSettings = () => {
 	g_workObj.diffList = [];
 	g_workObj.mainEndTime = 0;
 
+	const rotateBy = (val, delta) => {
+		// numeric
+		const n = Number(val);
+		if (Number.isFinite(n)) return n + delta;
+
+		// "type:deg"
+		const [type, degStr = `0`] = String(val).split(`:`);
+		const deg = Number(degStr);
+		return Number.isFinite(deg) ? `${type}:${deg + delta}` : val;
+	};
+	const changeStepRtn = (_name, _angle) =>
+		g_workObj[_name] = g_workObj[_name].map(v => rotateBy(v, _angle));
+
+	if (g_stateObj.playWindow.endsWith(`SideScroll`)) {
+		if (g_stateObj.rotateEnabled) {
+			const sign = g_stateObj.playWindow === `SideScroll` ? 1 : -1;
+			changeStepRtn(`stepRtn`, 90 * sign);
+			changeStepRtn(`stepHitRtn`, 90 * sign);
+			changeStepRtn(`arrowRtn`, 90 * sign);
+		}
+		const div = g_keyObj[`div${keyCtrlPtn}`];
+		const divMax = g_keyObj[`divMax${keyCtrlPtn}`] ?? posMax;
+		const denom = (Math.max(div, divMax - div) + 1) * g_keyObj.blank;
+		if (Number.isFinite(denom) && denom > 0) {
+			g_workObj.scale *= Math.min(g_sHeight / denom, 1);
+		}
+	}
+
 	g_workObj.keyGroupMaps = tkObj.keyGroupMaps;
 	g_workObj.keyGroupList = tkObj.keyGroupList;
 
@@ -11733,7 +11756,7 @@ const mainInit = () => {
 
 	// ステップゾーン、矢印のメインスプライトを作成
 	const mainSprite = createEmptySprite(divRoot, `mainSprite`, mainCommonPos);
-	addTransform(`mainSprite`, `root`, `scale(${g_keyObj.scale})`);
+	addTransform(`mainSprite`, `root`, `scale(${g_workObj.scale})`);
 	addXY(`mainSprite`, `root`, g_workObj.playingX, g_posObj.stepY - C_STEP_Y + g_headerObj.playingY);
 
 	// 曲情報・判定カウント用スプライトを作成（メインスプライトより上位）
@@ -14171,10 +14194,30 @@ const resultInit = () => {
 		lblAutoView.style.fontSize = wUnit(20);
 	}
 
-	divRoot.appendChild(createCss2Button(`btnGaugeTransition`, `i`, () => true, {
-		x: g_sWidth / 2 - 250, y: 185, w: 30, h: 30, siz: g_limitObj.jdgCharaSiz,
-		resetFunc: () => changeGaugeTransition(), cxtFunc: () => changeGaugeTransition(),
-	}, g_cssObj.button_Mini));
+	// ゲージ推移グラフの描画
+	const gaugeTransitionCanvas = document.createElement(`canvas`);
+	gaugeTransitionCanvas.id = `graphGaugeTransition`;
+	gaugeTransitionCanvas.width = g_limitObj.gaugeTransitionWidth;
+	gaugeTransitionCanvas.height = g_limitObj.gaugeTransitionHeight;
+
+	createEmptySprite(divRoot, `gaugeTransitionWindow`, g_windowObj.gaugeTransition, g_cssObj.result_PlayDataWindow).appendChild(gaugeTransitionCanvas);
+
+	multiAppend(divRoot,
+		createCss2Button(`btnGaugeTransition`, `i`, () => true, {
+			x: g_sWidth / 2 - 250, y: 185, w: 30, h: 30, siz: g_limitObj.jdgCharaSiz,
+			resetFunc: () => changeGaugeTransition(), cxtFunc: () => changeGaugeTransition(),
+		}, g_cssObj.button_Mini),
+	);
+	multiAppend(gaugeTransitionWindow,
+		createCss2Button(`btnGaugeTrL`, `<`, () => true, {
+			x: -45, y: 35, w: 20, h: 30, siz: g_limitObj.jdgCharaSiz,
+			resetFunc: () => moveCursor(keyIsShift() ? -10 : -1),
+		}, g_cssObj.button_Setting),
+		createCss2Button(`btnGaugeTrR`, `>`, () => true, {
+			x: -25, y: 35, w: 20, h: 30, siz: g_limitObj.jdgCharaSiz,
+			resetFunc: () => moveCursor(keyIsShift() ? 10 : 1),
+		}, g_cssObj.button_Setting),
+	);
 	g_stateObj.gaugeTransitionViewFlg = false;
 
 	const changeGaugeTransition = () => {
@@ -14189,16 +14232,11 @@ const resultInit = () => {
 		}
 	};
 
-	// ゲージ推移グラフの描画
-	const gaugeTransitionCanvas = document.createElement(`canvas`);
-	gaugeTransitionCanvas.id = `graphGaugeTransition`;
-	gaugeTransitionCanvas.width = g_limitObj.gaugeTransitionWidth;
-	gaugeTransitionCanvas.height = g_limitObj.gaugeTransitionHeight;
-
-	createEmptySprite(divRoot, `gaugeTransitionWindow`, g_windowObj.gaugeTransition, g_cssObj.result_PlayDataWindow).appendChild(gaugeTransitionCanvas);
-
 	const startFrame = g_detailObj.startFrame[g_stateObj.scoreId];
-	const playingFrame = g_detailObj.playingFrameWithBlank[g_stateObj.scoreId];
+	let playingFrame = g_detailObj.playingFrameWithBlank[g_stateObj.scoreId];
+	if (playingFrame <= 0) {
+		playingFrame = 1;
+	}
 	const transitionObj = { frame: [0], life: [g_workObj.lifeInit] };
 
 	const frame = transitionObj.frame;
@@ -14215,57 +14253,101 @@ const resultInit = () => {
 
 	const context = gaugeTransitionCanvas.getContext(`2d`);
 	context.lineWidth = 2;
-	let preY, preX;
-	const borderY = g_limitObj.gaugeTransitionHeight - g_workObj.lifeBorder * g_limitObj.gaugeTransitionHeight / g_headerObj.maxLifeVal;
 
-	for (let i = 0; i < frame.length; i++) {
-		const x = frame[i] * g_limitObj.gaugeTransitionWidth / playingFrame;
-		const y = g_limitObj.gaugeTransitionHeight - life[i] * g_limitObj.gaugeTransitionHeight / g_headerObj.maxLifeVal;
+	const drawGaugeGraph = () => {
+		context.clearRect(0, 0, gaugeTransitionCanvas.width, gaugeTransitionCanvas.height);
 
-		if (i === 0) {
-			context.beginPath();
-			context.moveTo(x, y);
-
-		} else {
-			context.moveTo(preX, preY);
-			context.lineTo(x, preY);
+		let preX, preY;
+		const borderY = g_limitObj.gaugeTransitionHeight - g_workObj.lifeBorder * g_limitObj.gaugeTransitionHeight / g_headerObj.maxLifeVal;
 
-			if (life[i - 1] === 0 && life[i] === 0) {
-				context.strokeStyle = g_graphColorObj.failed;
-
-			} else if (life[i - 1] >= g_workObj.lifeBorder && life[i] >= g_workObj.lifeBorder) {
-				context.lineTo(x, y);
-				context.strokeStyle = g_graphColorObj.clear;
+		for (let i = 0; i < frame.length; i++) {
+			const x = frame[i] * g_limitObj.gaugeTransitionWidth / playingFrame;
+			const y = g_limitObj.gaugeTransitionHeight - life[i] * g_limitObj.gaugeTransitionHeight / g_headerObj.maxLifeVal;
 
-			} else if (life[i - 1] < g_workObj.lifeBorder && life[i] >= g_workObj.lifeBorder) {
-				context.lineTo(x, borderY);
-				context.strokeStyle = g_graphColorObj.failed;
-				context.stroke();
+			if (i === 0) {
 				context.beginPath();
-				context.moveTo(x, borderY);
-				context.lineTo(x, y);
-				context.strokeStyle = g_graphColorObj.clear;
+				context.moveTo(x, y);
+			} else {
+				context.moveTo(preX, preY);
+				context.lineTo(x, preY);
+
+				if (life[i - 1] === 0 && life[i] === 0) {
+					context.strokeStyle = g_graphColorObj.failed;
+
+				} else if (life[i - 1] >= g_workObj.lifeBorder && life[i] >= g_workObj.lifeBorder) {
+					context.lineTo(x, y);
+					context.strokeStyle = g_graphColorObj.clear;
+
+				} else if (life[i - 1] < g_workObj.lifeBorder && life[i] >= g_workObj.lifeBorder) {
+					context.lineTo(x, borderY);
+					context.strokeStyle = g_graphColorObj.failed;
+					context.stroke();
+					context.beginPath();
+					context.moveTo(x, borderY);
+					context.lineTo(x, y);
+					context.strokeStyle = g_graphColorObj.clear;
+
+				} else if (life[i - 1] >= g_workObj.lifeBorder && life[i] < g_workObj.lifeBorder) {
+					context.lineTo(x, borderY);
+					context.strokeStyle = g_graphColorObj.clear;
+					context.stroke();
+					context.beginPath();
+					context.moveTo(x, borderY);
+					context.lineTo(x, y);
+					context.strokeStyle = g_graphColorObj.failed;
+
+				} else {
+					context.lineTo(x, y);
+					context.strokeStyle = g_graphColorObj.failed;
+				}
 
-			} else if (life[i - 1] >= g_workObj.lifeBorder && life[i] < g_workObj.lifeBorder) {
-				context.lineTo(x, borderY);
-				context.strokeStyle = g_graphColorObj.clear;
 				context.stroke();
 				context.beginPath();
-				context.moveTo(x, borderY);
-				context.lineTo(x, y);
-				context.strokeStyle = g_graphColorObj.failed;
-
-			} else {
-				context.lineTo(x, y);
-				context.strokeStyle = g_graphColorObj.failed;
 			}
-
-			context.stroke();
-			context.beginPath();
+			preX = x;
+			preY = y;
 		}
-		preX = x;
-		preY = y;
 	}
+	drawGaugeGraph();
+
+	let cursorFrame = 0;   // 現在のカーソル位置（frame）
+	const moveCursor = (sec = 1) => {
+		cursorFrame = Math.max(0, Math.min(playingFrame, cursorFrame + sec * g_fps));
+		drawOverlay();
+	};
+
+	const frameToX = (_frame) => {
+		return _frame / playingFrame * gaugeTransitionCanvas.width;
+	};
+
+	// 既存のグラフを再描画しつつ縦線と時間を重ねる
+	const drawOverlay = () => {
+		// 既存のグラフを再描画
+		drawGaugeGraph();
+
+		const ctx = context;
+		const x = frameToX(cursorFrame);
+
+		// 縦線
+		ctx.beginPath();
+		ctx.moveTo(x, 0);
+		ctx.lineTo(x, gaugeTransitionCanvas.height);
+		ctx.strokeStyle = "#009999";
+		ctx.lineWidth = 1.5;
+		ctx.stroke();
+
+		// 時間表示
+		const timer = transFrameToTimer(cursorFrame + startFrame);
+		ctx.font = `14px ${getBasicFont()}`;
+		ctx.fillStyle = "#009999";
+		ctx.textAlign = x > gaugeTransitionCanvas.width * 0.8 ? C_ALIGN_RIGHT : C_ALIGN_LEFT;
+		ctx.fillText(
+			`${timer}`,
+			x > gaugeTransitionCanvas.width * 0.8 ? x - 5 : x + 5,
+			g_limitObj.gaugeTransitionHeight - 35
+		);
+	};
+	drawOverlay();
 
 	// ユーザカスタムイベント(初期)
 	const currentDateTime = new Date().toLocaleString();

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2026/01/02 (v43.3.0)
+ * Revised : 2026/01/12 (v43.5.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -165,6 +165,10 @@ $id(`canvas-frame`).margin = C_DIS_AUTO;
 
 const g_btnWidth = (_multi = 1) => Math.min(g_sWidth, g_limitObj.btnBaseWidth) * _multi;
 const g_btnX = (_multi = 0) => g_btnWidth(_multi) + Math.max((g_sWidth - g_limitObj.btnBaseWidth) / 2, 0);
+const g_slopeAngle = () => (Math.atan2(
+    g_sHeight,
+    g_keyObj[`minWidth${g_headerObj.keyLabels[g_stateObj.scoreId]}`] || g_keyObj.minWidthDefault
+) * 180) / Math.PI * 2 - 40;
 
 // 固定ウィンドウサイズ
 const g_windowObj = {
@@ -1543,8 +1547,8 @@ const g_playWindowFunc = new Map([
     ['Default', () => ``],
     ['Stairs', () => g_changeStairs(-8)],
     ['R-Stairs', () => g_changeStairs(8)],
-    ['Slope', () => g_changeStairs(-45)],
-    ['R-Slope', () => g_changeStairs(45)],
+    ['Slope', () => g_changeStairs(-g_slopeAngle())],
+    ['R-Slope', () => g_changeStairs(g_slopeAngle())],
     ['Distorted', () => g_changeSkew(-15)],
     ['R-Distorted', () => g_changeSkew(15)],
     ['SideScroll', () => g_changeStairs(-90)],
@@ -2486,6 +2490,8 @@ const g_shortcutObj = {
         KeyX: { id: `btnTweet`, reset: true }, // x
         KeyD: { id: `btnGitter`, reset: true }, // Discord
         KeyP: { id: `btnCopyImage` },
+        ArrowLeft: { id: `btnGaugeTrL` },
+        ArrowRight: { id: `btnGaugeTrR` },
         Backspace: { id: `btnRetry` },
     },
 };
@@ -4286,9 +4292,8 @@ const g_lang_msgObj = {
         d_arroweffect: `矢印・フリーズアローモーションの有効化設定`,
         d_special: `作品固有の特殊演出の有効化設定`,
 
-        playWindow: `ステップゾーン及び矢印の位置を全体的に回転する等の設定です。\n[Stairs/Slope] ステップゾーンを階段状にします\n[Distorted] 画面を歪ませます`,
-        sideScrollMsg: `\n[SideScroll] 横スクロールモードになります\n\nSlope, SideScrollを設定する場合は高さが足りているかを確認してください\nクエリパラメータ ?h=600 などで設定できます`,
-        sideScrollDisable: `\n\nウィンドウの高さの自動拡張が無効のため、Slope, SideScrollは使用できません`,
+        playWindow: `ステップゾーン及び矢印の位置を全体的に回転する等の設定です。\n[Stairs/Slope] ステップゾーンを階段状にします\n[Distorted] 画面を歪ませます\n` +
+            `[SideScroll] 横スクロールモードになります`,
         stepArea: `ステップゾーンの位置を変更します。\n[Halfway] ステップゾーンが中央に表示されます\n[2Step] ステップゾーンが2段に分かれて流れてきます\n` +
             `[Mismatched/R-Mismatched] スクロールの向きが上下で異なる方向に流れます\n` +
             `[X-Flower] レーンが花びらのように広がります\n[Alt-Crossing] レーンが交互に違う方向から流れます`,
@@ -4380,9 +4385,8 @@ const g_lang_msgObj = {
         d_arroweffect: `Enable sequences' animations`,
         d_special: `Enable setting of special effects to the work`,
 
-        playWindow: `This is the setting for overall rotation of the step zone and arrow position, etc.\n[Stairs/Slope] The step zone is in a staircase shape.\n[Distorted] Distorts the screen.`,
-        sideScrollMsg: `\n[SideScroll] It becomes a side scroll mode.\n\nWhen setting Slope or SideScroll, please make sure that the height is\nsufficient. Can be set with query parameter ?h=600, etc.`,
-        sideScrollDisable: `\n\nSlope, SideScroll cannot be used because \nautomatic window height expansion is disabled.`,
+        playWindow: `This is the setting for overall rotation of the step zone and arrow position, etc.\n[Stairs/Slope] The step zone is in a staircase shape.\n[Distorted] Distorts the screen.\n` +
+            `[SideScroll] It becomes a side scroll mode.`,
         stepArea: `Change the position of the step zone.\n[Halfway] Step zones are centered.\n[2Step] Step zones are divided into two layers.\n` +
             `[Mismatched/R-Mismatched] Scroll direction flows in different directions up and down.\n` +
             `[X-Flower] Lanes spread out like flower petals.\n[Alt-Crossing] Lanes flow from different directions alternately.`,

package/package.json

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