danoniplus 28.2.1 → 28.3.1

package/css/danoni_main.css

@@ -4,7 +4,7 @@
   本体cssファイル
 
   Created : 2018/10/08
-  Revised : 2022/10/05 (v28.2.1)
+  Revised : 2022/10/16 (v28.3.1)
 
   https://github.com/cwtickle/danoniplus
 ------------------------------------------ */
@@ -23,14 +23,14 @@
 }
 
 input[type="range"] {
-	-webkit-appearance: none;
+	appearance: none;
 	background: transparent;
 	height: 20px;
 	width: 205px;
 }
 
 input[type="range"]::-webkit-slider-thumb {
-	-webkit-appearance: none;
+	appearance: none;
 	background: #606060;
 	height: 20px;
 	width: 20px;

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2022/10/05
+ * Revised : 2022/10/16
  * 
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 28.2.1`;
-const g_revisedDate = `2022/10/05`;
+const g_version = `Ver 28.3.1`;
+const g_revisedDate = `2022/10/16`;
 const g_alphaVersion = ``;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
@@ -949,8 +949,6 @@ const createDiv = (_id, _x, _y, _width, _height, _classes = []) => {
 const setUserSelect = (_style, _value = C_DIS_NONE) => {
 	_style.userSelect = _value;
 	_style.webkitUserSelect = _value;
-	_style.msUserSelect = _value;
-	_style.mozUserSelect = _value;
 	_style.webkitTouchCallout = _value;
 };
 
@@ -1573,7 +1571,6 @@ const drawTitleResultMotion = _displayName => {
 // WebAudioAPIでAudio要素風に再生するクラス
 class AudioPlayer {
 	constructor() {
-		const AudioContext = window.AudioContext ?? window.webkitAudioContext;
 		this._context = new AudioContext();
 		this._gain = this._context.createGain();
 		this._gain.connect(this._context.destination);
@@ -3965,6 +3962,7 @@ const setWindowStyle = (_text, _bkColor, _textColor, _align = C_ALIGN_LEFT) => {
 	// ウィンドウ枠の行を取得するために一時的な枠を作成
 	const tmplbl = createDivCss2Label(`lblTmpWarning`, _text, {
 		x: 0, y: 70, w: g_sWidth, h: 20, siz: C_SIZ_MAIN, lineHeight: `15px`, fontFamily: getBasicFont(),
+		whiteSpace: `normal`,
 	})
 	divRoot.appendChild(tmplbl);
 	const range = new Range();
@@ -3976,6 +3974,7 @@ const setWindowStyle = (_text, _bkColor, _textColor, _align = C_ALIGN_LEFT) => {
 	const lbl = createDivCss2Label(`lblWarning`, _text, {
 		x: 0, y: 70, w: g_sWidth, h: warnHeight, siz: C_SIZ_MAIN, backgroundColor: _bkColor,
 		opacity: 0.9, lineHeight: `15px`, color: _textColor, align: _align, fontFamily: getBasicFont(),
+		whiteSpace: `normal`,
 	});
 	if (warnHeight === 150) {
 		lbl.style.overflow = `auto`;
@@ -5324,6 +5323,7 @@ const getKeyCtrl = (_localStorage, _extraKeyName = ``) => {
 			for (let j = 0; j < maxPtn; j++) {
 				g_keyObj[`${type}${copyPtn}_${j}`] = copyArray2d(g_keyObj[`${type}${basePtn}_${j}`]);
 			}
+			g_keyObj[`${type}${copyPtn}_0d`] = structuredClone(g_keyObj[`${type}${copyPtn}_0`]);
 		});
 	}
 };
@@ -5543,7 +5543,7 @@ const createSettingsDisplayWindow = _sprite => {
 		g_hidSudObj.filterPos = inputSlider(appearanceSlider, lblAppearancePos), false);
 
 	const dispAppearanceSlider = _ => {
-		[`lblAppearancePos`, `lblAppearanceBar`, `lnkLockBtn`].forEach(obj =>
+		[`lblAppearancePos`, `lblAppearanceBar`, `lnkLockBtn`, `lnkfilterLine`].forEach(obj =>
 			document.getElementById(obj).style.visibility =
 			g_appearanceRanges.includes(g_stateObj.appearance) ? `Visible` : `Hidden`
 		);
@@ -5553,7 +5553,13 @@ const createSettingsDisplayWindow = _sprite => {
 	// ---------------------------------------------------
 	// 判定表示系の不透明度 (Opacity)
 	// 縦位置: 9
-	createGeneralSetting(spriteList.opacity, `opacity`, { unitName: g_lblNameObj.percent, displayName: g_currentPage });
+	let opacityUse = false;
+	[`judgment`, `fastSlow`, `filterLine`].forEach(display =>
+		opacityUse ||= g_headerObj[`${display}Use`] || g_headerObj[`${display}Set`] === C_FLG_ON);
+
+	if (opacityUse) {
+		createGeneralSetting(spriteList.opacity, `opacity`, { unitName: g_lblNameObj.percent, displayName: g_currentPage });
+	}
 };
 
 /**
@@ -5673,22 +5679,8 @@ const keyConfigInit = (_kcType = g_kcType) => {
 	 * @param {number} _k 
 	 * @param {string} _cssName 
 	 */
-	const changeKeyConfigColor = (_j, _k, _cssName) => {
-		const obj = document.querySelector(`#keycon${_j}_${_k}`);
-		const resetClass = _className => {
-			if (obj.classList.contains(_className)) {
-				obj.classList.remove(_className);
-			}
-		};
-
-		// CSSクラスの除去
-		resetClass(g_cssObj.keyconfig_Changekey);
-		resetClass(g_cssObj.keyconfig_Defaultkey);
-		resetClass(g_cssObj.title_base);
-
-		// 指定されたCSSクラスを適用
-		obj.classList.add(_cssName);
-	};
+	const changeKeyConfigColor = (_j, _k, _cssName) =>
+		changeConfigColor(document.querySelector(`#keycon${_j}_${_k}`), _cssName);
 
 	/**
 	 * 一時的に矢印色・シャッフルグループを変更（共通処理）
@@ -5729,6 +5721,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 		const tmpShuffle = changeTmpData(`shuffle`, 10, _j, _scrollNum);
 		document.getElementById(`sArrow${_j}`).textContent = tmpShuffle + 1;
 
+		changeShuffleConfigColor(keyCtrlPtn, g_keyObj[`shuffle${keyCtrlPtn}_${g_keycons.shuffleGroupNum}`][_j], _j);
 		adjustScrollPoint(parseFloat($id(`arrow${_j}`).left));
 	};
 
@@ -5825,6 +5818,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 
 	/**
 	 * カラー・シャッフルグループ設定の表示
+	 * - シャッフルグループではデフォルトからの差異表示もここで行う
 	 * @param {string} _type 
 	 */
 	const viewGroup = _type => {
@@ -5834,6 +5828,10 @@ const keyConfigInit = (_kcType = g_kcType) => {
 				document.getElementById(`lnk${toCapitalize(_type)}Group`).textContent = getStgDetailName(num);
 			}
 			viewGroupObj[_type](`_${g_keycons[`${_type}GroupNum`]}`);
+
+			if (_type === `shuffle`) {
+				changeShuffleConfigColor(keyCtrlPtn, g_keyObj[`shuffle${keyCtrlPtn}_${g_keycons.shuffleGroupNum}`]);
+			}
 		}
 	};
 	const setGroup = (_type, _scrollNum = 1) => {
@@ -6072,7 +6070,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 		keyConfigInit(g_kcType);
 	};
 
