Make online status indicator blue/yellow depending on connected team

Author: g3force

frontend/package-lock.json

@@ -1,17 +1,30 @@
 <script setup lang="ts">
 import {ApiController} from '../services/ApiController';
-import {inject, ref} from 'vue';
+import {computed, inject, ref} from 'vue';
+import {Team} from "../proto/ssl_gc_common";
 
 const defaultYellowCardsDue: number[] = []
 const online = ref(false)
+const team = ref(Team.UNKNOWN)
 const maxRobots = ref(0)
 const numRobots = ref(0)
 const yellowCardsDue = ref(defaultYellowCardsDue)
 const api = inject<ApiController>('api')
 let onlineTimer: NodeJS.Timeout
+const onlineStateColor = computed(() => {
+  if (!online.value) {
+    return '#ff0000'
+  } else if (team.value === Team.BLUE) {
+    return '#4f84f1'
+  } else if (team.value === Team.YELLOW) {
+    return '#f7f422'
+  }
+  return '#42b983'
+})
 
 api?.RegisterStateConsumer((s) => {
   online.value = true
+  team.value = s.team || Team.UNKNOWN
   maxRobots.value = s.maxRobots
   numRobots.value = s.robotsOnField
   yellowCardsDue.value = s.yellowCardsDue.sort((a: number, b: number) => a - b)
@@ -27,7 +40,7 @@ online.value = false
 </script>
 
 <template>
-  <div class="online-state" :class="{online: online, offline: !online}"/>
+  <div class="online-state" :style="{'background-color': onlineStateColor}"/>
 
   <div class="left-bar">
     <div class="left-bar-element">
@@ -64,12 +77,4 @@ online.value = false
   right: 0.5em;
   top: 0.5em;
 }
-
-.online-state.online {
-  background-color: #42b983;
-}
-
-.online-state.offline {
-  background-color: red;
-}
 </style>

frontend/src/components/StatusBar.vue

@@ -3,10 +3,12 @@ import App from './App.vue'
 import router from './router';
 import {ApiController} from './services/ApiController';
 import {RemoteControlRequestType, RemoteControlTeamState} from './proto/ssl_gc_rcon_remotecontrol';
+import {Team} from "./proto/ssl_gc_common";
 
 let latestState: RemoteControlTeamState
 if (import.meta.env.PROD) {
     latestState = {
+        team: Team.UNKNOWN,
         availableRequests: [],
         activeRequests: [],
         yellowCardsDue: [],
@@ -21,6 +23,7 @@ if (import.meta.env.PROD) {
     }
 } else {
     latestState = {
+        team: Team.BLUE,
         availableRequests: [
             RemoteControlRequestType.CHANGE_KEEPER_ID,
             RemoteControlRequestType.CHALLENGE_FLAG,

frontend/src/main.ts

@@ -1,6 +1,5 @@
 /* eslint-disable */
-import Long from "long";
-import * as _m0 from "protobufjs/minimal";
+import _m0 from "protobufjs/minimal";
 
 export const protobufPackage = "";
 
@@ -100,10 +99,7 @@ function createBaseRobotId(): RobotId {
 }
 
 export const RobotId = {
-  encode(
-    message: RobotId,
-    writer: _m0.Writer = _m0.Writer.create()
-  ): _m0.Writer {
+  encode(message: RobotId, writer: _m0.Writer = _m0.Writer.create()): _m0.Writer {
     if (message.id !== 0) {
       writer.uint32(8).uint32(message.id);
     }
@@ -114,31 +110,37 @@ export const RobotId = {
   },
 
   decode(input: _m0.Reader | Uint8Array, length?: number): RobotId {
-    const reader = input instanceof _m0.Reader ? input : new _m0.Reader(input);
+    const reader = input instanceof _m0.Reader ? input : _m0.Reader.create(input);
     let end = length === undefined ? reader.len : reader.pos + length;
     const message = createBaseRobotId();
     while (reader.pos < end) {
       const tag = reader.uint32();
       switch (tag >>> 3) {
         case 1:
+          if (tag != 8) {
+            break;
+          }
+
           message.id = reader.uint32();
-          break;
+          continue;
         case 2:
+          if (tag != 16) {
+            break;
+          }
+
           message.team = reader.int32() as any;
-          break;
-        default:
-          reader.skipType(tag & 7);
-          break;
+          continue;
       }
+      if ((tag & 7) == 4 || tag == 0) {
+        break;
+      }
+      reader.skipType(tag & 7);
     }
     return message;
   },
 
   fromJSON(object: any): RobotId {
-    return {
-      id: isSet(object.id) ? Number(object.id) : 0,
-      team: isSet(object.team) ? teamFromJSON(object.team) : 0,
-    };
+    return { id: isSet(object.id) ? Number(object.id) : 0, team: isSet(object.team) ? teamFromJSON(object.team) : 0 };
   },
 
   toJSON(message: RobotId): unknown {
@@ -148,6 +150,10 @@ export const RobotId = {
     return obj;
   },
 
+  create<I extends Exact<DeepPartial<RobotId>, I>>(base?: I): RobotId {
+    return RobotId.fromPartial(base ?? {});
+  },
+
   fromPartial<I extends Exact<DeepPartial<RobotId>, I>>(object: I): RobotId {
     const message = createBaseRobotId();
     message.id = object.id ?? 0;
@@ -156,41 +162,17 @@ export const RobotId = {
   },
 };
 
-type Builtin =
-  | Date
-  | Function
-  | Uint8Array
-  | string
-  | number
-  | boolean
-  | undefined;
-
-export type DeepPartial<T> = T extends Builtin
-  ? T
-  : T extends Array<infer U>
-  ? Array<DeepPartial<U>>
-  : T extends ReadonlyArray<infer U>
-  ? ReadonlyArray<DeepPartial<U>>
-  : T extends { $case: string }
-  ? { [K in keyof Omit<T, "$case">]?: DeepPartial<T[K]> } & {
-      $case: T["$case"];
-    }
-  : T extends {}
-  ? { [K in keyof T]?: DeepPartial<T[K]> }
+type Builtin = Date | Function | Uint8Array | string | number | boolean | undefined;
+
+export type DeepPartial<T> = T extends Builtin ? T
+  : T extends Array<infer U> ? Array<DeepPartial<U>> : T extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>>
+  : T extends { $case: string } ? { [K in keyof Omit<T, "$case">]?: DeepPartial<T[K]> } & { $case: T["$case"] }
+  : T extends {} ? { [K in keyof T]?: DeepPartial<T[K]> }
   : Partial<T>;
 
 type KeysOfUnion<T> = T extends T ? keyof T : never;
-export type Exact<P, I extends P> = P extends Builtin
-  ? P
-  : P & { [K in keyof P]: Exact<P[K], I[K]> } & Record<
-        Exclude<keyof I, KeysOfUnion<P>>,
-        never
-      >;
-
-if (_m0.util.Long !== Long) {
-  _m0.util.Long = Long as any;
-  _m0.configure();
-}
+export type Exact<P, I extends P> = P extends Builtin ? P
+  : P & { [K in keyof P]: Exact<P[K], I[K]> } & { [K in Exclude<keyof I, KeysOfUnion<P>>]: never };
 
 function isSet(value: any): boolean {
   return value !== null && value !== undefined;