feat: Basic NGA trophy display

Author: colin969

extensions/core-nga/rslib.config.ts

@@ -25,6 +25,7 @@ export default defineConfig({
         './NgScore': './src/components/NgScore.tsx',
         './NgViews': './src/components/NgViews.tsx',
         './NgRatingSearchableSelect': './src/components/NgRatingSearchableSelect.tsx',
+        './NgTrophies': './src/components/NgTrophies.tsx',
       },
       shared: {
         react: { singleton: true, requiredVersion: dependencies.react },

extensions/core-nga/src/components/Initializer.tsx

@@ -10,6 +10,7 @@ export default function Initializer() {
       'nga/NgScore',
       'nga/NgFaves',
       'nga/NgCredits',
+      'nga/NgTrophies',
     ];
 
     // Insert below alt titles

extensions/core-nga/src/components/NgTrophies.tsx

@@ -0,0 +1,29 @@
+import { GameComponentProps } from 'flashpoint-launcher-renderer';
+import { ExtData } from './types';
+import { FaTrophy } from 'react-icons/fa';
+
+export default function NgTrophies(props: GameComponentProps) {
+  const extData: ExtData | undefined = props.game.extData?.nga;
+  const trophies = extData?.trophies || [];
+
+  if (trophies.length === 0) {
+    return <></>;
+  }
+
+  return (
+    <div className='ng-trophies'>
+      <p>Trophies:</p>
+      {trophies.map((trophy, index) => (
+        <div key={index} className='ng-trophy'>
+          <div className='ng-trophy__icon'>
+            <FaTrophy/>
+          </div>
+          <div className='ng-trophy__info'>
+            <div className='ng-trophy__name'>{trophy[0]}</div>
+            <div className='ng-trophy__date'>{trophy[1]}</div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

extensions/core-nga/src/components/types.ts

@@ -3,10 +3,13 @@ export type Credit = {
   roles?: string[];
 }
 
+export type Trophy = string[];
+
 export type ExtData = {
   score?: number;
   rating?: string;
   views?: number;
   faves?: number;
   credits?: Credit[];
+  trophies?: Trophy[];
 }

extensions/core-nga/static/nga.css

@@ -42,3 +42,32 @@
 .nga-credit-icon {
   margin: 0.1em 0.3em 0em 0em;
 }
+
+
+.ng-trophies {
+  display: flex;
+  flex-direction: column;
+}
+
+.ng-trophies__header {
+  font-weight: bold;
+}
+
+.ng-trophy {
+  display: flex;
+  flex-direction: row;
+}
+
+.ng-trophy__icon {
+  align-self: center;
+  margin-right: 0.5rem;
+}
+
+.ng-trophy__info {
+  display: flex;
+  flex-direction: column;
+}
+
+.ng-trophy__name {
+  font-weight: bold;
+}