danoniplus 49.3.0 → 49.3.2

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2026/07/12
+ * Revised : 2026/07/31
  *
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 49.3.0`;
-const g_revisedDate = `2026/07/12`;
+const g_version = `Ver 49.3.2`;
+const g_revisedDate = `2026/07/31`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
@@ -10106,7 +10106,8 @@ const createGeneralSettingEx = (_spriteList, _name, { defaultList = [C_FLG_OFF],
 	 */
 	const setExpandedBtnSiz = () => {
 		const camelH = toCapitalize(_name);
-		if (defaultList.includes(g_stateObj[_name])) {
+		const isDefault = defaultList.includes(g_stateObj[_name]);
+		if (isDefault) {
 			$id(`lnk${camelH}Type`).display = C_DIS_NONE;
 			$id(`lnk${camelH}`).left = wUnit(g_limitObj.setLblLeft);
 			$id(`lnk${camelH}`).width = wUnit(g_limitObj.setLblWidth);
@@ -10115,7 +10116,8 @@ const createGeneralSettingEx = (_spriteList, _name, { defaultList = [C_FLG_OFF],
 			$id(`lnk${camelH}`).left = wUnit(g_limitObj.setLblLeftShort);
 			$id(`lnk${camelH}`).width = wUnit(g_limitObj.setLblWidthShort);
 		}
-		$id(`lnk${camelH}`).fontSize = wUnit(getFontSize2(getStgDetailName(g_stateObj[_name]), g_limitObj.setLblWidthShort, { maxSiz: g_limitObj.setLblSiz }));
+		const labelWidth = isDefault ? g_limitObj.setLblWidth : g_limitObj.setLblWidthShort - 10;
+		$id(`lnk${camelH}`).fontSize = wUnit(getFontSize2(getStgDetailName(g_stateObj[_name]), labelWidth, { maxSiz: g_limitObj.setLblSiz }));
 	};
 
 	/**
@@ -12901,8 +12903,11 @@ const scoreConvert = (_dosObj, _scoreId, _preblankFrame, _dummyNo = ``,
 				const arrowNum = parseFloat(tmpScrollchData[1]);
 				const scrollDir = parseFloat(tmpScrollchData[2] ?? `1`);
 				const layerGroup = parseFloat(tmpScrollchData[3] ?? `-1`);
-				const layerTrans = tmpScrollchData[4] ?? ``;
+				let layerTrans = tmpScrollchData[4] ?? ``;
 				maxLayerGroup = Math.max(maxLayerGroup, layerGroup);
+				if (g_stateObj.reverse === C_FLG_ON) {
+					layerTrans = invertSpecificTransforms(layerTrans);
+				}
 
 				scrollchData.push([frame, arrowNum, frame, scrollDir, layerGroup, layerTrans]);
 			});
@@ -14059,6 +14064,32 @@ const pushScrollchs = (_header, _frameArrow, _val, _frameStep, _scrollDir, _laye
 	}
 };
 
+/**
+ * ホワイトリストに登録されたCSS関数内の数値符号のみを反転する関数
+ * @param {string} cssString 
+ * @returns {string} 
+ */
+const invertSpecificTransforms = (cssString) => {
+	// 反転対象にしたいCSS関数名を指定（ホワイトリスト）
+	const targetFunctions = [
+		`rotate`, `rotateX`, `rotateY`, `rotateZ`, `rotate3d`,
+		`translate`, `translateX`, `translateY`, `translateZ`, `translate3d`,
+		`skew`, `skewX`, `skewY`
+	];
+
+	// RegExパターンを作成: /(rotate|translate...)\(([^)]+)\)/g
+	const pattern = new RegExp(`\\b(${targetFunctions.join(`|`)})\\(([^)]+)\\)`, `g`);
+
+	return cssString.replace(pattern, (match, funcName, args) => {
+		// 関数の中身（引数）に含まれる数値だけを符号反転
+		const invertedArgs = args.replace(/(-?\d+(?:\.\d+)?)/g, (numStr) => {
+			return numStr.startsWith(`-`) ? numStr.slice(1) : `-` + numStr;
+		});
+
+		return `${funcName}(${invertedArgs})`;
+	});
+}
+
 /**
  * メイン画面前の初期化処理
  */
@@ -14093,6 +14124,7 @@ const getArrowSettings = () => {
 	g_workObj.diffList = [];
 	g_workObj.mainEndTime = 0;
 	g_workObj.currentLifeState = ``;
+	g_workObj.layerTrans = [];
 	g_errorCache['g_customJsObj.mainEnterFrame'] = [];
 
 	const rotateBy = (val, delta) => {
@@ -14132,6 +14164,13 @@ const getArrowSettings = () => {
 	g_workObj.keyGroupMaps = tkObj.keyGroupMaps;
 	g_workObj.keyGroupList = tkObj.keyGroupList;
 
+	if (g_keyObj[`layerTrans${keyCtrlPtn}`]?.[0]) {
+		g_workObj.layerTrans = structuredClone(g_keyObj[`layerTrans${keyCtrlPtn}`][0]);
+		if (g_stateObj.reverse === C_FLG_ON) {
+			g_workObj.layerTrans = g_workObj.layerTrans.map(val => invertSpecificTransforms(val));
+		}
+	}
+
 	const keyCtrlLen = g_workObj.keyCtrl.length;
 	g_workObj.keyCtrlN = [...Array(keyCtrlLen)].map(() => []);
 	g_workObj.keyHitFlg = [...Array(keyCtrlLen)].map(() => []);
@@ -14628,7 +14667,7 @@ const mainInit = () => {
 		// StepAreaオプションにより、レイヤーが倍化される場合があるため基準レイヤー数ごとに設定
 		const transj = j % g_stateObj.layerNumDf;
 		addTransform(`mainSprite${j}`, `mainSprite${j}`,
-			g_keyObj[`layerTrans${keyCtrlPtn}`]?.[0]?.[Math.floor(transj / 2) * 2 + (transj + Number(g_stateObj.reverse === C_FLG_ON)) % 2], g_transPriority.layer);
+			g_workObj.layerTrans[Math.floor(transj / 2) * 2 + (transj + Number(g_stateObj.reverse === C_FLG_ON)) % 2], g_transPriority.layer);
 
 		stepSprite.push(createEmptySprite(mainSpriteJ, `stepSprite${j}`, mainCommonPos));
 		arrowSprite.push(createEmptySprite(mainSpriteJ, `arrowSprite${j}`, { ...mainCommonPos, y: g_workObj.hitPosition * (j % 2 === 0 ? 1 : -1) }));

package/js/sample/danoni_custom-003.js

@@ -7,7 +7,7 @@
  * danoni_main.js の中身を変えることなく設定が可能です。
  * 
  * 設定例：
- * |customjs=danoni_custom-003.js|
+ * |customjs=sample/danoni_custom-003.js|
  * 
  * ・グローバル変数、div要素、関数は danoni_main.js のものがそのまま利用できます。
  * ・danoni_main.jsの変数を直接書き換えると、動かなくなることがあります。
@@ -16,6 +16,95 @@
  * 　画面遷移したときにきれいに消してくれます。
  */
 
+/*
+ * 独自の変数名や関数名は、"c_"などの接頭辞をつけると、
+ * danoni_main.jsの変数名と衝突しないのでおすすめです。
+ * 
+ * このサンプルは横幅650px以上の動作を確認しています。
+ * 
+ * 参考）主要変数の説明 (danoni_main.js側で定義)
+ *   - g_btnX()     : ボタンの初期X座標。引数でg_btnWidth()を足した効果。
+ *   - g_btnWidth() : ボタンが配置できる最大横幅長。引数で比率を指定できる。
+ *   - g_sWidth     : 画面の横幅
+ *   - g_sHeight    : 画面の高さ
+ *   - clearWindow  : 画面の消去
+ */
+
+/**
+ * 初期化
+ * - タイトル画面より前で定義するため、タイトル画面に戻ってもこの処理は通過しない
+ */
+g_customJsObj.preTitle.push(() => {
+
+	// -----------------------------------
+	// 拡張設定（背景色変更）
+	// -----------------------------------
+
+	// 設定項目名
+	g_lblNameObj.BackColor = `BackColor`;
+
+	// 設定項目の選択肢に対応する背景色
+	// 0番目の色がdivBackの背景色、1番目の色がc_backSampleの背景色
+	g_settings.c_backColorset = {
+		Default: [``, ``],
+		Black: [`#000000`, `#222222`],
+		Gray: [`#202020`, `#404040`],
+		Red: [`#110000`, `#331111`],
+		Green: [`#001100`, `#114411`],
+		Blue: [`#000011`, `#111144`],
+		Yellow: [`#111100`, `#333311`],
+	};
+
+	// 設定項目の選択肢と初期カーソル位置
+	g_settings.backColors = Object.keys(g_settings.c_backColorset);  // [`Default`, `Black`, ... , `Yellow`]
+	g_settings.backColorNum = 0;
+
+	// 設定項目の初期値
+	g_stateObj.backColor = g_settings.backColors[g_settings.backColorNum];
+
+	// カスタム画面のショートカット定義
+	g_shortcutObj.c_info = {
+		ShiftLeft_KeyC: { id: `lnkBackColorL` },
+		ShiftRight_KeyC: { id: `lnkBackColorL` },
+		KeyC: { id: `lnkBackColorR` },
+		Escape: { id: `c_btnBack` },
+		Enter: { id: `c_btnNext` },
+		KeyT: { id: `c_btnLink`, reset: true },
+	};
+});
+
+/**
+ * 背景色を変更するカスタム関数
+ */
+const c_changeBackColor = () => {
+	if (document.getElementById(`divBack`) !== null) {
+		// divBackの背景色を変更する
+		$id(`divBack`).background = g_settings.c_backColorset[g_stateObj.backColor][0];
+
+		// divBackの下にc_backSampleL/Rがなければ作成して背景色を変更
+		if (document.getElementById(`c_backSampleL`) === null) {
+			createEmptySprite(divBack, `c_backSampleL`, {
+				x: g_btnX() + 50,
+				y: 0,
+				w: 50,
+				h: g_sHeight,
+				background: g_settings.c_backColorset[g_stateObj.backColor][1],
+			});
+		}
+		$id(`c_backSampleL`).background = g_settings.c_backColorset[g_stateObj.backColor][1];
+
+		if (document.getElementById(`c_backSampleR`) === null) {
+			createEmptySprite(divBack, `c_backSampleR`, {
+				x: g_btnX(1) - 100,
+				y: 0,
+				w: 50,
+				h: g_sHeight,
+				background: g_settings.c_backColorset[g_stateObj.backColor][1],
+			});
+		}
+		$id(`c_backSampleR`).background = g_settings.c_backColorset[g_stateObj.backColor][1];
+	}
+};
 
 /**
  * タイトル画面
@@ -24,51 +113,209 @@ g_customJsObj.title.push(() => {
 
 	multiAppend(divRoot,
 		// 背景の矢印オブジェクトを表示
-		createColorObject2(`lblC`, {
-			x: g_sWidth / 2 - 300, y: 0, w: 100, h: 100, rotate: `onigiri`, opacity: 0.25,
+		createColorObject2(`c_lblC`, {
+			x: g_btnX(1 / 2) - 300,
+			y: 0,
+			w: 100,
+			h: 100,
+			rotate: `onigiri`,
+			opacity: 0.25,
 			background: `#ffffff`,
 		}),
 
 		// Infoボタン描画
-		createCss2Button(`btnTweet`, `Info`, _ => clearTimeout(g_timeoutEvtTitleId), {
-			x: g_sWidth / 4 * 3, y: 340, w: g_sWidth / 4,
-			resetFunc: _ => customCommentInit(),
+		createCss2Button(`c_btnInfo`, `Info`, _ => clearTimeout(g_timeoutEvtTitleId), {
+			x: g_btnX(3 / 4),
+			y: 340,
+			w: g_btnWidth(1 / 4),
+			resetFunc: _ => c_infoInit(),
 		}, g_cssObj.button_Tweet)
 	);
 });
 
 /**
- * カスタム画面(コメントとか)
+ * カスタム画面
  */
