danoniplus 39.4.2 → 39.6.0

package/js/danoni_main.js

@@ -4,19 +4,19 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2025/02/12
+ * Revised : 2025/02/16
  * 
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 39.4.2`;
-const g_revisedDate = `2025/02/12`;
+const g_version = `Ver 39.6.0`;
+const g_revisedDate = `2025/02/16`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
 let g_localVersion2 = ``;
 
 // ショートカット用文字列(↓の文字列を検索することで対象箇所へジャンプできます)
-//  共通:water 初期化:peach タイトル:melon 設定:lime ディスプレイ:lemon 拡張設定:apple キーコンフィグ:orange 譜面読込:strawberry メイン:banana 結果:grape
+//  共通:water 初期化:peach タイトル:melon データ管理:pear 設定:lime ディスプレイ:lemon 拡張設定:apple キーコンフィグ:orange 譜面読込:strawberry メイン:banana 結果:grape
 //  シーンジャンプ:Scene
 
 /**
@@ -189,6 +189,7 @@ let g_langStorage = {};
 // ローカルストレージ設定 (作品別)
 let g_localStorage;
 let g_localStorageUrl;
+let g_localStorageMgt;
 
 // ローカルストレージ設定 (ドメイン・キー別)
 let g_localKeyStorage;
@@ -406,6 +407,78 @@ const splitLF2 = (_str, _delim = `$`) => splitLF(_str)?.filter(val => val !== ``
  */
 const splitComma = _str => _str?.split(`, `).join(`*comma* `).split(`,`);
 
+/**
+ * ストレージ処理のパース
+ * @param {string} _keyName 
+ * @param {Object} _default 
+ * @returns {Object}
+ */
+const parseStorageData = (_keyName, _default = {}) => {
+	const storageText = localStorage.getItem(_keyName);
+	if (storageText === null) {
+		return _default;
+	}
+	try {
+		return JSON.parse(storageText);
+	} catch (err) {
+		return _default;
+	}
+}
+
+/**
+ * 画面表示用インデント処理
+ * @param {number} _level 
+ * @returns {string}
+ */
+const getIndent = (_level) => ' '.repeat(_level * 4);
+
+/**
+ * ストレージ情報の取得
+ * @param {string} _name g_storageFuncの実行キー名
+ * @param {string} _key g_storageFuncの実行キーの引数
+ * @returns {string}
+ */
+const viewKeyStorage = (_name, _key = ``) => {
+
+	// キャッシュ設定
+	if (!viewKeyStorage.cache) {
+		viewKeyStorage.cache = new Map();
+	}
+	const cacheKey = _key + _name;
+	if (viewKeyStorage.cache.has(cacheKey)) {
+		return viewKeyStorage.cache.get(cacheKey);
+	}
+	const result = formatObject(g_storageFunc.get(_name)(_key));
+	viewKeyStorage.cache.set(cacheKey, result);
+	return result;
+}
+
+/**
+ * オブジェクトのネスト表示処理
+ * @param {Object} _obj 
+ * @param {Number} _indent 
+ * @param {WeakSet} _seen
+ * @returns {string}
+ */
+const formatObject = (_obj, _indent = 0, _seen = new WeakSet()) => {
+	if (_obj === null || typeof _obj !== 'object') {
+		return JSON.stringify(_obj);
+	}
+	if (_seen.has(_obj)) {
+		return '[Circular]';
+	}
+	_seen.add(_obj);
+	const baseIndent = getIndent(_indent);
+	const nestedIndent = getIndent(_indent + 1);
+	const formattedEntries = Object.entries(_obj)
+		.map(([key, value]) => {
+			const isNestedObject = typeof value === 'object' && value !== null && !Array.isArray(value);
+			const formattedValue = isNestedObject ? formatObject(value, _indent + 1, _seen) : JSON.stringify(value);
+			return `<br>${nestedIndent}"${key}": ${formattedValue}`;
+		}).join(`,`);
+	return `{${formattedEntries}<br>${baseIndent}}`;
+}
+
 /**
  * 重複を排除した配列の生成
  * @param {any[]} _array1 
@@ -1089,13 +1162,27 @@ const getStrWidth = (_str, _fontsize, _font) => {
  */
 const getFontSize = (_str, _maxWidth, _font = getBasicFont(), _maxFontsize = 64, _minFontsize = 5) => {
 	for (let siz = _maxFontsize; siz >= _minFontsize; siz--) {
-		if (_maxWidth >= getStrWidth(_str, siz, _font)) {
+		if (_maxWidth >= getStrWidth(getLongestStr(_str?.split(`<br>`)), siz, _font)) {
 			return siz;
 		}
 	}
 	return _minFontsize;
 };
 
+/**
+ * 配列中から最も長い文字列を抽出
+ * @param {string[]} _array 
+ * @returns {string}
+ */
+const getLongestStr = _array => {
+	if (_array === undefined) {
+		return ``;
+	}
+	return _array.reduce((longest, current) => {
+		return current.length > longest.length ? current : longest;
+	}, ``);
+}
+
 /**
  * 補足説明部分のラベル作成
  * @param {string} _id 
@@ -1166,7 +1253,7 @@ const setUserSelect = (_style, _value = C_DIS_NONE) => {
  * @returns {HTMLDivElement}
  */
 const createDivCss2Label = (_id, _text, { x = 0, y = 0, w = g_limitObj.setLblWidth, h = g_limitObj.setLblHeight,
-	siz = g_limitObj.setLblSiz, align = C_ALIGN_CENTER, ...rest } = {}, ..._classes) => {
+	siz = g_limitObj.setLblSiz, align = C_ALIGN_CENTER, type = `text`, ...rest } = {}, ..._classes) => {
 	const div = createDiv(_id, x, y, w, h, [g_cssObj.title_base, ..._classes]);
 
 	const style = div.style;
@@ -1174,7 +1261,7 @@ const createDivCss2Label = (_id, _text, { x = 0, y = 0, w = g_limitObj.setLblWid
 	style.fontFamily = getBasicFont();
 	style.textAlign = `${align}`;
 	style.pointerEvents = C_DIS_NONE;
-	if (rest?.overflow === C_DIS_AUTO) {
+	if (rest?.overflow === C_DIS_AUTO || type !== `text`) {
 		style.pointerEvents = C_DIS_AUTO;
 	}
 	div.innerHTML = _text;
@@ -2351,44 +2438,43 @@ const loadLocalStorage = () => {
 	};
 
 	// ロケールの読込、警告メッセージの入替
-	const checkLocale = localStorage.getItem(`danoni-locale`);
-	if (checkLocale) {
-		g_langStorage = JSON.parse(checkLocale);
+	g_langStorage = parseStorageData(`danoni-locale`);
+	if (g_langStorage.locale !== undefined) {
 		g_localeObj.val = g_langStorage.locale;
 		g_localeObj.num = g_localeObj.list.findIndex(val => val === g_localeObj.val);
 	}
+	if (g_langStorage.safeMode === undefined) {
+		g_langStorage.safeMode = C_FLG_OFF;
+	}
 	Object.assign(g_msgInfoObj, g_lang_msgInfoObj[g_localeObj.val]);
 	Object.assign(g_kCd, g_lang_kCd[g_localeObj.val]);
 
 	// 作品別ローカルストレージの読込
-	const checkStorage = localStorage.getItem(g_localStorageUrl);
-	if (checkStorage) {
-		g_localStorage = JSON.parse(checkStorage);
-
-		// Adjustment, Volume, Appearance, Opacity, HitPosition初期値設定
-		checkLocalParam(`adjustment`, C_TYP_FLOAT, g_settings.adjustmentNum);
-		checkLocalParam(`volume`, C_TYP_NUMBER, g_settings.volumes.length - 1);
-		checkLocalParam(`appearance`);
-		checkLocalParam(`opacity`, C_TYP_NUMBER, g_settings.opacitys.length - 1);
-		checkLocalParam(`hitPosition`, C_TYP_FLOAT, g_settings.hitPositionNum);
-
-		// ハイスコア取得準備
-		if (g_localStorage.highscores === undefined) {
-			g_localStorage.highscores = {};
-		}
+	if (g_langStorage.safeMode === C_FLG_OFF) {
+		g_localStorage = parseStorageData(g_localStorageUrl, {
+			adjustment: 0, hitPosition: 0, volume: 100, highscores: {},
+		});
+	} else {
+		g_localStorage = {};
+		g_stateObj.dataSaveFlg = false;
+		makeWarningWindow(g_msgInfoObj.W_0031);
+	}
 
-		// 廃棄済みリストからデータを消去
-		g_storeSettingsEx.filter(val => g_localStorage[val] !== undefined)
-			.forEach(val => delete g_localStorage[val]);
+	// Adjustment, Volume, Appearance, Opacity, HitPosition初期値設定
+	checkLocalParam(`adjustment`, C_TYP_FLOAT, g_settings.adjustmentNum);
+	checkLocalParam(`volume`, C_TYP_NUMBER, g_settings.volumes.length - 1);
+	checkLocalParam(`appearance`);
+	checkLocalParam(`opacity`, C_TYP_NUMBER, g_settings.opacitys.length - 1);
+	checkLocalParam(`hitPosition`, C_TYP_FLOAT, g_settings.hitPositionNum);
 
-	} else {
-		g_localStorage = {
-			adjustment: 0,
-			hitPosition: 0,
-			volume: 100,
-			highscores: {},
-		};
+	// ハイスコア取得準備
+	if (g_localStorage.highscores === undefined) {
+		g_localStorage.highscores = {};
 	}
+
+	// 廃棄済みリストからデータを消去
+	g_storeSettingsEx.filter(val => g_localStorage[val] !== undefined)
+		.forEach(val => delete g_localStorage[val]);
 };
 
 /**
@@ -4477,8 +4563,6 @@ const titleInit = () => {
 	}
 	const releaseDate = (g_headerObj.releaseDate !== `` ? ` @${g_headerObj.releaseDate}` : ``);
 	const versionName = `&copy; 2018-${g_revisedDate.slice(0, 4)} ティックル, CW ${g_version}${customVersion}${releaseDate}`;
-
-	let reloadFlg = false;
 	const getLinkSiz = _name => getFontSize(_name, g_sWidth / 2 - 20, getBasicFont(), g_limitObj.lnkSiz, 12);
 
 	/**
@@ -4502,23 +4586,9 @@ const titleInit = () => {
 
 		// Reset
 		createCss2Button(`btnReset`, g_lblNameObj.dataReset, () => {
-			reloadFlg = false;
-			if (window.confirm(g_msgObj.dataResetConfirm)) {
-				g_localStorage = {
-					adjustment: 0,
-					volume: 100,
-					highscores: {},
-				};
-				localStorage.setItem(g_localStorageUrl, JSON.stringify(g_localStorage));
-				reloadFlg = true;
-			}
-		}, Object.assign(g_lblPosObj.btnReset, {
-			resetFunc: () => {
-				if (reloadFlg) {
-					location.reload();
-				}
-			},
-		}), g_cssObj.button_Reset),
+			clearTimeout(g_timeoutEvtTitleId);
+			dataMgtInit();
+		}, g_lblPosObj.btnReset, g_cssObj.button_Reset),
 
 		// ロケール切替
 		createCss2Button(`btnReload`, g_localeObj.val, () => true,
@@ -4700,6 +4770,201 @@ const setWindowStyle = (_text, _bkColor, _textColor, _align = C_ALIGN_LEFT, { _x
 	return lbl;
 };
 
+/*-----------------------------------------------------------*/
+/* Scene : DATA MANAGEMENT [pear] */
+/*-----------------------------------------------------------*/
+
+const dataMgtInit = () => {
+	clearWindow(true);
+	const prevPage = g_currentPage;
+	g_currentPage = `dataMgt`;
+
+	multiAppend(divRoot,
+
+		// 画面タイトル
+		getTitleDivLabel(`lblTitle`,
+			`<div class="settings_Title">DATA</div><div class="settings_Title2">MANAGEMENT</div>`
+				.replace(/[\t\n]/g, ``), 0, 15, g_cssObj.flex_centering),
+
+		createDescDiv(`dataDelMsg`, g_lblNameObj[`dataDelete${g_langStorage.safeMode}Desc`]),
+	);
+
+	// 各ボタン用のスプライトを作成
+	const optionsprite = createEmptySprite(divRoot, `optionsprite`, g_windowObj.optionSprite);
+
+	let reloadFlg = false;
+	const list = [C_FLG_OFF, C_FLG_ON];
+	const cssBarList = [C_FLG_OFF, C_FLG_ON];
+	const cssBgList = [g_settings.d_cssBgName, g_settings.d_cssBgName];
+
+	/**
+	 * データ管理用ラベルの作成
+	 * @param {string} _name 
+	 * @param {number} _heightPos 
+	 * @param {number} [x=0] 
+	 * @returns {HTMLDivElement}
+	 */
+	const createMgtLabel = (_name, _heightPos, { x = 0 } = {}) =>
+		createDivCss2Label(`lbl${toCapitalize(_name)}`, getStgDetailName(toCapitalize(_name)), {
+			x, y: g_limitObj.setLblHeight * _heightPos + 40,
+			siz: g_limitObj.setLblSiz, align: C_ALIGN_LEFT,
+		});
+
+	/**
+	 * データ管理用ボタンの作成
+	 * @param {string} _name 
+	 * @param {number} _heightPos 
+	 * @param {number} _widthPos 
+	 * @param {number} [w=125]
+	 * @param {function} func 
+	 * @returns {HTMLDivElement}
+	 */
+	const createMgtButton = (_name, _heightPos, _widthPos, { w = 125, func = () => true, ...rest } = {}) => {
+		const linkId = `btn${toCapitalize(_name)}`;
+		return createCss2Button(linkId, getStgDetailName(toCapitalize(_name)), () => {
+			const prevDisp = g_settings.dataMgtNum[_name];
+			const [prevBarColor, prevBgColor] = [cssBarList[prevDisp], cssBgList[prevDisp]];
+
+			g_settings.dataMgtNum[_name] = (g_settings.dataMgtNum[_name] + 1) % 2;
+			g_stateObj[`dm_${_name}`] = list[g_settings.dataMgtNum[_name]];
+
+			const nextDisp = g_settings.dataMgtNum[_name];
+			const [nextBarColor, nextBgColor] = [cssBarList[nextDisp], cssBgList[nextDisp]];
+			document.getElementById(linkId).classList.replace(g_cssObj[`button_${prevBarColor}`], g_cssObj[`button_${nextBarColor}`]);
+			document.getElementById(linkId).classList.replace(g_cssObj[`button_${prevBgColor}`], g_cssObj[`button_${nextBgColor}`]);
+			func();
+		}, {
+			x: _widthPos * (w + 5) + 20, y: g_limitObj.setLblHeight * _heightPos + 40,
+			w, h: 20, siz: g_limitObj.setLblSiz, borderStyle: `solid`, title: g_msgObj[_name], ...rest
+		}, g_cssObj[`button_${cssBgList[g_settings.dataMgtNum[_name]]}`], g_cssObj[`button_${cssBarList[g_settings.dataMgtNum[_name]]}`]);
+	};
+
+	multiAppend(optionsprite,
+		createMgtLabel(`workData`, 0),
+		createMgtButton(`environment`, 1.5, 0),
+		createMgtButton(`highscores`, 2.5, 0),
+		createMgtButton(`customKey`, 3.5, 0),
+		createMgtButton(`others`, 4.5, 0),
+		createMgtLabel(`keyData`, 6),
+		createDivCss2Label(`lblTargetKey`, `(${getKeyName(g_headerObj.keyLabels[0])})`, {
+			x: 90, y: g_limitObj.setLblHeight * 6 + 40,
+			siz: g_limitObj.setLblSiz, align: C_ALIGN_LEFT,
+		})
+	);
+
+	g_localStorageMgt = parseStorageData(g_localStorageUrl);
+	multiAppend(divRoot,
+		createDivCss2Label(`lblWorkDataView`,
+			viewKeyStorage(`workStorage`), g_lblPosObj.lblWorkDataView),
+		createDivCss2Label(`lblKeyDataView`, viewKeyStorage(`keyStorage`, g_headerObj.keyLabels[0]), g_lblPosObj.lblKeyDataView),
+	);
+	setUserSelect($id(`lblWorkDataView`), `text`);
+	setUserSelect($id(`lblKeyDataView`), `text`);
+
+	const keyList = makeDedupliArray(g_headerObj.keyLabels).sort((a, b) => parseInt(a) - parseInt(b));
+	const keyListSprite = createEmptySprite(optionsprite, `keyListSprite`, g_windowObj.keyListSprite);
+	keyList.forEach((key, j) => {
+		g_stateObj[`dm_${key}`] = C_FLG_OFF;
+		g_settings.dataMgtNum[key] = 0;
+		keyListSprite.appendChild(createMgtButton(key, j - 2, 0, {
+			w: Math.max(50, getStrWidth(getKeyName(key) + `    `, g_limitObj.setLblSiz, getBasicFont())),
+			func: () => {
+				lblKeyDataView.innerHTML = viewKeyStorage(`keyStorage`, key);
+				lblTargetKey.innerHTML = `(${getKeyName(key)})`;
+			},
+		}));
+		document.getElementById(`btn${key}`).innerHTML = getKeyName(key);
+	});
+
+	// ユーザカスタムイベント(初期)
+	g_customJsObj.dataMgt.forEach(func => func());
+
+	multiAppend(divRoot,
+		createCss2Button(`btnBack`, g_lblNameObj.b_back, () => true,
+			Object.assign(g_lblPosObj.btnResetBack, {
+				resetFunc: () => prevPage === `title` ? titleInit() : g_moveSettingWindow(false),
+			}), g_cssObj.button_Back),
+
+		createCss2Button(`btnSafeMode`, g_lblNameObj.b_safeMode +
+			(g_langStorage.safeMode === C_FLG_ON ? C_FLG_OFF : C_FLG_ON), () => {
+				if (window.confirm(g_msgObj[`safeMode${g_langStorage.safeMode}Confirm`])) {
+					g_langStorage.safeMode = g_langStorage.safeMode === C_FLG_ON ? C_FLG_OFF : C_FLG_ON;
+					localStorage.setItem(`danoni-locale`, JSON.stringify(g_langStorage));
+					location.reload();
+				}
+			}, g_lblPosObj.btnSafeMode, g_cssObj.button_Setting),
+
+		createCss2Button(`btnReset`, g_lblNameObj.b_cReset, () => {
+			reloadFlg = false;
+			const backupData = new Map();
+
+			const selectedData = Object.keys(g_stateObj)
+				.filter(key => key.startsWith('dm_') && g_stateObj[key] === C_FLG_ON)
+				.map(key => key.slice(`dm_`.length));
+
+			if (window.confirm(g_msgObj.dataResetConfirm +
+				`\n\n${selectedData.map(val => `- ${g_msgObj[val] || g_msgObj.keyTypes.split('{0}').join(val)}`).join(`\n`)}`)) {
+				selectedData.forEach(key => {
+					if (g_resetFunc.has(key)) {
+						backupData.set(key, JSON.parse(JSON.stringify(g_localStorageMgt)));
+						g_resetFunc.get(key)();
+						localStorage.setItem(g_localStorageUrl, JSON.stringify(g_localStorageMgt));
+
+					} else if (keyList.includes(key)) {
+						const storage = parseStorageData(`danonicw-${key}k`);
+
+						if (Object.keys(storage).length > 0) {
+							backupData.set(key, JSON.parse(JSON.stringify(storage)));
+							g_settings.keyStorages.forEach(val => delete storage[val]);
+							localStorage.setItem(`danonicw-${key}k`, JSON.stringify(storage));
+						} else {
+							backupData.set(`XX` + key, JSON.parse(JSON.stringify(g_localStorageMgt)));
+							g_settings.keyStorages.forEach(val => delete g_localStorageMgt[`${val}${key}`]);
+							localStorage.setItem(g_localStorageUrl, JSON.stringify(g_localStorageMgt));
+						}
+					}
+				});
+				reloadFlg = true;
+				sessionStorage.setItem('resetBackup', JSON.stringify(Array.from(backupData.entries())));
+			}
+		}, Object.assign(g_lblPosObj.btnResetN, {
+			visibility: g_langStorage.safeMode === C_FLG_OFF ? C_DIS_INHERIT : `hidden`,
+			resetFunc: () => {
+				if (reloadFlg) {
+					location.reload();
+				}
+			},
+		}), g_cssObj.button_Reset),
+
+		// リカバリー用のボタン
+		createCss2Button(`btnUndo`, g_lblNameObj.b_undo, () => {
+			const backup = JSON.parse(sessionStorage.getItem('resetBackup'));
+			if (backup && window.confirm(g_msgObj.dataRestoreConfirm)) {
+				backup.forEach(([key, data]) => {
+					if (g_resetFunc.has(key) || keyList.includes(key.slice(`XX`.length))) {
+						Object.assign(g_localStorageMgt, data);
+						localStorage.setItem(g_localStorageUrl, JSON.stringify(g_localStorageMgt));
+					} else if (keyList.includes(key)) {
+						localStorage.setItem(`danonicw-${key}k`, JSON.stringify(data));
+					}
+				});
+				sessionStorage.removeItem('resetBackup');
+				location.reload();
+			}
+		}, g_lblPosObj.btnUndo, g_cssObj.button_Tweet)
+	);
+	if (sessionStorage.getItem('resetBackup') === null) {
+		btnUndo.style.display = C_DIS_NONE;
+	}
+
+	// キー操作イベント（デフォルト）
+	setShortcutEvent(g_currentPage, () => true, { dfEvtFlg: true });
+
+	document.oncontextmenu = () => true;
+	divRoot.oncontextmenu = () => false;
+
+	g_skinJsObj.dataMgt.forEach(func => func());
+};
 
 /*-----------------------------------------------------------*/
 /* Scene : SETTINGS [lime] */
@@ -4743,7 +5008,13 @@ const commonSettingBtn = _labelName => {
 		createCss2Button(`btnSave`, g_lblNameObj.dataSave, evt => switchSave(evt),
 			Object.assign(g_lblPosObj.btnSave, {
 				cxtFunc: evt => switchSave(evt),
+				visibility: g_langStorage.safeMode === C_FLG_OFF ? C_DIS_INHERIT : `hidden`,
 			}), g_cssObj.button_Default, (g_stateObj.dataSaveFlg ? g_cssObj.button_ON : g_cssObj.button_OFF)),
+
+		// データ管理画面へ移動
+		createCss2Button(`btnReset`, g_lblNameObj.dataReset, () => {
+			dataMgtInit();
+		}, g_lblPosObj.btnReset, g_cssObj.button_Reset),
 	);
 };
 
@@ -4804,26 +5075,15 @@ const setSpriteList = _settingList => {
 };
 
 /**
- * スライダー共通処理 (Fadein)
- * @param {HTMLInputElement} _slider 
- * @param {HTMLDivElement} _link 
- * @returns {string}
- */
-const inputSlider = (_slider, _link) => {
-	const value = parseInt(_slider.value);
-	_link.textContent = `${value}${g_lblNameObj.percent}`;
-	return value;
-};
-
-/**
- * スライダー共通処理 (Appearance)
+ * スライダー共通処理 (Fadein, Appearance)
  * @param {HTMLInputElement} _slider 
  * @param {HTMLDivElement} _link 
+ * @param {string} _type 
  * @returns {string}
  */
-const inputSliderAppearance = (_slider, _link) => {
+const inputSlider = (_slider, _link, _type) => {
 	const value = parseInt(_slider.value);
-	_link.textContent = `${g_hidSudObj.distH[g_stateObj.appearance](value)}`;
+	_link.textContent = g_sliderView.get(_type)(value);
 	return value;
 };
 
@@ -5489,18 +5749,17 @@ const setDifficulty = (_initFlg) => {
 			g_keyObj.currentPtn = 0;
 			g_keycons.keySwitchNum = 0;
 		}
-		const hasKeyStorage = localStorage.getItem(`danonicw-${g_keyObj.currentKey}k`);
 		let storageObj, addKey = ``;
 
 		if (!g_stateObj.extraKeyFlg) {
 
 			// キー別のローカルストレージの初期設定 ※特殊キーは除く
-			g_localKeyStorage = hasKeyStorage ? JSON.parse(hasKeyStorage) : {
+			g_localKeyStorage = parseStorageData(`danonicw-${g_keyObj.currentKey}k`, {
 				reverse: C_FLG_OFF,
 				keyCtrl: [[]],
 				keyCtrlPtn: 0,
 				setColor: [],
-			};
+			});
 			storageObj = g_localKeyStorage;
 
 		} else {
@@ -5929,7 +6188,7 @@ const createOptionWindow = _sprite => {
 
 	const fadeinSlider = document.getElementById(`fadeinSlider`);
 	fadeinSlider.addEventListener(`input`, () =>
-		g_stateObj.fadein = inputSlider(fadeinSlider, lnkFadein), false);
+		g_stateObj.fadein = inputSlider(fadeinSlider, lnkFadein, `fadein`), false);
 
 	// ---------------------------------------------------
 	// ボリューム (Volume) 
@@ -6636,12 +6895,12 @@ const createSettingsDisplayWindow = _sprite => {
 
 	const appearanceSlider = document.getElementById(`appearanceSlider`);
 	appearanceSlider.addEventListener(`input`, () =>
-		g_hidSudObj.filterPos = inputSliderAppearance(appearanceSlider, lblAppearancePos), false);
+		g_hidSudObj.filterPos = inputSlider(appearanceSlider, lblAppearancePos, `appearance`), false);
 
 	const dispAppearanceSlider = () => {
 		[`lblAppearanceBar`, `lnkLockBtn`, `lnkfilterLine`].forEach(obj =>
 			$id(obj).visibility = g_appearanceRanges.includes(g_stateObj.appearance) ? `Visible` : `Hidden`);
-		inputSliderAppearance(appearanceSlider, lblAppearancePos);
+		inputSlider(appearanceSlider, lblAppearancePos, `appearance`);
 	};
 	dispAppearanceSlider();
 
@@ -9847,7 +10106,9 @@ const getArrowSettings = () => {
 
 	if (g_stateObj.dataSaveFlg) {
 		// ローカルストレージへAdjustment, HitPosition, Volume設定を保存
+		// 変更が確定した時点で表示用のキャッシュを解放
 		g_storeSettings.forEach(setting => g_localStorage[setting] = g_stateObj[setting]);
+		viewKeyStorage.cache = new Map();
 		localStorage.setItem(g_localStorageUrl, JSON.stringify(g_localStorage));
 	}
 

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2025/02/11 (v39.4.1)
+ * Revised : 2025/02/16 (v39.6.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -93,6 +93,7 @@ const g_limitObj = {
 
 /** 設定項目の位置 */
 const g_settingPos = {
+    dataMgt: {},
     option: {
         difficulty: { heightPos: 0, y: -5, dw: 0, dh: 10 },
         speed: { heightPos: 2, y: 0, dw: 0, dh: 0 },
@@ -167,6 +168,7 @@ const g_windowObj = {
     divBack: { background: `linear-gradient(#000000, #222222)` },
 
     colorPickSprite: { x: 0, y: 90, w: 50, h: 280 },
+    keyListSprite: { x: 0, y: g_limitObj.setLblHeight * 7.5 + 40, w: 150, h: 120, overflow: C_DIS_AUTO },
 };
 
 const g_lblPosObj = {};
