danoniplus 49.4.2 → 49.6.0

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2026/08/12
+ * Revised : 2026/08/16
  *
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 49.4.2`;
-const g_revisedDate = `2026/08/12`;
+const g_version = `Ver 49.6.0`;
+const g_revisedDate = `2026/08/16`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
@@ -384,7 +384,7 @@ const g_convFunc = {
  * @param {string} _checkStr 
  * @param {string} _default 
  * @param {string} [_type='string'] 
- * @returns 
+ * @returns {number|boolean|string}
  */
 const setVal = (_checkStr, _default, _type = C_TYP_STRING) =>
 	hasValN(_checkStr) ? g_convFunc[_type](_checkStr, _default) : _default;
@@ -1570,7 +1570,7 @@ const getFontSize2 = (_str, _maxWidth, { font = getBasicFont(), maxSiz = 14, min
 };
 
 /**
- * 配列中から最も長い文字列を抽出
+ * 配列中から最も長い文字列を抽出（本体では未使用）
  * @param {string[]} _array 
  * @returns {string}
  */
@@ -1688,8 +1688,8 @@ const dragDiv = (_divName, { minX = 0, minY = 0, maxX = g_sWidth, maxY = g_sHeig
 			const nextY = div.offsetTop + evt.movementY;
 			const clampMaxX = (maxX === minX) ? maxX : (maxX - div.offsetWidth);
 			const clampMaxY = (maxY === minY) ? maxY : (maxY - div.offsetHeight);
-			div.style.left = Math.min(Math.max(nextX, minX), clampMaxX) + 'px';
-			div.style.top = Math.min(Math.max(nextY, minY), clampMaxY) + 'px';
+			div.style.left = wUnit(Math.min(Math.max(nextX, minX), clampMaxX));
+			div.style.top = wUnit(Math.min(Math.max(nextY, minY), clampMaxY));
 			div.style.position = 'absolute';
 			div.draggable = false;
 			div.setPointerCapture(evt.pointerId);
@@ -1826,7 +1826,7 @@ const createMultipleSprite = (_baseName, _num, { x = 0, priority = g_transPriori
 	for (let j = 0; j <= _num; j++) {
 		createEmptySprite(sprite, `${_baseName}${j}`);
 	}
-	addTransform(_baseName, `root`, `translateX(${x}px)`, priority);
+	addTransform(_baseName, `root`, `translateX(${wUnit(x)})`, priority);
 	return sprite;
 };
 
@@ -2296,13 +2296,19 @@ const makeSpriteData = (_data, _calcFrame = _frame => _frame) => {
 			maxDepth = tmpDepth;
 		}
 
+		const colorObjFlg = tmpSpriteData[2]?.startsWith(`[c]`) || false;
+		const transformFlg = tmpSpriteData[2]?.startsWith(`[t]`) || false;
 		const tmpObj = {
 			path: escapeHtml(tmpSpriteData[2] ?? ``, g_escapeStr.escapeCode),   // 画像パス or テキスト
 			class: escapeHtml(tmpSpriteData[3] ?? ``),                          // CSSクラス
-			left: setVal(tmpSpriteData[4], `0`).includes(`{`) ?
-				`${setVal(tmpSpriteData[4], 0)}` : `{${setVal(tmpSpriteData[4], 0)}}`, // X座標
-			top: setVal(tmpSpriteData[5], `0`).includes(`{`) ?
-				`${setVal(tmpSpriteData[5], 0)}` : `{${setVal(tmpSpriteData[5], 0)}}`, // Y座標
+			left: transformFlg
+				? setVal(tmpSpriteData[4], 1000, C_TYP_NUMBER)					// [t]のみtransformのPriority
+				: setVal(tmpSpriteData[4], `0`).includes(`{`)
+					? `${setVal(tmpSpriteData[4], 0)}`
+					: `{${setVal(tmpSpriteData[4], 0)}}`,                       // X座標
+			top: setVal(tmpSpriteData[5], `0`).includes(`{`)
+				? `${setVal(tmpSpriteData[5], 0)}`
+				: `{${setVal(tmpSpriteData[5], 0)}}`, 							// Y座標
 			width: `${setIntVal(tmpSpriteData[6])}`,                            // spanタグの場合は font-size
 			height: `${escapeHtml(tmpSpriteData[7] ?? ``)}`,                    // spanタグの場合は color(文字列可)
 			opacity: setVal(tmpSpriteData[8], 1, C_TYP_FLOAT),
@@ -2319,7 +2325,6 @@ const makeSpriteData = (_data, _calcFrame = _frame => _frame) => {
 			checkDuplicatedObjects(spriteData[tmpFrame]);
 
 		const emptyPatterns = [`[loop]`, `[jump]`];
-		const colorObjFlg = tmpSpriteData[2]?.startsWith(`[c]`) || false;
 		const spriteFrameData = spriteData[tmpFrame][dataCnts] = {
 			depth: tmpDepth,
 		};
@@ -2327,9 +2332,15 @@ const makeSpriteData = (_data, _calcFrame = _frame => _frame) => {
 		if (colorObjFlg) {
 			// [c]始まりの場合、カラーオブジェクト用の作成準備を行う
 			const data = tmpObj.path.slice(`[c]`.length).split(`/`);
+			let objPart = data[0];
+			if (!isNaN(parseInt(data[0]))) {
+				const keyCtrlPtn = `${g_keyObj.currentKey}_${g_keyObj.currentPtn}`;
+				objPart = g_keyObj[`stepRtn${keyCtrlPtn}`][data[0]];
+				spriteFrameData.transform = parseInt(data[0]);
+			}
 			spriteFrameData.colorObjInfo = {
 				x: tmpObj.left, y: tmpObj.top, w: tmpObj.width, h: tmpObj.height,
-				rotate: setVal(data[0], `0`), opacity: tmpObj.opacity,
+				rotate: setVal(objPart, `0`), opacity: tmpObj.opacity,
 				background: makeColorGradation(setVal(data[1], `#ffffff`), { _defaultColorgrd: false }),
 				animationName: tmpObj.animationName,
 				animationDuration: `${tmpObj.animationDuration}s`,
@@ -2339,6 +2350,12 @@ const makeSpriteData = (_data, _calcFrame = _frame => _frame) => {
 			if (tmpObj.animationFillMode !== undefined) {
 				spriteFrameData.colorObjInfo.animationFillMode = tmpObj.animationFillMode;
 			}
+		} else if (transformFlg) {
+			// [t]始まりの場合、レイヤーに対してtransformを掛ける準備を行う
+			const transformData = tmpObj.path.slice(`[t]`.length);
+			spriteFrameData.transform = transformData || ``;
+			spriteFrameData.transformId = tmpObj.class;
+			spriteFrameData.transPriority = tmpObj.left;
 
 		} else if (tmpObj.path === ``) {
 			spriteFrameData.command = ``;
@@ -2422,6 +2439,10 @@ const drawBaseSpriteData = (_spriteData, _name, _condition = true) => {
 		}
 	} else {
 		if (_condition) {
+			if (_spriteData.colorObjInfo === undefined && _spriteData.transform === undefined) {
+				baseSprite.innerHTML = convertStrToVal(_spriteData.htmlText);
+				return;
+			}
 			if (_spriteData.colorObjInfo !== undefined) {
 				const colorObjClass = _spriteData.colorObjClass?.split(`/`) ?? [];
 				const id = `${_name}${_spriteData.depth}${_spriteData.colorObjId}`;
@@ -2429,8 +2450,32 @@ const drawBaseSpriteData = (_spriteData, _name, _condition = true) => {
 				baseSprite.appendChild(
 					createColorObject2(id, _spriteData.colorObjInfo, ...colorObjClass)
 				);
-			} else {
-				baseSprite.innerHTML = convertStrToVal(_spriteData.htmlText);
+			}
+			if (_spriteData.transform !== undefined) {
+				const targetId = `${_name}Sprite${_spriteData.depth}`;
+
+				if (!isNaN(parseInt(_spriteData.transform))) {
+					// PlayWindow由来のtransformを継承（別transformId）
+					const transformId = `${_name}${_spriteData.depth}PlayWindow`;
+					const transformData = getTransform(`mainSprite`, `playWindow`);
+
+					if (hasVal(transformData)) {
+						if (transformData !== getTransform(targetId, transformId)) {
+							addTransform(targetId, transformId, transformData, g_transPriority.playWindow);
+						}
+					} else {
+						delTransform(targetId, transformId);
+					}
+				} else {
+					// 明示指定のtransformを適用
+					const transformId = _spriteData.transformId || `${_name}${_spriteData.depth}`;
+
+					if (hasVal(_spriteData.transform)) {
+						addTransform(targetId, transformId, _spriteData.transform, _spriteData.transPriority);
+					} else {
+						delTransform(targetId, transformId);
+					}
+				}
 			}
 		}
 	}
@@ -3507,8 +3552,8 @@ const createSplitCanvases = (_width, _totalHeight) => {
 		cvs.height = logicalH * g_dpr;
 
 		// ブラウザ上の表示サイズをセット
-		cvs.style.width = `${_width}px`;
-		cvs.style.height = `${logicalH}px`;
+		cvs.style.width = wUnit(_width);
+		cvs.style.height = wUnit(logicalH);
 		cvs.style.display = 'block';
 
 		const ctx = cvs.getContext('2d');
@@ -3568,8 +3613,8 @@ const createMinimapHeader = (_config, _keyCtrlPtn, _keyNum) => {
 	// 解像度と表示サイズの設定
 	canvas.width = logicalWidth * g_dpr;
 	canvas.height = headerHeight * g_dpr;
-	canvas.style.width = `${logicalWidth}px`;
-	canvas.style.height = `${headerHeight}px`;
+	canvas.style.width = wUnit(logicalWidth);
+	canvas.style.height = wUnit(headerHeight);
 	canvas.style.display = 'block';
 
 	ctx.scale(g_dpr, g_dpr);
@@ -4419,8 +4464,8 @@ const headerConvert = _dosObj => {
 	obj.playingY = setIntVal(_dosObj.playingY, g_presetObj.playingY ?? 0);
 
 	// ステップゾーン位置
-	g_posObj.stepY = (isNaN(parseFloat(_dosObj.stepY)) ? C_STEP_Y : parseFloat(_dosObj.stepY));
-	g_posObj.stepYR = (isNaN(parseFloat(_dosObj.stepYR)) ? C_STEP_YR : parseFloat(_dosObj.stepYR));
+	g_posObj.stepY = setVal(_dosObj.stepY, C_STEP_Y, C_TYP_FLOAT);
+	g_posObj.stepYR = setVal(_dosObj.stepYR, C_STEP_YR, C_TYP_FLOAT);
 	g_posObj.stepDiffY = g_posObj.stepY - C_STEP_Y;
 	g_posObj.distY = obj.playingHeight - C_STEP_Y + g_posObj.stepYR;
 	g_posObj.reverseStepY = g_posObj.distY - g_posObj.stepY - g_posObj.stepDiffY - C_ARW_WIDTH;
@@ -4431,18 +4476,18 @@ const headerConvert = _dosObj => {
 	obj.baseSpeed = 1 + ((g_posObj.distY - (g_posObj.stepY - C_STEP_Y) * 2) / (500 - C_STEP_Y) - 1) * 0.85;
 
 	// 矢印・フリーズアロー判定位置補正
-	g_diffObj.arrowJdgX = (isNaN(parseFloat(_dosObj.arrowJdgX)) ? 0 : parseFloat(_dosObj.arrowJdgX));
-	g_diffObj.arrowJdgY = (isNaN(parseFloat(_dosObj.arrowJdgY)) ? 0 : parseFloat(_dosObj.arrowJdgY));
-	g_diffObj.frzJdgX = (isNaN(parseFloat(_dosObj.frzJdgX)) ? 0 : parseFloat(_dosObj.frzJdgX));
-	g_diffObj.frzJdgY = (isNaN(parseFloat(_dosObj.frzJdgY)) ? 0 : parseFloat(_dosObj.frzJdgY));
+	g_diffObj.arrowJdgX = setVal(_dosObj.arrowJdgX, 0, C_TYP_FLOAT);
+	g_diffObj.arrowJdgY = setVal(_dosObj.arrowJdgY, 0, C_TYP_FLOAT);
+	g_diffObj.frzJdgX = setVal(_dosObj.frzJdgX, 0, C_TYP_FLOAT);
+	g_diffObj.frzJdgY = setVal(_dosObj.frzJdgY, 0, C_TYP_FLOAT);
 	g_diffInitObj.arrowJdgX = g_diffObj.arrowJdgX;
 	g_diffInitObj.arrowJdgY = g_diffObj.arrowJdgY;
 	g_diffInitObj.frzJdgX = g_diffObj.frzJdgX;
 	g_diffInitObj.frzJdgY = g_diffObj.frzJdgY;
 
 	// ショートカット表示位置補正
-	g_diffObj.shortcutX = (isNaN(parseFloat(_dosObj.shortcutX)) ? 0 : parseFloat(_dosObj.shortcutX));
-	g_diffObj.shortcutY = (isNaN(parseFloat(_dosObj.shortcutY)) ? 0 : parseFloat(_dosObj.shortcutY));
+	g_diffObj.shortcutX = setVal(_dosObj.shortcutX, 0, C_TYP_FLOAT);
+	g_diffObj.shortcutY = setVal(_dosObj.shortcutY, 0, C_TYP_FLOAT);
 	g_diffInitObj.shortcutX = g_diffObj.shortcutX;
 	g_diffInitObj.shortcutY = g_diffObj.shortcutY;
 
@@ -6011,7 +6056,7 @@ const titleInit = (_initFlg = false) => {
 				}, g_lblPosObj.btnComment, g_cssObj.button_Default),
 			);
 			if (g_headerObj.musicSelectUse && getQueryParamVal(`scoreId`) === null) {
-				lblComment.style.height = `${g_sHeight - 100}px`;
+				lblComment.style.height = wUnit(g_sHeight - 100);
 			}
 			setUserSelect(lblComment.style, `text`);
 		}
@@ -6555,7 +6600,7 @@ const changeMSelect = (_num, _initFlg = false) => {
 		g_lblPosObj.lblDifNameInfoM.w, { maxSiz: g_lblPosObj.lblDifNameInfoM.siz }));
 	lblDiffiInfoM.style.fontSize = lblDifNameInfoM.style.fontSize;
 	lblNotesInfoM.style.fontSize = lblDifNameInfoM.style.fontSize;
-	lblCommentInfoM.style.top = `${getStrHeight(lblDifNameInfoM.innerHTML, parseFloat(lblDifNameInfoM.style.fontSize))}px`;
+	lblCommentInfoM.style.top = wUnit(getStrHeight(lblDifNameInfoM.innerHTML, parseFloat(lblDifNameInfoM.style.fontSize)));
 	lblCommentInfoM.innerHTML = convertStrToVal(g_headerObj[`commentVal${g_settings.musicIdxNum}`]);
 	lblCommentM.scrollTop = 0;
 
@@ -8012,12 +8057,12 @@ const drawMinimap = (_scoreId, { _initFlg = false, _fadeinFlg = false } = {}) =>
 
 	// --- ヘッダー部分 ---
 	const detailMiniMapHeader = createEmptySprite(detailMiniMap, `detailMiniMapHeader`, g_windowObj.detailMiniMapHeader);
-	$id(`detailMiniMapHeader`).top = (g_stateObj.miniMapRevFlg ? 230 + g_sHeight - 500 : 0) + `px`;
+	$id(`detailMiniMapHeader`).top = wUnit(g_stateObj.miniMapRevFlg ? 230 + g_sHeight - 500 : 0);
 	detailMiniMapHeader.appendChild(g_detailObj.scoreMinimapHeader[kPtn]);
 
 	// --- メイン（譜面）部分 ---
 	const detailMiniMapSub = createEmptySprite(detailMiniMap, `detailMiniMapSub`, g_windowObj.detailMiniMapSub);
-	$id(`detailMiniMapSub`).top = (g_stateObj.miniMapRevFlg ? 0 : 15) + `px`;
+	$id(`detailMiniMapSub`).top = wUnit(g_stateObj.miniMapRevFlg ? 0 : 15);
 
 	Object.assign(detailMiniMapSub.style, {
 		overflowX: 'hidden',
@@ -9854,17 +9899,16 @@ const showToast = _msg => {
 	if (existing) existing.remove();
 
 	const toast = createDivCss2Label(`previewToast`, _msg, {
-		x: g_btnX() + g_btnWidth() / 2, y: 50, w: g_btnWidth() / 2, h: 10,
+		x: g_btnX() + g_btnWidth() / 2, y: 50, w: g_btnWidth() / 2, h: 10, siz: 12,
 		transform: `translateX(-50%)`,
 		background: `rgba(0,40,80,0.92)`,
 		color: `#aaddff`,
 		border: `1px solid #3366aa`,
 		borderRadius: `6px`,
 		padding: `6px 16px`,
-		fontSize: `12px`,
 		fontFamily: `monospace`,
 		whiteSpace: `nowrap`,
-		pointerEvents: `none`,
+		pointerEvents: C_DIS_NONE,
 		transition: `opacity 0.4s`,
 		opacity: `1`,
 	});
@@ -10260,56 +10304,6 @@ const keyConfigInit = (_kcType = g_kcType, _initFlg = false) => {
 				? g_lblNameObj.kcShuffleDesc : g_lblNameObj.kcNoShuffleDesc),
 	);
 
-	// キーの一覧を表示
-	const keyconSprite = createEmptySprite(divRoot, `keyconSprite`, g_windowObj.keyconSprite);
-	const tkObj = getKeyInfo();
-	const [keyCtrlPtn, keyNum, posMax, divideCnt] =
-		[tkObj.keyCtrlPtn, tkObj.keyNum, tkObj.posMax, tkObj.divideCnt];
-
-	g_keyCopyLists.simpleDef.forEach(header => updateKeyInfo(header, keyCtrlPtn));
-	addTransform(`keyconSprite`, `root`, `scale(${g_keyObj.scale})`, g_transPriority.scale);
-	keyconSprite.style.height = `${parseFloat(keyconSprite.style.height) / ((1 + g_keyObj.scale) / 2)}px`;
-	const kWidth = parseInt(keyconSprite.style.width);
-	changeSetColor();
-
-	const maxLeftPos = Math.max(divideCnt, posMax - divideCnt - 2) / 2;
-	const maxLeftX = Math.min(0, (kWidth - C_ARW_WIDTH) / 2 - maxLeftPos * g_keyObj.blank);
-
-	g_keycons.cursorNumList = [...Array(keyNum).keys()].map(i => i);
-	const configKeyGroupList = g_headerObj.keyGroupOrder[g_stateObj.scoreId] ??
-		g_keyObj[`keyGroupOrder${keyCtrlPtn}`] ?? tkObj.keyGroupList;
-	g_keycons.colorCursorNum = 0;
-
-	// 色変化中の初期色を取得（矢印枠のみ）
-	const arrowColorTmp = g_detailObj.miniMapParams[g_stateObj.scoreId]._scoreObj.ncolorData.Arrow;
-	const arrowColors = Array.from({ length: Math.ceil(arrowColorTmp.length / 5) }, (_, i) =>
-		arrowColorTmp.slice(i * 5, i * 5 + 5)
-	).filter(val => val[0] === 0);
-	const initColors = [];
-	arrowColors.forEach(val => {
-		const laneToken = val[1];
-		const laneStr = String(laneToken ?? ``);
-		if (laneStr.startsWith('g')) {
-			// g付きの場合は矢印グループから対象の矢印番号を検索
-			const groupVal = setIntVal(laneStr.slice(1));
-			for (let j = 0; j < tkObj.keyNum; j++) {
-				if (g_keyObj[`color${tkObj.keyCtrlPtn}`][j] === groupVal) {
-					initColors[j] = makeColorGradation(val[2]);
-				}
-			}
-		} else {
-			const laneIdx = setIntVal(laneToken, -1);
-			if (laneIdx >= 0 && laneIdx < tkObj.keyNum) {
-				initColors[laneIdx] = makeColorGradation(val[2]);
-			}
-		}
-	});
-	if (_initFlg) {
-		g_baseColorGrs = {};
-		const colorKey = Object.keys(g_keyObj).filter(val => val.startsWith(`color${g_keyObj.currentKey}`));
-		colorKey.forEach(val => g_baseColorGrs[val] = g_keyObj[val]);
-	}
-
 	/**
 	 * keyconSpriteのスクロール位置調整
 	 * @param {number} _targetX 
@@ -10401,7 +10395,7 @@ const keyConfigInit = (_kcType = g_kcType, _initFlg = false) => {
 		} else {
 			changeTmpOneColor(_j);
 		}
-		adjustScrollPoint(parseFloat($id(`arrow${_j}`).left));
+		adjustScrollPoint(parseFloat($id(`keyGroup${_j}`).left));
 	};
 
 	/**
@@ -10427,17 +10421,109 @@ const keyConfigInit = (_kcType = g_kcType, _initFlg = false) => {
 		} else {
 			changeTmpOneShuffle(_j);
 		}
-		adjustScrollPoint(parseFloat($id(`arrow${_j}`).left));
+		adjustScrollPoint(parseFloat($id(`keyGroup${_j}`).left));
 	};
 
+	/**
+	 * 指定関数群だけを抽出したtransform文字列を作成
+	 * @param {string} _cssString
+	 * @param {string[]} _funcNames
+	 * @returns {string}
+	 */
+	const extractTransformFuncs = (_cssString, _funcNames) => {
+		const pattern = new RegExp(`\\b(${_funcNames.join(`|`)})\\([^)]*\\)`, `g`);
+		return (_cssString.match(pattern) || []).join(` `);
+	};
+
+	/**
+	 * 対象レーンのレイヤー番号を取得
+	 * @param {number} _j
+	 * @param {number} _posj
+	 * @returns {number}
+	 */
+	const getLayerIdx = (_j, _posj) => {
+		const baseLayer = g_keyObj[`layerGroup${keyCtrlPtn}`]?.[_j] || 0;
+		const rowFlg = Number(_posj > divideCnt); // reverse/scrollDirは考慮せず固定
+		return baseLayer * 2 + rowFlg;
+	};
+
+	/**
+	 * 対象レイヤーの回転変形を取得
+	 * @param {string} _keyCtrlPtn
+	 * @returns {string[]}
+	 */
+	const getLayerRotateParts = _keyCtrlPtn => {
+		const raw = g_keyObj[`layerTrans${_keyCtrlPtn}`]?.[0] ?? [``, ``, ``, ``];
+		return raw.map(trans => trans === `` ? `` : extractTransformFuncs(trans, [`rotate`, `rotateX`, `rotateY`, `rotateZ`, `rotate3d`]));
+	};
+
+	// キーの一覧を表示するための準備
+	const C_LAYER_Y_OFFSET = 10; // baseLayerごとの縦オフセット量
+	const keyconSprite = createEmptySprite(divRoot, `keyconSprite`, g_windowObj.keyconSprite);
+	const tkObj = getKeyInfo();
+	const [keyCtrlPtn, keyNum, posMax, divideCnt] =
+		[tkObj.keyCtrlPtn, tkObj.keyNum, tkObj.posMax, tkObj.divideCnt];
+
+	g_keyCopyLists.simpleDef.forEach(header => updateKeyInfo(header, keyCtrlPtn));
+	addTransform(`keyconSprite`, `root`, `scale(${g_keyObj.scale})`, g_transPriority.scale);
+	keyconSprite.style.height = wUnit(parseFloat(keyconSprite.style.height) / ((1 + g_keyObj.scale) / 2));
+	const kWidth = parseInt(keyconSprite.style.width);
+	changeSetColor();
+
+	const maxLeftPos = Math.max(divideCnt, posMax - divideCnt - 2) / 2;
+	const maxLeftX = Math.min(0, (kWidth - C_ARW_WIDTH) / 2 - maxLeftPos * g_keyObj.blank);
+
+	g_keycons.cursorNumList = [...Array(keyNum).keys()].map(i => i);
+	const configKeyGroupList = g_headerObj.keyGroupOrder[g_stateObj.scoreId] ??
+		g_keyObj[`keyGroupOrder${keyCtrlPtn}`] ?? tkObj.keyGroupList;
+	g_keycons.colorCursorNum = 0;
+
+	// 色変化中の初期色を取得（矢印枠のみ）
+	const arrowColorTmp = g_detailObj.miniMapParams[g_stateObj.scoreId]._scoreObj.ncolorData.Arrow;
+	const arrowColors = Array.from({ length: Math.ceil(arrowColorTmp.length / 5) }, (_, i) =>
+		arrowColorTmp.slice(i * 5, i * 5 + 5)
+	).filter(val => val[0] === 0);
+	const initColors = [];
+	arrowColors.forEach(val => {
+		const laneToken = val[1];
+		const laneStr = String(laneToken ?? ``);
+		if (laneStr.startsWith('g')) {
+			// g付きの場合は矢印グループから対象の矢印番号を検索
+			const groupVal = setIntVal(laneStr.slice(1));
+			for (let j = 0; j < tkObj.keyNum; j++) {
+				if (g_keyObj[`color${tkObj.keyCtrlPtn}`][j] === groupVal) {
+					initColors[j] = makeColorGradation(val[2]);
+				}
+			}
+		} else {
+			const laneIdx = setIntVal(laneToken, -1);
+			if (laneIdx >= 0 && laneIdx < tkObj.keyNum) {
+				initColors[laneIdx] = makeColorGradation(val[2]);
+			}
+		}
+	});
+	if (_initFlg) {
+		g_baseColorGrs = {};
+		const colorKey = Object.keys(g_keyObj).filter(val => val.startsWith(`color${g_keyObj.currentKey}`));
+		colorKey.forEach(val => g_baseColorGrs[val] = g_keyObj[val]);
+	}
+
+	const layerParts = getLayerRotateParts(keyCtrlPtn);
+	g_keycons.layerIdxList = [];
+
+	// キーコンフィグの矢印表示
 	const addLeft = (maxLeftX === 0 ? 0 : - maxLeftX + g_limitObj.kcColorPickerX);
 	for (let j = 0; j < keyNum; j++) {
 
 		const posj = g_keyObj[`pos${keyCtrlPtn}`][j];
 		const stdPos = posj - ((posj > divideCnt ? posMax : 0) + divideCnt) / 2;
+		const baseLayer = g_keyObj[`layerGroup${keyCtrlPtn}`]?.[j] || 0;
+		const layerIdx = getLayerIdx(j, posj); // baseLayer*2 + Number(posj > divideCnt)
+		const layerRotate = layerParts[layerIdx] || ``;
+		g_keycons.layerIdxList[j] = layerIdx;
 
 		const keyconX = g_keyObj.blank * stdPos + (kWidth - C_ARW_WIDTH) / 2 + addLeft;
-		const keyconY = C_KYC_HEIGHT * (Number(posj > divideCnt)) + 12;
+		const keyconY = C_KYC_HEIGHT * (Number(posj > divideCnt)) + 12 + baseLayer * C_LAYER_Y_OFFSET;
 		const colorPos = g_keyObj[`color${keyCtrlPtn}`][j];
 		const arrowColor = getKeyConfigColor(j, colorPos);
 
@@ -10447,16 +10533,22 @@ const keyConfigInit = (_kcType = g_kcType, _initFlg = false) => {
 				cxtFunc: () => changeTmpColor(j, -1),
 			}, g_cssObj.button_Default_NoColor, g_cssObj.title_base)
 		);
+
+		// キーごとの親コンテナ（矢印要素を囲う）
+		const keyGroup = createEmptySprite(keyconSprite, `keyGroup${j}`, { x: keyconX, y: keyconY, w: C_ARW_WIDTH, h: C_ARW_WIDTH });
+		if (layerRotate !== ``) {
+			keyGroup.style.transform = layerRotate; // ここだけがlayer変形の適用箇所
+		}
 		// キーコンフィグ表示用の矢印・おにぎりを表示
-		multiAppend(keyconSprite,
+		multiAppend(keyGroup,
 			// 矢印の塗り部分
 			createColorObject2(`arrowShadow${j}`, {
-				x: keyconX, y: keyconY, background: hasVal(g_headerObj[`setShadowColor${g_colorType}`][colorPos]) ? getShadowColor(colorPos, arrowColor) : ``,
+				background: hasVal(g_headerObj[`setShadowColor${g_colorType}`][colorPos]) ? getShadowColor(colorPos, arrowColor) : ``,
 				rotate: g_keyObj[`stepRtn${keyCtrlPtn}_${g_keycons.stepRtnGroupNum}`][j], styleName: `Shadow`,
 			}),
 			// 矢印本体
 			createColorObject2(`arrow${j}`, {
-				x: keyconX, y: keyconY, background: arrowColor, rotate: g_keyObj[`stepRtn${keyCtrlPtn}_${g_keycons.stepRtnGroupNum}`][j],
+				background: arrowColor, rotate: g_keyObj[`stepRtn${keyCtrlPtn}_${g_keycons.stepRtnGroupNum}`][j],
 			}),
 		);
 		if (g_headerObj.shuffleUse && g_keyObj[`shuffle${keyCtrlPtn}`] !== undefined) {
@@ -10716,10 +10808,11 @@ const keyConfigInit = (_kcType = g_kcType, _initFlg = false) => {
 	const setKeyConfigCursor = () => {
 		const posj = g_keyObj[`pos${keyCtrlPtn}`][g_currentj];
 		const stdPos = posj - ((posj > divideCnt ? posMax : 0) + divideCnt) / 2;
+		const baseLayer = g_keyObj[`layerGroup${keyCtrlPtn}`]?.[g_currentj] || 0;
 
 		const nextLeft = (kWidth - C_ARW_WIDTH) / 2 + g_keyObj.blank * stdPos + addLeft - 10;
 		cursor.style.left = wUnit(nextLeft);
-		cursor.style.top = wUnit(C_KYC_HEIGHT * Number(posj > divideCnt) + 57 + C_KYC_REPHEIGHT * g_currentk);
+		cursor.style.top = wUnit(C_KYC_HEIGHT * Number(posj > divideCnt) + 57 + C_KYC_REPHEIGHT * g_currentk + baseLayer * C_LAYER_Y_OFFSET);
 		g_kcType = (g_currentk === 0 ? `Main` : `Replaced`);
 
 		// 次の位置が見えなくなったらkeyconSpriteの位置を調整する
@@ -11187,10 +11280,10 @@ const keyConfigInit = (_kcType = g_kcType, _initFlg = false) => {
 			g_headerObj[`key${selectedKc}Def`] = setKey;
 			document.getElementById(`sc${selectedKc}`).textContent = getScMsg[selectedKc]();
 			document.getElementById(`sc${selectedKc}`).style.fontSize =
-				`${getFontSize2(getScMsg[selectedKc](), g_btnWidth(5 / 12) - 40, { maxSiz: g_limitObj.mainSiz })}px`;
+				wUnit(getFontSize2(getScMsg[selectedKc](), g_btnWidth(5 / 12) - 40, { maxSiz: g_limitObj.mainSiz }));
 			if (g_isMac) {
 				scTitleBack.textContent = getScMsg.TitleBack();
-				scTitleBack.style.fontSize = `${getFontSize2(getScMsg.TitleBack(), g_btnWidth(5 / 12) - 40, { maxSiz: g_limitObj.mainSiz })}px`;
+				scTitleBack.style.fontSize = wUnit(getFontSize2(getScMsg.TitleBack(), g_btnWidth(5 / 12) - 40, { maxSiz: g_limitObj.mainSiz }));
 			}
 			changeConfigColor(document.getElementById(`sc${selectedKc}`),
 				g_headerObj[`key${selectedKc}`] === g_headerObj[`key${selectedKc}Def2`] ?
@@ -11280,6 +11373,7 @@ const completeTransKeyPtn = (_keyList) => {
 	});
 };
 
+// KeyLockボタンを押したときの表示切替
 const toggleKcDesc = () => {
 	if (document.getElementById(`kcDesc`) !== null) {
 		kcDesc.textContent = getKcDescMsg();
@@ -11290,11 +11384,13 @@ const toggleKcDesc = () => {
 	}
 };
 
+// KeyLockボタンの表示文字列を取得
 const getKcDescMsg = () =>
 	g_stateObj.keyLockFlg
 		? g_lblNameObj.kcNonDesc
 		: g_lblNameObj.kcDesc.split(`{0}`).join(g_kCd[C_KEY_RETRY]).split(`{1}:`).join(g_isMac ? `` : `Delete:`);
 
+// KeyLockボタンで使用する絵文字の取得
 const getKeyLockName = () =>
 	`${g_lblNameObj.b_keyLock}${g_stateObj.keyLockFlg ? g_emojiObj.locked : g_emojiObj.unlocked}`;
 
@@ -11620,6 +11716,8 @@ const keyconfigKeyboardPreview = (() => {
 
 	/**
 	 * Canvasの共通初期化処理
+	 * @param {HTMLCanvasElement} canvas
+	 * @returns {CanvasRenderingContext2D|null}
 	 */
 	const setupCanvasContext = (canvas) => {
 		if (!canvas) return null;
@@ -11634,6 +11732,15 @@ const keyconfigKeyboardPreview = (() => {
 		return ctx;
 	};
 
+	/**
+	 * 円角矩形を描画する
+	 * @param {CanvasRenderingContext2D} ctx 
+	 * @param {number} x 
+	 * @param {number} y 
+	 * @param {number} w 
+	 * @param {number} h 
+	 * @param {number} r 
+	 */
 	const roundRect = (ctx, x, y, w, h, r) => {
 		ctx.beginPath();
 		ctx.moveTo(x + r, y);
@@ -12576,7 +12683,7 @@ const applyShuffle = (_keyNum, _shuffleGroup, _style) => {
  * @param {number[]} _group 
  * @param {number} _i 
  * @param {number} _divideNum 
- * @returns 
+ * @returns {number[][]}
  */
 const swapGroupNums = (_style, _group, _i, _divideNum) => {
 	if (_group.length % _divideNum === 0) {
@@ -12750,7 +12857,7 @@ const applySRandom = (_keyNum, _shuffleGroup, _arrowHeader, _frzHeader) => {
  * @param {string} [_dummyNo] ダミー用譜面番号添え字
  * @param {string} [_keyCtrlPtn] 選択キー及びパターン
  * @param {boolean} [_scoreAnalyzeFlg=false] 譜面詳細データのために必要分で読込を中断
- * @returns
+ * @returns {object} 矢印・フリーズアロー・速度/色変化データの格納オブジェクト
  */
 const scoreConvert = (_dosObj, _scoreId, _preblankFrame, _dummyNo = ``,
 	_keyCtrlPtn = `${g_keyObj.currentKey}_${g_keyObj.currentPtn}`, _scoreAnalyzeFlg = false) => {
@@ -12893,7 +13000,7 @@ const scoreConvert = (_dosObj, _scoreId, _preblankFrame, _dummyNo = ``,
 	 * - 個別・全体色変化を一体で管理するため通常の配列で返却
 	 * @param {string} _header 
 	 * @param {number} _scoreNo 
-	 * @returns 
+	 * @returns {any[][]}
 	 */
 	const setColor2Data = (_header, _scoreNo) => {
 		const dosColorData = getRefData(_header, `${_scoreNo}_data`);
@@ -13026,7 +13133,7 @@ const scoreConvert = (_dosObj, _scoreId, _preblankFrame, _dummyNo = ``,
 	 * 例) |backA2_data=back_data| -> back_dataで定義された値を使用
 	 * @param {string} _header 
 	 * @param {string} _dataName 
-	 * @returns
+	 * @returns {string|undefined}
 	 */
 	const getRefData = (_header, _dataName) => {
 		const data = _dosObj[`${_header}${_dataName}`];
@@ -13083,7 +13190,7 @@ const scoreConvert = (_dosObj, _scoreId, _preblankFrame, _dummyNo = ``,
 	/**
 	 * 歌詞データの分解
 	 * @param {string} _scoreNo 
-	 * @returns
+	 * @returns {string[][]}
 	 */
 	const makeWordData = _scoreNo => {
 		const wordDataList = [];
@@ -13184,7 +13291,7 @@ const scoreConvert = (_dosObj, _scoreId, _preblankFrame, _dummyNo = ``,
 	 * @param {string} _header 
 	 * @param {string} _scoreNo 譜面番号
 	 * @param {string[]} [object.resultTypes] リザルトモーションの種類 (result, failedB, failedS)
-	 * @returns
+	 * @returns {any[][]}
 	 */
 	const makeBackgroundData = (_header, _scoreNo, { resultTypes = [] } = {}) => {
 		const dataList = [];
@@ -13324,6 +13431,7 @@ const calcLifeVals = _allArrows => {
  * ライフ回復量・ダメージ量の算出
  * @param {number} _val 
  * @param {number} _allArrows 
+ * @returns {number}
  */
 const calcLifeVal = (_val, _allArrows) => _val * g_headerObj.maxLifeVal / _allArrows;
 
@@ -13443,6 +13551,7 @@ const setSpeedOnFrame = (_speedData, _lastFrame) => {
 /**
  * Motionオプション適用時の矢印別の速度設定
  * - 矢印が表示される最大フレーム数を 101フレーム と定義。
+ * @returns {number[]}
  */
 const setMotionOnFrame = () => g_motionFunc.get(g_stateObj.motion)(fillArray(101));
 
@@ -13787,7 +13896,7 @@ const pushArrows = (_dataObj, _speedOnFrame, _firstArrivalFrame) => {
 	 * 歌詞表示、背景・マスク表示のフェードイン時調整処理
 	 * @param {string} _type
 	 * @param {object} _data 
-	 * @returns
+	 * @returns {object}
 	 */
 	const calcAnimationData = (_type, _data) => {
 
@@ -14720,15 +14829,15 @@ const mainInit = () => {
 	}
 
 	addTransform(`mainSprite`, `root`, `scale(${g_workObj.scale})`, g_transPriority.scale);
-	addTransform(`mainSprite`, `main`, `translateX(${g_workObj.playingX}px) translateY(${g_posObj.stepY - C_STEP_Y + g_headerObj.playingY}px)`, g_transPriority.base);
+	addTransform(`mainSprite`, `main`, `translateX(${wUnit(g_workObj.playingX)}) translateY(${wUnit(g_posObj.stepY - C_STEP_Y + g_headerObj.playingY)})`, g_transPriority.base);
 
 	// 曲情報・判定カウント用スプライトを作成（メインスプライトより上位）
 	const infoSprite = createEmptySprite(divRoot, `infoSprite`, mainCommonPos);
-	addTransform(`infoSprite`, `main`, `translateX(${g_workObj.playingX}px) translateY(${g_headerObj.playingY}px)`, g_transPriority.base);
+	addTransform(`infoSprite`, `main`, `translateX(${wUnit(g_workObj.playingX)}) translateY(${wUnit(g_headerObj.playingY)})`, g_transPriority.base);
 
 	// 判定系スプライトを作成（メインスプライトより上位）
 	const judgeSprite = createEmptySprite(divRoot, `judgeSprite`, mainCommonPos);
-	addTransform(`judgeSprite`, `main`, `translateX(${g_workObj.playingX}px) translateY(${g_headerObj.playingY}px)`, g_transPriority.base);
+	addTransform(`judgeSprite`, `main`, `translateX(${wUnit(g_workObj.playingX)}) translateY(${wUnit(g_headerObj.playingY)})`, g_transPriority.base);
 	const tkObj = getKeyInfo();
 	const [keyCtrlPtn, keyNum] = [tkObj.keyCtrlPtn, tkObj.keyNum];
 
@@ -15593,7 +15702,7 @@ const mainInit = () => {
 		const setArrowYCondition = `${String(g_attrObj[arrowName].movLockFlg)}_${String(initManualFlg)}`;
 		setArrowY.get(setArrowYCondition)(arrowName, firstPosY, stepY);
 		if (!initManualFlg) {
-			addTransform(arrowName, `rootX`, `translateX(${g_workObj.stepX[_j]}px)`);
+			addTransform(arrowName, `rootX`, `translateX(${wUnit(g_workObj.stepX[_j])})`);
 		}
 
 		/**
@@ -15783,7 +15892,7 @@ const mainInit = () => {
 		const setArrowYCondition = `${String(g_attrObj[frzName].movLockFlg)}_${String(initManualFlg)}`;
 		setArrowY.get(setArrowYCondition)(frzName, firstPosY, stepY);
 		if (!initManualFlg) {
-			addTransform(frzName, `rootX`, `translateX(${g_workObj.stepX[_j]}px)`);
+			addTransform(frzName, `rootX`, `translateX(${wUnit(g_workObj.stepX[_j])})`);
 		}
 
 		safeExecuteCustomHooks(`g_customJsObj.makeFrzArrow`, g_customJsObj.makeFrzArrow, _attrs, frzName, _name, _arrowCnt);
@@ -16299,20 +16408,20 @@ const changeAppearanceFilter = (_num = 10) => {
 		$id(`arrowSprite${topNum + j}`).clipPath = topShape;
 		$id(`arrowSprite${bottomNum + j}`).clipPath = bottomShape;
 
-		addTransform(`filterBar${topNum + j}`, `appearance`, `translateY(${parseFloat($id(`arrowSprite${j}`).top) + topDist}px)`, g_transPriority.layer);
-		addTransform(`filterBar${bottomNum + j}`, `appearance`, `translateY(${parseFloat($id(`arrowSprite${j + 1}`).top) + bottomDist}px)`, g_transPriority.layer);
+		addTransform(`filterBar${topNum + j}`, `appearance`, `translateY(${wUnit(parseFloat($id(`arrowSprite${j}`).top) + topDist)})`, g_transPriority.layer);
+		addTransform(`filterBar${bottomNum + j}`, `appearance`, `translateY(${wUnit(parseFloat($id(`arrowSprite${j + 1}`).top) + bottomDist)})`, g_transPriority.layer);
 
 		if (doubleFilterFlg) {
-			addTransform(`filterBar${bottomNum + j}_HS`, `appearance`, `translateY(${parseFloat($id(`arrowSprite${j}`).top) + bottomDist}px)`, g_transPriority.layer);
-			addTransform(`filterBar${topNum + j}_HS`, `appearance`, `translateY(${parseFloat($id(`arrowSprite${j + 1}`).top) + topDist}px)`, g_transPriority.layer);
+			addTransform(`filterBar${bottomNum + j}_HS`, `appearance`, `translateY(${wUnit(parseFloat($id(`arrowSprite${j}`).top) + bottomDist)})`, g_transPriority.layer);
+			addTransform(`filterBar${topNum + j}_HS`, `appearance`, `translateY(${wUnit(parseFloat($id(`arrowSprite${j + 1}`).top) + topDist)})`, g_transPriority.layer);
 		}
 	}
 
 	// フィルターバーのパーセント表示（フィルターバーが複数表示されるなど複雑なため、最初の階層グループの位置に追従）
 	if (g_appearanceRanges.includes(g_stateObj.appearance)) {
 		const currentBarNum = g_hidSudObj.std[g_stateObj.appearance][g_stateObj.reverse];
-		addTransform(`filterView`, `appearance`, `translateY(${parseFloat($id(`arrowSprite${currentBarNum % 2}`).top) +
-			(currentBarNum % 2 === 0 ? bottomDist : topDist)}px)`, g_transPriority.layer);
+		addTransform(`filterView`, `appearance`, `translateY(${wUnit(parseFloat($id(`arrowSprite${currentBarNum % 2}`).top) +
+			(currentBarNum % 2 === 0 ? bottomDist : topDist))})`, g_transPriority.layer);
 		filterView.textContent = `${_num}%`;
 		g_hidSudObj.filterPos = _num;
 	}

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2026/08/06 (v49.4.0)
+ * Revised : 2026/08/16 (v49.6.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -163,8 +163,8 @@ const C_TYP_CALC = `calc`;
 let [g_sWidth, g_sHeight] = [
     setVal($id(`canvas-frame`).width, 500, C_TYP_FLOAT), setVal($id(`canvas-frame`).height, 500, C_TYP_FLOAT)
 ];
-$id(`canvas-frame`).width = `${Math.max(g_sWidth, 500)}px`;
-$id(`canvas-frame`).height = `${Math.max(g_sHeight, 500)}px`;
+$id(`canvas-frame`).width = wUnit(Math.max(g_sWidth, 500));
+$id(`canvas-frame`).height = wUnit(Math.max(g_sHeight, 500));
 $id(`canvas-frame`).margin = C_DIS_AUTO;
 
 const g_btnWidth = (_multi = 1) => Math.min(g_sWidth, g_limitObj.btnBaseWidth) * _multi;
@@ -1615,7 +1615,7 @@ const addX = (_id, _typeId, _x = 0, { overwrite = false, priority = 1000 } = {})
     }
     if (g_posXs[_id].get(_typeId) !== _x) {
         g_posXs[_id].set(_typeId, _x);
-        addTransform(_id, `posX`, `translateX(${sumData(Array.from(g_posXs[_id].values()))}px)`, priority);
+        addTransform(_id, `posX`, `translateX(${wUnit(sumData(Array.from(g_posXs[_id].values())))})`, priority);
     }
 };
 
@@ -1636,7 +1636,7 @@ const addY = (_id, _typeId, _y = 0, { overwrite = false, priority = 1000 } = {})
     }
     if (g_posYs[_id].get(_typeId) !== _y) {
         g_posYs[_id].set(_typeId, _y);
-        addTransform(_id, `posY`, `translateY(${sumData(Array.from(g_posYs[_id].values()))}px)`, priority);
+        addTransform(_id, `posY`, `translateY(${wUnit(sumData(Array.from(g_posYs[_id].values())))})`, priority);
     }
 };
 
@@ -1653,7 +1653,7 @@ const delX = (_id, _typeId) => {
         return;
     }
     const priority = g_transforms[_id]?.get(`posX`)?.priority ?? 1000;
-    addTransform(_id, `posX`, `translateX(${sumData(Array.from(g_posXs[_id].values()))}px)`, priority);
+    addTransform(_id, `posX`, `translateX(${wUnit(sumData(Array.from(g_posXs[_id].values())))})`, priority);
 };
 
 /**
@@ -1669,7 +1669,7 @@ const delY = (_id, _typeId) => {
         return;
     }
     const priority = g_transforms[_id]?.get(`posY`)?.priority ?? 1000;
-    addTransform(_id, `posY`, `translateY(${sumData(Array.from(g_posYs[_id].values()))}px)`, priority);
+    addTransform(_id, `posY`, `translateY(${wUnit(sumData(Array.from(g_posYs[_id].values())))})`, priority);
 };
 
 /**
@@ -1866,7 +1866,7 @@ const g_stepAreaFunc = new Map([
     ['Halfway', () => {
         g_arrowGroupSprite.forEach(sprite => {
             for (let j = 0; j < g_stateObj.layerNum; j++) {
-                addTransform(`${sprite}${j}`, `stepArea`, `translateY(${halfwayOffset(j)}px)`, g_transPriority.stepArea);
+                addTransform(`${sprite}${j}`, `stepArea`, `translateY(${wUnit(halfwayOffset(j))})`, g_transPriority.stepArea);
             }
         });
 
@@ -1877,7 +1877,7 @@ const g_stepAreaFunc = new Map([
             for (let j = 0; j < g_stateObj.layerNumDf; j++) {
                 addTransform(
                     `filterBar${j}`, `stepArea`,
-                    `translateY(calc(${g_hidSudObj[g_stateObj.appearance] === 0 ? 1 : -1} * ${halfwayOffset(j)}px))`,
+                    `translateY(calc(${g_hidSudObj[g_stateObj.appearance] === 0 ? 1 : -1} * ${wUnit(halfwayOffset(j))}))`,
                     g_transPriority.stepArea
                 );
             }
@@ -1888,12 +1888,12 @@ const g_stepAreaFunc = new Map([
                 for (let j = 0; j < g_stateObj.layerNumDf; j++) {
                     addTransform(
                         `filterBar${j}_HS`, `stepArea`,
-                        `translateY(calc(${(-1) * (g_hidSudObj[g_stateObj.appearance] === 0 ? 1 : -1)} * ${halfwayOffset(j)}px))`,
+                        `translateY(calc(${(-1) * (g_hidSudObj[g_stateObj.appearance] === 0 ? 1 : -1)} * ${wUnit(halfwayOffset(j))}))`,
                         g_transPriority.stepArea
                     );
                 }
             }
-            addTransform(`filterView`, `stepArea`, `translateY(${halfwayOffset(Number(g_settings.reverseNum))}px)`, g_transPriority.stepArea);
+            addTransform(`filterView`, `stepArea`, `translateY(${wUnit(halfwayOffset(Number(g_settings.reverseNum)))})`, g_transPriority.stepArea);
         }
     }],
     ['Mismatched', () => {
@@ -1903,7 +1903,7 @@ const g_stepAreaFunc = new Map([
         if (g_workObj.orgFlatFlg) {
             g_arrowGroupSprite.forEach(sprite => {
                 for (let j = g_stateObj.layerNumDf; j < g_stateObj.layerNum; j++) {
-                    addTransform(`${sprite}${j}`, `stepArea`, `translateY(${halfwayOffset(j)}px)`, g_transPriority.stepArea);
+                    addTransform(`${sprite}${j}`, `stepArea`, `translateY(${wUnit(halfwayOffset(j))})`, g_transPriority.stepArea);
                 }
             });
 
@@ -1914,14 +1914,14 @@ const g_stepAreaFunc = new Map([
                         // Hidden+用のフィルターバー補正
                         addTransform(
                             `filterBar${j + Number(g_settings.reverseNum)}_HS`, `stepArea`,
-                            `translateY(calc((${getDirFromRev()}) * ${halfwayOffset(j)}px))`,
+                            `translateY(calc((${getDirFromRev()}) * ${wUnit(halfwayOffset(j))}))`,
                             g_transPriority.stepArea
                         );
                     } else {
                         // Sudden+用のフィルターバー補正
                         addTransform(
                             `filterBar${j - Number(g_settings.reverseNum)}`, `stepArea`,
-                            `translateY(calc((${(-1) * getDirFromRev()}) * ${halfwayOffset(j)}px))`,
+                            `translateY(calc((${(-1) * getDirFromRev()}) * ${wUnit(halfwayOffset(j))}))`,
                             g_transPriority.stepArea
                         );
                     }
@@ -1936,7 +1936,7 @@ const g_stepAreaFunc = new Map([
         if (g_workObj.orgFlatFlg) {
             g_arrowGroupSprite.forEach(sprite => {
                 for (let j = 0; j < g_stateObj.layerNumDf; j++) {
-                    addTransform(`${sprite}${j}`, `stepArea`, `translateY(${halfwayOffset(j)}px)`, g_transPriority.stepArea);
+                    addTransform(`${sprite}${j}`, `stepArea`, `translateY(${wUnit(halfwayOffset(j))})`, g_transPriority.stepArea);
                 }
             });
 
@@ -1947,14 +1947,14 @@ const g_stepAreaFunc = new Map([
                         // Hidden+用のフィルターバー補正
                         addTransform(
                             `filterBar${j + Number(g_settings.reverseNum)}`, `stepArea`,
-                            `translateY(calc((${getDirFromRev()}) * ${halfwayOffset(j)}px))`,
+                            `translateY(calc((${getDirFromRev()}) * ${wUnit(halfwayOffset(j))}))`,
                             g_transPriority.stepArea
                         );
                     } else {
                         // Sudden+用のフィルターバー補正
                         addTransform(
                             `filterBar${j - Number(g_settings.reverseNum)}_HS`, `stepArea`,
-                            `translateY(calc((${(-1) * getDirFromRev()}) * ${halfwayOffset(j)}px))`,
+                            `translateY(calc((${(-1) * getDirFromRev()}) * ${wUnit(halfwayOffset(j))}))`,
                             g_transPriority.stepArea
                         );
                     }
@@ -1974,7 +1974,7 @@ const g_stepAreaFunc = new Map([
             for (let j = 0; j < g_stateObj.layerNumDf; j++) {
                 addTransform(
                     `filterBar${j}_HS`, `stepArea`,
-                    `translateY(calc((${g_hidSudObj[g_stateObj.appearance] === 0 ? 1 : -1}) * ${halfwayOffset(j)}px))`,
+                    `translateY(calc((${g_hidSudObj[g_stateObj.appearance] === 0 ? 1 : -1}) * ${wUnit(halfwayOffset(j))}))`,
                     g_transPriority.stepArea
                 );
             }
@@ -1983,7 +1983,7 @@ const g_stepAreaFunc = new Map([
                 for (let j = 0; j < g_stateObj.layerNumDf; j += 2) {
                     addTransform(
                         `filterBar${j + Number(g_settings.reverseNum)}_HS`, `stepArea`,
-                        `translateY(calc((${getDirFromRev()}) * ${halfwayOffset(j)}px))`,
+                        `translateY(calc((${getDirFromRev()}) * ${wUnit(halfwayOffset(j))}))`,
                         g_transPriority.stepArea
                     );
                 }
@@ -1998,7 +1998,7 @@ const g_stepAreaFunc = new Map([
     ['Alt-Crossing', () => {
         for (let j = 0; j < g_stateObj.layerNum; j++) {
             addTransform(`mainSprite${j}`, `stepArea`, `rotate(${getDirFromLayer(j) * -10}deg) ` +
-                `translateX(${getDirFromLayer(j) * 20}px)`, g_transPriority.stepArea);
+                `translateX(${wUnit(getDirFromLayer(j) * 20)})`, g_transPriority.stepArea);
         }
     }],
 ]);
@@ -2012,34 +2012,34 @@ const getShakingDist = () => (Math.abs((g_scoreObj.baseFrame / 2) % 100 - 50) -
 const g_shakingFunc = new Map([
     ['OFF', () => true],
     ['Horizontal', (_multi = 1) => {
-        addTransform(`mainSprite`, `shakingX_base`, `translateX(${getShakingDist() * _multi}px)`, g_transPriority.shakingX)
+        addTransform(`mainSprite`, `shakingX_base`, `translateX(${wUnit(getShakingDist() * _multi)})`, g_transPriority.shakingX)
     }],
     ['Vertical', (_multi = 1) => {
-        addTransform(`mainSprite`, `shakingY_base`, `translateY(${getShakingDist() / 2 * _multi}px)`, g_transPriority.shakingY)
+        addTransform(`mainSprite`, `shakingY_base`, `translateY(${wUnit(getShakingDist() / 2 * _multi)})`, g_transPriority.shakingY)
     }],
     ['X-Horizontal', (_multi = 1) => {
         for (let j = 0; j < g_stateObj.layerNum; j++) {
-            addTransform(`mainSprite${j}`, `shakingX_layer`, `translateX(${getDirFromLayer(j) * (4 / 3) * getShakingDist() * _multi}px)`, g_transPriority.shakingX);
+            addTransform(`mainSprite${j}`, `shakingX_layer`, `translateX(${wUnit(getDirFromLayer(j) * (4 / 3) * getShakingDist() * _multi)})`, g_transPriority.shakingX);
         }
     }],
     ['X-Vertical', (_multi = 1) => {
         for (let j = 0; j < g_stateObj.layerNum; j++) {
-            addTransform(`mainSprite${j}`, `shakingY_layer`, `translateY(${getDirFromLayer(j) * getShakingDist() * _multi}px)`, g_transPriority.shakingY);
+            addTransform(`mainSprite${j}`, `shakingY_layer`, `translateY(${wUnit(getDirFromLayer(j) * getShakingDist() * _multi)})`, g_transPriority.shakingY);
         }
     }],
     ['Drunk', (_multi = 1) => {
         const dist = getShakingDist();
         if (g_workObj.drunkXFlg) {
             const deltaX = dist * _multi;
-            addTransform(`mainSprite`, `shakingX_drunk`, `translateX(${deltaX}px)`, g_transPriority.shakingX);
-            addTransform(`infoSprite`, `shakingX_drunk`, `translateX(${deltaX}px)`, g_transPriority.shakingX);
-            addTransform(`judgeSprite`, `shakingX_drunk`, `translateX(${deltaX}px)`, g_transPriority.shakingX);
+            addTransform(`mainSprite`, `shakingX_drunk`, `translateX(${wUnit(deltaX)})`, g_transPriority.shakingX);
+            addTransform(`infoSprite`, `shakingX_drunk`, `translateX(${wUnit(deltaX)})`, g_transPriority.shakingX);
+            addTransform(`judgeSprite`, `shakingX_drunk`, `translateX(${wUnit(deltaX)})`, g_transPriority.shakingX);
         }
         if (g_workObj.drunkYFlg) {
             const deltaY = dist / 2 * _multi;
-            addTransform(`mainSprite`, `shakingY_drunk`, `translateY(${deltaY}px)`, g_transPriority.shakingY);
-            addTransform(`infoSprite`, `shakingY_drunk`, `translateY(${deltaY}px)`, g_transPriority.shakingY);
-            addTransform(`judgeSprite`, `shakingY_drunk`, `translateY(${deltaY}px)`, g_transPriority.shakingY);
+            addTransform(`mainSprite`, `shakingY_drunk`, `translateY(${wUnit(deltaY)})`, g_transPriority.shakingY);
+            addTransform(`infoSprite`, `shakingY_drunk`, `translateY(${wUnit(deltaY)})`, g_transPriority.shakingY);
+            addTransform(`judgeSprite`, `shakingY_drunk`, `translateY(${wUnit(deltaY)})`, g_transPriority.shakingY);
         }
         // 補正がゼロになったときに軸の移動方法をランダムで決定
         if (dist === 0) {
@@ -2298,7 +2298,7 @@ let g_canDisabledSettings = [`speed`, `motion`, `scroll`, `reverse`, `shuffle`,
 
 const g_hidSudFunc = new Map([
     ['filterPos', _filterPos => `${_filterPos}${g_lblNameObj.percent}`],
-    ['range', () => `${Math.round(g_posObj.arrowHeight - g_posObj.stepY)}px`],
+    ['range', () => wUnit(Math.round(g_posObj.arrowHeight - g_posObj.stepY))],
     ['hidden', _filterPos => `${Math.min(Math.round(g_posObj.arrowHeight * (100 - _filterPos) / 100), g_posObj.arrowHeight - g_posObj.stepY)}`],
     ['sudden', _filterPos => `${Math.max(Math.round(g_posObj.arrowHeight * (100 - _filterPos) / 100) - g_posObj.stepY, 0)}`],
 ]);

package/package.json

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