-	const colorPickSprite = createEmptySprite(divRoot, `colorPickSprite`, g_windowObj.colorPickSprite);
+	const colorPickSprite = createEmptySprite(divRoot, `colorPickSprite`, Object.assign({ title: g_msgObj.pickArrow }, g_windowObj.colorPickSprite));
 	if ([`Default`, `Type0`].includes(g_colorType)) {
 		colorPickSprite.style.display = C_DIS_NONE;
 	}
@@ -6172,6 +6170,12 @@ const keyConfigInit = (_kcType = g_kcType) => {
 
 		// キーコンフィグ画面を再呼び出し
 		keyConfigInit();
+
+		// シャッフルグループのデフォルト値からの差異表示（色付け）
+		// 再描画後で無いと色付けできないため、keyConfigInit() 実行後に処理
+		if (g_headerObj.shuffleUse) {
+			changeShuffleConfigColor(`${g_keyObj.currentKey}_${g_keyObj.currentPtn}`, g_keyObj[`shuffle${g_keyObj.currentKey}_${g_keyObj.currentPtn}_${g_keycons.shuffleGroupNum}`]);
+		}
 	};
 
 	// ユーザカスタムイベント(初期)
@@ -6342,6 +6346,47 @@ const changeSetColor = _ => {
 	}
 };
 
