Change background when team is allowed to substitute robots

proto/ssl_gc_rcon_remotecontrol.proto

@@ -91,6 +91,9 @@ message RemoteControlTeamState {
 
     // list of due times for each active yellow card (in seconds)
     repeated float yellow_cards_due = 8;
+
+    // if true, team is allowed to substitute robots
+    optional bool can_substitute_robot = 11;
 }
 
 // All possible request types that the remote control can make

src/App.vue

@@ -1,14 +1,31 @@
 <script setup lang="ts">
 import ErrorMessageBar from './components/ErrorMessageBar.vue';
 import StatusBar from './components/StatusBar.vue';
+import {ApiController} from './services/ApiController';
+import {computed, inject, ref} from 'vue';
+
+const canSubstituteRobot = ref(false)
+const api = inject<ApiController>('api')
+const backgroundColor = computed(() => {
+  if (canSubstituteRobot.value) {
+    return 'rgb(249,159,50)'
+  }
+  return 'rgba(56, 58, 58, 0.68)'
+})
+
+api?.RegisterStateConsumer((s) => {
+  canSubstituteRobot.value = s.canSubstituteRobot || false
+})
 </script>
 
 <template>
-  <StatusBar/>
-  <div class="router-view">
-    <router-view/>
+  <div id="main" :style="{'background-color': backgroundColor}">
+    <StatusBar/>
+    <div class="router-view">
+      <router-view/>
+    </div>
+    <ErrorMessageBar/>
   </div>
-  <ErrorMessageBar/>
 </template>
 
 <style>
@@ -21,10 +38,13 @@ import StatusBar from './components/StatusBar.vue';
   font-size: 4vmin;
   height: 100%;
   width: 100%;
-  padding: 0.5vh 0.5vw;
-  box-sizing: border-box;
-  background-color: rgba(56,58,58,0.68);
+}
 
+#main {
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.5vh 0.5vw;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
@@ -37,7 +57,7 @@ import StatusBar from './components/StatusBar.vue';
   flex-grow: 1;
 }
 
-.button{
+.button {
   display: inline-block;
   margin: 0;
   cursor: pointer;
@@ -49,31 +69,31 @@ import StatusBar from './components/StatusBar.vue';
   color: #555;
 
   background-color: #ddd;
-  background-image: linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
+  background-image: linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
 
   transition: background-color .2s ease-out;
   background-clip: padding-box; /* Fix bleeding */
   border-radius: 1em;
   box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
-  text-shadow: 0 1px 0 rgba(255,255,255, .9);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
 
   user-select: none;
 }
 
-.button:hover{
+.button:hover {
   background-color: #eee;
   color: #555;
 }
 
-.button:active{
+.button:active {
   background: #e9e9e9;
   position: relative;
   top: 1px;
   text-shadow: none;
   box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
 }
 
-.button[disabled], .button[disabled]:hover, .button[disabled]:active{
+.button[disabled], .button[disabled]:hover, .button[disabled]:active {
   border-color: #eaeaea;
   background: #fafafa;
   cursor: default;
@@ -85,69 +105,66 @@ import StatusBar from './components/StatusBar.vue';
 
 .button.green, .button.red, .button.blue {
   color: #fff;
-  text-shadow: 0 1px 0 rgba(0,0,0,.2);
+  text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
 
-  background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
+  background-image: linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
 }
 
-/* */
 
-.button.green{
+.button.green {
   background-color: #57a957;
   border-color: #57a957;
 }
 
-.button.green:hover{
+.button.green:hover {
   background-color: #62c462;
 }
 
-.button.green:active{
+.button.green:active {
   background: #57a957;
 }
 
-/* */
 
-.button.red{
+.button.red {
   background-color: #ca3535;
   border-color: #c43c35;
 }
 
-.button.red:hover{
+.button.red:hover {
   background-color: #ee5f5b;
 }
 
-.button.red:active{
+.button.red:active {
   background: #c43c35;
 }
 
-/* */
 
-.button.blue{
+.button.blue {
   background-color: #269CE9;
   border-color: #269CE9;
 }
 
-.button.blue:hover{
+.button.blue:hover {
   background-color: #70B9E8;
 }
 
-.button.blue:active{
+.button.blue:active {
   background: #269CE9;
 }
 
-.green[disabled], .green[disabled]:hover, .green[disabled]:active{
+.green[disabled], .green[disabled]:hover, .green[disabled]:active {
   border-color: #57A957;
   background: #57A957;
   color: #D2FFD2;
 }
 
-.red[disabled], .red[disabled]:hover, .red[disabled]:active{
+.red[disabled], .red[disabled]:hover, .red[disabled]:active {
   border-color: #C43C35;
   background: #C43C35;
   color: #FFD3D3;
 }
 
-.blue[disabled], .blue[disabled]:hover, .blue[disabled]:active{
+.blue[disabled], .blue[disabled]:hover, .blue[disabled]:active {
   border-color: #269CE9;
   background: #269CE9;
   color: #93D5FF;

src/proto/ssl_gc_common.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);
     }
@@ -135,10 +131,7 @@ export const RobotId = {
   },
 
   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 {
@@ -156,41 +149,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;