diff --git a/resources/js/mp-history/game-header.coffee b/resources/js/mp-history/game-header.coffee
deleted file mode 100644
index 1a226343adb..00000000000
--- a/resources/js/mp-history/game-header.coffee
+++ /dev/null
@@ -1,60 +0,0 @@
-# Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
-# See the LICENCE file in the repository root for full licence text.
-
-import BeatmapsetCover from 'components/beatmapset-cover'
-import Mod from 'components/mod'
-import TimeWithTooltip from 'components/time-with-tooltip'
-import { route } from 'laroute'
-import * as React from 'react'
-import { div, a, span, h1, h2 } from 'react-dom-factories'
-import { getArtist, getTitle } from 'utils/beatmapset-helper'
-import { trans } from 'utils/lang'
-import { filterMods } from 'utils/score-helper'
-
-el = React.createElement
-
-timeFormat = 'LTS'
-
-export class GameHeader extends React.Component
-
-  render: ->
-    title = getTitle(@props.beatmapset)
-    title += " [#{@props.beatmap.version}]" if @props.beatmap.version
-
-    a
-      className: 'mp-history-game__header'
-      href: (route 'beatmaps.show', beatmap: @props.beatmap.id) if @props.beatmap.id
-
-      el BeatmapsetCover,
-        beatmapset: @props.beatmapset
-        modifiers: 'full'
-        size: 'cover'
-
-      div
-        className: 'mp-history-game__header-overlay'
-
-      div className: 'mp-history-game__stats-box',
-        span className: 'mp-history-game__stat',
-          el TimeWithTooltip, dateTime: @props.game.start_time, format: timeFormat
-          if @props.game.end_time?
-            el React.Fragment, null,
-              ' - '
-              el TimeWithTooltip, dateTime: @props.game.end_time, format: timeFormat
-          else
-            " #{trans 'matches.match.in-progress'}"
-        span className: 'mp-history-game__stat', trans "beatmaps.mode.#{@props.game.mode}"
-        span className: 'mp-history-game__stat', trans "matches.game.scoring-type.#{@props.game.scoring_type}"
-
-      div className: 'mp-history-game__metadata-box',
-        h1 className: 'mp-history-game__metadata mp-history-game__metadata--title',
-          title
-        h2 className: 'mp-history-game__metadata mp-history-game__metadata--artist', getArtist(@props.beatmapset)
-
-      div className: 'mp-history-game__mods',
-        el(Mod, key: mod, mod: { acronym: mod }) for mod in @props.game.mods
-
-      div
-        className: 'mp-history-game__team-type'
-        title: trans "matches.match.team-types.#{@props.game.team_type}"
-        style:
-          backgroundImage: "url(/images/badges/team-types/#{@props.game.team_type}.svg)"
diff --git a/resources/js/mp-history/game-header.tsx b/resources/js/mp-history/game-header.tsx
new file mode 100644
index 00000000000..e469de08ef0
--- /dev/null
+++ b/resources/js/mp-history/game-header.tsx
@@ -0,0 +1,67 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import BeatmapsetCover from 'components/beatmapset-cover';
+import Mod from 'components/mod';
+import TimeWithTooltip from 'components/time-with-tooltip';
+import BeatmapJson from 'interfaces/beatmap-json';
+import BeatmapsetJson from 'interfaces/beatmapset-json';
+import LegacyMatchGameJson from 'interfaces/legacy-match-game-json';
+import { route } from 'laroute';
+import * as React from 'react';
+import { getArtist, getTitle } from 'utils/beatmapset-helper';
+import { classWithModifiers } from 'utils/css';
+import { trans } from 'utils/lang';
+
+interface Props {
+  beatmap: BeatmapJson;
+  beatmapset: BeatmapsetJson;
+  game: LegacyMatchGameJson;
+}
+
+const timeFormat = 'LTS';
+
+export default function GameHeader(props: Props) {
+  let title = getTitle(props.beatmapset);
+  const version = props.beatmap.version;
+  if (version != null) {
+    title += ` [${version}]`;
+  }
+
+  const startTime = <TimeWithTooltip dateTime={props.game.start_time} format={timeFormat} />;
+  const endTime = props.game.end_time != null
+    ? <TimeWithTooltip dateTime={props.game.end_time} format={timeFormat} />
+    : null;
+
+  return (
+    <a
+      className='mp-history-game__header'
+      href={props.beatmap.id != null ? route('beatmaps.show', { beatmap: props.beatmap.id }) : undefined}>
+      <BeatmapsetCover
+        beatmapset={props.beatmapset}
+        modifiers='full'
+        size='cover' />
+      <div className='mp-history-game__header-overlay' />
+      <div className='mp-history-game__stats-box'>
+        {endTime != null
+          ? <span className='mp-history-game__stat'>{startTime} - {endTime}</span>
+          : <span className='mp-history-game__stat'>{startTime} {trans('matches.match.in-progress')}</span>}
+        <span className='mp-history-game__stat'>{trans(`beatmaps.mode.${props.game.mode}`)}</span>
+        <span className='mp-history-game__stat'>{trans(`matches.game.scoring-type.${props.game.scoring_type}`)}</span>
+      </div>
+      <div className='mp-history-game__metadata-box'>
+        <h1 className={classWithModifiers('mp-history-game__metadata', ['title'])}>{title}</h1>
+        <h2 className={classWithModifiers('mp-history-game__metadata', ['artist'])}>{getArtist(props.beatmapset)}</h2>
+      </div>
+      <div className='mp-history-game__mods'>
+        {props.game.mods.map((mod) => (<Mod key={mod} mod={{ acronym: mod }} />))}
+      </div>
+      <div
+        className='mp-history-game__team-type'
+        style={{
+          backgroundImage: `url(/images/badges/team-types/${props.game.team_type}.svg)`,
+        }}
+        title={trans(`matches.match.team-types.${props.game.team_type}`)} />
+    </a>
+  );
+}
diff --git a/resources/js/mp-history/game.coffee b/resources/js/mp-history/game.coffee
index 03722e3d507..e600fd22ffb 100644
--- a/resources/js/mp-history/game.coffee
+++ b/resources/js/mp-history/game.coffee
@@ -6,7 +6,7 @@ import * as React from 'react'
 import { div, span, strong } from 'react-dom-factories'
 import { formatNumber } from 'utils/html'
 import { trans, transExists } from 'utils/lang'
-import { GameHeader } from './game-header'
+import GameHeader from './game-header'
 import { Score } from './score'
 
 el = React.createElement