add version info, show on options page

client/.gitignore

@@ -66,3 +66,5 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+version.json

client/package.json

@@ -9,7 +9,8 @@
     "start": "ng serve -o --port 3699",
     "setup": "ts-node scripts/setup",
     "build": "ng build --configuration production",
-    "build:netlify": "npm run build",
+    "build:netlify": "npm run build && npm run generate:version",
+    "generate:version": "ts-node scripts/version",
     "watch": "ng build --watch --configuration development",
     "lint": "ng lint"
   },
@@ -71,6 +72,7 @@
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jsdoc": "30.7.6",
     "eslint-plugin-prefer-arrow": "1.2.2",
+    "fs-extra": "^11.1.1",
     "ts-node": "^8.3.0",
     "typescript": "~5.0.2"
   }

client/scripts/version.ts

@@ -0,0 +1,15 @@
+const fs = require('fs-extra');
+const { gitDescribeSync } = require('git-describe');
+
+let gitRev = 'UNCOMMITTED';
+try {
+  gitRev = gitDescribeSync({
+    dirtyMark: false,
+    dirtySemver: false,
+  });
+} catch (e) {
+  console.error('No git HEAD; default gitRev set.');
+}
+
+fs.writeJson(`${__dirname}/../src/assets/version.json`, gitRev);
+console.log('Wrote version information', gitRev);

client/src/app/app.module.ts

@@ -53,6 +53,7 @@ export function getAuthToken() {
     JwtModule.forRoot({
       config: {
         tokenGetter: getAuthToken,
+        allowedDomains: ['localhost:3000', 'api.ateoat.com', 'ateoat.com'],
       },
     }),
     ServiceWorkerModule.register('ngsw-worker.js', {

client/src/app/pages/options/options.page.html

@@ -8,6 +8,31 @@
   </ion-header>
 
   <ion-grid *ngIf="{ options: options$ | async } as data">
+    <ion-row>
+      <ion-col>
+        <ion-card>
+          <ion-card-content>
+            <ion-row>
+              <ion-col>
+                <strong>Client Version:</strong>
+                {{ version }}
+              </ion-col>
+
+              <ion-col>
+                <strong>Content Version:</strong>
+                {{ contentVersion }}
+              </ion-col>
+
+              <ion-col>
+                <strong>Assets Version:</strong>
+                {{ artVersion }}
+              </ion-col>
+            </ion-row>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+
     <ion-row>
       <ion-col>
         <ion-card>

client/src/app/pages/options/options.page.ts

@@ -15,9 +15,56 @@ export class OptionsPage implements OnInit {
     Record<GameOption, number | string>
   >;
 
+  private versionInfo: any = {
+    tag: '',
+    semverString: '',
+    raw: 'v.local',
+    hash: 'v.local',
+    distance: -1,
+  };
+
+  public get version(): string {
+    if (this.versionInfo.distance >= 0 && this.versionInfo.tag) {
+      return `${this.versionInfo.tag} (${this.versionInfo.raw})`;
+    }
+
+    return (
+      this.versionInfo.tag ||
+      this.versionInfo.semverString ||
+      this.versionInfo.raw ||
+      this.versionInfo.hash
+    );
+  }
+
+  public get contentVersion(): string {
+    return (
+      (localStorage.getItem('contentVersion') || '').substring(0, 8) ||
+      'unknown'
+    );
+  }
+
+  public get artVersion(): string {
+    return (
+      (localStorage.getItem('artVersion') || '').substring(0, 8) || 'unknown'
+    );
+  }
+
   constructor(private store: Store) {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.loadVersionInfo();
+  }
+
+  async loadVersionInfo() {
+    try {
+      const response = await fetch('/assets/version.json');
+      const json = await response.json();
+
+      this.versionInfo = json;
+    } catch {
+      console.error('Could not load version information');
+    }
+  }
 
   setOption(option: string, event: any) {
     this.store.dispatch(

client/src/app/services/asset.service.ts

@@ -31,6 +31,8 @@ export class AssetService {
     const manifest = await fetch(`${environment.assetsUrl}/manifest.json`);
     const manifestData = await manifest.json();
 
+    localStorage.setItem('artVersion', manifestData.meta.hash);
+
     this.maxPortraits = manifestData.assets.individualLQ.filter((x: any) =>
       x.name.startsWith('portraits-'),
     ).length;

client/src/app/services/rollbar.service.ts

@@ -24,7 +24,6 @@ export class RollbarService {
       captureUncaught: true,
       captureUnhandledRejections: true,
       hostBlockList: ['netlify.app'],
-      hostSafelist: ['ateoat.com'],
       payload: {
         environment: environment.rollbar.environment,
       },