-function customCommentInit() {
+const c_infoInit = () => {
 
-	clearWindow(true);
+	clearWindow();
+	g_currentPage = `c_info`;
 
 	// テキスト
-	const comment = `これはカスタムページのテストです。<br>
-		このように、作品別に特殊なページを作ることもできます。<br><br>
-		下記のような戻るボタンがあると良いですね。(・∀・)`;
+	const c_comment = `
+		これはカスタムページのテストです。
+		このように、作品別に特殊なページを作ることもできます。
+
+		下記のような戻るボタンがあると良いですね。(・∀・)
+
+		
+		このようなスクロールもできます。
+		`.trim().split(`\n`).join(`<br>`);
+
+	// 拡張設定表示用div要素を作成（divRootの中に作成）
+	// 親div, 子divのid, 子divのCSS設定を記述
+	const c_extraSet = createEmptySprite(divRoot, `c_extraSet`, {
+		x: g_sWidth / 2 - 305,
+		y: 250,
+		w: 610,
+		h: 140,
+		overflow: `auto`,
+		// border: `1px dashed #999999`,  // 枠がわかるように表示
+	});
+
+	// ---------------------------------------------------------------
+	// ▽ BackColor設定
+	// ---------------------------------------------------------------
+	// 拡張設定ヘッダー表示
+	c_extraSet.appendChild(
+		createDivCss2Label(`c_lblExtraSet`, `Original Settings`, {
+			x: 5,
+			y: 0,
+			w: 600,
+			h: 22,
+			siz: 20,
+			color: `#ffffff`,
+			align: C_ALIGN_CENTER,
+			background: `#333333`,
+			border: `1px solid #666666`,
+		})
+	);
+
+	// 設定用項目のdiv要素を作成
+	const c_backColor = createEmptySprite(c_extraSet, `c_backColor`, {
+		x: 105,
+		y: 40,
+		w: 410,
+		h: 22,
+		overflow: `auto`,
+		// border: `1px dashed #999999`,  // 枠がわかるように表示
+	});
+	createGeneralSetting(c_backColor, `backColor`, {
+		addRFunc: () => {
+			// 設定変更時に背景色を変更する
+			c_changeBackColor();
+		}
+	});
+	c_changeBackColor();
+
+	// ショートカットキー表示
+	createScText(c_backColor, `backColor`, { displayName: `c_info` });
+
+	// △ BackColor設定　ここまで
+	// ---------------------------------------------------------------
+
+	// AAオブジェクトをランダムに表示
+	const c_aaList = [`onigiri`, `giko`, `iyo`, `c`, `morara`, `monar`];
+	const c_randomidx = Math.floor(Math.random() * c_aaList.length);
 
 	// 各種ラベル追加
 	multiAppend(divRoot,
 
 		// タイトル文字
-		getTitleDivLabel(`lblTitle`,
-			`<span style='color:#6666ff;font-size:40px;'>I</span>NFO`, 0, 15),
+		getTitleDivLabel(`c_lblTitle`,
+			`<span style='color:#6666ff;font-size:40px;'>I</span>NFO &amp; ` +
+			`<span style='color:#ff6666;font-size:40px;'>O</span>RIGINAL`, 0, 15),
 
 		// コメント文
-		createDivCss2Label(`lblComment`, comment, {
-			x: g_sWidth / 2 - 200, y: 100, w: 400, h: 20, siz: 14, color: `#cccccc`,
+		createDivCss2Label(`c_lblComment`, c_comment, {
+			x: g_sWidth / 2 - 300,
+			y: 100,
+			w: 450,
+			h: 100,
+			siz: 14,
+			color: `#cccccc`,
 			align: C_ALIGN_LEFT,
+			overflow: `auto`,
+			border: `1px solid #666666`,
+			padding: `5px`,
 		}),
 
-		// おにぎりオブジェクトの配置
-		createColorObject2(`lblC`, {
-			x: g_sWidth / 2 + 200, y: 350, w: 100, h: 100, rotate: `onigiri`,
+		// オブジェクトの配置（ページごとに切り替え、ランダム）
+		createColorObject2(`c_lblC`, {
+			x: g_sWidth / 2 + 200,
+			y: 100,
+			w: 100,
+			h: 100,
+			rotate: c_aaList[c_randomidx],
+			animationDuration: `3s`,
+			animationName: `spinY`,
+			animationIterationCount: `infinite`,
 			background: `#ffffff`,
 		}),
 
 		// 戻るボタン描画
-		createCss2Button(`btnBack`, g_lblNameObj.b_back, _ => true, { resetFunc: _ => titleInit() }, g_cssObj.button_Back),
-	)
-}
+		createCss2Button(`c_btnBack`, g_lblNameObj.b_back, _ => true, {
+			x: g_btnX(),
+			y: g_sHeight - 50,
+			w: g_btnWidth(1 / 2),
+			h: 25,
+			siz: 20,
+			resetFunc: _ => titleInit(),
+		}, g_cssObj.button_Back),
+
+		// 次へボタン描画
+		createCss2Button(`c_btnNext`, `Setting`, _ => true, {
+			x: g_btnX(1 / 2),
+			y: g_sHeight - 50,
+			w: g_btnWidth(1 / 2),
+			h: 25,
+			siz: 20,
+			resetFunc: _ => g_moveSettingWindow(false)
+		}, g_cssObj.button_Setting),
+
+		// 外部リンク用ボタン描画
+		createCss2Button(`c_btnLink`, `Custom JSに関する情報はGitHub WikiのTipsへ`, _ => true, {
+			x: g_btnX(1 / 2) - 300,
+			y: g_sHeight - 100,
+			w: 600,
+			h: 25,
+			siz: 14,
+			border: `1px solid #999999`,
+			borderRadius: `10px`,
+			resetFunc: _ => openLink(
+				g_localeObj.val === `Ja`
+					? `https://github.com/cwtickle/danoniplus/wiki/tips-index`
+					: `https://github.com/cwtickle/danoniplus-docs/wiki/tips-index`
+			),
+		}, g_cssObj.button_Default),
+	);
+
+	// ショートカットキー表示
+	createScText(c_btnBack, `c_btnBack`, { displayName: `c_info`, targetLabel: `c_btnBack` });
+	createScText(c_btnNext, `c_btnNext`, { displayName: `c_info`, targetLabel: `c_btnNext` });
+	createScText(c_btnLink, `c_btnLink`, { displayName: `c_info`, targetLabel: `c_btnLink` });
+
+	// カスタム画面のショートカット表示
+	setShortcutEvent(g_currentPage);
+
+	document.oncontextmenu = () => true;
+	divRoot.oncontextmenu = () => false;
+};
+
+// 各種設定よりカスタム画面へのリンクを追加
+const c_addButton = () => {
+	divRoot.appendChild(
+		createCss2Button(`c_btnInfo`, `Info &amp; Original`, _ => true, {
+			x: g_btnX(1 / 2),
+			y: g_sHeight - 20,
+			w: g_btnWidth(1 / 4),
+			h: 15,
+			siz: 12,
+			resetFunc: _ => c_infoInit(),
+		}, g_cssObj.button_Tweet)
+	);
+};
+g_customJsObj.option.push(() => c_addButton());
+g_customJsObj.settingsDisplay.push(() => c_addButton());
+g_customJsObj.exSetting.push(() => c_addButton());
+
+// 各画面で背景色を変更する
+g_skinJsObj.title.push(() => c_changeBackColor());
+g_skinJsObj.dataMgt.push(() => c_changeBackColor());
+g_skinJsObj.precondition.push(() => c_changeBackColor());
+g_skinJsObj.option.push(() => c_changeBackColor());
+g_skinJsObj.settingsDisplay.push(() => c_changeBackColor());
+g_skinJsObj.exSetting.push(() => c_changeBackColor());
+g_skinJsObj.keyconfig.push(() => c_changeBackColor());
+g_skinJsObj.main.push(() => c_changeBackColor());
+g_skinJsObj.result.push(() => c_changeBackColor());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "danoniplus",
-  "version": "49.3.0",
+  "version": "49.3.2",
   "description": "Dancing☆Onigiri (CW Edition) - Web-based Rhythm Game",
   "main": "./js/danoni_main.js",
   "jsdelivr": "./js/danoni_main.js",