+/**
+ * コンフィグの色変更
+ * @param {object} _obj 
+ * @param {string} _cssName 
+ */
+const changeConfigColor = (_obj, _cssName) => {
+	const resetClass = _className => {
+		if (_obj.classList.contains(_className)) {
+			_obj.classList.remove(_className);
+		}
+	};
+
+	// CSSクラスの除去
+	resetClass(g_cssObj.keyconfig_Changekey);
+	resetClass(g_cssObj.keyconfig_Defaultkey);
+	resetClass(g_cssObj.title_base);
+
+	// 指定されたCSSクラスを適用
+	_obj.classList.add(_cssName);
+};
+
+/**
+ * シャッフルグループの色変更
+ * - デフォルト値と違う番号になった場合、色付けする
+ * @param {string} _keyCtrlPtn キーコンフィグパターン
+ * @param {array} _vals シャッフルグループ番号（群）
+ * @param {number} _j (-1: 全体に対して色付け, それ以外: 指定箇所のみ色付け)
+ */
+const changeShuffleConfigColor = (_keyCtrlPtn, _vals, _j = -1) => {
+	const changeTargetColor = (_val, _k) => {
+		const isEqualShuffleGr = (_val === g_keyObj[`shuffle${_keyCtrlPtn}_0d`][_k]);
+		changeConfigColor(document.getElementById(`sArrow${_k}`), isEqualShuffleGr ? g_cssObj.title_base : g_cssObj.keyconfig_Changekey);
+	};
+
+	if (_j === -1) {
+		_vals.forEach((val, m) => changeTargetColor(val, m));
+	} else {
+		changeTargetColor(_vals, _j);
+	}
+};
+
 /*-----------------------------------------------------------*/
 /* Scene : LOADING [strawberry] */
 /*-----------------------------------------------------------*/
@@ -9289,9 +9334,7 @@ const changeAppearanceFilter = (_appearance, _num = 10) => {
 	const bottomShape = `inset(${numPlus}% 0% ${_num}% 0%)`;
 
 	$id(`arrowSprite${topNum}`).clipPath = topShape;
-	$id(`arrowSprite${topNum}`).webkitClipPath = topShape;
 	$id(`arrowSprite${bottomNum}`).clipPath = bottomShape;
-	$id(`arrowSprite${bottomNum}`).webkitClipPath = bottomShape;
 
 	$id(`filterBar0`).top = `${g_posObj.arrowHeight * _num / 100}px`;
 	$id(`filterBar1`).top = `${g_posObj.arrowHeight * (100 - _num) / 100}px`;

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2022/10/05 (v28.2.1)
+ * Revised : 2022/10/16 (v28.3.1)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -135,6 +135,7 @@ const updateWindowSiz = _ => {
         lblComment: {
             x: 0, y: 70, w: g_sWidth, h: g_sHeight - 180, siz: C_SIZ_DIFSELECTOR, 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`,
@@ -238,7 +239,7 @@ const updateWindowSiz = _ => {
             x: 0, w: 50, h: 15, siz: 11, align: C_ALIGN_LEFT, background: `#${g_headerObj.baseBrightFlg ? `eeeeee` : `111111`}80`,
         },
         lnkColorCopy: {
-            x: 35, y: -5, w: 30, h: 20, siz: 14,
+            x: 35, y: -5, w: 30, h: 20, siz: 14, title: g_msgObj.pickColorCopy,
         },
 
         btnKcBack: {
@@ -2054,7 +2055,7 @@ const g_keyObj = {
     // 矢印群の倍率指定
     scale: 1,
     scale_def: 1,
-    scale17_0: 0.85,
+    scale17_0: 0.95,
 
     // ショートカットキーコード
     keyRetry: 8,
@@ -2544,7 +2545,7 @@ const g_keyObj = {
     minWidth11i: 650,
     minWidth13: 650,
     minWidth16i: 650,
-    minWidth17: 800,
+    minWidth17: 825,
     minWidth23: 900,
 
 };
@@ -3186,6 +3187,9 @@ const g_lang_msgObj = {
         imgType: `矢印・フリーズアローなどのオブジェクトの見た目を変更します。`,
         colorGroup: `矢印・フリーズアロー色グループの割り当てパターンを変更します。`,
         shuffleGroup: `Mirror/Asym-Mirror/Random/S-Random選択時、シャッフルするグループを変更します。\n矢印の上にある同じ数字同士でシャッフルします。`,
+
+        pickArrow: `色番号ごとの矢印色（枠、塗りつぶし）、通常時のフリーズアロー色（枠、帯）を\nカラーピッカーから選んで変更できます。`,
+        pickColorCopy: `このボタンを押すと、フリーズアローの配色を矢印（枠）の色で上書きします。\nヒット時のフリーズアローの色も上書きします。`,
     },
 
     En: {
@@ -3237,6 +3241,9 @@ const g_lang_msgObj = {
         imgType: `Change the appearance of sequences.`,
         colorGroup: `Change the sequences color group assignment pattern.`,
         shuffleGroup: `Change the shuffle group when Mirror, Asym-Mirror, Random or S-Random are selected.\nShuffle with the same numbers listed above.`,
+
+        pickArrow: `Change the frame or fill of arrow color and the frame or bar of normal freeze-arrow color\nfor each color number from the color picker.`,
+        pickColorCopy: `Pressing this button will override the color scheme of the freeze arrow with the frame color of the arrow. \nIt also overrides the color of the freeze arrow on hit.`,
     },
 
 };

package/package.json

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