danoniplus 35.4.5 → 36.0.0

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2024/03/28
+ * Revised : 2024/04/15
  * 
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 35.4.5`;
-const g_revisedDate = `2024/03/28`;
+const g_version = `Ver 36.0.0`;
+const g_revisedDate = `2024/04/15`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
@@ -247,6 +247,12 @@ const convertStrToVal = _str => {
 	return convStrs;
 };
 
+/**
+ * 半角スペース、タブを文字列から除去
+ * @param {string} _str 
+ */
+const trimStr = _str => _str?.split(`\t`).join(``).trimStart().trimEnd();
+
 /*-----------------------------------------------------------*/
 /* 値や配列のチェック・変換                                    */
 /*-----------------------------------------------------------*/
@@ -472,7 +478,7 @@ const fuzzyListMatching = (_str, _headerList, _footerList) =>
  */
 const replaceStr = (_str, _pairs) => {
 	let tmpStr = _str;
-	_pairs.forEach(pair => tmpStr = tmpStr.replaceAll(pair[0], pair[1]));
+	_pairs.forEach(pair => tmpStr = tmpStr?.replaceAll(pair[0], pair[1]));
 	return tmpStr;
 };
 
@@ -1262,7 +1268,8 @@ const deleteDiv = (_parentId, _idName) => {
  * @param {object} _obj (x, y, w, h, siz, align, title, groupName, initDisabledFlg, ...rest)
  * @param {...any} _classes 
  */
-const createCss2Button = (_id, _text, _func = _ => true, { x = 0, y = g_sHeight - 100, w = g_sWidth / 3, h = g_limitObj.btnHeight,
+const createCss2Button = (_id, _text, _func = _ => true, {
+	x = 0, y = g_sHeight - 100, w = g_btnWidth() / 3, h = g_limitObj.btnHeight,
 	siz = g_limitObj.btnSiz, align = C_ALIGN_CENTER, title = ``, groupName = g_currentPage, initDisabledFlg = true,
 	resetFunc = _ => true, cxtFunc = _ => true, ...rest } = {}, ..._classes) => {
 
@@ -1586,7 +1593,7 @@ const makeSpriteData = (_data, _calcFrame = _frame => _frame) => {
 	let maxDepth = -1;
 
 	splitLF(_data).filter(data => hasVal(data)).forEach(tmpData => {
-		const tmpSpriteData = tmpData.split(`,`);
+		const tmpSpriteData = tmpData.split(`,`).map(val => trimStr(val));
 
 		// 深度が"-"の場合はスキップ
 		if (tmpSpriteData.length <= 1 || tmpSpriteData[1] === `-`) {
@@ -1670,7 +1677,7 @@ const makeSpriteData = (_data, _calcFrame = _frame => _frame) => {
 const makeStyleData = (_data, _calcFrame = _frame => _frame) => {
 	const spriteData = [];
 	splitLF(_data).filter(data => hasVal(data)).forEach(tmpData => {
-		const tmpSpriteData = tmpData.split(`,`);
+		const tmpSpriteData = tmpData.split(`,`).map(val => trimStr(val));
 
 		// カスタムプロパティの名称(--始まり)で無い場合はコメントと見做してスキップ
 		if (tmpSpriteData.length <= 1 || !tmpSpriteData[1].startsWith(`--`)) {
@@ -4237,7 +4244,7 @@ const titleInit = _ => {
 
 		// Click Here
 		createCss2Button(`btnStart`, g_lblNameObj.clickHere, _ => clearTimeout(g_timeoutEvtTitleId), {
-			w: g_sWidth, siz: g_limitObj.titleSiz, resetFunc: _ => optionInit(),
+			x: g_btnX(), w: g_btnWidth(), siz: g_limitObj.titleSiz, resetFunc: _ => optionInit(),
 		}, g_cssObj.button_Start),
 
 		// Reset
@@ -4384,8 +4391,8 @@ const makeWarningWindow = (_text = ``, { resetFlg = false, backBtnUse = false }
  * お知らせウィンドウ（汎用）を表示
  * @param {string} _text 
  */
-const makeInfoWindow = (_text, _animationName = ``, { _backColor = `#ccccff`, _x = 0, _y = 0 } = {}) => {
-	const lblWarning = setWindowStyle(`<p>${_text}</p>`, _backColor, `#000066`, C_ALIGN_CENTER, { _x, _y });
+const makeInfoWindow = (_text, _animationName = ``, { _backColor = `#ccccff` } = {}) => {
+	const lblWarning = setWindowStyle(`<p>${_text}</p>`, _backColor, `#000066`, C_ALIGN_CENTER);
 	lblWarning.style.pointerEvents = C_DIS_NONE;
 
 	if (_animationName !== ``) {
@@ -4404,13 +4411,13 @@ const makeInfoWindow = (_text, _animationName = ``, { _backColor = `#ccccff`, _x
  * @param {string} _textColor 
  * @param {string} _align
  */
-const setWindowStyle = (_text, _bkColor, _textColor, _align = C_ALIGN_LEFT, { _x = 0, _y = 0 } = {}) => {
+const setWindowStyle = (_text, _bkColor, _textColor, _align = C_ALIGN_LEFT, { _x = g_btnX(), _y = 0, _w = g_btnWidth() } = {}) => {
 
 	deleteDiv(divRoot, `lblWarning`);
 
 	// ウィンドウ枠の行を取得するために一時的な枠を作成
 	const tmplbl = createDivCss2Label(`lblTmpWarning`, _text, {
-		x: 0, y: 70, w: g_sWidth, h: 20, siz: g_limitObj.mainSiz, lineHeight: wUnit(15), fontFamily: getBasicFont(),
+		x: _x, y: 70, w: _w, h: 20, siz: g_limitObj.mainSiz, lineHeight: wUnit(15), fontFamily: getBasicFont(),
 		whiteSpace: `normal`,
 	});
 	divRoot.appendChild(tmplbl);
@@ -4421,7 +4428,7 @@ const setWindowStyle = (_text, _bkColor, _textColor, _align = C_ALIGN_LEFT, { _x
 	const warnHeight = Math.min(150, Math.max(range.getClientRects().length,
 		_text.split(`<br>`).length + _text.split(`<p>`).length - 1) * 21);
 	const lbl = createDivCss2Label(`lblWarning`, _text, {
-		x: _x, y: 70 + _y, w: g_sWidth, h: warnHeight, siz: g_limitObj.mainSiz, backgroundColor: _bkColor,
+		x: _x, y: 70 + _y, w: _w, h: warnHeight, siz: g_limitObj.mainSiz, backgroundColor: _bkColor,
 		opacity: 0.9, lineHeight: wUnit(15), color: _textColor, align: _align, fontFamily: getBasicFont(),
 		whiteSpace: `normal`,
 	});
@@ -6320,12 +6327,13 @@ const keyConfigInit = (_kcType = g_kcType) => {
 		adjustScrollPoint(parseFloat($id(`arrow${_j}`).left));
 	};
 
+	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 keyconX = g_keyObj.blank * stdPos + (kWidth - C_ARW_WIDTH) / 2 - maxLeftX;
+		const keyconX = g_keyObj.blank * stdPos + (kWidth - C_ARW_WIDTH) / 2 + addLeft;
 		const keyconY = C_KYC_HEIGHT * (Number(posj > divideCnt)) + 12;
 		const colorPos = g_keyObj[`color${keyCtrlPtn}`][j];
 		const arrowColor = getKeyConfigColor(j, colorPos);
@@ -6450,7 +6458,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 	 * @returns ラベル
 	 */
 	const makeKCButtonHeader = (_id, _name, {
-		x = g_sWidth * 5 / 6 - 30, y = 0, w = g_sWidth / 6, h = 20, siz = 12, align = C_ALIGN_LEFT, ...rest
+		x = g_btnX(5 / 6) - 30, y = 0, w = g_btnWidth(1 / 6), h = 20, siz = 12, align = C_ALIGN_LEFT, ...rest
 	} = {}, ..._classes) => createDivCss2Label(_id, g_lblNameObj[_name], { x, y, w, h, siz, align, ...rest }, ..._classes);
 
 	/**
@@ -6463,7 +6471,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 	 * @param  {...any} _classes 
 	 * @returns ボタン
 	 */
-	const makeKCButton = (_id, _text, _func, { x = g_sWidth * 5 / 6 - 20, y = 15, w = g_sWidth / 6, h = 18,
+	const makeKCButton = (_id, _text, _func, { x = g_btnX(5 / 6) - 20, y = 15, w = g_btnWidth(1 / 6), h = 18,
 		siz = g_limitObj.jdgCntsSiz, borderStyle = `solid`, cxtFunc, ...rest } = {}, _mainClass = g_cssObj.button_RevOFF, ..._classes) =>
 		makeSettingLblCssButton(_id, getStgDetailName(_text), 0, _func, { x, y, w, h, siz, cxtFunc, borderStyle, ...rest }, _mainClass, ..._classes);
 
@@ -6474,7 +6482,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 	 * @param {function} _func 
 	 * @param {*} object (x, y, w, h, siz) 
 	 */
-	const makeMiniKCButton = (_id, _directionFlg, _func, { x = g_sWidth * 5 / 6 - 30, y = 15, w = 15, h = 20, siz = g_limitObj.mainSiz } = {}) =>
+	const makeMiniKCButton = (_id, _directionFlg, _func, { x = g_btnX(5 / 6) - 30, y = 15, w = 15, h = 20, siz = g_limitObj.mainSiz } = {}) =>
 		createCss2Button(`${_id}${_directionFlg}`, g_settingBtnObj.chara[_directionFlg], _func, { x, y, w, h, siz }, g_cssObj.button_Mini);
 
 	/**
@@ -6482,16 +6490,16 @@ const keyConfigInit = (_kcType = g_kcType) => {
 	 * @param {string} _type 
 	 * @param {object} obj (baseX) 
 	 */
-	const makeGroupButton = (_type, { baseX = g_sWidth * 5 / 6 - 20, baseY = 0, cssName } = {}) => {
+	const makeGroupButton = (_type, { baseX = g_btnX(5 / 6) - 20, baseY = 0, cssName } = {}) => {
 		if (g_headerObj[`${_type}Use`] && g_keycons[`${_type}Groups`].length > 1) {
 			const typeName = toCapitalize(_type);
 			multiAppend(divRoot,
 				makeKCButtonHeader(`lbl${_type}Group`, `${typeName}Group`, { x: baseX - 10, y: baseY }, cssName),
 				makeKCButton(`lnk${typeName}Group`, ``, _ => setGroup(_type), {
-					x: baseX, y: baseY + 13, w: g_sWidth / 18, title: g_msgObj[`${_type}Group`], cxtFunc: _ => setGroup(_type, -1),
+					x: baseX, y: baseY + 13, w: g_btnWidth(1 / 18), title: g_msgObj[`${_type}Group`], cxtFunc: _ => setGroup(_type, -1),
 				}),
 				makeMiniKCButton(`lnk${typeName}Group`, `L`, _ => setGroup(_type, -1), { x: baseX - 10, y: baseY + 13 }),
-				makeMiniKCButton(`lnk${typeName}Group`, `R`, _ => setGroup(_type), { x: baseX + g_sWidth / 18, y: baseY + 13 }),
+				makeMiniKCButton(`lnk${typeName}Group`, `R`, _ => setGroup(_type), { x: baseX + g_btnWidth(1 / 18), y: baseY + 13 }),
 			);
 		} else {
 			g_keycons[`${_type}GroupNum`] = 0;
@@ -6514,30 +6522,30 @@ const keyConfigInit = (_kcType = g_kcType) => {
 		),
 
 		// キーカラータイプ切替ボタン
-		makeKCButtonHeader(`lblcolorType`, `ColorType`, { x: 10 }, g_cssObj.keyconfig_ColorType),
+		makeKCButtonHeader(`lblcolorType`, `ColorType`, { x: 10 + g_btnX() }, g_cssObj.keyconfig_ColorType),
 		makeKCButton(`lnkColorType`, g_colorType, _ => setColorType(), {
-			x: 20, title: g_msgObj.colorType, cxtFunc: _ => setColorType(-1),
+			x: 20 + g_btnX(), title: g_msgObj.colorType, cxtFunc: _ => setColorType(-1),
 		}),
-		makeMiniKCButton(`lnkColorType`, `L`, _ => setColorType(-1), { x: 10 }),
-		makeMiniKCButton(`lnkColorType`, `R`, _ => setColorType(), { x: 20 + g_sWidth / 6 }),
+		makeMiniKCButton(`lnkColorType`, `L`, _ => setColorType(-1), { x: 10 + g_btnX() }),
+		makeMiniKCButton(`lnkColorType`, `R`, _ => setColorType(), { x: 20 + g_btnX(1 / 6) }),
 	);
 
 	if (g_headerObj.imgType.length > 1) {
-		const [imgBaseX, imgBaseY] = [20, 50];
+		const [imgBaseX, imgBaseY] = [20 + g_btnX(), 50];
 		multiAppend(divRoot,
 			// オブジェクトタイプの切り替え（リロードあり）
-			makeKCButtonHeader(`lblImgType`, `ImgType`, { x: 10, y: 37 }, g_cssObj.keyconfig_ConfigType),
+			makeKCButtonHeader(`lblImgType`, `ImgType`, { x: imgBaseX - 10, y: 37 }, g_cssObj.keyconfig_ConfigType),
 			makeKCButton(`lnkImgType`, g_imgType, _ => setImgType(), {
 				x: imgBaseX, y: imgBaseY, title: g_msgObj.imgType, cxtFunc: _ => setImgType(-1),
 			}),
 			makeMiniKCButton(`lnkImgType`, `L`, _ => setImgType(-1), { x: imgBaseX - 10, y: imgBaseY }),
-			makeMiniKCButton(`lnkImgType`, `R`, _ => setImgType(), { x: imgBaseX + g_sWidth / 6, y: imgBaseY }),
+			makeMiniKCButton(`lnkImgType`, `R`, _ => setImgType(), { x: imgBaseX + g_btnWidth(1 / 6), y: imgBaseY }),
 		);
 	}
 
 	// カラー/シャッフルグループ切替ボタン（カラー/シャッフルパターンが複数ある場合のみ）
 	makeGroupButton(`color`, { cssName: g_cssObj.keyconfig_ColorType });
-	makeGroupButton(`shuffle`, { baseX: g_sWidth * 11 / 12 - 10, cssName: g_cssObj.settings_Shuffle });
+	makeGroupButton(`shuffle`, { baseX: g_btnX(11 / 12) - 10, cssName: g_cssObj.settings_Shuffle });
 	makeGroupButton(`stepRtn`, { baseY: 37, cssName: g_cssObj.settings_Adjustment });
 
 	/**
@@ -6547,7 +6555,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 		const posj = g_keyObj[`pos${keyCtrlPtn}`][g_currentj];
 		const stdPos = posj - ((posj > divideCnt ? posMax : 0) + divideCnt) / 2;
 
-		const nextLeft = (kWidth - C_ARW_WIDTH) / 2 + g_keyObj.blank * stdPos - maxLeftX - 10;
+		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);
 		g_kcType = (g_currentk === 0 ? `Main` : `Replaced`);
@@ -6583,7 +6591,6 @@ const keyConfigInit = (_kcType = g_kcType) => {
 		}
 
 		setKeyConfigCursor();
-		keyconSprite.scrollLeft = - maxLeftX;
 	};
 
 	const getNextNum = (_scrollNum, _groupName, _target) =>
@@ -6876,7 +6883,6 @@ const keyConfigInit = (_kcType = g_kcType) => {
 					}
 				}
 				changeConfigCursor(0);
-				keyconSprite.scrollLeft = - maxLeftX;
 			}
 		}, g_lblPosObj.btnKcReset, g_cssObj.button_Reset),
 
@@ -7641,7 +7647,8 @@ const scoreConvert = (_dosObj, _scoreId, _preblankFrame, _dummyNo = ``,
 					const colorCd = tmpColorData[k + 2];
 
 					// フレーム数、色番号、カラーコード、全体色変化フラグをセットとして配列化
-					colorData.push([frame, colorNum, colorCd, allFlg]);
+					// フリーズアローヒット時の個別色変化は互換のため全体色変化として扱う
+					colorData.push([frame, colorNum, colorCd, isFrzHitColor(colorNum) && !allFlg ? true : allFlg]);
 				}
 			});
 			return colorData.sort((_a, _b) => _a[0] - _b[0]);
@@ -7649,6 +7656,74 @@ const scoreConvert = (_dosObj, _scoreId, _preblankFrame, _dummyNo = ``,
 		return [];
 	};
 
+	/**
+	 * 色変化データの分解・格納（新形式）
+	 * - 個別・全体色変化を一体で管理するため通常の配列で返却
+	 * @param {string} _header 
+	 * @param {number} _scoreNo 
+	 * @returns 
+	 */
+	const setColor2Data = (_header, _scoreNo) => {
+		const dosColorData = getRefData(_header, `${_scoreNo}_data`);
+		const colorData = {
+			Arrow: [], ArrowShadow: [], Normal: [], NormalBar: [], NormalShadow: [],
+			Hit: [], HitBar: [], HitShadow: [],
+		};
+
+		if (hasVal(dosColorData) && g_stateObj.d_color === C_FLG_ON) {
+
+			splitLF(dosColorData).filter(data => hasVal(data)).forEach(tmpData => {
+				const tmpColorData = tmpData.split(`,`).map(val => trimStr(val));
+				if (!hasVal(tmpColorData[0]) || tmpColorData[1] === `-`) {
+					return;
+				}
+				const frame = calcFrame(setVal(tmpColorData[0], ``, C_TYP_CALC));
+				const colorCd = tmpColorData[2];
+
+				// 色変化対象の取得
+				const pos = tmpColorData[1]?.indexOf(`:`);
+				const patternStr = pos > 0 ? [trimStr(tmpColorData[1].substring(0, pos)), trimStr(tmpColorData[1].substring(pos + 1))]
+					: [tmpColorData[1]];
+				const patterns = replaceStr(trimStr(patternStr[1]), g_escapeStr.colorPatternName)?.split(`/`) || [`Arrow`];
+
+				// 矢印番号の組み立て
+				const colorVals = [];
+				replaceStr(patternStr[0], g_escapeStr.targetPatternName)?.split(`/`)?.forEach(val => {
+					if (val.startsWith('g')) {
+						// g付きの場合は矢印グループから対象の矢印番号を検索
+						const groupVal = setIntVal(val.slice(1));
+						for (let j = 0; j < keyNum; j++) {
+							if (g_keyObj[`color${_keyCtrlPtn}`][j] === groupVal) {
+								colorVals.push(j);
+							}
+						}
+					} else if (val.indexOf(`...`) > 0) {
+						// 範囲指定表記の補完　例. 0...3 -> 0/1/2/3
+						const [valMin, valMax] = [val.split(`...`)[0], val.split(`...`)[1]].map(val => setIntVal(val));
+						for (let k = valMin; k <= valMax; k++) {
+							colorVals.push(setIntVal(k));
+						}
+					} else {
+						colorVals.push(setIntVal(val));
+					}
+				});
+
+				// フレーム数、色番号、カラーコード、全体色変化フラグ、変更対象をセットとして配列化し、色変化対象ごとのプロパティへ追加
+				patterns.forEach(pattern => {
+					try {
+						colorVals.forEach(val => colorData[pattern].push([frame, val, colorCd, hasVal(tmpColorData[3]), pattern]));
+					} catch (error) {
+						makeWarningWindow(g_msgInfoObj.E_0201.split(`{0}`).join(pattern));
+					}
+				});
+			});
+			// 色変化対象ごとにフレーム数をキーにソートしてフラット化
+			Object.keys(colorData).forEach(pattern =>
+				colorData[pattern] = colorData[pattern].sort((_a, _b) => _a[0] - _b[0]).flat());
+		}
+		return colorData;
+	};
+
 	/**
 	 * 矢印モーションデータの分解・格納（フレーム数, 矢印番号）
 	 * @param {string} _header 
@@ -7802,7 +7877,7 @@ const scoreConvert = (_dosObj, _scoreId, _preblankFrame, _dummyNo = ``,
 		}
 
 		tmpArrayData.filter(data => hasVal(data)).forEach(tmpData => {
-			const tmpWordData = tmpData.split(`,`);
+			const tmpWordData = tmpData.split(`,`).map(val => trimStr(val));
 			for (let k = 0; k < tmpWordData.length; k += 3) {
 				if (!hasVal(tmpWordData[k])) {
 					continue;
@@ -7881,6 +7956,11 @@ const scoreConvert = (_dosObj, _scoreId, _preblankFrame, _dummyNo = ``,
 			obj[`${sprite}DummyData`] = setColorData(sprite, _dummyNo);
 		}
 	});
+	// 色変化（新形式）の分解（3～4つで1セット, セット毎の改行区切り）
+	obj.ncolorData = setColor2Data(`ncolor`, scoreIdHeader);
+	if (g_stateObj.dummyId !== ``) {
+		obj.ncolorDummyData = setColor2Data(`ncolor`, _dummyNo);
+	}
 
 	if (_scoreAnalyzeFlg) {
 		return obj;
@@ -8263,17 +8343,17 @@ const pushArrows = (_dataObj, _speedOnFrame, _motionOnFrame, _firstArrivalFrame)
 	 * @param {object} obj _colorFlg: 個別色変化フラグ, _calcFrameFlg: 逆算を無条件で行うかどうかの可否
 	 */
 	const calcDataTiming = (_type, _header, _setFunc = _ => true,
-		{ _term = 4, _colorFlg = false, _calcFrameFlg = false } = {}) => {
+		{ _term = 4, _colorFlg = false, _calcFrameFlg = false, _propName = `` } = {}) => {
 
 		const camelHeader = _header === `` ? _type : `${_header}${toCapitalize(_type)}`;
-		const baseData = _dataObj[`${camelHeader}Data`];
+		const baseData = hasVal(_propName) ? _dataObj[`${camelHeader}Data`][_propName] : _dataObj[`${camelHeader}Data`];
 
 		if (!hasArrayList(baseData, _term)) {
 			return;
 		}
 		const frontData = [];
 		for (let k = baseData.length - _term; k >= 0; k -= _term) {
-			const calcFrameFlg = (_colorFlg && !isFrzHitColor(baseData[k + 1]) && !baseData[k + 3]) || _calcFrameFlg;
+			const calcFrameFlg = (_colorFlg && !baseData[k + 3]) || _calcFrameFlg;
 
 			if (baseData[k] < g_scoreObj.frameNum) {
 				// フェードイン直前にある色変化・モーションデータ・スクロール反転データを取得して格納
@@ -8362,7 +8442,13 @@ const pushArrows = (_dataObj, _speedOnFrame, _motionOnFrame, _firstArrivalFrame)
 	};
 
 	// 個別・全体色変化、モーションデータ・スクロール反転データのタイミング更新
-	[``, `dummy`].forEach(type => calcDataTiming(`color`, type, pushColors, { _colorFlg: true }));
+	[``, `dummy`].forEach(type => {
+		calcDataTiming(`color`, type, pushColors, { _colorFlg: true });
+		if (_dataObj[`ncolor${type}Data`] !== undefined) {
+			Object.keys(_dataObj[`ncolor${type}Data`]).forEach(pattern =>
+				calcDataTiming(`ncolor`, type, pushColors, { _term: 5, _colorFlg: true, _propName: pattern }));
+		}
+	});
 
 	g_typeLists.arrow.forEach(header =>
 		calcDataTiming(`cssMotion`, header, pushCssMotions, { _calcFrameFlg: true }));
@@ -8463,7 +8549,7 @@ const convertReplaceNums = _ => {
  * @param {string} _colorCd 
  * @param {string} _allFlg
  */
-const pushColors = (_header, _frame, _val, _colorCd, _allFlg) => {
+const pushColors = (_header, _frame, _val, _colorCd, _allFlg, _pattern = ``) => {
 
 	const tkObj = getKeyInfo();
 	const grdFlg = (g_colorType === `Type0` ? !g_headerObj.defaultColorgrd[0] : g_headerObj.defaultColorgrd[0]);
@@ -8491,62 +8577,93 @@ const pushColors = (_header, _frame, _val, _colorCd, _allFlg) => {
 		g_workObj[`${_baseStr}Cd`][_frame]?.push(colorCd) || (g_workObj[`${_baseStr}Cd`][_frame] = [colorCd]);
 	};
 
-	if (_val < 30 || _val >= 1000) {
-		const baseHeaders = [`mk${_header}Color`];
-		allUseTypes.push(`Arrow`);
-
-		// フリーズアロー色の追随設定がある場合、対象を追加
-		g_headerObj.frzScopeFromArrowColors.forEach(type =>
-			baseHeaders.push(`mk${_header}FColor${type}`, `mk${_header}FColor${type}Bar`));
-		if (g_headerObj.frzScopeFromArrowColors.length > 0) {
+	/**
+	 * 色変化データ(ncolor_data)の格納処理
+	 */
+	const executePushColors = () => {
+		const baseHeaders = [];
+		if (_pattern.startsWith(`Arrow`)) {
+			baseHeaders.push(`mk${_header}Color${_pattern.slice('Arrow'.length)}`);
+			allUseTypes.push(`Arrow`);
+
+			// フリーズアロー色の追随設定がある場合、対象を追加
+			if (_pattern === `Arrow`) {
+				g_headerObj.frzScopeFromArrowColors.forEach(type =>
+					baseHeaders.push(`mk${_header}FColor${type}`, `mk${_header}FColor${type}Bar`));
+				if (g_headerObj.frzScopeFromArrowColors.length > 0) {
+					allUseTypes.push(`Frz`);
+				}
+			}
+		} else {
+			baseHeaders.push(`mk${_header}FColor${_pattern}`);
 			allUseTypes.push(`Frz`);
 		}
+		// 色変化情報の格納
+		baseHeaders.forEach(baseHeader => pushColor(baseHeader, g_workObj.replaceNums[_val] + addAll));
+	};
 
-		// 矢印の色変化 (追随指定時はフリーズアローも色変化)
-		baseHeaders.forEach(baseHeader => {
-			if (_val < 20 || _val >= 1000) {
-				pushColor(baseHeader, g_workObj.replaceNums[_val % 1000] + addAll);
-			} else if (_val >= 20) {
-				const colorNum = _val - 20;
-				for (let j = 0; j < tkObj.keyNum; j++) {
-					if (g_keyObj[`color${tkObj.keyCtrlPtn}`][j] === colorNum) {
-						pushColor(baseHeader, j + addAll);
+	/**
+	 * 従来の色変化データ派生(color_data, acolor_data)の格納処理
+	 */
+	const executePushColorsOld = () => {
+
+		if (_val < 30 || _val >= 1000) {
+			const baseHeaders = [`mk${_header}Color`];
+			allUseTypes.push(`Arrow`);
+
+			// フリーズアロー色の追随設定がある場合、対象を追加
+			g_headerObj.frzScopeFromArrowColors.forEach(type =>
+				baseHeaders.push(`mk${_header}FColor${type}`, `mk${_header}FColor${type}Bar`));
+			if (g_headerObj.frzScopeFromArrowColors.length > 0) {
+				allUseTypes.push(`Frz`);
+			}
+
+			// 矢印の色変化 (追随指定時はフリーズアローも色変化)
+			baseHeaders.forEach(baseHeader => {
+				if (_val < 20 || _val >= 1000) {
+					pushColor(baseHeader, g_workObj.replaceNums[_val % 1000] + addAll);
+				} else if (_val >= 20) {
+					const colorNum = _val - 20;
+					for (let j = 0; j < tkObj.keyNum; j++) {
+						if (g_keyObj[`color${tkObj.keyCtrlPtn}`][j] === colorNum) {
+							pushColor(baseHeader, j + addAll);
+						}
 					}
 				}
-			}
-		});
+			});
 
-	} else {
-		const baseHeader = `mk${_header}FColor`;
-		allUseTypes.push(`Frz`);
-
-		// フリーズアローの色変化
-		const tmpVals = [];
-		if (_val < 50) {
-			tmpVals.push(_val % 30);
-		} else if (_val < 60) {
-			tmpVals.push((_val % 50) * 2, (_val % 50) * 2 + 1);
 		} else {
-			if (_val === 60) {
-				tmpVals.push(...Array(8).keys());
+			const baseHeader = `mk${_header}FColor`;
+			allUseTypes.push(`Frz`);
+
+			// フリーズアローの色変化
+			const tmpVals = [];
+			if (_val < 50) {
+				tmpVals.push(_val % 30);
+			} else if (_val < 60) {
+				tmpVals.push((_val % 50) * 2, (_val % 50) * 2 + 1);
 			} else {
-				tmpVals.push(...[...Array(8).keys()].map(j => j + 10));
+				if (_val === 60) {
+					tmpVals.push(...Array(8).keys());
+				} else {
+					tmpVals.push(...[...Array(8).keys()].map(j => j + 10));
+				}
 			}
-		}
-		tmpVals.forEach(targetj => {
+			tmpVals.forEach(targetj => {
 
-			// targetj=0,2,4,6,8 ⇒ Arrow, 1,3,5,7,9 ⇒ Bar
-			const ctype = (targetj >= 10 ? `Hit` : `Normal`) + (targetj % 2 === 0 ? `` : `Bar`);
-			const colorPos = Math.ceil((targetj % 10 - 1) / 2);
+				// targetj=0,2,4,6,8 ⇒ Arrow, 1,3,5,7,9 ⇒ Bar
+				const ctype = (targetj >= 10 ? `Hit` : `Normal`) + (targetj % 2 === 0 ? `` : `Bar`);
+				const colorPos = Math.ceil((targetj % 10 - 1) / 2);
 
-			g_keyObj[`color${tkObj.keyCtrlPtn}`].forEach((cpattern, k) => {
-				if (colorPos === cpattern) {
-					pushColor(baseHeader + ctype, k + addAll);
-				}
+				g_keyObj[`color${tkObj.keyCtrlPtn}`].forEach((cpattern, k) => {
+					if (colorPos === cpattern) {
+						pushColor(baseHeader + ctype, k + addAll);
+					}
+				});
 			});
-		});
-	}
-
+		}
+	};
+	hasVal(_pattern) ? executePushColors() : executePushColorsOld();
 	enabledAll(...allUseTypes);
 };
 
@@ -8661,13 +8778,11 @@ const getArrowSettings = _ => {
 	g_workObj.judgFrzHitCnt = [...Array(keyNum)].fill(1);
 	g_judgObj.lockFlgs = [...Array(keyNum)].fill(false);
 
-	// TODO: この部分を矢印塗りつぶし部分についても適用できるように変数を作成
-
 	// 矢印色管理 (個別・全体)
 	const eachOrAll = [``, `All`];
 	eachOrAll.forEach(type => {
-		g_workObj[`arrowColors${type}`] = [];
-		g_workObj[`dummyArrowColors${type}`] = [];
+		[`arrow`, `dummyArrow`].forEach(arrowType =>
+			g_typeLists.arrowColor.forEach(objType => g_workObj[`${arrowType}${objType}Colors${type}`] = []));
 
 		[`frz`, `dummyFrz`].forEach(arrowType =>
 			g_typeLists.frzColor.forEach(frzType => g_workObj[`${arrowType}${frzType}Colors${type}`] = []));
@@ -8692,16 +8807,18 @@ const getArrowSettings = _ => {
 		g_workObj.dividePos[j] = ((posj <= divideCnt ? 0 : 1) + (scrollDirOptions[j] === 1 ? 0 : 1) + (g_stateObj.reverse === C_FLG_OFF ? 0 : 1)) % 2;
 		g_workObj.scrollDir[j] = (posj <= divideCnt ? 1 : -1) * scrollDirOptions[j] * (g_stateObj.reverse === C_FLG_OFF ? 1 : -1);
 
-		// TODO: この部分を矢印塗りつぶし部分についても適用できるように変数を作成
-
 		eachOrAll.forEach(type => {
 			g_workObj[`arrowColors${type}`][j] = g_headerObj.setColor[colorj];
 			g_workObj[`dummyArrowColors${type}`][j] = g_headerObj.setDummyColor[colorj];
+			g_workObj[`arrowShadowColors${type}`][j] = g_headerObj.setShadowColor[colorj] || ``;
+			g_workObj[`dummyArrowShadowColors${type}`][j] = g_headerObj.setDummyColor[colorj] || ``;
 
 			g_typeLists.frzColor.forEach((frzType, k) => {
-				g_workObj[`frz${frzType}Colors${type}`][j] = g_headerObj.frzColor[colorj][k];
+				g_workObj[`frz${frzType}Colors${type}`][j] = g_headerObj.frzColor[colorj][k] || ``;
 				g_workObj[`dummyFrz${frzType}Colors${type}`][j] = g_headerObj.setDummyColor[colorj];
 			});
+			g_workObj[`frzNormalShadowColors${type}`][j] = g_headerObj.frzShadowColor[colorj][0] || ``;
+			g_workObj[`frzHitShadowColors${type}`][j] = g_headerObj.frzShadowColor[colorj][1] || ``;
 		});
 	}
 	g_workObj.scrollDirDefault = g_workObj.scrollDir.concat();
@@ -9342,13 +9459,30 @@ const mainInit = _ => {
 	 */
 	const changeArrowColor = (_j, _k, _name) => {
 		if (g_workObj[`mk${toCapitalize(_name)}ColorChangeAll`][g_scoreObj.frameNum]) {
-			const colorSelf = g_workObj[`${_name}Colors`][_j];
-			const colorAll = g_workObj[`${_name}ColorsAll`][_j];
+
+			/**
+			 * 全体色の変更処理
+			 * - 次の全体色変化対象の色と比較して一致した場合に色を変更
+			 * @param {string} _type 
+			 * @param {element} _baseObj 
+			 */
+			const changeColor = (_type, _baseObj) => {
+				const cArrowColor = g_workObj[`${_name}${_type}Colors`][_j];
+				const cArrowColorAll = g_workObj[`${_name}${_type}ColorsAll`][_j];
+				if (_baseObj.getAttribute(`color`) !== cArrowColor && cArrowColorAll === cArrowColor) {
+					_baseObj.style.background = cArrowColorAll;
+					_baseObj.setAttribute(`color`, cArrowColorAll);
+				}
+			};
+
+			// 矢印枠の色変化
 			const arrowTop = document.getElementById(`${_name}Top${_j}_${_k}`);
+			changeColor(``, arrowTop);
 
-			if (arrowTop.getAttribute(`color`) !== colorSelf && colorAll === colorSelf) {
-				arrowTop.style.background = colorAll;
-				arrowTop.setAttribute(`color`, colorAll);
+			// 矢印塗りつぶし部分の色変化
+			if (g_headerObj.setShadowColor[0] !== ``) {
+				const arrowShadow = document.getElementById(`${_name}Shadow${_j}_${_k}`);
+				changeColor(`Shadow`, arrowShadow);
 			}
 		}
 	};
@@ -9363,30 +9497,39 @@ const mainInit = _ => {
 	const changeFrzColor = (_j, _k, _name, _state) => {
 
 		if (g_workObj[`mk${toCapitalize(_name)}ColorChangeAll`][g_scoreObj.frameNum]) {
-			const frzTop = document.getElementById(`${_name}Top${_j}_${_k}`);
-			const frzBar = document.getElementById(`${_name}Bar${_j}_${_k}`);
-			const frzBtm = document.getElementById(`${_name}Btm${_j}_${_k}`);
-			const frzName = `${_name}${_state}`;
+			const frzNo = `${_j}_${_k}`;
+			const frzTop = document.getElementById(`${_name}Top${frzNo}`);
+			const frzBar = document.getElementById(`${_name}Bar${frzNo}`);
+			const frzBtm = document.getElementById(`${_name}Btm${frzNo}`);
+			const frzTopShadow = document.getElementById(`${_name}TopShadow${frzNo}`);
+			const frzBtmShadow = document.getElementById(`${_name}BtmShadow${frzNo}`);
 
-			// 矢印部分の色変化
-			if (frzBtm.getAttribute(`color`) !== g_workObj[`${frzName}Colors`][_j]) {
-				const toColorCode = g_workObj[`${frzName}ColorsAll`][_j];
-				if (g_workObj[`${frzName}Colors`][_j] === toColorCode) {
-					if (_state === `Normal`) {
-						frzTop.style.background = toColorCode;
+			/**
+			 * 全体色の変更処理
+			 * @param {string} _type 
+			 * @param {element} _baseObj 
+			 * @param {element} _baseObj2 
+			 */
+			const changeColor = (_type, _baseObj, _baseObj2) => {
+				const cFrzColor = g_workObj[`${_name}${_state}${_type}Colors`][_j];
+				const cFrzColorAll = g_workObj[`${_name}${_state}${_type}ColorsAll`][_j];
+				if (_baseObj.getAttribute(`color${_state}`) !== cFrzColor && cFrzColorAll === cFrzColor) {
+					if (_baseObj2 && _state === `Normal`) {
+						_baseObj2.style.background = cFrzColorAll;
 					}
-					frzBtm.style.background = toColorCode;
-					frzBtm.setAttribute(`color`, toColorCode);
+					_baseObj.style.background = cFrzColorAll;
+					_baseObj.setAttribute(`color${_state}`, cFrzColorAll);
 				}
-			}
+			};
+
+			// 矢印部分の色変化
+			changeColor(``, frzBtm, frzTop);
+
 			// 帯部分の色変化
-			if (frzBar.getAttribute(`color`) !== g_workObj[`${frzName}BarColors`][_j]) {
-				const toBarColorCode = g_workObj[`${frzName}BarColorsAll`][_j];
-				if (g_workObj[`${frzName}BarColors`][_j] === toBarColorCode) {
-					frzBar.style.background = toBarColorCode;
-					frzBar.setAttribute(`color`, toBarColorCode);
-				}
-			}
+			changeColor(`Bar`, frzBar);
+
+			// 矢印塗りつぶし部分の色変化
+			changeColor(`Shadow`, frzBtmShadow, frzTopShadow);
 		}
 	};
 
@@ -9610,8 +9753,9 @@ const mainInit = _ => {
 	 * @param {number} _arrowCnt 現在の判定矢印順
 	 * @param {string} _name 矢印名
 	 * @param {string} _color 矢印色
+	 * @param {string} _shadowColor 矢印塗りつぶし部分の色
 	 */
-	const makeArrow = (_j, _arrowCnt, _name, _color) => {
+	const makeArrow = (_j, _arrowCnt, _name, _color, _shadowColor) => {
 		const dividePos = g_workObj.dividePos[_j];
 		const colorPos = g_keyObj[`color${keyCtrlPtn}`][_j];
 
@@ -9630,6 +9774,7 @@ const mainInit = _ => {
 			dir: g_workObj.scrollDir[_j], boostDir: g_workObj.boostDir,
 			prevY: firstPosY, y: firstPosY,
 		};
+		g_typeLists.arrowColor.forEach(val => g_attrObj[arrowName][`Arrow${val}`] = g_workObj[`${_name}${val}Colors`][_j]);
 		arrowSprite[dividePos].appendChild(stepRoot);
 
 		if (g_workObj[`${_name}CssMotions`][_j] !== ``) {
@@ -9644,9 +9789,10 @@ const mainInit = _ => {
 		if (g_headerObj.setShadowColor[colorPos] !== ``) {
 			// 矢印の塗り部分
 			const arrShadow = createColorObject2(`${_name}Shadow${_j}_${_arrowCnt}`, {
-				background: getShadowColor(colorPos, _color), rotate: g_workObj.arrowRtn[_j], styleName: `Shadow`,
+				background: _shadowColor === `Default` ? _color : _shadowColor,
+				rotate: g_workObj.arrowRtn[_j], styleName: `Shadow`,
 			});
-			if (g_headerObj.setShadowColor[colorPos] === `Default`) {
+			if (_shadowColor === `Default`) {
 				arrShadow.style.opacity = 0.5;
 			}
 			stepRoot.appendChild(arrShadow);
@@ -9690,8 +9836,9 @@ const mainInit = _ => {
 	 * @param {string} _name 
 	 * @param {string} _normalColor
 	 * @param {string} _barColor 
+	 * @param {string} _shadowColor
 	 */
-	const makeFrzArrow = (_j, _arrowCnt, _name, _normalColor, _barColor) => {
+	const makeFrzArrow = (_j, _arrowCnt, _name, _normalColor, _barColor, _shadowColor) => {
 		const dividePos = g_workObj.dividePos[_j];
 		const frzNo = `${_j}_${_arrowCnt}`;
 		const frzName = `${_name}${frzNo}`;
@@ -9710,19 +9857,15 @@ const mainInit = _ => {
 			boostSpd: g_workObj.boostSpd, dividePos: dividePos, dir: g_workObj.scrollDir[_j], boostDir: g_workObj.boostDir,
 			y: firstPosY, barY: C_ARW_WIDTH / 2 - firstBarLength * dividePos, btmY: firstBarLength * g_workObj.scrollDir[_j],
 		};
+		g_typeLists.frzColor.forEach(val => g_attrObj[frzName][val] = g_workObj[`${_name}${val}Colors`][_j]);
+
 		arrowSprite[dividePos].appendChild(frzRoot);
 
 		if (g_workObj[`${_name}CssMotions`][_j] !== ``) {
 			frzRoot.classList.add(g_workObj[`${_name}CssMotions`][_j]);
 			frzRoot.style.animationDuration = `${g_workObj.arrivalFrame[g_scoreObj.frameNum] / g_fps}s`;
 		}
-
-		const colorPos = g_keyObj[`color${keyCtrlPtn}`][_j];
-		let shadowColor = ``;
-		if (g_headerObj.frzShadowColor[colorPos][0] !== ``) {
-			shadowColor = (g_headerObj.frzShadowColor[colorPos][0] === `Default` ?
-				_normalColor : g_headerObj.frzShadowColor[colorPos][0]);
-		}
+		let shadowColor = _shadowColor === `Default` ? _normalColor : _shadowColor;
 
 		// フリーズアローは、下記の順で作成する。
 		// 後に作成するほど前面に表示される。
@@ -9886,8 +10029,9 @@ const mainInit = _ => {
 			const headerU = toCapitalize(header);
 
 			// 個別・全体色変化 (矢印)
-			changeColors(g_workObj[`mk${headerU}Color`][currentFrame],
-				g_workObj[`mk${headerU}ColorCd`][currentFrame], header, `arrow`);
+			g_typeLists.arrowColor.forEach(ctype =>
+				changeColors(g_workObj[`mk${headerU}Color${ctype}`][currentFrame],
+					g_workObj[`mk${headerU}Color${ctype}Cd`][currentFrame], header, `arrow${ctype}`));
 
 			// 個別・全体色変化（フリーズアロー）
 			g_typeLists.frzColor.forEach(ctype =>
@@ -9916,19 +10060,21 @@ const mainInit = _ => {
 
 		// ダミー矢印生成（背面に表示するため先に処理）
 		g_workObj.mkDummyArrow[currentFrame]?.forEach(data =>
-			makeArrow(data, ++dummyArrowCnts[data], `dummyArrow`, g_workObj.dummyArrowColors[data]));
+			makeArrow(data, ++dummyArrowCnts[data], `dummyArrow`, g_workObj.dummyArrowColors[data], g_workObj.dummyArrowShadowColors[data]));
 
 		// 矢印生成
 		g_workObj.mkArrow[currentFrame]?.forEach(data =>
-			makeArrow(data, ++arrowCnts[data], `arrow`, g_workObj.arrowColors[data]));
+			makeArrow(data, ++arrowCnts[data], `arrow`, g_workObj.arrowColors[data], g_workObj.arrowShadowColors[data]));
 
 		// ダミーフリーズアロー生成
 		g_workObj.mkDummyFrzArrow[currentFrame]?.forEach(data =>
-			makeFrzArrow(data, ++dummyFrzCnts[data], `dummyFrz`, g_workObj.dummyFrzNormalColors[data], g_workObj.dummyFrzNormalBarColors[data]));
+			makeFrzArrow(data, ++dummyFrzCnts[data], `dummyFrz`, g_workObj.dummyFrzNormalColors[data],
+				_workObj.dummyFrzNormalBarColors[data], g_workObj.dummyFrzNormalShadowColors[data]));
 
 		// フリーズアロー生成
 		g_workObj.mkFrzArrow[currentFrame]?.forEach(data =>
-			makeFrzArrow(data, ++frzCnts[data], `frz`, g_workObj.frzNormalColors[data], g_workObj.frzNormalBarColors[data]));
+			makeFrzArrow(data, ++frzCnts[data], `frz`, g_workObj.frzNormalColors[data],
+				g_workObj.frzNormalBarColors[data], g_workObj.frzNormalShadowColors[data]));
 
 		// 矢印・フリーズアロー移動＆消去
 		for (let j = 0; j < keyNum; j++) {
@@ -10148,8 +10294,6 @@ const appearKeyTypes = (_j, _target) => {
 	}
 };
 
-// TODO: この部分を矢印塗りつぶし部分についても適用できるように関数を見直し
-
 /**
  * 個別・全体色変化
  * @param {array} _mkColor 
@@ -10230,7 +10374,6 @@ const changeHitFrz = (_j, _k, _name, _difFrame = 0) => {
 	const styfrzBtm = $id(`${_name}Btm${frzNo}`);
 	const styfrzTopShadow = $id(`${_name}TopShadow${frzNo}`);
 	const styfrzBtmShadow = $id(`${_name}BtmShadow${frzNo}`);
-	const colorPos = g_keyObj[`color${g_keyObj.currentKey}_${g_keyObj.currentPtn}`][_j];
 
 	// フリーズアロー位置の修正（ステップゾーン上に来るように）
 	const delFrzLength = parseFloat($id(`stepRoot${_j}`).top) - currentFrz.y;
@@ -10256,10 +10399,8 @@ const changeHitFrz = (_j, _k, _name, _difFrame = 0) => {
 	styfrzTopShadow.opacity = 0;
 	styfrzBtmShadow.top = styfrzBtm.top;
 	if (_name === `frz`) {
-		if (g_headerObj.frzShadowColor[colorPos][1] !== ``) {
-			styfrzBtmShadow.background = (g_headerObj.frzShadowColor[colorPos][1] === `Default` ?
-				g_workObj.frzHitColors[_j] : g_headerObj.frzShadowColor[colorPos][1]);
-		}
+		styfrzBtmShadow.background = g_workObj[`${_name}HitShadowColors`][_j] === `Default` ?
+			g_workObj[`${_name}HitColors`][_j] : g_workObj[`${_name}HitShadowColors`][_j];
 		$id(`frzHit${_j}`).opacity = 0.9;
 		$id(`frzTop${frzNo}`).display = C_DIS_NONE;
 		if (isNaN(parseFloat(g_workObj.arrowRtn[_j]))) {
@@ -10281,6 +10422,8 @@ const changeFailedFrz = (_j, _k) => {
 	$id(`frzTop${frzNo}`).display = C_DIS_INHERIT;
 	$id(`frzTop${frzNo}`).background = `#cccccc`;
 	$id(`frzTopShadow${frzNo}`).opacity = 1;
+	$id(`frzTopShadow${frzNo}`).background = `#333333`;
+	$id(`frzBtmShadow${frzNo}`).background = `#333333`;
 	$id(`frzBar${frzNo}`).background = `#999999`;
 	$id(`frzBar${frzNo}`).opacity = 1;
 	$id(`frzBtm${frzNo}`).background = `#cccccc`;
@@ -10289,12 +10432,6 @@ const changeFailedFrz = (_j, _k) => {
 	const hitPos = g_workObj.hitPosition * g_workObj.scrollDir[_j];
 	$id(`frzTop${frzNo}`).top = wUnit(- hitPos);
 	$id(`frzTopShadow${frzNo}`).top = wUnit(- hitPos);
-
-	const colorPos = g_keyObj[`color${g_keyObj.currentKey}_${g_keyObj.currentPtn}`][_j];
-	if (g_headerObj.frzShadowColor[colorPos][0] !== ``) {
-		$id(`frzTopShadow${frzNo}`).background = `#333333`;
-		$id(`frzBtmShadow${frzNo}`).background = `#333333`;
-	}
 };
 
 /**

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2024/03/28 (v35.4.5)
+ * Revised : 2024/04/15 (v36.0.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -113,6 +113,12 @@ const g_limitObj = {
     mainSiz: 14,
     musicTitleSiz: 13,
     keySetSiz: 15,
+
+    // ボタン基準横幅（最大）
+    btnBaseWidth: 900,
+
+    // キーコンフィグのカラーピッカー幅
+    kcColorPickerX: 60,
 };
 
 /** 設定項目の位置 */
@@ -171,6 +177,9 @@ $id(`canvas-frame`).width = `${Math.max(g_sWidth, 500)}px`;
 $id(`canvas-frame`).height = `${Math.max(g_sHeight, 500)}px`;
 $id(`canvas-frame`).margin = `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_windowObj = {
     divRoot: { margin: `auto`, letterSpacing: `normal` },
@@ -191,7 +200,7 @@ const updateWindowSiz = _ => {
         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: 236, visibility: `hidden` },
         detailObj: { w: (g_sWidth - 500) / 2 + 420, h: 230, visibility: `hidden` },
-        keyconSprite: { y: 88, h: g_sHeight, overflow: `auto` },
+        keyconSprite: { y: 88, h: g_sHeight - 85, overflow: `auto` },
         loader: { y: g_sHeight - 10, h: 10, backgroundColor: `#333333` },
         playDataWindow: { x: g_sWidth / 2 - 225, y: 70, w: 450, h: 110 },
         resultWindow: { x: g_sWidth / 2 - 200, y: 185, w: 400, h: 210 },
@@ -201,51 +210,53 @@ const updateWindowSiz = _ => {
 
         /** タイトル画面 */
         btnReset: {
-            x: 0, y: g_sHeight - 20, w: g_sWidth / 4, h: 16, siz: 12, title: g_msgObj.dataReset,
+            x: g_btnX(), y: g_sHeight - 20, w: g_btnWidth(1 / 4), h: 16, siz: 12, title: g_msgObj.dataReset,
         },
         btnReload: {
-            x: 10, y: 10, w: 30, h: 30, siz: 20, title: g_msgObj.reload,
+            x: 10 + g_btnX(), y: 10, w: 30, h: 30, siz: 20, title: g_msgObj.reload,
         },
         btnHelp: {
-            x: 0, y: g_sHeight - 150, w: 40, h: 40, siz: 30, title: g_msgObj.howto,
+            x: g_btnX(), y: g_sHeight - 150, w: 40, h: 40, siz: 30, title: g_msgObj.howto,
         },
         lnkMaker: {
-            x: 0, y: g_sHeight - 50, w: g_sWidth / 2, h: g_limitObj.lnkHeight,
+            x: g_btnX(), y: g_sHeight - 50, w: g_btnWidth(1 / 2), h: g_limitObj.lnkHeight,
             align: C_ALIGN_LEFT, title: g_headerObj.creatorUrl,
         },
         lnkArtist: {
-            x: g_sWidth / 2, y: g_sHeight - 50, w: g_sWidth / 2, h: g_limitObj.lnkHeight,
+            x: g_btnX(1 / 2), y: g_sHeight - 50, w: g_btnWidth(1 / 2), h: g_limitObj.lnkHeight,
             align: C_ALIGN_LEFT, title: g_headerObj.artistUrl,
         },
         lnkVersion: {
-            x: g_sWidth / 4, y: g_sHeight - 20, w: g_sWidth * 3 / 4 - 20, h: 16,
+            x: g_btnX(1 / 4), y: g_sHeight - 20, w: g_btnWidth(3 / 4) - 20, h: 16,
             align: C_ALIGN_RIGHT, title: g_msgObj.github,
         },
         lnkComparison: {
-            x: g_sWidth - 20, y: g_sHeight - 20, w: 20, h: 16, siz: 12, title: g_msgObj.security,
+            x: g_btnX(1) - 20, y: g_sHeight - 20, w: 20, h: 16, siz: 12, title: g_msgObj.security,
         },
         lblComment: {
-            x: 0, y: 70, w: g_sWidth, h: g_sHeight - 180, siz: g_limitObj.difSelectorSiz, align: C_ALIGN_LEFT,
+            x: g_btnX(), y: 70, w: g_btnWidth(), h: g_sHeight - 180, siz: g_limitObj.difSelectorSiz, align: C_ALIGN_LEFT,
             overflow: `auto`, background: `#222222`, color: `#cccccc`, display: C_DIS_NONE,
             whiteSpace: `normal`,
         },
         btnComment: {
-            x: g_sWidth - 160, y: (g_sHeight / 2) + 150, w: 140, h: 50, siz: 20, border: `solid 1px #999999`,
+            x: g_btnX(1) - 160, y: (g_sHeight / 2) + 150, w: 140, h: 50, siz: 20, border: `solid 1px #999999`,
         },
 
         /** 設定画面 */
-        btnBack: {},
+        btnBack: {
+            x: g_btnX(),
+        },
         btnKeyConfig: {
-            x: g_sWidth / 3,
+            x: g_btnX(1 / 3),
         },
         btnPlay: {
-            x: g_sWidth * 2 / 3,
+            x: g_btnX(2 / 3),
         },
         btnSwitchSetting: {
             x: g_sWidth / 2 + 175 - g_limitObj.setMiniWidth / 2, y: 25, w: g_limitObj.setMiniWidth, h: 40,
         },
         btnSave: {
-            x: 0, y: 5, w: g_sWidth / 5, h: 16, siz: 12,
+            x: g_btnX(), y: 5, w: g_btnWidth(1 / 5), h: 16, siz: 12,
             title: g_msgObj.dataSave, borderStyle: `solid`,
         },
 
@@ -319,16 +330,17 @@ const updateWindowSiz = _ => {
 
         /** キーコンフィグ画面 */
         scKcMsg: {
-            x: 0, y: g_sHeight - 45, w: g_sWidth, h: 20,
+            x: g_btnX(), y: g_sHeight - 50, w: g_btnWidth(), h: 20,
         },
         kcMsg: {
-            x: 0, y: g_sHeight - 25, w: g_sWidth, h: 20, siz: g_limitObj.mainSiz,
+            x: g_btnX(), y: g_sHeight - 33, w: g_btnWidth(), h: 20, siz: g_limitObj.mainSiz,
+            pointerEvents: `none`,
         },
         kcDesc: {
-            x: 0, y: 68, w: g_sWidth, h: 20,
+            x: g_btnX(), y: 68, w: g_btnWidth(), h: 20,
         },
         kcShuffleDesc: {
-            x: 5, y: g_sHeight - 125, w: g_sWidth, h: 20, align: C_ALIGN_LEFT,
+            x: 5 + g_btnX(), y: g_sHeight - 125, w: g_btnWidth(), h: 20, align: C_ALIGN_LEFT,
         },
         pickPos: {
             x: 0, w: 50, h: 15, siz: 11, align: C_ALIGN_LEFT, background: `#${g_headerObj.baseBrightFlg ? `eeeeee` : `111111`}80`,
@@ -338,31 +350,31 @@ const updateWindowSiz = _ => {
         },
 
         btnKcBack: {
-            x: g_sWidth / 3, y: g_sHeight - 75,
-            w: g_sWidth / 3, h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
+            x: g_btnX(1 / 3), y: g_sHeight - 75,
+            w: g_btnWidth(1 / 3), h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
         },
         lblPattern: {
-            x: g_sWidth / 6, y: g_sHeight - 100, w: g_sWidth / 3, h: g_limitObj.btnHeight / 2,
+            x: g_btnX(1 / 6), y: g_sHeight - 100, w: g_btnWidth() / 3, h: g_limitObj.btnHeight / 2,
         },
         btnPtnChangeR: {
-            x: g_sWidth / 2, y: g_sHeight - 100,
-            w: g_sWidth / 9, h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
+            x: g_btnX(1 / 2), y: g_sHeight - 100,
+            w: g_btnWidth(1 / 9), h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
         },
         btnPtnChangeL: {
-            x: g_sWidth / 18, y: g_sHeight - 100,
-            w: g_sWidth / 9, h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
+            x: g_btnX(1 / 18), y: g_sHeight - 100,
+            w: g_btnWidth(1 / 9), h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
         },
         btnPtnChangeRR: {
-            x: g_sWidth * 11 / 18, y: g_sHeight - 100,
-            w: g_sWidth / 18, h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
+            x: g_btnX(11 / 18), y: g_sHeight - 100,
+            w: g_btnWidth(1 / 18), h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
         },
         btnPtnChangeLL: {
-            x: 0, y: g_sHeight - 100,
-            w: g_sWidth / 18, h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
+            x: g_btnX(), y: g_sHeight - 100,
+            w: g_btnWidth(1 / 18), h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
         },
         btnKcReset: {
-            x: 0, y: g_sHeight - 75,
-            w: g_sWidth / 3, h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
+            x: g_btnX(), y: g_sHeight - 75,
+            w: g_btnWidth(1 / 3), h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
         },
 
         /** メイン画面 */
@@ -418,27 +430,27 @@ const updateWindowSiz = _ => {
             x: g_sWidth / 2 + 50, y: 40, w: 200, h: 30, siz: 20,
         },
         btnRsBack: {
-            w: g_sWidth / 4, h: g_limitObj.btnHeight * 5 / 4, animationName: `smallToNormalY`,
+            x: g_btnX(), w: g_btnWidth(1 / 4), h: g_limitObj.btnHeight * 5 / 4, animationName: `smallToNormalY`,
         },
         btnRsCopy: {
-            x: g_sWidth / 4, w: g_sWidth / 2, h: g_limitObj.btnHeight * 5 / 8, siz: 24, animationName: `smallToNormalY`,
+            x: g_btnX(1 / 4), w: g_btnWidth(1 / 2), h: g_limitObj.btnHeight * 5 / 8, siz: 24, animationName: `smallToNormalY`,
         },
         btnRsTweet: {
-            x: g_sWidth / 4, y: g_sHeight - 100 + g_limitObj.btnHeight * 5 / 8,
-            w: g_sWidth / 4, h: g_limitObj.btnHeight * 5 / 8, siz: 24, animationName: `smallToNormalY`,
+            x: g_btnX(1 / 4), y: g_sHeight - 100 + g_limitObj.btnHeight * 5 / 8,
+            w: g_btnWidth(1 / 4), h: g_limitObj.btnHeight * 5 / 8, siz: 24, animationName: `smallToNormalY`,
         },
         btnRsGitter: {
-            x: g_sWidth / 2, y: g_sHeight - 100 + g_limitObj.btnHeight * 5 / 8,
-            w: g_sWidth / 4, h: g_limitObj.btnHeight * 5 / 8, siz: 24, animationName: `smallToNormalY`,
+            x: g_btnX(1 / 2), y: g_sHeight - 100 + g_limitObj.btnHeight * 5 / 8,
+            w: g_btnWidth(1 / 4), h: g_limitObj.btnHeight * 5 / 8, siz: 24, animationName: `smallToNormalY`,
         },
         btnRsRetry: {
-            x: g_sWidth / 4 * 3, w: g_sWidth / 4, h: g_limitObj.btnHeight * 5 / 4, animationName: `smallToNormalY`,
+            x: g_btnX(3 / 4), w: g_btnWidth(1 / 4), h: g_limitObj.btnHeight * 5 / 4, animationName: `smallToNormalY`,
         },
         btnRsCopyImage: {
-            x: g_sWidth - 40, y: 0, w: 40, h: 40, siz: 30,
+            x: g_btnX(1) - 40, y: 0, w: 40, h: 40, siz: 30,
         },
         btnRsCopyClose: {
-            x: g_sWidth - 80, y: 0, w: 80, h: 40, siz: 20,
+            x: g_btnX(1) - 80, y: 0, w: 80, h: 40, siz: 20,
         },
         resultImageDesc: {
             x: 0, y: g_sHeight - 30, w: g_sWidth, h: 20, siz: g_limitObj.mainSiz,
@@ -604,12 +616,15 @@ let g_imgExtensions = [`png`, `gif`, `bmp`, `jpg`, `jpeg`, `svg`];
 const g_typeLists = {
     arrow: [`arrow`, `dummyArrow`, `frz`, `dummyFrz`],
     color: [`color`, `acolor`],
-    frzColor: [`Normal`, `NormalBar`, `Hit`, `HitBar`],
+    arrowColor: [``, `Shadow`],
+    frzColor: [`Normal`, `NormalBar`, `Hit`, `HitBar`, `NormalShadow`, `HitShadow`],
     dataList: [
         `Arrow`, `FrzArrow`, `FrzLength`,
-        `Color`, `ColorCd`, `ScrollchArrow`, `ScrollchStep`, `ScrollchArrowDir`, `ScrollchStepDir`,
+        `Color`, `ColorCd`, `ColorShadow`, `ColorShadowCd`, `ScrollchArrow`, `ScrollchStep`, `ScrollchArrowDir`, `ScrollchStepDir`,
         `FColorNormal`, `FColorNormalCd`, `FColorNormalBar`, `FColorNormalBarCd`,
+        `FColorNormalShadow`, `FColorNormalShadowCd`,
         `FColorHit`, `FColorHitCd`, `FColorHitBar`, `FColorHitBarCd`,
+        `FColorHitShadow`, `FColorHitShadowCd`,
         `ArrowCssMotion`, `ArrowCssMotionName`,
         `FrzCssMotion`, `FrzCssMotionName`,
         `ArrowColorChangeAll`, `FrzColorChangeAll`,
@@ -663,6 +678,19 @@ const g_escapeStr = {
         [`Quote`, `Ja-Colon`], [`BracketLeft`, `Ja-@`], [`BracketRight`, `Ja-[`],
         [`Backslash`, `Ja-]`], [`Equal`, `Ja-^`],
     ],
+    colorPatternName: [
+        [`AR`, `Arrow`], [`AS`, `ArrowShadow`],
+        [`NA`, `Normal`], [`NB`, `NormalBar`], [`NS`, `NormalShadow`],
+        [`HA`, `Hit`], [`HB`, `HitBar`], [`HS`, `HitShadow`],
+        [`FN`, `Normal/NormalBar`], [`FH`, `Hit/HitBar`], [`FS`, `NormalShadow/HitShadow`],
+        [`AF`, `Arrow/Normal/NormalBar/Hit/HitBar`],
+        [`FrzNormal`, `Normal/NormalBar`], [`FrzHit`, `Hit/HitBar`],
+        [`FrzShadow`, `NormalShadow/HitShadow`],
+        [`Frz`, `Normal/NormalBar/Hit/HitBar`],
+    ],
+    targetPatternName: [
+        [`all`, `g0/g1/g2/g3/g4`],
+    ],
 };
 
 /** 設定・オプション画面用共通 */
@@ -2728,6 +2756,8 @@ const g_lang_msgInfoObj = {
         E_0104: `新しいキー:{0}の[keyCtrl]が未定義です。(E-0104)<br>
         |keyCtrl{0}=75,79,76,80,187,32/0|`,
 
+        E_0201: `色変化データで指定した色変化対象が存在しません。[pattern={0}] (E-0201)`,
+
         I_0001: `リザルトデータをクリップボードにコピーしました！`,
         I_0002: `入力したキーは割り当てできません。他のキーを指定してください。`,
         I_0003: `各譜面の明細情報をクリップボードにコピーしました！`,
@@ -2775,6 +2805,8 @@ const g_lang_msgInfoObj = {
         E_0104: `New key: {0} [keyCtrl] is not set. (E-0104)<br>
         |keyCtrl{0}=75,79,76,80,187,32/0|`,
 
+        E_0201: `The color change target specified in the color change data does not exist. [pattern={0}] (E-0201)`,
+
         I_0001: `Your result data is copied to the clipboard!`,
         I_0002: `The specified key cannot be assigned. Please specify another key.`,
         I_0003: `Charts information is copied to the clipboard!`,

package/package.json

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