danoniplus 43.4.0 → 43.6.0

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2026/01/04
+ * Revised : 2026/01/23
  *
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 43.4.0`;
-const g_revisedDate = `2026/01/04`;
+const g_version = `Ver 43.6.0`;
+const g_revisedDate = `2026/01/23`;
 
 // カスタム用バージョン (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`];
@@ -6658,6 +6654,7 @@ const drawSpeedGraph = _scoreId => {
 		boost: { frame: [0], speed: [1], cnt: 0, strokeColor: g_graphColorObj.boost }
 	};
 
+	const tmpSpeedPoint = [0];
 	Object.keys(speedObj).forEach(speedType => {
 		const frame = speedObj[speedType].frame;
 		const speed = speedObj[speedType].speed;
@@ -6667,22 +6664,28 @@ const drawSpeedGraph = _scoreId => {
 			if (speedData[i] >= startFrame) {
 				frame.push(speedData[i] - startFrame);
 				speed.push(speedData[i + 1]);
+				tmpSpeedPoint.push(speedData[i] - startFrame);
 			}
 			speedObj[speedType].cnt++;
 		}
 		frame.push(playingFrame);
 		speed.push(speed.at(-1));
+		tmpSpeedPoint.push(playingFrame);
 	});
+	const speedPoints = makeDedupliArray(tmpSpeedPoint).sort((a, b) => a - b);
+	let speedPointIdx = 0;
 
 	const canvas = document.getElementById(`graphSpeed`);
 	const context = canvas.getContext(`2d`);
 	const [_a, _b] = [-75, 100];
 	const [_min, _max] = [-0.2, 2.2];
-	drawBaseLine(context, { _fixed: 1, _mark: `x`, _a, _b, _min, _max });
+	const lineX = [0, 150], lineY = 208;
 
 	const avgX = [0, 0];
 	const avgSubX = [0, 0];
