danoniplus 48.3.0 → 48.4.1

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2026/05/31
+ * Revised : 2026/06/05
  *
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 48.3.0`;
-const g_revisedDate = `2026/05/31`;
+const g_version = `Ver 48.4.1`;
+const g_revisedDate = `2026/06/05`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
@@ -9171,7 +9171,7 @@ const openDisplayPreview = () => {
 	// オーバーレイ本体
 	// ============================================================
 	const overlay = createEmptySprite(divRoot, `displayPreviewOverlay`, {
-		w: g_sWidth, h: g_sHeight, background: g_headerObj.baseBrightFlg ? `#eeeeeedd` : `#111111dd`, pointerEvents: C_DIS_AUTO,
+		w: g_sWidth, h: g_sHeight, background: g_headerObj.baseBrightFlg ? `#eeeeeeee` : `#111111dd`, pointerEvents: C_DIS_AUTO,
 	});
 	g_previewRoot = overlay;
 	multiAppend(overlay,
@@ -9209,7 +9209,7 @@ const openDisplayPreview = () => {
 
 	const frame = createEmptySprite(overlay, `previewFrame`, {
 		x: frameX, y: frameY, w: playW, h: playH,
-		background: `#111111`,
+		background: g_headerObj.baseBrightFlg ? `#eeeeee` : `#111111`,
 		border: `1px solid #444444`,
 		boxSizing: `border-box`,
 		transform: `scale(${rate})`,
@@ -9266,6 +9266,13 @@ const buildPreviewUI = (_frame, _playW, _playH) => {
 	// ============================================================
 	const stepY = g_posObj.stepY ?? C_STEP_Y;
 	const revStepY = g_posObj.reverseStepY;
+	const hitPos = g_stateObj.hitPosition ?? 0;
+
+	// 簡易ステップゾーン（7レーン分）
+	const laneCount = 7;
+	const laneW = 50;
+	const totalW = laneCount * laneW;
+	const startX = Math.round((_playW - totalW) / 2);
 
 	if (d.stepzone === C_FLG_OFF) {
 		multiAppend(_frame,
@@ -9273,12 +9280,6 @@ const buildPreviewUI = (_frame, _playW, _playH) => {
 			disableBox(`StepZone_Rev`, { x: Math.round(_playW / 2 - 200), y: C_STEP_Y + revStepY, w: 400, h: 50 }),
 		);
 	} else {
-		// 簡易ステップゾーン（7レーン分）
-		const laneCount = 7;
-		const laneW = 50;
-		const totalW = laneCount * laneW;
-		const startX = Math.round((_playW - totalW) / 2);
-
 		for (let j = 0; j < laneCount; j++) {
 			createEmptySprite(_frame, `previewStep${j}`, {
 				x: startX + j * laneW + 2, y: stepY + 2, w: laneW - 4, h: laneW - 4,
@@ -9293,6 +9294,45 @@ const buildPreviewUI = (_frame, _playW, _playH) => {
 		}
 	}
 
+	// ============================================================
+	// HitPosition を視覚化する判定基準ライン
+	// ============================================================
+	// 通常譜面用の判定ライン（赤または目立つ色で、レーン幅全体をカバー）
+	// 上から下に流れる場合、hitPosがプラスなら「ステップゾーンより下」にラインが来る
+	const lineNormal = createEmptySprite(_frame, `previewHitPosLine`, {
+		x: startX,
+		y: stepY + Math.round(laneW / 2) + hitPos, // ステップゾーンの中心 + hitPos 
+		w: totalW,
+		h: 2, // 2pxの横線
+		background: `#33aaff`,
+		boxShadow: `0 0 4px #33aaff`, // ネオンっぽく光らせて目立たせる
+	});
+
+	// 青いラインの右端（totalW から10pxほど外側）に数値を表示
+	multiAppend(
+		lineNormal,
+		createDivCss2Label(`previewHitPosTitle`, `Hit`, {
+			...g_lblPosObj.previewHitPosText, x: -60, y: -14, align: C_ALIGN_RIGHT,
+		}),
+		createDivCss2Label(`previewHitPosTitle2`, `Position`, {
+			...g_lblPosObj.previewHitPosText, x: -60, y: -2, align: C_ALIGN_RIGHT,
+		}),
+		createDivCss2Label(`previewHitPosText`, `${hitPos > 0 ? '+' : ''}${hitPos}px↑↓`, {
+			...g_lblPosObj.previewHitPosText, x: totalW + 5, y: -8, align: C_ALIGN_LEFT,
+		}),
+	);
+
+	// リバース譜面用の判定ライン
+	// 下から上に流れる場合、hitPosがプラスなら「ステップゾーンより上（座標としてはマイナス）」に来る
+	createEmptySprite(_frame, `previewHitPosLineRev`, {
+		x: startX,
+		y: (C_STEP_Y + revStepY) + Math.round(laneW / 2) - hitPos, // ステップゾーンの中心 - hitPos
+		w: totalW,
+		h: 2,
+		background: `#ffaa00`,
+		boxShadow: `0 0 4px #ffaa00`,
+	});
+
 	// ============================================================
 	// 判定エリア（ドラッグ可能）
 	// ============================================================
@@ -9301,30 +9341,67 @@ const buildPreviewUI = (_frame, _playW, _playH) => {
 			x: Math.round(_playW / 2 - 220), y: Math.round((_playH + (g_posObj?.stepYR ?? 0)) / 2 - 60), w: 440, h: 120,
 		}));
 	} else {
-		const jX0 = Math.round(_playW / 2 - 220) + (g_diffObj.arrowJdgX ?? 0);
-		const jY0 = Math.round((_playH + (g_posObj?.stepYR ?? 0)) / 2 - 60) + (g_diffObj.arrowJdgY ?? 0);
-		const fX0 = Math.round(_playW / 2 - 120) + (g_diffObj.frzJdgX ?? 0);
-		const fY0 = Math.round((_playH + (g_posObj?.stepYR ?? 0)) / 2 + 10) + (g_diffObj.frzJdgY ?? 0);
-
-		const jdgInitX = g_previewPos.arrowJdg.x ?? jX0;
-		const jdgInitY = g_previewPos.arrowJdg.y ?? jY0;
-		const jdgFInitX = g_previewPos.frzJdg.x ?? fX0;
-		const jdgFInitY = g_previewPos.frzJdg.y ?? fY0;
-
-		// 通常判定グループ
-		buildDraggableJudgGroup(_frame, `arrowJdg`, jdgInitX, jdgInitY, _playW, _playH, {
-			charaText: d.judgment === C_FLG_ON ? g_lblNameObj.j_ii : ``,
-			comboText: d.judgment === C_FLG_ON ? `5 Combo!!` : ``,
-			diffText: `Fast 3 Frames`,
-			charaColor: `#66ffff`,
-		});
+		const opacity = g_stateObj.opacity / 100;
+		const jdgCenterY = Math.round((_playH + (g_posObj?.stepYR ?? 0)) / 2);
+		const groupW = 370;
+		const groupH = 51;
 
-		// フリーズ判定グループ
-		buildDraggableJudgGroup(_frame, `frzJdg`, jdgFInitX, jdgFInitY, _playW, _playH, {
-			charaText: d.judgment === C_FLG_ON ? g_lblNameObj.j_kita : ``,
-			comboText: d.judgment === C_FLG_ON ? `5 Combo!!` : ``,
-			diffText: `Fast 2 Frames`,
-			charaColor: `#ffff99`,
+		const jdgSettings = [
+			{
+				key: `arrowJdg`,
+				stdYOffset: -60,
+				offsetX: g_diffObj.arrowJdgX ?? 0,
+				offsetY: g_diffObj.arrowJdgY ?? 0,
+				chara: d.judgment === C_FLG_ON ? g_lblNameObj.j_ii : ``,
+				css: [g_cssObj.common_ii, g_cssObj.common_kita], // [chara, combo]
+				toast: g_lblNameObj.arrowJdgUpdate,
+			},
+			{
+				key: `frzJdg`,
+				stdYOffset: 10,
+				offsetX: g_diffObj.frzJdgX ?? 0,
+				offsetY: g_diffObj.frzJdgY ?? 0,
+				chara: d.judgment === C_FLG_ON ? g_lblNameObj.j_kita : ``,
+				css: [g_cssObj.common_kita, g_cssObj.common_ii],
+				toast: g_lblNameObj.frzJdgUpdate,
+			}
+		];
+
+		jdgSettings.forEach(item => {
+
+			const stdX = Math.round(_playW / 2 - (item.key === `arrowJdg` ? 220 : 120));
+			const initX = g_previewPos[item.key].x ?? (stdX + item.offsetX);
+			const initY = g_previewPos[item.key].y ?? (jdgCenterY + item.offsetY + item.stdYOffset);
+
+			// グループコンテナの生成
+			const group = createEmptySprite(_frame, `previewGrp_${item.key}`, {
+				x: initX, y: initY, w: groupW, h: groupH, pointerEvents: C_DIS_AUTO,
+			});
+
+			// ラベル類の配置
+			multiAppend(group,
+				createDivCss2Label(`previewChara_${item.key}`, item.chara, {
+					x: 0, y: 0, w: g_limitObj.jdgCharaWidth, h: g_limitObj.jdgCharaHeight,
+					siz: g_limitObj.jdgCharaSiz, opacity,
+				}, item.css[0]),
+				createDivCss2Label(`previewCombo_${item.key}`, d.judgment === C_FLG_ON ? `5 Combo!!` : ``, {
+					x: 170, y: 0, w: g_limitObj.jdgCharaWidth, h: g_limitObj.jdgCharaHeight,
+					siz: g_limitObj.jdgCharaSiz, opacity,
+				}, item.css[1]),
+				createDivCss2Label(`previewDiff_${item.key}`, `Fast 3 Frames`, {
+					x: 170, y: 25, w: g_limitObj.jdgCharaWidth, h: g_limitObj.jdgCharaHeight,
+					siz: g_limitObj.mainSiz, color: `#ff9966`, opacity,
+				}, g_cssObj.common_fast),
+			);
+
+			// ドラッグ機能を付与
+			makeElementDraggable(group, item.key, _playW, _playH, { w: groupW, h: groupH }, {
+				toastTitle: item.toast,
+				getStdPos: () => ({
+					x: stdX,
+					y: Math.round(jdgCenterY + item.stdYOffset),
+				}),
+			});
 		});
 	}
 
@@ -9335,9 +9412,9 @@ const buildPreviewUI = (_frame, _playW, _playH) => {
 		_frame.appendChild(disableBox(`LifeGauge`, g_lblPosObj.previewLifeDisabled));
 	} else {
 		multiAppend(_frame,
-			createDivCss2Label(`previewLifeBack`, ``, g_lblPosObj.previewLifeBack),
-			createDivCss2Label(`previewLifeBar`, ``, g_lblPosObj.previewLifeBar),
-			createDivCss2Label(`previewLifeNum`, `700`, g_lblPosObj.previewLifeNum),
+			createDivCss2Label(`previewLifeBack`, ``, g_lblPosObj.previewLifeBack, g_cssObj.life_Background),
+			createDivCss2Label(`previewLifeBar`, ``, g_lblPosObj.previewLifeBar, g_cssObj.life_Cleared),
+			createDivCss2Label(`previewLifeNum`, `700`, g_lblPosObj.previewLifeNum, g_cssObj.life_Cleared),
 		);
 	}
 
@@ -9352,31 +9429,31 @@ const buildPreviewUI = (_frame, _playW, _playH) => {
 		}
 	} else {
 		const scoreItems = [
-			{ color: `#66ffff`, cnt: `5` },
-			{ color: `#99ff99`, cnt: `0` },
-			{ color: `#ffcc66`, cnt: `0` },
-			{ color: `#cc99ff`, cnt: `0` },
-			{ color: `#ff9999`, cnt: `0` },
-			{ color: `#ffffff`, cnt: `5` },
+			{ name: `ii`, cnt: `5` },
+			{ name: `shakin`, cnt: `0` },
+			{ name: `matari`, cnt: `0` },
+			{ name: `shobon`, cnt: `0` },
+			{ name: `uwan`, cnt: `0` },
+			{ name: `combo`, cnt: `5` },
 			{},
-			{ color: `#ffff99`, cnt: `5` },
-			{ color: `#99ff66`, cnt: `0` },
-			{ color: `#ffffff`, cnt: `5` },
+			{ name: `kita`, cnt: `5` },
+			{ name: `iknai`, cnt: `0` },
+			{ name: `combo`, cnt: `5` },
 		];
 		const sx = _playW - 110 + g_headerObj.scAreaWidth;
 		scoreItems.forEach((item, i) => {
 			_frame.appendChild(
 				createDivCss2Label(`previewScore${i}`, item.cnt || ``, {
 					x: sx + 50, y: 20 * (i + 1), w: 50, h: 20,
-					siz: 16, color: item.color, align: `right`,
-				}),
+					siz: 16, align: `right`,
+				}, g_cssObj[`common_${item.name}`]),
 			);
 		});
 
 		// FrzReturn用ゲージ
 		if (g_stateObj.frzReturn !== C_FLG_OFF) {
 			multiAppend(_frame,
-				createDivCss2Label(`previewFrzLifeBack`, ``, g_lblPosObj.previewFrzLifeBack),
+				createDivCss2Label(`previewFrzLifeBack`, ``, g_lblPosObj.previewFrzLifeBack, g_cssObj.life_Background),
 				createDivCss2Label(`previewFrzLifeBar`, ``, g_lblPosObj.previewFrzLifeBar, g_cssObj.life_frzNormal),
 			);
 		}
@@ -9427,8 +9504,10 @@ const buildPreviewUI = (_frame, _playW, _playH) => {
 	);
 	const scConfig = {
 		toastTitle: g_lblNameObj.shortcutUpdate,
-		getStdX: (pw) => g_sWidth + g_headerObj.scAreaWidth - 85,
-		getStdY: (ph, syr) => _playH - 65,
+		getStdPos: () => ({
+			x: g_sWidth + g_headerObj.scAreaWidth - 85,
+			y: _playH - 65
+		}),
 	};
 	makeElementDraggable(scGroup, `shortcut`, _playW, _playH, { w: 80, h: 65 }, scConfig);
 
@@ -9436,6 +9515,41 @@ const buildPreviewUI = (_frame, _playW, _playH) => {
 	safeExecuteCustomHooks(`g_customJsObj.displayPreview`, g_customJsObj.displayPreview, _frame, _playW, _playH);
 };
 
+/**
+ * プレビューが表示されたまま、HitPositionのラインだけを動かす
+ * @param {number} _newHitPos 新しい g_stateObj.hitPosition の値
+ */
+const updatePreviewHitPositionLine = (_newHitPos) => {
+
+	// 表示用の文字列を作成（例: "+15px", "-8px", "0px"）
+	const sign = _newHitPos > 0 ? `+` : ``;
+	const textValue = `${sign}${_newHitPos}px↑↓`;
+
+	// 1. 各種基準座標を再取得（buildPreviewUI 内の計算ロジックと同期）
+	const stepY = g_posObj.stepY ?? C_STEP_Y;
+	const revStepY = g_posObj.reverseStepY;
+	const laneW = 50;
+
+	// 2. DOM要素を直接取得
+	const lineNormal = document.getElementById(`previewHitPosLine`);
+	const lineReverse = document.getElementById(`previewHitPosLineRev`);
+	const textNormal = document.getElementById(`previewHitPosText`);
+
+	// 3. プレビューが表示されている場合のみ、style.top を直接書き換える
+	if (lineNormal) {
+		const newY = stepY + Math.round(laneW / 2) + _newHitPos;
+		lineNormal.style.top = wUnit(newY);
+	}
+	if (textNormal) {
+		textNormal.textContent = textValue;
+	}
+
+	if (lineReverse) {
+		const newY = (C_STEP_Y + revStepY) + Math.round(laneW / 2) - _newHitPos;
+		lineReverse.style.top = wUnit(newY);
+	}
+};
+
 /**
  * 要素をドラッグ可能にする（汎用ユーティリティ）
  * @param {HTMLElement} _target ドラッグ対象の要素
@@ -9458,11 +9572,12 @@ const makeElementDraggable = (_target, _key, _playW, _playH, _bounds, _config) =
 	const handleId = _target.id ? `handle_${_target.id}` : `dragHandle_${Math.random().toString(36).slice(2, 9)}`;
 	_target.style.cursor = `grab`;
 
+	const bgColor = g_headerObj.baseBrightFlg ? `0,0,0` : `255,255,255`;
 	createEmptySprite(_target, handleId, {
 		x: 0, y: 0, w: boundsW, h: boundsH,
-		border: `1px dashed rgba(255,255,255,0.3)`,
+		border: `1px dashed rgba(${bgColor},0.3)`,
 		boxSizing: `border-box`, borderRadius: `2px`,
-		background: `rgba(255,255,255,0.04)`,
+		background: `rgba(${bgColor},0.04)`,
 	});
 
 	const keyDown = addPreviewListener(_target, `pointerdown`, _evt => {
@@ -9526,64 +9641,6 @@ const makeElementDraggable = (_target, _key, _playW, _playH, _bounds, _config) =
 	_target.setAttribute(`lsnrkeyTE`, keyUp);
 };
 
-/**
- * ドラッグ可能な判定グループを生成する
- * @param {HTMLElement} _parent    親要素
- * @param {string}      _groupId   `arrowJdg` または `frzJdg`
- * @param {number}      _initX     初期X座標（frame相対）
- * @param {number}      _initY     初期Y座標（frame相対）
- * @param {number}      _playW     プレイ幅
- * @param {number}      _playH     プレイ高さ
- * @param {object}      _opts      表示テキスト・色オプション
- */
-const buildDraggableJudgGroup = (_parent, _groupId, _initX, _initY, _playW, _playH, _opts) => {
-	const groupW = 370;
-	const groupH = 51;
-
-	const group = createEmptySprite(_parent, `previewGrp_${_groupId}`, {
-		x: _initX, y: _initY, w: groupW, h: groupH, pointerEvents: C_DIS_AUTO,
-	});
-
-	// 内包要素の生成 (省略：元のコードの multiAppend 部分と同一)
-	multiAppend(
-		group,
-		// キャラクタ
-		createDivCss2Label(`previewChara_${_groupId}`, _opts.charaText, {
-			x: 0, y: 0, w: g_limitObj.jdgCharaWidth, h: g_limitObj.jdgCharaHeight,
-			siz: g_limitObj.jdgCharaSiz, color: _opts.charaColor,
-		}),
-		// コンボ
-		createDivCss2Label(`previewCombo_${_groupId}`, _opts.comboText, {
-			x: 170, y: 0, w: g_limitObj.jdgCharaWidth, h: g_limitObj.jdgCharaHeight,
-			siz: g_limitObj.jdgCharaSiz, color: `#ffffff`,
-		}),
-		// Fast/Slow
-		createDivCss2Label(`previewDiff_${_groupId}`, _opts.diffText, {
-			x: 170, y: 25, w: g_limitObj.jdgCharaWidth, h: g_limitObj.jdgCharaHeight,
-			siz: g_limitObj.mainSiz, color: `#ff9966`,
-		}),
-	);
-
-	// ============================================================
-	// 判定グループ固有の「座標反映ルール」を定義
-	// ============================================================
-	const configMap = {
-		arrowJdg: {
-			toastTitle: g_lblNameObj.arrowJdgUpdate,
-			getStdX: (pw) => Math.round(pw / 2 - 220),
-			getStdY: (ph, syr) => Math.round((ph + syr) / 2 - 60),
-		},
-		frzJdg: {
-			toastTitle: g_lblNameObj.frzJdgUpdate,
-			getStdX: (pw) => Math.round(pw / 2 - 120),
-			getStdY: (ph, syr) => Math.round((ph + syr) / 2 + 10),
-		}
-	};
-
-	// 汎用ドラッグ及びドラッグ枠作成、差分適用処理
-	makeElementDraggable(group, _groupId, _playW, _playH, { w: groupW, h: groupH }, configMap[_groupId]);
-};
-
 /**
  * ドラッグ結果の座標をゲーム本体の設定に汎用的に反映する
  * @param {number} _x 確定したframe相対X
@@ -9592,17 +9649,13 @@ const buildDraggableJudgGroup = (_parent, _groupId, _initX, _initY, _playW, _pla
  * @param {string} _key 保存用キー(g_diffObjのプロパティ名の接頭辞)
  */
 const applyElementPositionToGame = (_x, _y, _config, _key) => {
-	const playW = g_headerObj.playingWidth || g_sWidth;
-	const playH = g_headerObj.playingHeight || g_sHeight;
-	const stepYR = g_posObj?.stepYR ?? 0;
 
 	// 1. 各要素固有の「標準座標（基準点）」を計算
-	const stdX = _config.getStdX(playW);
-	const stdY = _config.getStdY(playH, stepYR);
+	const std = _config.getStdPos();
 
 	// 2. オフセット（差分）を計算
-	const diffX = _x - stdX;
-	const diffY = _y - stdY;
+	const diffX = _x - std.x;
+	const diffY = _y - std.y;
 
 	// 3. 指定された保存先にオフセットを格納
 	g_diffObj[`${_key}X`] = diffX;
@@ -9739,7 +9792,7 @@ const createSettingsDisplayWindow = _sprite => {
 
 	// ---------------------------------------------------
 	// 矢印の見え方 (Appearance)
-	// 縦位置: 7.4
+	// 縦位置: 5.8
 	createGeneralSetting(spriteList.appearance, `appearance`, {
 		addRFunc: () => dispAppearanceSlider(),
 	});
@@ -9779,17 +9832,18 @@ const createSettingsDisplayWindow = _sprite => {
 
 	// ---------------------------------------------------
 	// 判定表示系の不透明度 (Opacity)
-	// 縦位置: 9
+	// 縦位置: 7.4
 	g_headerObj.opacityUse = g_headerObj.judgmentUse || g_headerObj.judgmentSet === C_FLG_ON;
 
 	createGeneralSetting(spriteList.opacity, `opacity`, { unitName: g_lblNameObj.percent });
 
 	// ---------------------------------------------------
 	// タイミング調整 (HitPosition)
-	// 縦位置: 10
+	// 縦位置: 8.4
 	createGeneralSetting(spriteList.hitPosition, `hitPosition`, {
 		skipTerms: g_settings.hitPositionTerms, scLabel: g_lblNameObj.sc_hitPosition, roundNum: 5,
 		unitName: g_lblNameObj.pixel,
+		addRFunc: () => updatePreviewHitPositionLine(g_stateObj.hitPosition),
 	});
 };
 
@@ -11005,13 +11059,6 @@ const keyconfigKeyboardPreview = (() => {
 		legendText: `#cccccc`,   // 凡例テキスト
 	};
 
-	// ボタン配置
-	// X・W は init() 内で動的計算（g_btnWidth() 依存）
-	// Y: KeyConfig テキスト上の余白に収まるよう小さく設定
-	const BTN_H = 18;   // ボタン高さ
-	const BTN_Y = 3;    // divRoot 内 Y 座標
-	const BTN_FS = 11;   // ボタンのフォントサイズ(px)
-
 	// プレビューエリア
 	// X: canvas を divRoot 内で水平センタリング（init で動的計算）
 	// Y: g_sHeight に対して垂直センタリング（init で動的計算）

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2026/05/31 (v48.3.0)
+ * Revised : 2026/06/02 (v48.4.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -569,23 +569,25 @@ const updateWindowSiz = () => {
         },
         previewLifeBack: {
             x: 5, y: 50, w: 15, h: g_headerObj.playingHeight - 100,
-            background: `#333333`, border: `1px solid #555555`,
         },
         previewLifeBar: {
             x: 5, y: 50 + (g_headerObj.playingHeight - 100) * 0.3,
-            w: 15, h: (g_headerObj.playingHeight - 100) * 0.7, background: `#006666`,
+            w: 15, h: (g_headerObj.playingHeight - 100) * 0.7,
         },
         previewLifeNum: {
             x: 0, y: 30, w: 70, h: 20,
-            siz: g_limitObj.jdgCntsSiz, color: `#ffffff`, background: `#006666`, align: C_ALIGN_CENTER,
+            siz: g_limitObj.jdgCntsSiz, align: C_ALIGN_CENTER,
         },
         previewFrzLifeBack: {
-            x: 0, y: 50, w: 5, h: g_headerObj.playingHeight - 100,
-            background: `#333333`, border: `1px solid #555555`,
+            x: 0, y: 50, w: 4, h: g_headerObj.playingHeight - 100,
         },
         previewFrzLifeBar: {
             x: 0, y: 50 + (g_headerObj.playingHeight - 100) * 0.7,
-            w: 5, h: (g_headerObj.playingHeight - 100) * 0.3,
+            w: 4, h: (g_headerObj.playingHeight - 100) * 0.3,
+        },
+        previewHitPosText: {
+            w: 60, h: 16, siz: 14, color: `#33aaff`,
+            fontFamily: `monospace`, fontWeight: `bold`,
         },
 
         /** キーコンフィグ画面 */
@@ -3001,6 +3003,13 @@ const g_shortcutObj = {
     displayPreview: {
         KeyP: { id: `btnDisplayPreview2` },
         KeyR: { id: `btnDisplayReset` },
+        ShiftLeft_ArrowDown: { id: `lnkHitPositionR` },
+        ShiftRight_ArrowDown: { id: `lnkHitPositionR` },
+        ArrowDown: { id: `lnkHitPositionRR` },
+        ShiftLeft_ArrowUp: { id: `lnkHitPositionL` },
+        ShiftRight_ArrowUp: { id: `lnkHitPositionL` },
+        ArrowUp: { id: `lnkHitPositionLL` },
+
         Escape: { id: `btnBack` },
         Space: { id: `btnKeyConfig` },
         Enter: { id: `btnPlay` },

package/package.json

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