danoniplus 43.2.2 → 43.4.0

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2025/12/30
+ * Revised : 2026/01/04
  *
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 43.2.2`;
-const g_revisedDate = `2025/12/30`;
+const g_version = `Ver 43.4.0`;
+const g_revisedDate = `2026/01/04`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
@@ -11489,6 +11489,7 @@ const getArrowSettings = () => {
 	// 初期位置、ライフ設定の初期化
 	Object.keys(g_resultObj).forEach(judgeCnt => g_resultObj[judgeCnt] = 0);
 	g_resultObj.spState = ``;
+	g_resultObj.gaugeTransition = [];
 
 	g_displays.forEach(_disp => {
 		const lowerDisp = _disp.toLowerCase();
@@ -12173,6 +12174,7 @@ const mainInit = () => {
 				if (g_currentArrows !== g_fullArrows || g_stateObj.lifeMode === C_LFE_BORDER && g_workObj.lifeVal < g_workObj.lifeBorder) {
 					g_gameOverFlg = true;
 					g_finishFlg = false;
+					g_resultObj.gaugeTransition.push([g_scoreObj.baseFrame, 0]);
 				}
 				resultInit();
 			} else {
@@ -13646,6 +13648,7 @@ const lifeRecovery = () => {
 	} else {
 		changeLifeColor(g_workObj.lifeVal >= g_workObj.lifeBorder ? `Cleared` : ``);
 	}
+	g_resultObj.gaugeTransition.push([g_scoreObj.baseFrame, g_workObj.lifeVal]);
 };
 
 /**
@@ -13662,6 +13665,7 @@ const lifeDamage = (_excessive = false) => {
 	} else {
 		changeLifeColor(g_workObj.lifeVal < g_workObj.lifeBorder ? `Failed` : `Cleared`);
 	}
+	g_resultObj.gaugeTransition.push([g_scoreObj.baseFrame, g_workObj.lifeVal]);
 };
 
 /**
@@ -14167,6 +14171,161 @@ const resultInit = () => {
 		lblAutoView.style.fontSize = wUnit(20);
 	}
 
+	// ゲージ推移グラフの描画
+	const gaugeTransitionCanvas = document.createElement(`canvas`);
+	gaugeTransitionCanvas.id = `graphGaugeTransition`;
+	gaugeTransitionCanvas.width = g_limitObj.gaugeTransitionWidth;
+	gaugeTransitionCanvas.height = g_limitObj.gaugeTransitionHeight;
+
+	createEmptySprite(divRoot, `gaugeTransitionWindow`, g_windowObj.gaugeTransition, g_cssObj.result_PlayDataWindow).appendChild(gaugeTransitionCanvas);
+
+	multiAppend(divRoot,
+		createCss2Button(`btnGaugeTransition`, `i`, () => true, {
+			x: g_sWidth / 2 - 250, y: 185, w: 30, h: 30, siz: g_limitObj.jdgCharaSiz,
+			resetFunc: () => changeGaugeTransition(), cxtFunc: () => changeGaugeTransition(),
+		}, g_cssObj.button_Mini),
+	);
+	multiAppend(gaugeTransitionWindow,
+		createCss2Button(`btnGaugeTrL`, `<`, () => true, {
+			x: -45, y: 35, w: 20, h: 30, siz: g_limitObj.jdgCharaSiz,
+			resetFunc: () => moveCursor(keyIsShift() ? -10 : -1),
+		}, g_cssObj.button_Setting),
+		createCss2Button(`btnGaugeTrR`, `>`, () => true, {
+			x: -25, y: 35, w: 20, h: 30, siz: g_limitObj.jdgCharaSiz,
+			resetFunc: () => moveCursor(keyIsShift() ? 10 : 1),
+		}, g_cssObj.button_Setting),
+	);
+	g_stateObj.gaugeTransitionViewFlg = false;
+
+	const changeGaugeTransition = () => {
+		if (g_stateObj.gaugeTransitionViewFlg) {
+			resultWindow.style.opacity = `1`;
+			gaugeTransitionWindow.style.visibility = `hidden`;
+			g_stateObj.gaugeTransitionViewFlg = false;
+		} else {
+			resultWindow.style.opacity = `0.3`;
+			gaugeTransitionWindow.style.visibility = `visible`;
+			g_stateObj.gaugeTransitionViewFlg = true;
+		}
+	};
+
+	const startFrame = g_detailObj.startFrame[g_stateObj.scoreId];
+	let playingFrame = g_detailObj.playingFrameWithBlank[g_stateObj.scoreId];
+	if (playingFrame <= 0) {
+		playingFrame = 1;
+	}
+	const transitionObj = { frame: [0], life: [g_workObj.lifeInit] };
+
+	const frame = transitionObj.frame;
+	const life = transitionObj.life;
+	const transitionData = g_resultObj.gaugeTransition;
+
+	for (let i = 0; i < transitionData?.length; i++) {
+		frame.push(transitionData[i][0] - startFrame);
+		life.push(transitionData[i][1]);
+	}
+
+	frame.push(playingFrame);
+	life.push(life.at(-1));
+
+	const context = gaugeTransitionCanvas.getContext(`2d`);
+	context.lineWidth = 2;
+
+	const drawGaugeGraph = () => {
+		context.clearRect(0, 0, gaugeTransitionCanvas.width, gaugeTransitionCanvas.height);
+
+		let preX, preY;
+		const borderY = g_limitObj.gaugeTransitionHeight - g_workObj.lifeBorder * g_limitObj.gaugeTransitionHeight / g_headerObj.maxLifeVal;
+
+		for (let i = 0; i < frame.length; i++) {
+			const x = frame[i] * g_limitObj.gaugeTransitionWidth / playingFrame;
+			const y = g_limitObj.gaugeTransitionHeight - life[i] * g_limitObj.gaugeTransitionHeight / g_headerObj.maxLifeVal;
+
+			if (i === 0) {
+				context.beginPath();
+				context.moveTo(x, y);
+			} else {
+				context.moveTo(preX, preY);
+				context.lineTo(x, preY);
+
+				if (life[i - 1] === 0 && life[i] === 0) {
+					context.strokeStyle = g_graphColorObj.failed;
+
+				} else if (life[i - 1] >= g_workObj.lifeBorder && life[i] >= g_workObj.lifeBorder) {
+					context.lineTo(x, y);
+					context.strokeStyle = g_graphColorObj.clear;
+
+				} else if (life[i - 1] < g_workObj.lifeBorder && life[i] >= g_workObj.lifeBorder) {
+					context.lineTo(x, borderY);
+					context.strokeStyle = g_graphColorObj.failed;
+					context.stroke();
+					context.beginPath();
+					context.moveTo(x, borderY);
+					context.lineTo(x, y);
+					context.strokeStyle = g_graphColorObj.clear;
+
+				} else if (life[i - 1] >= g_workObj.lifeBorder && life[i] < g_workObj.lifeBorder) {
+					context.lineTo(x, borderY);
+					context.strokeStyle = g_graphColorObj.clear;
+					context.stroke();
+					context.beginPath();
+					context.moveTo(x, borderY);
+					context.lineTo(x, y);
+					context.strokeStyle = g_graphColorObj.failed;
+
+				} else {
+					context.lineTo(x, y);
+					context.strokeStyle = g_graphColorObj.failed;
+				}
+
+				context.stroke();
+				context.beginPath();
+			}
+			preX = x;
+			preY = y;
+		}
+	}
+	drawGaugeGraph();
+
+	let cursorFrame = 0;   // 現在のカーソル位置（frame）
+	const moveCursor = (sec = 1) => {
+		cursorFrame = Math.max(0, Math.min(playingFrame, cursorFrame + sec * g_fps));
+		drawOverlay();
+	};
+
+	const frameToX = (_frame) => {
+		return _frame / playingFrame * gaugeTransitionCanvas.width;
+	};
+
+	// 既存のグラフを再描画しつつ縦線と時間を重ねる
+	const drawOverlay = () => {
+		// 既存のグラフを再描画
+		drawGaugeGraph();
+
+		const ctx = context;
+		const x = frameToX(cursorFrame);
+
+		// 縦線
+		ctx.beginPath();
+		ctx.moveTo(x, 0);
+		ctx.lineTo(x, gaugeTransitionCanvas.height);
+		ctx.strokeStyle = "#009999";
+		ctx.lineWidth = 1.5;
+		ctx.stroke();
+
+		// 時間表示
+		const timer = transFrameToTimer(cursorFrame + startFrame);
+		ctx.font = `14px ${getBasicFont()}`;
+		ctx.fillStyle = "#009999";
+		ctx.textAlign = x > gaugeTransitionCanvas.width * 0.8 ? C_ALIGN_RIGHT : C_ALIGN_LEFT;
+		ctx.fillText(
+			`${timer}`,
+			x > gaugeTransitionCanvas.width * 0.8 ? x - 5 : x + 5,
+			g_limitObj.gaugeTransitionHeight - 35
+		);
+	};
+	drawOverlay();
+
 	// ユーザカスタムイベント(初期)
 	const currentDateTime = new Date().toLocaleString();
 	g_customJsObj.result.forEach(func => func());

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2025/09/21 (v43.1.1)
+ * Revised : 2026/01/04 (v43.4.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -75,6 +75,10 @@ const g_limitObj = {
     graphHeight: 240,
     graphMiniSiz: 12,
 
+    // ゲージ推移グラフ表示部分の幅、高さ
+    gaugeTransitionWidth: 430,
+    gaugeTransitionHeight: 210,
+
     // その他のフォントサイズ
     titleSiz: 32,
     mainSiz: 14,
@@ -206,6 +210,7 @@ const updateWindowSiz = () => {
         loader: { y: g_sHeight - 10, h: 10, backgroundColor: `#333333` },
         playDataWindow: { x: g_sWidth / 2 - 225, y: 70, w: 450, h: 110 },
         resultWindow: { x: g_sWidth / 2 - 200, y: 185, w: 400, h: 210 },
