danoniplus 39.1.0 → 39.3.0

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2025/02/04
+ * Revised : 2025/02/09
  * 
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 39.1.0`;
-const g_revisedDate = `2025/02/04`;
+const g_version = `Ver 39.3.0`;
+const g_revisedDate = `2025/02/09`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
@@ -1538,6 +1538,7 @@ const makeBgCanvas = (_ctx, { w = g_sWidth, h = g_sHeight } = {}) => {
 const clearWindow = (_redrawFlg = false, _customDisplayName = ``) => {
 	resetKeyControl();
 	resetTransform();
+	resetXY();
 
 	// ボタン、オブジェクトをクリア (divRoot配下のもの)
 	deleteChildspriteAll(`divRoot`);
@@ -9624,6 +9625,7 @@ const getArrowSettings = () => {
 	g_workObj.keyCtrl = structuredClone(g_keyObj[`keyCtrl${keyCtrlPtn}`]);
 	g_workObj.diffList = [];
 	g_workObj.mainEndTime = 0;
+	g_stateObj.layerNum = 2;
 
 	g_workObj.keyGroupMaps = tkObj.keyGroupMaps;
 	g_workObj.keyGroupList = tkObj.keyGroupList;
@@ -9672,9 +9674,6 @@ const getArrowSettings = () => {
 		g_workObj.stepX[j] = g_keyObj.blank * stdPos + (g_headerObj.playingWidth - C_ARW_WIDTH) / 2;
 		const baseLayer = g_keyObj[`layerGroup${keyCtrlPtn}`]?.[j] || 0;
 		g_workObj.dividePos[j] = baseLayer * 2 + ((posj <= divideCnt ? 0 : 1) + (scrollDirOptions[j] === 1 ? 0 : 1) + (g_stateObj.reverse === C_FLG_OFF ? 0 : 1)) % 2;
-		if (g_stateObj.stepArea === `X-Flower`) {
-			g_workObj.dividePos[j] = (g_workObj.stepX[j] < (g_headerObj.playingWidth - C_ARW_WIDTH) / 2 ? 0 : 1) * 2 + g_workObj.dividePos[j] % 2;
-		}
 		g_workObj.scrollDir[j] = (posj <= divideCnt ? 1 : -1) * scrollDirOptions[j] * (g_stateObj.reverse === C_FLG_OFF ? 1 : -1);
 
 		eachOrAll.forEach(type => {
@@ -9692,6 +9691,24 @@ const getArrowSettings = () => {
 			g_workObj[`frzHitShadowColors${type}`][j] = g_headerObj.frzShadowColor[colorj][1] || ``;
 		});
 	}
+	g_workObj.orgFlatFlg = g_workObj.dividePos.every(v => v === g_workObj.dividePos[0]);
+	if (g_stateObj.stepArea === `X-Flower` || (g_stateObj.stepArea.includes(`Mismatched`) && g_workObj.orgFlatFlg)) {
+		for (let j = 0; j < keyNum; j++) {
+			g_workObj.dividePos[j] = (g_workObj.stepX[j] < (g_headerObj.playingWidth - C_ARW_WIDTH) / 2 ? 0 : 1) * 2 + g_workObj.dividePos[j] % 2;
+		}
+	}
+	if (g_stateObj.stepArea === `2Step`) {
+		for (let j = 0; j < keyNum; j++) {
+			if (g_workObj.orgFlatFlg && g_workObj.stepX[j] >= (g_headerObj.playingWidth - C_ARW_WIDTH) / 2) {
+				g_workObj.dividePos[j] = Math.floor(g_workObj.dividePos[j] / 2) * 2 + (g_workObj.dividePos[j] + 1) % 2;
+				g_workObj.scrollDir[j] *= -1;
+			}
+			if (g_workObj.dividePos[j] % 2 === (Number(g_stateObj.reverse === C_FLG_ON) + 1) % 2) {
+				g_workObj.dividePos[j] = g_stateObj.layerNum + g_workObj.dividePos[j] + Number(g_stateObj.reverse === C_FLG_ON ? 1 : -1);
+				g_workObj.scrollDir[j] *= -1;
+			}
+		}
+	}
 	g_workObj.scrollDirDefault = g_workObj.scrollDir.concat();
 	g_workObj.dividePosDefault = g_workObj.dividePos.concat();
 	g_stateObj.layerNum = Math.max(g_stateObj.layerNum, Math.ceil((Math.max(...g_workObj.dividePos) + 1) / 2) * 2);
@@ -9814,6 +9831,9 @@ const getArrowSettings = () => {
 	g_workObj.drunkXFlg = false;
 	g_workObj.drunkYFlg = false;
 
+	// AppearanceFilterの可視範囲設定
+	g_workObj.aprFilterCnt = 0;
+
 	if (g_stateObj.dataSaveFlg) {
 		// ローカルストレージへAdjustment, HitPosition, Volume設定を保存
 		g_storeSettings.forEach(setting => g_localStorage[setting] = g_stateObj[setting]);
@@ -9977,35 +9997,42 @@ const mainInit = () => {
 			g_keyObj[`div${keyCtrlPtn}`] < g_keyObj[`${g_keyObj.defaultProp}${keyCtrlPtn}`].length);
 	g_workObj.stepZoneDisp = (g_stateObj.d_stepzone === C_FLG_OFF || g_workObj.flatMode) ? C_DIS_NONE : C_DIS_INHERIT;
 
-	// Hidden+, Sudden+用のライン、パーセント表示
-	const filterCss = g_stateObj.filterLock === C_FLG_OFF ? g_cssObj.life_Failed : g_cssObj.life_Cleared;
-	[`filterBar0`, `filterBar1`, `borderBar0`, `borderBar1`].forEach(obj =>
-		mainSprite.appendChild(createColorObject2(obj, g_lblPosObj.filterBar, filterCss)));
-	borderBar0.style.top = wUnit(g_posObj.stepDiffY + g_stateObj.hitPosition);
-	borderBar1.style.top = wUnit(g_posObj.stepDiffY + g_posObj.arrowHeight - g_stateObj.hitPosition);
-
-	if (g_appearanceRanges.includes(g_stateObj.appearance)) {
-		mainSprite.appendChild(createDivCss2Label(`filterView`, ``, g_lblPosObj.filterView));
-		if (g_stateObj.d_filterline === C_FLG_ON) {
-			$id(`filterView`).opacity = g_stateObj.opacity / 100;
-			$id(`filterBar0`).opacity = g_stateObj.opacity / 100;
-			$id(`filterBar1`).opacity = g_stateObj.opacity / 100;
-		}
-	}
-
 	// mainSprite配下に層別のスプライトを作成し、ステップゾーン・矢印本体・フリーズアローヒット部分に分ける
 	const mainSpriteN = [], stepSprite = [], arrowSprite = [], frzHitSprite = [];
 	const mainCommonPos = { w: g_headerObj.playingWidth, h: g_posObj.arrowHeight };
+
+	// Hidden+, Sudden+用のライン、パーセント表示
+	const filterCss = g_stateObj.filterLock === C_FLG_OFF ? g_cssObj.life_Failed : g_cssObj.life_Cleared;
+	const doubleFilterFlg = ![`Default`, `Halfway`].includes(g_stateObj.stepArea);
+
 	for (let j = 0; j < g_stateObj.layerNum; j++) {
 		const mainSpriteJ = createEmptySprite(mainSprite, `mainSprite${j}`, mainCommonPos);
 		mainSpriteN.push(mainSpriteJ);
+		mainSpriteJ.appendChild(createColorObject2(`filterBar${j}`, g_lblPosObj.filterBar, filterCss));
+		if (doubleFilterFlg) {
+			mainSpriteJ.appendChild(createColorObject2(`filterBar${j % 2 == 0 ? j + 1 : j - 1}_HS`, g_lblPosObj.filterBar, filterCss));
+		}
 		addTransform(`mainSprite${j}`, `mainSprite${j}`,
 			g_keyObj[`layerTrans${keyCtrlPtn}`]?.[0]?.[Math.floor(j / 2) + (j + Number(g_stateObj.reverse === C_FLG_ON)) % 2]);
+
 		stepSprite.push(createEmptySprite(mainSpriteJ, `stepSprite${j}`, mainCommonPos));
 		arrowSprite.push(createEmptySprite(mainSpriteJ, `arrowSprite${j}`, Object.assign({ y: g_workObj.hitPosition * (j % 2 === 0 ? 1 : -1) }, mainCommonPos)));
 		frzHitSprite.push(createEmptySprite(mainSpriteJ, `frzHitSprite${j}`, mainCommonPos));
 	}
 
+	if (g_appearanceRanges.includes(g_stateObj.appearance)) {
+		mainSprite.appendChild(createDivCss2Label(`filterView`, ``, g_lblPosObj.filterView));
+		if (g_stateObj.d_filterline === C_FLG_ON) {
+			$id(`filterView`).opacity = g_stateObj.opacity / 100;
+			for (let j = 0; j < g_stateObj.layerNum; j++) {
+				$id(`filterBar${j}`).opacity = g_stateObj.opacity / 100;
+				if (doubleFilterFlg) {
+					$id(`filterBar${j}_HS`).opacity = g_stateObj.opacity / 100;
+				}
+			}
+		}
+	}
+
 	// ステップゾーン、フリーズアローヒット部分の生成
 	for (let j = 0; j < keyNum; j++) {
 		makeStepZone(j, keyCtrlPtn);
@@ -10039,7 +10066,7 @@ const mainInit = () => {
 
 	// Appearanceのオプション適用時は一部描画を隠す
 	changeAppearanceFilter(g_appearanceRanges.includes(g_stateObj.appearance) ?
-		g_hidSudObj.filterPos : g_hidSudObj.filterPosDefault[g_stateObj.appearance]);
+		g_hidSudObj.filterPos : g_hidSudObj.filterPosDefault[g_stateObj.appearance], true);
 
 	// 現在の矢印・フリーズアローの速度、個別加算速度の初期化 (速度変化時に直す)
 	g_workObj.currentSpeed = 2;
@@ -11319,8 +11346,9 @@ const makeStepZone = (_j, _keyCtrlPtn) => {
 /**
  * アルファマスクの再描画 (Appearance: Hidden+, Sudden+ 用)
  * @param {number} _num 
+ * @param {boolean} _shiftFlg シフトキーを押したかどうかのフラグ
  */
-const changeAppearanceFilter = (_num = 10) => {
+const changeAppearanceFilter = (_num = 10, _shiftFlg = keyIsShift()) => {
 	const MAX_FILTER_POS = 100;
 	const topNum = g_hidSudObj[g_stateObj.appearance];
 	const bottomNum = (g_hidSudObj[g_stateObj.appearance] + 1) % 2;
@@ -11331,16 +11359,39 @@ const changeAppearanceFilter = (_num = 10) => {
 	const numPlus = (g_stateObj.appearance === `Hid&Sud+` ? _num : 0);
 	const topShape = `inset(${_num}% 0% ${numPlus}% 0%)`;
 	const bottomShape = `inset(${numPlus}% 0% ${_num}% 0%)`;
+	const appearPers = [_num, MAX_FILTER_POS - _num];
 
 	for (let j = 0; j < g_stateObj.layerNum; j += 2) {
 		$id(`arrowSprite${topNum + j}`).clipPath = topShape;
 		$id(`arrowSprite${bottomNum + j}`).clipPath = bottomShape;
+
+		$id(`filterBar${topNum + j}`).top = wUnit(parseFloat($id(`arrowSprite${j}`).top) + g_posObj.arrowHeight * appearPers[topNum] / MAX_FILTER_POS);
+		$id(`filterBar${bottomNum + j}`).top = wUnit(parseFloat($id(`arrowSprite${j + 1}`).top) + g_posObj.arrowHeight * appearPers[bottomNum] / MAX_FILTER_POS);
+
+		if (![`Default`, `Halfway`].includes(g_stateObj.stepArea)) {
+			$id(`filterBar${bottomNum + j}_HS`).top = wUnit(parseFloat($id(`arrowSprite${j}`).top) + g_posObj.arrowHeight * appearPers[bottomNum] / MAX_FILTER_POS);
+			$id(`filterBar${topNum + j}_HS`).top = wUnit(parseFloat($id(`arrowSprite${j + 1}`).top) + g_posObj.arrowHeight * appearPers[topNum] / MAX_FILTER_POS);
+		}
+
+		// 階層が多い場合はShift+pgUp/pgDownで表示する階層グループを切り替え
+		if (_shiftFlg && g_stateObj.d_filterline === C_FLG_ON) {
+			[`${topNum + j}`, `${bottomNum + j}`].forEach(type => {
+				$id(`filterBar${type}`).display = (j === g_workObj.aprFilterCnt ? C_DIS_INHERIT : C_DIS_NONE);
+
+				if (![`Default`, `Halfway`].includes(g_stateObj.stepArea)) {
+					$id(`filterBar${type}_HS`).display = (j === g_workObj.aprFilterCnt ? C_DIS_INHERIT : C_DIS_NONE);
+				}
+			});
+		}
 	}
-	$id(`filterBar0`).top = wUnit(parseFloat($id(`arrowSprite${topNum}`).top) + g_posObj.arrowHeight * _num / MAX_FILTER_POS);
-	$id(`filterBar1`).top = wUnit(parseFloat($id(`arrowSprite${bottomNum}`).top) + g_posObj.arrowHeight * (MAX_FILTER_POS - _num) / MAX_FILTER_POS);
+
+	if (_shiftFlg) {
+		g_workObj.aprFilterCnt = nextPos(g_workObj.aprFilterCnt, 2, g_stateObj.layerNum);
+	}
+
 	if (g_appearanceRanges.includes(g_stateObj.appearance)) {
 		$id(`filterView`).top =
-			$id(`filterBar${g_hidSudObj.std[g_stateObj.appearance][g_stateObj.reverse]}`).top;
+			$id(`filterBar${(g_hidSudObj.std[g_stateObj.appearance][g_stateObj.reverse]) % 2}`).top;
 		filterView.textContent = `${_num}%`;
 
 		if (g_stateObj.appearance !== `Hid&Sud+` && g_workObj.dividePos.every(v => v === g_workObj.dividePos[0])) {

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2025/02/04 (v39.1.0)
+ * Revised : 2025/02/09 (v39.3.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -1068,7 +1068,7 @@ const g_settings = {
     playWindows: [`Default`, `Stairs`, `R-Stairs`, `Slope`, `R-Slope`, `Distorted`, `R-Distorted`, `SideScroll`, `R-SideScroll`],
     playWindowNum: 0,
 
-    stepAreas: [`Default`, `Halfway`, `Mismatched`, `R-Mismatched`, `X-Flower`],
+    stepAreas: [`Default`, `Halfway`, `2Step`, `Mismatched`, `R-Mismatched`, `X-Flower`],
     stepAreaNum: 0,
 
     frzReturns: [C_FLG_OFF, `X-Axis`, `Y-Axis`, `Z-Axis`, `Random`, `XY-Axis`, `XZ-Axis`, `YZ-Axis`, `Random+`],
@@ -1110,9 +1110,10 @@ const g_moveSettingWindow = (_changePageFlg = true, _direction = 1) => {
 };
 
 /**
- * transform管理
+ * transform, 座標管理
  */
 const g_transforms = {};
+const g_posXYs = {};
 
 /**
  * idごとのtransformを追加・変更
@@ -1147,6 +1148,57 @@ const resetTransform = () => {
     Object.keys(g_transforms).forEach(_id => g_transforms[_id] = {});
 };
 
+/**
+ * 座標計算
+ * @param {string} _id 
+ * @param {string} _typeId 
+ */
+const calcXY = (_id, _typeId) => {
+    const _posXs = [], _posYs = [];
+    Object.keys(g_posXYs[_id]).forEach(typeId => {
+        _posXs.push(g_posXYs[_id][typeId][0]);
+        _posYs.push(g_posXYs[_id][typeId][1]);
+    });
+    $id(_id).left = `${sumData(_posXs)}px`;
+    $id(_id).top = `${sumData(_posYs)}px`;
+};
+
+/**
+ * 座標加算処理
+ * @param {string} _id 
+ * @param {string} _typeId 
+ * @param {number} _x 
+ * @param {number} _y 
+ * @param {boolean} [_overwrite=false]
+ */
+const addXY = (_id, _typeId, _x = 0, _y = 0, _overwrite = false) => {
+    if (_overwrite) {
+        delete g_posXYs?.[_id];
+    }
+    if (g_posXYs[_id] === undefined) {
+        g_posXYs[_id] = {};
+    }
+    g_posXYs[_id][_typeId] = [_x, _y];
+    calcXY(_id, _typeId);
+};
+
+/**
+ * 座標リセット処理
+ * @param {string} _id 
+ * @param {string} _typeId 
+ */
+const delXY = (_id, _typeId) => {
+    delete g_posXYs[_id][_typeId];
+    calcXY(_id, _typeId);
+};
+
+/**
+ * 座標位置情報の初期化
+ */
+const resetXY = () => {
+    Object.keys(g_posXYs).forEach(_id => delete g_posXYs[_id]);
+};
+
 /**
  * id, transformIdに合致するtransform情報の取得
  * @param {string} _id 
@@ -1218,35 +1270,51 @@ const g_playWindowFunc = {
     'R-SideScroll': () => g_changeStairs(90),
 };
 
+const g_arrowGroupSprite = [`stepSprite`, `arrowSprite`, `frzHitSprite`];
 const g_stepAreaFunc = {
     'Default': () => ``,
     'Halfway': () => {
-        [`stepSprite`, `arrowSprite`, `frzHitSprite`].forEach(sprite => {
+        g_arrowGroupSprite.forEach(sprite => {
             for (let j = 0; j < g_stateObj.layerNum; j++) {
-                $id(`${sprite}${j}`).top = `${(j % 2 === 0 ? 1 : -1) * (g_headerObj.playingHeight / 2 - g_posObj.stepY + (g_posObj.stepYR - C_ARW_WIDTH) / 2)}px`;
+                addXY(`${sprite}${j}`, `stepArea`, 0, (j % 2 === 0 ? 1 : -1) * (g_headerObj.playingHeight / 2 - g_posObj.stepY + (g_posObj.stepYR - C_ARW_WIDTH) / 2));
             }
         });
     },
     'Mismatched': () => {
-        [`stepSprite`, `arrowSprite`, `frzHitSprite`].forEach(sprite => {
-            for (let j = 0; j < g_stateObj.layerNum; j++) {
-                addTransform(`${sprite}${j}`, `stepArea`, `rotate(${(j % 2 === 0 ? 1 : -1) * -15}deg)`);
-            }
-        });
+        for (let j = 0; j < g_stateObj.layerNum; j++) {
+            addTransform(`mainSprite${j}`, `stepArea`, `rotate(${(j % 2 === 0 ? 1 : -1) * -15}deg)`);
+        }
+        if (g_workObj.orgFlatFlg) {
+            g_arrowGroupSprite.forEach(sprite => {
+                for (let j = 2; j < Math.min(g_stateObj.layerNum, 4); j++) {
+                    addXY(`${sprite}${j}`, `stepArea`, 0, (j % 2 === 0 ? 1 : -1) * (g_headerObj.playingHeight / 2 - g_posObj.stepY + (g_posObj.stepYR - C_ARW_WIDTH) / 2));
+                }
+            });
+        }
     },
     'R-Mismatched': () => {
-        [`stepSprite`, `arrowSprite`, `frzHitSprite`].forEach(sprite => {
-            for (let j = 0; j < g_stateObj.layerNum; j++) {
-                addTransform(`${sprite}${j}`, `stepArea`, `rotate(${(j % 2 === 0 ? 1 : -1) * 15}deg)`);
+        for (let j = 0; j < g_stateObj.layerNum; j++) {
+            addTransform(`mainSprite${j}`, `stepArea`, `rotate(${(j % 2 === 0 ? 1 : -1) * 15}deg)`);
+        }
+        if (g_workObj.orgFlatFlg) {
+            g_arrowGroupSprite.forEach(sprite => {
+                for (let j = 0; j < Math.min(g_stateObj.layerNum, 2); j++) {
+                    addXY(`${sprite}${j}`, `stepArea`, 0, (j % 2 === 0 ? 1 : -1) * (g_headerObj.playingHeight / 2 - g_posObj.stepY + (g_posObj.stepYR - C_ARW_WIDTH) / 2));
+                }
+            });
+        }
+    },
+    '2Step': () => {
+        g_arrowGroupSprite.forEach(sprite => {
+            for (let j = Math.min(g_stateObj.layerNum, 4) / 2; j < Math.min(g_stateObj.layerNum, 4); j++) {
+                addXY(`${sprite}${j}`, `stepArea`, 0, (j % 2 === 0 ? 1 : -1) * (g_headerObj.playingHeight / 2 - g_posObj.stepY + (g_posObj.stepYR - C_ARW_WIDTH) / 2));
             }
         });
     },
     'X-Flower': () => {
-        [`stepSprite`, `arrowSprite`, `frzHitSprite`].forEach(sprite => {
-            for (let j = 0; j < Math.min(g_stateObj.layerNum, 4); j++) {
-                addTransform(`${sprite}${j}`, `stepArea`, `rotate(${(j % 2 === 0 ? 1 : -1) * (j % 4 < 2 ? 1 : -1) * -15}deg)`);
-            }
-        });
+        for (let j = 0; j < Math.min(g_stateObj.layerNum, 4); j++) {
+            addTransform(`mainSprite${j}`, `stepArea`, `rotate(${(j % 2 === 0 ? 1 : -1) * (j % 4 < 2 ? 1 : -1) * -15}deg)`);
+        }
     },
 };
 

package/package.json

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