Convert game header component to typescript

resources/js/mp-history/game-header.tsx

@@ -0,0 +1,80 @@
+// 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 StringWithComponent from 'components/string-with-component';
+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;
+}
+
+export default function GameHeader(props: Props) {
+  const timeFormat = 'LTS';
+
+  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 }) : ''}>
+      <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'>
+          {endTime != null
+            ? <StringWithComponent
+              mappings={{
+                endTime,
+                startTime,
+              }}
+              pattern=':startTime - :endTime' />
+            : <StringWithComponent
+              mappings={{
+                inProgress: trans('matches.match.in-progress'),
+                startTime,
+              }}
+              pattern=':startTime :inProgress' />}
+        </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>
+  );
+}

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