April's fool

assets/locales/en/translation.json

@@ -1987,6 +1987,7 @@
 				"casts": "Casts",
 				"resources": "Resources",
 				"timeline": "Timeline",
+				"replay": "Replay",
 				"log": "Log"
 			},
 			"columns": {
@@ -2470,5 +2471,13 @@
 			"points_suffix": "Points",
 			"percent_suffix": "%"
 		}
+	},
+	"combat_replay": {
+		"empty_title": "Combat Replay",
+		"empty_desc": "Run a simulation to generate an interactive combat replay",
+		"default_player": "Player",
+		"training_dummy": "Training Dummy",
+		"seek_back": "Rewind {{time}}s",
+		"seek_fwd": "Forward {{time}}s"
 	}
 }

assets/locales/fr/translation.json

@@ -1988,6 +1988,7 @@
 				"casts": "Sorts",
 				"resources": "Ressources",
 				"timeline": "Chronologie",
+				"replay": "Replay",
 				"log": "Journal"
 			},
 			"columns": {
@@ -2471,5 +2472,13 @@
 			"points_suffix": "Points",
 			"percent_suffix": "%"
 		}
+	},
+	"combat_replay": {
+		"empty_title": "Replay de Combat",
+		"empty_desc": "Lancez une simulation pour générer un replay de combat interactif",
+		"default_player": "Joueur",
+		"training_dummy": "Mannequin d'entraînement",
+		"seek_back": "Reculer {{time}}s",
+		"seek_fwd": "Avancer {{time}}s"
 	}
 }

schemas/translation.schema.json

@@ -8330,6 +8330,9 @@
                 "timeline": {
                   "type": "string"
                 },
+                "replay": {
+                  "type": "string"
+                },
                 "log": {
                   "type": "string"
                 }
@@ -8344,6 +8347,7 @@
                 "casts",
                 "resources",
                 "timeline",
+                "replay",
                 "log"
               ]
             },
@@ -10360,6 +10364,26 @@
         "results",
         "character_stats"
       ]
+    },
+    "combat_replay": {
+      "type": "object",
+      "properties": {
+        "empty_title": { "type": "string" },
+        "empty_desc": { "type": "string" },
+        "default_player": { "type": "string" },
+        "training_dummy": { "type": "string" },
+        "seek_back": { "type": "string" },
+        "seek_fwd": { "type": "string" }
+      },
+      "additionalProperties": false,
+      "required": [
+        "empty_title",
+        "empty_desc",
+        "default_player",
+        "training_dummy",
+        "seek_back",
+        "seek_fwd"
+      ]
     }
   },
   "additionalProperties": false,
@@ -10373,6 +10397,7 @@
     "bulk_tab",
     "rotation_tab",
     "results_tab",
+    "combat_replay",
     "import",
     "export",
     "info",

ui/core/components/detailed_results.tsx

@@ -9,6 +9,7 @@ import { DamageMetricsTable } from './detailed_results/damage_metrics';
 import { DpsHistogram } from './detailed_results/dps_histogram';
 import { DtpsMetricsTable } from './detailed_results/dtps_metrics';
 import { HealingMetricsTable } from './detailed_results/healing_metrics';
+import { CombatReplay } from './detailed_results/combat_replay';
 import { LogRunner } from './detailed_results/log_runner';
 import { PlayerDamageMetricsTable } from './detailed_results/player_damage';
 import { PlayerDamageTakenMetricsTable } from './detailed_results/player_damage_taken';
@@ -69,6 +70,10 @@ const tabs: Tab[] = [
 		targetId: 'timelineTab',
 		label: i18n.t('results_tab.details.tabs.timeline'),
 	},
+	{
+		targetId: 'replayTab',
+		label: i18n.t('results_tab.details.tabs.replay'),
+	},
 	{
 		targetId: 'logTab',
 		label: i18n.t('results_tab.details.tabs.log'),
@@ -175,12 +180,17 @@ export class DetailedResults extends Component {
 							<div className="resource-metrics" />
 						</div>
 					</div>
-					<div id="timelineTab" className="tab-pane dr-tab-content timeline-content fade">
-						<div className="dr-row">
-							<div className="timeline" />
-						</div>
+				<div id="timelineTab" className="tab-pane dr-tab-content timeline-content fade">
+					<div className="dr-row">
+						<div className="timeline" />
+					</div>
+				</div>
+				<div id="replayTab" className="tab-pane dr-tab-content replay-content fade">
+					<div className="dr-row">
+						<div className="combat-replay" />
 					</div>
-					<div id="logTab" className="tab-pane dr-tab-content log-content fade">
+				</div>
+				<div id="logTab" className="tab-pane dr-tab-content log-content fade">
 						<div className="dr-row">
 							<div className="log" />
 						</div>
@@ -283,6 +293,16 @@ export class DetailedResults extends Component {
 			timeline.render();
 		});
 
+		const combatReplay = new CombatReplay({
+			parent: this.rootElem.querySelector('.combat-replay')!,
+			resultsEmitter: this.resultsEmitter,
+		});
+
+		const replayTabEl = document.querySelector('button[data-bs-target="#replayTab"]');
+		replayTabEl?.addEventListener('hide.bs.tab', () => {
+			combatReplay.stopPlayback();
+		});
+
 		new LogRunner({
 			parent: this.rootElem.querySelector('.log')!,
 			resultsEmitter: this.resultsEmitter,