feat: mark servers as in/compatible in server-list

Code/client/Services/Generic/OverlayService.cpp

@@ -106,7 +106,7 @@ void OverlayService::Reset() const noexcept
 void OverlayService::Initialize() noexcept
 {
     m_pOverlay->ExecuteAsync("init");
-    SetVersion(BUILD_BRANCH "@" BUILD_COMMIT);
+    SetVersion(BUILD_COMMIT);
 }
 
 void OverlayService::SetActive(bool aActive) noexcept

Code/skyrim_ui/src/app/components/error/error.component.html

@@ -1,5 +1,5 @@
 <app-popup class="app-error" *ngIf="error">
-  <p>{{error}}</p>
+  <p innerHTML={{error}}>{{error}}</p>
   <app-popup-buttons>
     <button (click)="removeError()" data-style-ornament="simple">Ok</button>
   </app-popup-buttons>

Code/skyrim_ui/src/app/components/server-list/server-list.component.html

@@ -20,7 +20,7 @@
               <th>Server Name<app-order [isIncreasingOrder]="isIncreasingNameOrder" (sorted)="sortName($event)"></app-order></th>
               <th>Players<app-order [isIncreasingOrder]="isIncreasingPlayerOrder" (sorted)="sortPlayers($event)"></app-order></th>
               <th>Country<app-order [isIncreasingOrder]="isIncreasingCountryOrder" (sorted)="sortCountry($event)"></app-order></th>
-              <th>Version</th>
+              <th>Version ({{ getClientVersion() }})</th>
               <th>Favorite<app-order [isIncreasingOrder]="isIncreasingFavoriteOrder" (sorted)="sortFavorite($event)"></app-order></th> <!-- Pls not automatic fav on top, make it sortable like other titles, thanks! -->
               <th></th>
             </tr>
@@ -30,7 +30,7 @@
               <td>{{ server.name }}</td>
               <td>{{ server.player_count }}</td>
               <td>{{ server.country }}</td>
-              <td>{{ server.version }}</td>
+              <td [ngClass]="isCompatibleToClient(server) ? 'server-compatible' : 'server-incompatible'">{{ server.version }}</td>
               <td (click)="toggleServerFavorite(server)" class="app-server-list-notfavorite"><fa-icon [icon]="getFavoriteIcon(server)"></fa-icon></td>
               <td><button (click)="connect(server)" class="joinbutton">Join</button></td>
             </tr>

Code/skyrim_ui/src/app/components/server-list/server-list.component.scss

@@ -38,10 +38,17 @@ app-server-list {
     }
 
     .offline {
-      // PokPok you need to change that !
       background-color: #FF9494
     }
 
+    .server-compatible {
+      color: green;
+    }
+
+    .server-incompatible {
+      color: red;
+    }
+
     #noserv {
       margin-top: 3%;
     }

Code/skyrim_ui/src/app/components/server-list/server-list.component.ts

@@ -230,6 +230,15 @@ export class ServerListComponent implements OnInit, OnDestroy {
     return server.isFavorite ? fasStar : farStar;
   }
 
+  public getClientVersion() {
+    return this.clientService.versionSet.getValue();
+  }
+
+  public isCompatibleToClient(server: Server) {
+    const clientVersion = this.getClientVersion();
+    return server.version === clientVersion;
+  }
+
   private close() {
     if (this.errorService.error$.value) {
       this.errorService.removeError();

Code/skyrim_ui/src/app/services/client.service.ts

@@ -7,6 +7,7 @@ import { Debug } from '../models/debug';
 import { UserService } from './user.service';
 import { Player } from '../models/player';
 import { take } from 'rxjs/operators';
+import { ErrorService } from './error.service';
 
 /** Message. */
 export interface Message {
@@ -44,7 +45,7 @@ export class ClientService implements OnDestroy {
   public nameChange = new BehaviorSubject(environment.game ? '' : 'test');
 
   /** Client version setting. */
-  public versionSet = new BehaviorSubject(environment.game ? '' : 'browser-preview');
+  public versionSet = new BehaviorSubject(environment.game ? '' : 'v1.23.0-12-g58e3');
 
   /** Debug state change. */
   public debugStateChange = new Subject<boolean>();
@@ -72,6 +73,9 @@ export class ClientService implements OnDestroy {
 
   public protocolMismatchChange = new BehaviorSubject(false);
 
+  /** Receive error from core */
+  public triggerError = new BehaviorSubject('');
+
   private _host: string;
 
   private _port: number;
@@ -85,7 +89,7 @@ export class ClientService implements OnDestroy {
    *
    * @param zone Angular Zone.
    */
-  public constructor(private zone: NgZone, private userService: UserService) {
+  public constructor(private zone: NgZone, private userService: UserService, private errorService: ErrorService) {
     if (environment.game) {
       skyrimtogether.on('init', this.onInit.bind(this));
       skyrimtogether.on('activate', this.onActivate.bind(this));
@@ -110,6 +114,7 @@ export class ClientService implements OnDestroy {
       skyrimtogether.on('setplayer3Dloaded', this.onSetPlayer3DLoaded.bind(this));
       skyrimtogether.on('serverid', this.onServerId.bind(this));
       skyrimtogether.on('protocolmismatch', this.onProtocolMismatch.bind(this));
+      skyrimtogether.on('triggererror', this.onTriggerError.bind(this));
     }
   }
 
@@ -141,6 +146,7 @@ export class ClientService implements OnDestroy {
       skyrimtogether.off('setplayer3Dloaded');
       skyrimtogether.off('serverid');
       skyrimtogether.off('protocolmismatch');
+      skyrimtogether.off('triggererror');
     }
   }
 
@@ -433,4 +439,11 @@ export class ClientService implements OnDestroy {
       this.protocolMismatchChange.next(true);
     })
   }
+
+  private onTriggerError(error: string) {
+    this.zone.run(() => {
+      this.triggerError.next(error);
+      this.errorService.error(error);
+    })
+  }
 }

Code/skyrim_ui/src/typings.d.ts

@@ -71,6 +71,8 @@ declare namespace SkyrimTogetherTypes {
   type SetServerIdCallback = (serverId: number) => void;
 
   type ProtocolMismatch = () => void;
+
+  type TriggerError = () => void;
 }
 
 /** Global Skyrim: Together object. */
@@ -143,6 +145,8 @@ interface SkyrimTogether {
 
   on(event: 'protocolmismatch', callback: SkyrimTogetherTypes.ProtocolMismatch): void;
 
+  on(event: 'triggererror', callback: SkyrimTogetherTypes.TriggerError): void;
+
   /** Remove listener from when the application is first initialized. */
   off(event: 'init', callback?: SkyrimTogetherTypes.InitCallback): void;
 
@@ -205,6 +209,8 @@ interface SkyrimTogether {
 
   off(event: 'protocolmismatch', callback?: SkyrimTogetherTypes.ProtocolMismatch): void;
 
+  off(event: 'triggererror', callback?: SkyrimTogetherTypes.TriggerError): void;
+
   /**
    * Connect to server at given address and port.
    *