danoniplus 28.2.0 → 28.2.1

package/css/danoni_main.css

@@ -4,29 +4,32 @@
   本体cssファイル
 
   Created : 2018/10/08
-  Revised : 2022/03/27 (v27.2.0)
+  Revised : 2022/10/05 (v28.2.1)
 
   https://github.com/cwtickle/danoniplus
 ------------------------------------------ */
 
 #canvas-frame {
-	height:500px;
+	height: 500px;
 	position: relative;
 	overflow: hidden;
+	white-space: nowrap;
 }
+
 #canvas-frame canvas {
 	position: absolute;
-	left:0;
+	left: 0;
 	overflow: hidden;
 }
 
-input[type=range] {
+input[type="range"] {
 	-webkit-appearance: none;
 	background: transparent;
 	height: 20px;
 	width: 205px;
 }
-input[type=range]::-webkit-slider-thumb {
+
+input[type="range"]::-webkit-slider-thumb {
 	-webkit-appearance: none;
 	background: #606060;
 	height: 20px;
@@ -34,10 +37,12 @@ input[type=range]::-webkit-slider-thumb {
 	opacity: 0.5;
 	border-radius: 50%;
 }
-input[type=range]::-moz-range-track{
+
+input[type="range"]::-moz-range-track {
 	height: 0;
 }
-input[type=range]::-moz-range-thumb{
+
+input[type="range"]::-moz-range-thumb {
 	background: #606060;
 	height: 20px;
 	width: 20px;
@@ -45,24 +50,27 @@ input[type=range]::-moz-range-thumb{
 	border: none;
 	border-radius: 50%;
 }
-input[type=range]:focus {
+
+input[type="range"]:focus {
 	outline: 0;
 }
 
-input[type=color] {
-	width:25px;
-	height:25px;
-	border:none;
+input[type="color"] {
+	width: 25px;
+	height: 25px;
+	border: none;
+	padding: 1px;
 }
 
 /* 左から右へ */
 @keyframes leftToRight {
 	0% {
-		opacity: 0;/* 透明 */
+		opacity: 0;
 		transform: translateX(-50px);
 	}
+
 	100% {
-		opacity: 1;/* 不透明 */
+		opacity: 1;
 		transform: translateX(0);
 	}
 }
@@ -70,11 +78,12 @@ input[type=color] {
 /* 上から下へ */
 @keyframes upToDown {
 	0% {
-		opacity: 0;/* 透明 */
+		opacity: 0;
 		transform: translateY(-50px);
 	}
+
 	100% {
-		opacity: 1;/* 不透明 */
+		opacity: 1;
 		transform: translateY(0);
 	}
 }
@@ -82,19 +91,22 @@ input[type=color] {
 /* 左から右へ移動し、フェードアウト（結果画面で使用） */
 @keyframes leftToRightFade {
 	0% {
-		opacity: 0;/* 透明 */
+		opacity: 0;
 		transform: translateX(-30px);
 	}
+
 	30% {
-		opacity: 1;/* 不透明 */
+		opacity: 1;
 		transform: translateX(0);
 	}
+
 	60% {
-		opacity: 1;/* 不透明 */
+		opacity: 1;
 		transform: translateX(0);
 	}
+
 	100% {
-		opacity: 0;/* 透明 */
+		opacity: 0;
 		transform: translateX(30px);
 	}
 }
@@ -102,19 +114,22 @@ input[type=color] {
 /* 上から下へ移動し、フェードアウト（結果画面で使用） */
 @keyframes upToDownFade {
 	0% {
-		opacity: 0;/* 透明 */
+		opacity: 0;
 		transform: translateY(-30px);
 	}
+
 	30% {
-		opacity: 1;/* 不透明 */
+		opacity: 1;
 		transform: translateY(0);
 	}
+
 	80% {
-		opacity: 1;/* 不透明 */
+		opacity: 1;
 		transform: translateY(0);
 	}
+
 	100% {
-		opacity: 0;/* 透明 */
+		opacity: 0;
 		transform: translateY(10px);
 	}
 }
@@ -122,25 +137,27 @@ input[type=color] {
 /* 徐々に表示（結果画面で使用） */
 @keyframes slowlyAppearing {
 	0% {
-		opacity: 0.5;/* 透明 */
+		opacity: 0.5;
 	}
+
 	80% {
-		opacity: 0.5;/* 透明 */
+		opacity: 0.5;
 	}
+
 	100% {
-		opacity: 1;/* 不透明 */
+		opacity: 1;
 	}
 }
 
 /* 文字拡大から元のサイズへ戻る */
 @keyframes fromBig {
 	0% {
-		opacity: 0;/* 透明 */
+		opacity: 0;
 		transform: scale(1.5, 1.5);
-		
 	}
+
 	100% {
-		opacity: 1;/* 不透明 */
+		opacity: 1;
 		transform: scale(1, 1);
 	}
 }
@@ -148,11 +165,12 @@ input[type=color] {
 /* 徐々に表示(Y方向) */
 @keyframes smallToNormalY {
 	0% {
-		opacity: 0;/* 透明 */
+		opacity: 0;
 		transform: scale(1, 0);
 	}
+
 	100% {
-		opacity: 1;/* 不透明 */
+		opacity: 1;
 		transform: scale(1, 1);
 	}
 }
@@ -162,6 +180,7 @@ input[type=color] {
 	0% {
 		transform: rotateX(0deg);
 	}
+
 	100% {
 		transform: rotateX(360deg);
 	}
@@ -172,6 +191,7 @@ input[type=color] {
 	0% {
 		transform: rotateY(0deg);
 	}
+
 	100% {
 		transform: rotateY(360deg);
 	}
@@ -182,6 +202,7 @@ input[type=color] {
 	0% {
 		transform: rotateZ(0deg);
 	}
+
 	100% {
 		transform: rotateZ(360deg);
 	}
@@ -192,6 +213,7 @@ input[type=color] {
 	0% {
 		filter: blur(8px);
 	}
+
 	100% {
 		filter: blur(0);
 	}
@@ -202,12 +224,15 @@ input[type=color] {
 	0% {
 		filter: brightness(0.0);
 	}
+
 	30% {
 		filter: brightness(2.0);
 	}
+
 	70% {
 		filter: brightness(0.0);
 	}
+
 	100% {
 		filter: brightness(1.0);
 	}
@@ -218,6 +243,7 @@ input[type=color] {
 	0% {
 		opacity: 0;
 	}
+
 	100% {
 		opacity: 1;
 	}
@@ -227,6 +253,7 @@ input[type=color] {
 	0% {
 		opacity: 0;
 	}
+
 	100% {
 		opacity: 1;
 	}
@@ -237,6 +264,7 @@ input[type=color] {
 	0% {
 		opacity: 1;
 	}
+
 	100% {
 		opacity: 0;
 	}
@@ -246,6 +274,7 @@ input[type=color] {
 	0% {
 		opacity: 1;
 	}
+
 	100% {
 		opacity: 0;
 	}
@@ -254,29 +283,35 @@ input[type=color] {
 .toRight {
 	animation-name: leftToRight;
 }
+
 .toSpin {
 	animation-name: spinY;
 }
 
 /* 設定画面：ゲージ設定詳細 */
 .settings_gaugeVal {
-	font-size:12px;
+	font-size: 12px;
 }
+
 .settings_gaugeDivCover {
 	border: 1px #666666 solid;
 	width: 280px;
 }
+
 .settings_gaugeDivTable {
 	display: table;
 	width: 279px;
 }
+
 .settings_gaugeDivTableCol {
 	display: table-cell;
 	border-collapse: collapse;
 }
+
 .settings_gaugeStart {
 	width: 85px;
 }
+
 .settings_gaugeEtc {
 	width: 65px;
 }
@@ -296,6 +331,7 @@ input[type=color] {
 	justify-content: center;
 	cursor: default;
 }
+
 .button_common:hover {
 	cursor: pointer;
 }
@@ -306,6 +342,6 @@ input[type=color] {
 }
 
 /* 警告ウィンドウ */
-#lblWarning > p {
+#lblWarning>p {
 	margin: 15px 5px;
 }

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2022/10/04
+ * Revised : 2022/10/05
  * 
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 28.2.0`;
-const g_revisedDate = `2022/10/04`;
+const g_version = `Ver 28.2.1`;
+const g_revisedDate = `2022/10/05`;
 const g_alphaVersion = ``;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
@@ -1814,7 +1814,7 @@ const initialControl = async () => {
 	// デフォルトのカラー・シャッフルグループ設定を退避
 	[`color`, `shuffle`].forEach(type => {
 		const tmpName = Object.keys(g_keyObj).filter(val => val.startsWith(type));
-		tmpName.forEach(property => g_dfKeyObj[property] = structuredClone(g_keyObj[property]));
+		tmpName.forEach(property => g_keyObj[`${property}d`] = structuredClone(g_keyObj[property]));
 	});
 
 	// 自動横幅拡張設定
@@ -1824,6 +1824,7 @@ const initialControl = async () => {
 
 		g_sWidth = Math.max(...widthList);
 		$id(`canvas-frame`).width = `${g_sWidth}px`;
+		$id(`divRoot`).width = `${g_sWidth}px`;
 	}
 	if (g_headerObj.playingWidth === `default`) {
 		g_headerObj.playingWidth = g_sWidth;
@@ -1956,6 +1957,13 @@ const loadLocalStorage = _ => {
 			g_localStorage.highscores = {};
 		}
 
+		// 廃棄済みリストからデータを消去
+		g_storeSettingsEx.forEach(val => {
+			if (g_localStorage[val] !== undefined) {
+				delete g_localStorage[val];
+			}
+		});
+
 	} else {
 		g_localStorage = {
 			adjustment: 0,
@@ -2907,7 +2915,7 @@ const headerConvert = _dosObj => {
 		});
 	}
 
-	// ローカルストレージに保存済みのDisplay設定・ColorType設定を戻す
+	// ローカルストレージに保存済みのAppearance, Opacity設定・ColorType設定を戻す
 	g_storeSettings.filter(tmpSetting => hasVal(g_localStorage[tmpSetting])).forEach(setting =>
 		g_stateObj[setting] = g_localStorage[setting]);
 	if (g_localStorage.colorType !== undefined) {
@@ -5014,8 +5022,9 @@ const createOptionWindow = _sprite => {
 				[`color`, `shuffle`].forEach(type => {
 					resetGroupList(type, keyCtrlPtn);
 					if (g_keyObj.currentPtn === -1) {
-						if (storageObj[`${type}${g_keyObj.currentKey}_-1_-1`] !== undefined) {
-							g_keyObj[`${type}${g_keyObj.currentKey}_-1`] = structuredClone(storageObj[`${type}${g_keyObj.currentKey}_-1_-1`]);
+						const storageKeyName = storageObj[`${type}${addKey}`] || storageObj[`${type}${g_keyObj.currentKey}_-1_-1`];
+						if (storageKeyName !== undefined) {
+							g_keyObj[`${type}${g_keyObj.currentKey}_-1`] = structuredClone(storageKeyName);
 						}
 						g_keyObj[`${type}${g_keyObj.currentKey}_-1_-1`] = structuredClone(g_keyObj[`${type}${g_keyObj.currentKey}_-1`]);
 					} else {
@@ -7989,14 +7998,20 @@ const getArrowSettings = _ => {
 
 		[`color`, `shuffle`].forEach(type => {
 			const groupNum = g_keycons[`${type}GroupNum`];
-			storageObj[`${type}${g_keyObj.currentKey}_-1_-1`] = structuredClone(g_keyObj[`${type}${keyCtrlPtn}_${groupNum}`]);
-			g_keyObj[`${type}${g_keyObj.currentKey}_-1_${groupNum}`] = structuredClone(g_dfKeyObj[`${type}${keyCtrlPtn}_${groupNum}`]);
-			g_keyObj[`${type}${keyCtrlPtn}_${groupNum}`] = structuredClone(g_dfKeyObj[`${type}${keyCtrlPtn}_${groupNum}`]);
+			storageObj[`${type}${addKey}`] = structuredClone(g_keyObj[`${type}${keyCtrlPtn}_${groupNum}`]);
+			g_keyObj[`${type}${g_keyObj.currentKey}_-1_${groupNum}`] = structuredClone(g_keyObj[`${type}${keyCtrlPtn}_${groupNum}d`]);
+			g_keyObj[`${type}${keyCtrlPtn}_${groupNum}`] = structuredClone(g_keyObj[`${type}${keyCtrlPtn}_${groupNum}d`]);
+
+			// 古いキーデータの削除 (互換用)
+			if (storageObj[`${type}${g_keyObj.currentKey}_-1_-1`] !== undefined) {
+				delete storageObj[`${type}${g_keyObj.currentKey}_-1_-1`];
+			}
 		});
 
 		if (!g_stateObj.extraKeyFlg) {
 			localStorage.setItem(`danonicw-${g_keyObj.currentKey}k`, JSON.stringify(g_localKeyStorage));
 		}
+
 		localStorage.setItem(g_localStorageUrl, JSON.stringify(g_localStorage));
 		g_canLoadDifInfoFlg = true;
 

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2022/10/02 (v28.1.0)
+ * Revised : 2022/10/05 (v28.2.1)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -837,7 +837,11 @@ const g_keycons = {
 let g_displays = [`stepZone`, `judgment`, `fastSlow`, `lifeGauge`, `score`, `musicInfo`, `filterLine`,
     `speed`, `color`, `lyrics`, `background`, `arrowEffect`, `special`];
 
-let g_storeSettings = [`appearance`, `opacity`, `d_stepzone`, `d_judgment`, `d_fastslow`, `d_lifegauge`,
+// ローカルストレージ保存対象
+let g_storeSettings = [`appearance`, `opacity`];
+
+// 廃棄対象のリスト(過去の登録対象をリスト化。ここに乗せるとローカルストレージから自動消去される)
+let g_storeSettingsEx = [`d_stepzone`, `d_judgment`, `d_fastslow`, `d_lifegauge`,
     `d_score`, `d_musicinfo`, `d_filterline`];
 
 let g_canDisabledSettings = [`motion`, `scroll`, `shuffle`, `autoPlay`, `gauge`, `appearance`];
@@ -1418,8 +1422,6 @@ const g_cssObj = {
     flex_centering: `flex_centering`,
 };
 
-const g_dfKeyObj = {};
-
 // キー別の設定（一旦ここで定義）
 // ステップゾーンの位置関係は自動化を想定
 const g_keyObj = {
@@ -2924,7 +2926,7 @@ const g_lblNameObj = {
     filterLock: `Lock`,
 
     sc_speed: `←→`,
-    sc_scroll: `R/↑↓`,
+    sc_scroll: `R/<br>↑↓`,
     sc_adjustment: `- +`,
     sc_keyConfigPlay: g_isMac ? `Del+Enter` : `BS+Enter`,
 
@@ -3067,7 +3069,7 @@ const g_lblNameObj = {
 const g_lang_lblNameObj = {
     Ja: {
         kcDesc: `[{0}:スキップ / {1}:(代替キーのみ)キー無効化]`,
-        kcShuffleDesc: `番号をクリックでシャッフルグループ、矢印をクリックでカラーグループを一時的に変更`,
+        kcShuffleDesc: `番号をクリックでシャッフルグループ、矢印をクリックでカラーグループを変更`,
         sdDesc: `[クリックでON/OFFを切替、灰色でOFF]`,
         kcShortcutDesc: `プレイ中ショートカット：「{0}」タイトルバック / 「{1}」リトライ`,
         transKeyDesc: `別キーモードではハイスコア、キーコンフィグ等は保存されません`,

package/package.json

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