danoniplus 28.2.0 → 28.3.0

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/13
  * 
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 28.2.0`;
-const g_revisedDate = `2022/10/04`;
+const g_version = `Ver 28.3.0`;
+const g_revisedDate = `2022/10/13`;
 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 {
@@ -5315,6 +5324,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`]);
 		});
 	}
 };
@@ -5664,22 +5674,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);
 
 	/**
 	 * 一時的に矢印色・シャッフルグループを変更（共通処理）
@@ -5720,6 +5716,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));
 	};
 
@@ -5816,6 +5813,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 
 	/**
 	 * カラー・シャッフルグループ設定の表示
+	 * - シャッフルグループではデフォルトからの差異表示もここで行う
 	 * @param {string} _type 
 	 */
 	const viewGroup = _type => {
@@ -5825,6 +5823,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) => {
@@ -6063,7 +6065,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;
 	}
@@ -6163,6 +6165,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}`]);
+		}
 	};
 
 	// ユーザカスタムイベント(初期)
@@ -6333,6 +6341,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] */
 /*-----------------------------------------------------------*/
@@ -7989,14 +8038,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/13 (v28.3.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -238,7 +238,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: {
@@ -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 = {
@@ -2052,7 +2054,7 @@ const g_keyObj = {
     // 矢印群の倍率指定
     scale: 1,
     scale_def: 1,
-    scale17_0: 0.85,
+    scale17_0: 0.95,
 
     // ショートカットキーコード
     keyRetry: 8,
@@ -2542,7 +2544,7 @@ const g_keyObj = {
     minWidth11i: 650,
     minWidth13: 650,
     minWidth16i: 650,
-    minWidth17: 800,
+    minWidth17: 825,
     minWidth23: 900,
 
 };
@@ -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: `別キーモードではハイスコア、キーコンフィグ等は保存されません`,
@@ -3184,6 +3186,9 @@ const g_lang_msgObj = {
         imgType: `矢印・フリーズアローなどのオブジェクトの見た目を変更します。`,
         colorGroup: `矢印・フリーズアロー色グループの割り当てパターンを変更します。`,
         shuffleGroup: `Mirror/Asym-Mirror/Random/S-Random選択時、シャッフルするグループを変更します。\n矢印の上にある同じ数字同士でシャッフルします。`,
+
+        pickArrow: `色番号ごとの矢印色（枠、塗りつぶし）、通常時のフリーズアロー色（枠、帯）を\nカラーピッカーから選んで変更できます。`,
+        pickColorCopy: `このボタンを押すと、フリーズアローの配色を矢印（枠）の色で上書きします。\nヒット時のフリーズアローの色も上書きします。`,
     },
 
     En: {
@@ -3235,6 +3240,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.0",
+  "version": "28.3.0",
   "description": "Dancing☆Onigiri (CW Edition) - Web-based Rhythm Game",
   "main": "index.js",
   "scripts": {