danoniplus 49.2.0 → 49.3.1

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2026/07/07
+ * Revised : 2026/07/18
  *
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 49.2.0`;
-const g_revisedDate = `2026/07/07`;
+const g_version = `Ver 49.3.1`;
+const g_revisedDate = `2026/07/18`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
@@ -5013,7 +5013,7 @@ const setColorList = (_data, _colorInit, _colorInitLength,
 
 /**
  * 複合カスタムゲージの定義設定
- * |customGauge=Original::F,Normal::V,Escape::V|
+ * |customGauge=_Original::F::Original,_Normal::V::Normal,Escape::V|
  * @param {object} _dosObj 
  * @param {string} [object.scoreId=0]
  * @returns {object} ※Object.assign(obj, resetCustomGauge(...))の形で呼び出しが必要
@@ -5041,6 +5041,9 @@ const resetCustomGauge = (_dosObj, { scoreId = 0 } = {}) => {
 				const customGaugeSets = customGauges[j].split(`::`);
 				obj[`custom${scoreId}`][j] = customGaugeSets[0];
 				obj[`varCustom${scoreId}`][j] = boolToSwitch(customGaugeSets[1] === `V`);
+				if (hasVal(customGaugeSets[2])) {
+					g_lblNameObj[`u_${customGaugeSets[0]}`] = customGaugeSets[2];
+				}
 			}
 			if (scoreId === 0) {
 				obj.custom = obj.custom0.concat();
@@ -10103,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);
@@ -10112,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 }));
 	};
 
 	/**
@@ -10754,6 +10759,7 @@ const keyConfigInit = (_kcType = g_kcType, _initFlg = false) => {
 				document.getElementById(`key${_num}`).classList.replace(g_cssObj.button_Mini, g_cssObj.button_Next);
 			}
 		}
+		keyconfigKeyboardPreview.refresh();
 	};
 
 	/**
@@ -11412,6 +11418,7 @@ const keyconfigKeyboardPreview = (() => {
 		canvasMap: null,
 		keyDataList: [],          // { code, x, y, w, h, label } — drawMap で照合するキャッシュ
 		scale: 1,                 // BASE_KEY_W/H に掛けるスケール係数
+		cvsX: 0,                  // Canvas の左上 X 座標（divRoot 内の相対座標）
 		cvsW: 500,                // 実際の Canvas 幅（スケール計算後）
 		cvsH: 240,                // 実際の Canvas 高さ（スケール計算後）
 	};
@@ -11453,7 +11460,12 @@ const keyconfigKeyboardPreview = (() => {
 		const totalW = baseMainW + BASE_KEY_GAP * 2 + BASE_NAV_W + BASE_KEY_GAP * 2
 			+ BASE_KEY_GAP * 3 + BASE_NUM_W;
 
-		const availW = g_btnWidth();
+		const tkObj = getKeyInfo();
+		const keyCtrlPtn = `${g_keyObj.currentKey}_${g_keyObj.currentPtn}`;
+		const configKeyGroupList = g_headerObj.keyGroupOrder[g_stateObj.scoreId] ??
+			g_keyObj[`keyGroupOrder${keyCtrlPtn}`] ?? tkObj.keyGroupList;
+
+		const availW = g_btnWidth() + (configKeyGroupList.length > 1 ? -g_lblPosObj.lnkKeySwitch.w - 10 : 0);
 		const availH = g_sHeight - 200 - LEGEND_H;  // 下部 UI ぶんを除いた高さ
 
 		// 縦幅基準: MAIN/NAV 高さ と テンキー高さ（余白込み）の大きい方
@@ -11463,6 +11475,7 @@ const keyconfigKeyboardPreview = (() => {
 		const scaleH = availH / totalH;
 		_state.scale = Math.min(scaleW, scaleH, 1.5);  // 最大 1.5 倍まで拡大可
 
+		_state.cvsX = configKeyGroupList.length > 1 ? (-g_lblPosObj.lnkKeySwitch.w - 10) / 2 : 0;
 		_state.cvsW = Math.floor(totalW * _state.scale);
 		_state.cvsH = Math.floor(totalH * _state.scale) + LEGEND_H;
 	};
@@ -11735,7 +11748,7 @@ const keyconfigKeyboardPreview = (() => {
 		divRoot.appendChild(btn);
 
 		// プレビューエリア: 水平・垂直センタリング
-		const areaX = g_btnX() + Math.floor((g_btnWidth() - _state.cvsW) / 2);
+		const areaX = g_btnX() + Math.floor((g_btnWidth() - _state.cvsW) / 2) + _state.cvsX;
 		const areaY = 130;
 
 		const areaDiv = createEmptySprite(divRoot, C_PREVIEW_ID, {

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.2.0",
+  "version": "49.3.1",
   "description": "Dancing☆Onigiri (CW Edition) - Web-based Rhythm Game",
   "main": "./js/danoni_main.js",
   "jsdelivr": "./js/danoni_main.js",