+        gaugeTransition: { x: g_sWidth / 2 - g_limitObj.gaugeTransitionWidth / 2, y: 185, w: g_limitObj.gaugeTransitionWidth, h: g_limitObj.gaugeTransitionHeight, visibility: `hidden` },
     });
 
     Object.assign(g_lblPosObj, {
@@ -902,6 +907,9 @@ const g_graphColorObj = {
 
     speed: `#cc3333`,
     boost: `#999900`,
+
+    clear: `#33cc33`,
+    failed: `#cc3333`,
 };
 
 const g_settingBtnObj = {
@@ -984,6 +992,8 @@ const g_resultObj = {
     excessive: 0,
 
     spState: ``,
+
+    gaugeTransition: [],
 };
 
 const C_RLT_BRACKET_L = 210;
@@ -2471,10 +2481,13 @@ const g_shortcutObj = {
         ShiftRight_Tab: { id: `btnBack` },
         ControlLeft_KeyC: { id: `` },
         ControlRight_KeyC: { id: `` },
+        KeyI: { id: `btnGaugeTransition` },
         KeyC: { id: `btnCopy`, reset: true },
         KeyX: { id: `btnTweet`, reset: true }, // x
         KeyD: { id: `btnGitter`, reset: true }, // Discord
         KeyP: { id: `btnCopyImage` },
+        ArrowLeft: { id: `btnGaugeTrL` },
+        ArrowRight: { id: `btnGaugeTrR` },
         Backspace: { id: `btnRetry` },
     },
 };
@@ -2519,7 +2532,7 @@ const g_btnPatterns = {
     exSetting: { Back: 0, KeyConfig: 0, Play: 0, exSetting: -5, Save: -10 },
     loadingIos: { Play: 0 },
     keyConfig: { Back: -3, Play: 0 },
-    result: { Back: -5, Copy: -5, Tweet: -5, Gitter: -5, Retry: 0 },
+    result: { Back: -5, Copy: -5, Tweet: -5, Gitter: -5, Retry: 0, GaugeTransition: -15 },
 };
 
 // メイン画面以外でキーリピートを許可しないキーを設定

package/package.json

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