@@ -239,6 +241,33 @@ const updateWindowSiz = () => {
             x: g_btnX(1) - 160, y: (g_sHeight / 2) + 150, w: 140, h: 50, siz: 20, border: `solid 1px #999999`,
         },
 
+        /** データ管理 */
+        btnResetBack: {
+            x: g_btnX(), y: g_sHeight - 20, w: g_btnWidth(1 / 4), h: 16, siz: 12,
+        },
+        btnSafeMode: {
+            x: g_btnX(), siz: 18,
+        },
+        dataDelMsg: {
+            x: 0, y: 65, w: g_sWidth, h: 20, siz: g_limitObj.mainSiz,
+        },
+        btnResetN: {
+            x: g_btnX(1 / 3), y: g_sHeight - 100, w: g_btnWidth(1 / 3), h: g_limitObj.btnHeight,
+        },
+        btnUndo: {
+            x: g_btnX(2 / 3), y: g_sHeight - 100, w: g_btnWidth(1 / 3), h: g_limitObj.btnHeight,
+        },
+        lblWorkDataView: {
+            x: g_btnX(5 / 12), y: 100, w: g_btnWidth(1 / 2), h: g_sHeight / 4, siz: 12, align: C_ALIGN_LEFT,
+            overflow: C_DIS_AUTO, background: `#222222`, color: `#cccccc`,
+            whiteSpace: `nowrap`,
+        },
+        lblKeyDataView: {
+            x: g_btnX(5 / 12), y: 100 + g_sHeight / 4 + 10, w: g_btnWidth(1 / 2), h: g_sHeight / 3 - 10, siz: 12, align: C_ALIGN_LEFT,
+            overflow: C_DIS_AUTO, background: `#222222`, color: `#cccccc`,
+            whiteSpace: `nowrap`,
+        },
+
         /** 設定画面 */
         btnBack: {
             x: g_btnX(),
@@ -274,7 +303,7 @@ const updateWindowSiz = () => {
             x: g_limitObj.setLblLeft, y: 0,
         },
         lblFadeinBar: {
-            x: g_limitObj.setLblLeft, y: 0,
+            x: g_limitObj.setLblLeft, y: 0, type: `range`,
         },
 
         /** 設定: 譜面明細子画面 */
@@ -327,7 +356,7 @@ const updateWindowSiz = () => {
             x: g_limitObj.setLblLeft, y: 20, siz: 12, align: C_ALIGN_CENTER,
         },
         lblAppearanceBar: {
-            x: g_limitObj.setLblLeft, y: 15,
+            x: g_limitObj.setLblLeft, y: 15, type: `range`,
         },
         lnkLockBtn: {
             x: g_limitObj.setLblLeft + g_limitObj.setLblWidth - 40, y: 0, w: 40, h: g_limitObj.setLblHeight, siz: 12,
@@ -940,6 +969,11 @@ const g_stateObj = {
     rotateEnabled: true,
     flatStepHeight: C_ARW_WIDTH,
 
+    dm_environment: C_FLG_OFF,
+    dm_highscores: C_FLG_OFF,
+    dm_customKey: C_FLG_OFF,
+    dm_others: C_FLG_OFF,
+
     layerNum: 2,
 };
 
@@ -989,6 +1023,16 @@ const makeSpeedList = (_minSpd, _maxSpd) => [...Array((_maxSpd - _minSpd) * 20 +
 
 // 設定系全般管理
 const g_settings = {
+
+    dataMgtNum: {
+        environment: 0,
+        highscores: 0,
+        customKey: 0,
+        others: 0,
+    },
+    environments: [`adjustment`, `volume`, `colorType`, `appearance`, `opacity`, `hitPosition`],
+    keyStorages: [`reverse`, `keyCtrl`, `keyCtrlPtn`, `shuffle`, `color`, `stepRtn`],
+
     speeds: makeSpeedList(C_MIN_SPEED, C_MAX_SPEED),
     speedNum: 0,
     speedTerms: [20, 5, 1],
@@ -1247,6 +1291,55 @@ const resetXY = () => {
     Object.keys(g_posYs).forEach(_id => delete g_posYs[_id]);
 };
 
+/**
+ * データ消去用管理関数
+ */
+const g_resetFunc = new Map([
+    ['highscores', () => {
+        delete g_localStorageMgt.highscores;
+        g_localStorageMgt.highscores = {};
+    }],
+    ['environment', () => g_settings.environments.forEach(key => delete g_localStorageMgt[key])],
+    [`customKey`, () => Object.keys(g_localStorageMgt)
+        .filter(key => listMatching(key, g_settings.keyStorages.concat(`setColor`), { prefix: `^` }))
+        .forEach(key => delete g_localStorageMgt[key])],
+    [`others`, () => Object.keys(g_localStorageMgt)
+        .filter(key => !g_settings.environments.includes(key) && key !== `highscores` &&
+            !listMatching(key, g_settings.keyStorages.concat(`setColor`), { prefix: `^` }))
+        .forEach(key => delete g_localStorageMgt[key])],
+]);
+
+/**
+ * ストレージ管理関数
+ */
+const g_storageFunc = new Map([
+
+    // 作品別のストレージ情報
+    ['workStorage', (_key) => {
+        const settingStorage = {};
+
+        // カスタムキー定義のストレージデータを表示から除去
+        Object.keys(g_localStorageMgt).filter(val => !listMatching(val, g_settings.keyStorages.concat(`setColor`), { prefix: `^` }))
+            .forEach(val => settingStorage[val] = g_localStorageMgt[val]);
+        return settingStorage;
+    }],
+
+    // キー別のストレージ情報
+    ['keyStorage', (_key) => {
+        let keyStorage = parseStorageData(`danonicw-${_key}k`);
+        if (Object.keys(keyStorage).length === 0) {
+
+            // キー別の情報が見つからない場合は作品別の情報から検索
+            Object.keys(g_localStorageMgt).filter(val => val.endsWith(_key))
+                .forEach(val => keyStorage[val] = g_localStorageMgt[val]);
+            if (Object.keys(keyStorage).length === 0) {
+                return ``;
+            }
+        }
+        return keyStorage;
+    }],
+]);
+
 /**
  * シャッフル適用関数
  * @param {number} keyNum
@@ -1450,6 +1543,11 @@ const g_effectFunc = new Map([
     ['Squids', () => g_setEffect(`effects-squids-arrow`, `effects-squids-frz`)],
 ]);
 
+const g_sliderView = new Map([
+    ['fadein', _val => `${_val}${g_lblNameObj.percent}`],
+    ['appearance', _val => `${g_hidSudObj.distH[g_stateObj.appearance](_val)}`],
+]);
+
 const g_keycons = {
     configTypes: [`Main`, `Replaced`, `ALL`],
     configTypeNum: 0,
@@ -1875,6 +1973,16 @@ const g_shortcutObj = {
         F1: { id: `btnHelp`, reset: true },
         ControlLeft_KeyC: { id: `` },
         KeyC: { id: `btnComment` },
+        KeyD: { id: `btnReset` },
+    },
+    dataMgt: {
+        KeyE: { id: `btnEnvironment` },
+        KeyH: { id: `btnHighscores` },
+        KeyK: { id: `btnCustomKey` },
+        KeyO: { id: `btnOthers` },
+        Escape: { id: `btnBack` },
+        ShiftLeft_Tab: { id: `btnBack` },
+        ShiftRight_Tab: { id: `btnBack` },
     },
     option: {
         ShiftLeft_KeyD: { id: `lnkDifficultyL` },
@@ -2142,6 +2250,8 @@ const g_shortcutObj = {
         Escape: { id: `btnBack` },
         Space: { id: `btnKeyConfig` },
         Enter: { id: `btnPlay` },
+        ShiftLeft_Tab: { id: `btnBack` },
+        ShiftRight_Tab: { id: `btnBack` },
         Tab: { id: `btnexSetting` },
     },
     keyConfig: {
@@ -2173,6 +2283,7 @@ const g_shortcutObj = {
 const g_btnWaitFrame = {
     initial: { b_frame: 0, s_frame: 0 },
     title: { b_frame: 0, s_frame: 0 },
+    dataMgt: { b_frame: 0, s_frame: 0 },
     option: { b_frame: 0, s_frame: 0, initial: true },
     difSelector: { b_frame: 0, s_frame: 0 },
     settingsDisplay: { b_frame: 0, s_frame: 0 },
@@ -2187,6 +2298,7 @@ const g_btnWaitFrame = {
 // 主要ボタンのリスト
 const g_btnPatterns = {
     title: { Start: 0, Comment: -10 },
+    dataMgt: { Back: 0, Environment: -35, Highscores: -35, CustomKey: -35, Others: -35 },
     option: { Back: 0, KeyConfig: 0, Play: 0, Display: -5, Save: -10, Graph: -25 },
     difSelector: {},
     settingsDisplay: { Back: 0, KeyConfig: 0, Play: 0, Save: -10, Settings: -5 },
@@ -3236,6 +3348,8 @@ const g_lang_msgInfoObj = {
         また、Fadein を使用した場合は通常よりズレが発生することがあります。<br>
         音源ファイルを js/txt 化するか、サーバー上動作とすれば解消します。(W-0012)`,
         W_0021: `クリップボードのコピーに失敗しました。`,
+        W_0031: `セーフモード適用中です。ローカルストレージ情報を使わない設定になっています。<br>
+        「Data Management」から解除が可能です。(W-0031)`,
 
         E_0011: `アーティスト名が未入力です。(E-0011)`,
         E_0012: `曲名情報が未設定です。(E-0012)<br>
@@ -3286,6 +3400,9 @@ const g_lang_msgInfoObj = {
         It can be solved by converting the sound source file to encoded data (js, txt) or 
         operating it on the server. (W-0012)`,
         W_0021: `Failed to copy the clipboard.`,
+        W_0031: `Safe Mode is being applied. <br>
+        The setting is set to not use local storage information <br>
+        and can be removed from Data Management. (W-0031)`,
 
         E_0011: `The artist name is not set. (E-0011)`,
         E_0012: `The song title information is not set. (E-0012)<br>
@@ -3354,7 +3471,7 @@ const g_lblNameObj = {
     maker: `Maker`,
     artist: `Artist`,
 
-    dataReset: `Data Reset`,
+    dataReset: `Data Management`,
     dataSave: `Data Save`,
     clickHere: `Click Here!!`,
     comment: `Comment`,
@@ -3366,6 +3483,8 @@ const g_lblNameObj = {
     b_keyConfig: `KeyConfig`,
     b_play: `PLAY!`,
     b_reset: `Reset Key`,
+    b_safeMode: `Safe Mode -> `,
+    b_undo: `Restore`,
     b_settings: `To Settings`,
     b_copy: `CopyResult`,
     b_tweet: `Post X`,
@@ -3607,6 +3726,9 @@ const g_linkObj = {
  */
 const g_lang_lblNameObj = {
     Ja: {
+        dataDeleteOFFDesc: `消去したいデータの種類を選んで「Reset」を押してください`,
+        dataDeleteONDesc: `セーフモード適用中はデータ消去は行えません。変更するにはセーフモードを解除してください`,
+
         kcDesc: `[{0}:スキップ / {1}:(代替キーのみ)キー無効化]`,
         kcShuffleDesc: `番号をクリックでシャッフルグループ、矢印をクリックでカラーグループを変更`,
         kcNoShuffleDesc: `矢印をクリックでカラーグループを変更`,
@@ -3648,6 +3770,9 @@ const g_lang_lblNameObj = {
         securityUrl: `https://github.com/cwtickle/danoniplus/security/policy`,
     },
     En: {
+        dataDeleteOFFDesc: `Select the type of data you wish to delete and press "Reset".`,
+        dataDeleteONDesc: `Data erasure cannot be performed while safe mode is applied. <br>Please deactivate the safe mode to change the data.`,
+
         kcDesc: `[{0}:Skip / {1}:Key invalidation (Alternate keys only)]`,
         kcShuffleDesc: `Click the number to change the shuffle group, and click the arrow to change the color.`,
         kcNoShuffleDesc: `Click the arrow to change the color group.`,
@@ -3708,7 +3833,16 @@ const g_lang_msgObj = {
         github: `Dancing☆Onigiri (CW Edition)のGitHubページへ移動します。`,
         security: `Dancing☆Onigiri (CW Edition)のサポート情報ページへ移動します。`,
 
-        dataResetConfirm: `この作品のローカル設定をクリアします。よろしいですか？\n(ハイスコアやAdjustment等のデータが全てクリアされます)`,
+        environment: `${g_settings.environments.map(v => toCapitalize(v)).join(`, `)}の設定を初期化します。`,
+        highscores: `全譜面のハイスコアを初期化します。\n個別に初期化したい場合はSettings画面より行ってください。`,
+        customKey: `カスタムキーに関する全ての保存データを消去します。\n下記のKeyDataから個別に消去可能できないときに使用してください。`,
+        others: `標準以外に関する保存データを消去します。`,
+        keyTypes: `Key: {0} の保存データ（個別の色設定を除く）を消去します。`,
+
+        dataResetConfirm: `選択したローカル設定をクリアします。よろしいですか？`,
+        dataRestoreConfirm: `ローカル設定を前回の状態に戻します（１回限り）。よろしいですか？\n消去した設定によっては今の設定が上書きされることがあります。`,
+        safeModeONConfirm: `セーフモードを解除して、ローカルストレージ情報を利用します。\nよろしいですか？`,
+        safeModeOFFConfirm: `セーフモードを設定して、ローカルストレージを使わずにリロードします。\nよろしいですか？`,
         keyResetConfirm: `キーを初期配置に戻します。よろしいですか？`,
         highscResetConfirm: `この譜面のハイスコアを消去します。よろしいですか？`,
         colorCopyConfirm: `フリーズアローの配色を矢印色に置き換えます\n(通常・ヒット時双方を置き換えます)。よろしいですか？`,
@@ -3790,7 +3924,16 @@ const g_lang_msgObj = {
         github: `Go to the GitHub page of Dancing Onigiri "CW Edition".`,
         security: `Go to the support information page for Dancing Onigiri "CW Edition".`,
 
-        dataResetConfirm: `Delete the local settings in this game. Is it OK?\n(High score, adjustment, volume and some settings will be initialized)`,
+        environment: `Initialize ${g_settings.environments.map(v => toCapitalize(v)).join(`, `)} settings.`,
+        highscores: `Initializes the high score of all charts. \nIf you want to initialize each chart individually, \nplease do so from the Highscore view in the Settings screen.`,
+        customKey: `Delete stored data related to all custom keymodes. \nUse this option when you cannot delete individual KeyData from the following KeyData.`,
+        others: `Delete non-standard stored data.`,
+        keyTypes: `Deletes the stored data (except color settings) for Key: {0}.`,
+
+        dataResetConfirm: `Delete the selected local settings. Is it OK?`,
+        dataRestoreConfirm: `Restore local settings to previous state (one time only). Is it OK?\nSome deleted settings may overwrite the current settings.`,
+        safeModeONConfirm: `Exit safe mode and use local storage information. Is it OK?`,
+        safeModeOFFConfirm: `Set safe mode and reload without local storage. Is it OK?`,
         keyResetConfirm: `Resets the assigned key to the initial state. Is it OK?`,
         highscResetConfirm: `Erases the high score for this chart. Is it OK?`,
         colorCopyConfirm: `Replace freeze arrow color scheme with arrow color\n(replace both normal and hit). Is this OK?`,
@@ -3873,8 +4016,10 @@ const g_lang_msgObj = {
  */
 const g_errMsgObj = {
     title: [],
+    dataMgt: [],
     option: [],
     settingsDisplay: [],
+    exSetting: [],
     loading: [],
     main: [],
     result: [],
@@ -3888,6 +4033,7 @@ const g_customJsObj = {
     preTitle: [],
     title: [],
     titleEnterFrame: [],
+    dataMgt: [],
     option: [],
     difficulty: [],
     settingsDisplay: [],
@@ -3927,6 +4073,7 @@ const g_customJsObj = {
  */
 const g_skinJsObj = {
     title: [],
+    dataMgt: [],
     option: [],
     settingsDisplay: [],
     exSetting: [],

package/package.json

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