-	const lineX = [0, 150], lineY = 208;
+	context.clearRect(0, 0, canvas.width, canvas.height);
+	drawBaseLine(context, { _fixed: 1, _mark: `x`, _a, _b, _min, _max });
+
 	Object.keys(speedObj).forEach((speedType, j) => {
 		const frame = speedObj[speedType].frame;
 		const speed = speedObj[speedType].speed;
@@ -6699,11 +6702,13 @@ const drawSpeedGraph = _scoreId => {
 			context.lineTo(x, y);
 			preY = y;
 
-			const deltaFrame = frame[i] - (frame[i - 1] ?? startFrame);
-			avgX[j] += deltaFrame * (speed[i - 1] ?? 1);
-			if ((speed[i - 1] ?? 1) !== 1) {
+			const prevFrame = (i > 0 ? frame[i - 1] : 0);   // frame[] は startFrame 相対。初回は 0 起点
+			const deltaFrame = frame[i] - prevFrame;
+			const prevSpeed = (i > 0 ? speed[i - 1] : 1);
+			avgX[j] += deltaFrame * prevSpeed;
+			if (prevSpeed !== 1) {
 				avgSubFrame += deltaFrame;
-				avgSubX[j] += deltaFrame * (speed[i - 1]);
+				avgSubX[j] += deltaFrame * prevSpeed;
 			}
 		}
 		avgX[j] /= playingFrame;
@@ -6728,6 +6733,91 @@ const drawSpeedGraph = _scoreId => {
 		updateScoreDetailLabel(`Speed`, `${speedType}S`, speedObj[speedType].cnt, j, g_lblNameObj[`s_${speedType}`]);
 	});
 	updateScoreDetailLabel(`Speed`, `avgS`, `${(avgX[0] * avgX[1]).toFixed(2)}x`, 2, g_lblNameObj.s_avg);
+
+	/**
+	 * 速度ポインタ位置の変更
+	 * @param {number} _num 
+	 */
+	const changeSpdCursor = (_num = 1) => {
+		speedPointIdx = nextPos(speedPointIdx, _num, speedPoints.length);
+		movePointer(speedPoints[speedPointIdx]);
+	}
+
+	/**
+	 * 速度ポインタの移動
+	 * @param {number} _frame 
+	 */
+	const movePointer = _frame => {
+		const canvasP = document.getElementById(`graphSpeed2`);
+		const contextP = canvasP.getContext(`2d`);
+		contextP.clearRect(0, 0, canvas.width, canvas.height);
+
+		const offsetX = _frame * (g_limitObj.graphWidth - 30) / playingFrame + 30;
+		const speed = { speed: 0, boost: 0 };
+
+		Object.keys(speedObj).forEach(speedType => {
+			const speedFrames = speedObj[speedType].frame.concat(Infinity);
+			const speedIndex = speedObj[speedType].frame.findIndex((frame, i) => frame <= _frame && _frame < speedFrames[i + 1]);
+			speed[speedType] = speedObj[speedType].speed[speedIndex];
+			const y = (Math.min(Math.max(speed[speedType], _min - 0.05), _max + 0.05) - 1) * _a + _b;
+
+			contextP.beginPath();
+			contextP.fillStyle = g_graphColorObj[speedType];
+			contextP.arc(offsetX, y, 5, 0, 360);
+			contextP.closePath();
+			contextP.fill();
+		});
+		calculateTotalSpeed(speed.speed, speed.boost, _frame);
+	};
+
+	// 速度計算用ラベルの再作成
+	deleteDiv(detailSpeed, `lblSpdHeader`);
+	deleteDiv(detailSpeed, `lblSpdBase`);
+	deleteDiv(detailSpeed, `lblSpdOverall`);
+	deleteDiv(detailSpeed, `lblSpdBoost`);
+	deleteDiv(detailSpeed, `lblSpdTotal`);
+	deleteDiv(detailSpeed, `lblSpdFrame`);
+	deleteDiv(detailSpeed, `btnSpdCursorL`);
+	deleteDiv(detailSpeed, `btnSpdCursorR`);
+
+	multiAppend(detailSpeed,
+		createDivCss2Label(`lblSpdHeader`, `TotalSpeed`, g_lblPosObj.lblSpdHeader),
+		createDivCss2Label(`lblSpdBase`, ``, g_lblPosObj.lblSpdBase),
+		createDivCss2Label(`lblSpdOverall`, ``, g_lblPosObj.lblSpdOverall),
+		createDivCss2Label(`lblSpdBoost`, ``, g_lblPosObj.lblSpdBoost),
+		createDivCss2Label(`lblSpdTotal`, ``, g_lblPosObj.lblSpdTotal),
+		createDivCss2Label(`lblSpdFrame`, ``, g_lblPosObj.lblSpdFrame),
+		createCss2Button(`btnSpdCursorL`, `<`, () => changeSpdCursor(-1),
+			g_lblPosObj.btnSpdCursorL, g_cssObj.button_Mini),
+		createCss2Button(`btnSpdCursorR`, `>`, () => changeSpdCursor(),
+			g_lblPosObj.btnSpdCursorR, g_cssObj.button_Mini),
+	);
+	movePointer(0);
+};
+
+/**
+ * 合計速度の表示更新
+ * @param {number} _speed 
+ * @param {number} _boost 
+ * @param {number} _frame 
+ */
+const calculateTotalSpeed = (_speed = null, _boost = null, _frame = 0) => {
+	if (document.getElementById(`lblSpdOverall`) === null) {
+		return;
+	}
+	let speed, boost;
+	if (_speed !== null && _boost !== null) {
+		speed = _speed;
+		boost = _boost;
+		lblSpdOverall.textContent = `x${_speed.toFixed(2)}`;
+		lblSpdBoost.textContent = `x${_boost.toFixed(2)}`;
+	} else {
+		speed = Number(lblSpdOverall.textContent.slice(1));
+		boost = Number(lblSpdBoost.textContent.slice(1));
+	}
+	lblSpdBase.textContent = `${g_stateObj.speed.toFixed(2)}`;
+	lblSpdTotal.textContent = `=${(g_stateObj.speed * speed * boost).toFixed(2)}`;
+	lblSpdFrame.textContent = `[${transFrameToTimer(_frame + g_detailObj.startFrame[g_stateObj.scoreId])}]`;
 };
 
 /**
@@ -7357,7 +7447,7 @@ const createOptionWindow = _sprite => {
 	// 縦位置: 2  短縮ショートカットあり
 	createGeneralSetting(spriteList.speed, `speed`, {
 		skipTerms: g_settings.speedTerms, hiddenBtn: true, scLabel: g_lblNameObj.sc_speed, roundNum: 5,
-		unitName: ` ${g_lblNameObj.multi}`,
+		unitName: ` ${g_lblNameObj.multi}`, addRFunc: () => calculateTotalSpeed(),
 	});
 	if (g_headerObj.baseSpeed !== 1) {
 		divRoot.appendChild(
@@ -7371,24 +7461,26 @@ const createOptionWindow = _sprite => {
 	 * @param {boolean} _graphUseFlg
 	 * @returns {HTMLDivElement}
 	 */
-	const createScoreDetail = (_name, _graphUseFlg = true) => {
+	const createScoreDetail = (_name, _graphUseFlg = true, _graphNum = 1) => {
 		const detailObj = createEmptySprite(scoreDetail, `detail${_name}`, g_windowObj.detailObj);
 
 		if (_graphUseFlg) {
-			const graphObj = document.createElement(`canvas`);
-			const textBaseObj = document.getElementById(`lnkDifficulty`);
-			const bkColor = window.getComputedStyle(textBaseObj, ``).backgroundColor;
+			for (let j = 0; j < _graphNum; j++) {
+				const graphObj = document.createElement(`canvas`);
+				const textBaseObj = document.getElementById(`lnkDifficulty`);
+				const bkColor = window.getComputedStyle(textBaseObj, ``).backgroundColor;
 
-			graphObj.id = `graph${_name}`;
-			graphObj.width = g_limitObj.graphWidth;
-			graphObj.height = g_limitObj.graphHeight;
-			graphObj.style.left = wUnit(125);
-			graphObj.style.top = wUnit(0);
-			graphObj.style.position = `absolute`;
-			graphObj.style.background = bkColor;
-			graphObj.style.border = `dotted ${wUnit(2)}`;
+				graphObj.id = `graph${_name}${j > 0 ? j + 1 : ``}`;
+				graphObj.width = g_limitObj.graphWidth;
+				graphObj.height = 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)}`;
 
-			detailObj.appendChild(graphObj);
+				detailObj.appendChild(graphObj);
+			}
 		}
 
 		return detailObj;
@@ -7432,7 +7524,7 @@ const createOptionWindow = _sprite => {
 		};
 
 		multiAppend(scoreDetail,
-			createScoreDetail(`Speed`),
+			createScoreDetail(`Speed`, true, 2),
 			createScoreDetail(`Density`),
 			createScoreDetail(`ToolDif`, false),
 			createScoreDetail(`HighScore`, false),
@@ -8408,8 +8500,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 +11427,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 +11435,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 +11852,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);
 
 	// 曲情報・判定カウント用スプライトを作成（メインスプライトより上位）

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2026/01/04 (v43.4.0)
+ * Revised : 2026/01/23 (v43.6.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 = {
@@ -436,6 +440,33 @@ const updateWindowSiz = () => {
         lblHRank: {
             x: 290, y: 145, w: 120, h: 20, siz: 50, align: C_ALIGN_CENTER,
         },
+        lblSpdHeader: {
+            x: 5, y: 180, w: 100, h: 20, siz: g_limitObj.difSelectorSiz, align: C_ALIGN_LEFT,
+        },
+        lblSpdBase: {
+            x: 0, y: 200, w: 40, h: 20, siz: 11.5, fontWeight: `bold`,
+        },
+        lblSpdOverall: {
+            x: 40, y: 200, w: 40, h: 20, siz: 11.5,
+            color: g_graphColorObj.speedChara, fontWeight: `bold`,
+        },
+        lblSpdBoost: {
+            x: 80, y: 200, w: 40, h: 20, siz: 11.5,
+            color: g_graphColorObj.boostChara, fontWeight: `bold`,
+        },
+        lblSpdTotal: {
+            x: 5, y: 215, w: 100, h: 20, siz: g_limitObj.difSelectorSiz,
+            align: C_ALIGN_LEFT, fontWeight: `bold`,
+        },
+        lblSpdFrame: {
+            x: 70, y: 218, w: 50, h: 20, siz: 12, fontWeight: `bold`,
+        },
+        btnSpdCursorL: {
+            x: 85, y: 180, w: 15, h: 20, siz: 12,
+        },
+        btnSpdCursorR: {
+            x: 100, y: 180, w: 15, h: 20, siz: 12,
+        },
 
         /** ディスプレイ画面 */
         scMsg: {
@@ -906,7 +937,9 @@ const g_graphColorObj = {
     default3Push: `#555555cc`,
 
     speed: `#cc3333`,
+    speedChara: `#cc6666`,
     boost: `#999900`,
+    boostChara: `#999966`,
 
     clear: `#33cc33`,
     failed: `#cc3333`,
@@ -1543,8 +1576,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)],
@@ -2289,6 +2322,8 @@ const g_shortcutObj = {
         ControlLeft_KeyC: { id: `` },
         ControlRight_KeyC: { id: `` },
         KeyC: { id: `lnkHighScore`, reset: true },
+        Comma: { id: `btnSpdCursorL` },
+        Period: { id: `btnSpdCursorR` },
 
         Escape: { id: `btnBack` },
         Space: { id: `btnKeyConfig` },
@@ -4288,9 +4323,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] レーンが交互に違う方向から流れます`,
@@ -4382,9 +4416,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.4.0",
+  "version": "43.6.0",
   "description": "Dancing☆Onigiri (CW Edition) - Web-based Rhythm Game",
   "main": "./js/danoni_main.js",
   "scripts": {