Merge pull request #12030 from bdach/mp-history-ts/match-event

Convert multiplayer match history event component to typescript

Author: nanaya

app/Models/LegacyMatch/Score.php

@@ -25,7 +25,7 @@
  * @property mixed $rank
  * @property int $score
  * @property int $slot
- * @property int $team
+ * @property mixed $team
  * @property int $user_id
  */
 class Score extends Model

resources/js/interfaces/legacy-match-event-json.ts

@@ -0,0 +1,26 @@
+// 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 LegacyMatchGameJson from './legacy-match-game-json';
+
+export default interface LegacyMatchEventJson {
+  detail: LegacyMatchEventDetail;
+  game?: LegacyMatchGameJson;
+  id: number;
+  timestamp: string;
+  user_id?: number;
+}
+
+export type LegacyMatchEventType =
+  | 'host-changed'
+  | 'match-created'
+  | 'match-disbanded'
+  | 'other'
+  | 'player-joined'
+  | 'player-kicked'
+  | 'player-left';
+
+export interface LegacyMatchEventDetail {
+  text?: string;
+  type: LegacyMatchEventType;
+}

resources/js/interfaces/legacy-match-game-json.ts

@@ -0,0 +1,32 @@
+// 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 BeatmapJson from './beatmap-json';
+import Ruleset from './ruleset';
+import ScoreJson from './score-json';
+
+export default interface LegacyMatchGameJson {
+  beatmap?: BeatmapJson;
+  beatmap_id: number;
+  end_time?: string;
+  id: number;
+  mode: Ruleset;
+  mode_int: number;
+  mods: string[]; // TODO: use ModJson
+  scores: ScoreJson[]; // TODO: use SoloScoreJson
+  scoring_type: LegacyMatchScoringType;
+  start_time: string;
+  team_type: LegacyMatchTeamType;
+}
+
+export type LegacyMatchScoringType =
+  | 'accuracy'
+  | 'combo'
+  | 'score'
+  | 'scorev2';
+
+export type LegacyMatchTeamType =
+  | 'head-to-head'
+  | 'tag-coop'
+  | 'tag-team-vs'
+  | 'team-vs';

resources/js/interfaces/legacy-match-json.ts

@@ -0,0 +1,9 @@
+// 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.
+
+export default interface LegacyMatchJson {
+  end_time?: string;
+  id: number;
+  name: string;
+  start_time: string;
+}

resources/js/interfaces/score-json.ts

@@ -21,7 +21,7 @@ interface ScoreCurrentUserAttributesJson {
 interface Match {
   pass: boolean;
   slot: number;
-  team: number;
+  team: 'blue' | 'none' | 'red';
 }
 
 interface PpWeight {
@@ -59,7 +59,7 @@ interface ScoreJsonDefaultAttributes {
   replay: boolean;
   score: number;
   statistics: Record<ScoreStatisticsAttribute, number>;
-  type: 'solo_score' | `score_best_${Ruleset}` | `score_${Ruleset}`;
+  type: 'legacy_match_score' | 'solo_score' | `score_best_${Ruleset}` | `score_${Ruleset}`;
   user_id: number;
 }
 

resources/js/mp-history/content.coffee

@@ -7,7 +7,7 @@ import { button, div, h3 } from 'react-dom-factories'
 import { classWithModifiers } from 'utils/css'
 import { bottomPageDistance } from 'utils/html'
 import { trans } from 'utils/lang'
-import { Event } from './event'
+import Event from './event'
 import { Game } from './game'
 
 el = React.createElement

resources/js/mp-history/event.coffee

@@ -0,0 +1,59 @@
+// 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 StringWithComponent from 'components/string-with-component';
+import TimeWithTooltip from 'components/time-with-tooltip';
+import UserLink from 'components/user-link';
+import LegacyMatchEventJson from 'interfaces/legacy-match-event-json';
+import UserJson from 'interfaces/user-json';
+import * as React from 'react';
+import { classWithModifiers } from 'utils/css';
+import { trans } from 'utils/lang';
+
+interface Props {
+  event: LegacyMatchEventJson;
+  users: Partial<Record<number, UserJson>>;
+}
+
+const icons = {
+  'host-changed': ['fas fa-exchange-alt'],
+  'match-created': ['fas fa-plus'],
+  'match-disbanded': ['fas fa-times'],
+  'player-joined': ['fas fa-arrow-right', 'far fa-circle'],
+  'player-kicked': ['fas fa-arrow-left', 'fas fa-ban'],
+  'player-left': ['fas fa-arrow-left', 'far fa-circle'],
+};
+
+export default function Event(props: Props) {
+  const user = props.event.user_id != null ? props.users[props.event.user_id] : undefined;
+
+  const eventType = props.event.detail.type;
+  if (eventType === 'other') {
+    return null;
+  }
+
+  return (
+    <div className='mp-history-event'>
+      <div className='mp-history-event__time'>
+        <TimeWithTooltip dateTime={props.event.timestamp} format='LTS' />
+      </div>
+      <div className={classWithModifiers('mp-history-event__type', [eventType])}>
+        {icons[eventType].map((m) => <i key={m} className={m} />)}
+      </div>
+      <div className='mp-history-event__text'>
+        {
+          user == null
+            ? trans(`matches.match.events.${eventType}-no-user`)
+            : <StringWithComponent
+              mappings={{
+                user: (<UserLink
+                  className='mp-history-event__username'
+                  user={user}
+                />),
+              }}
+              pattern={trans(`matches.match.events.${eventType}`)} />
+        }
+      </div>
+    </div>
+  );
+}