[feature] Add online state for teams and autoRefs to UI

Author: g3force

internal/app/controller/controller.go

@@ -184,12 +184,32 @@ func (c *GameController) publishApi() {
 	defer c.historyPreserver.Close()
 	for {
 		c.timer.WaitTillNextFullSecond()
+		c.updateOnlineStates()
 		c.Engine.Tick(c.timer.Delta())
 		c.historyPreserver.Save(c.Engine.History)
 		c.publish()
 	}
 }
 
+func (c *GameController) updateOnlineStates() {
+	for _, team := range []Team{TeamYellow, TeamBlue} {
+		c.Engine.State.TeamState[team].Connected = c.teamConnected(team)
+	}
+	var autoRefs []string
+	for _, autoRef := range c.AutoRefServer.Clients {
+		autoRefs = append(autoRefs, autoRef.Id)
+	}
+	c.Engine.State.AutoRefsConnected = autoRefs
+}
+
+func (c *GameController) teamConnected(team Team) bool {
+	teamName := c.Engine.State.TeamState[team].Name
+	if _, ok := c.TeamServer.Clients[teamName]; ok {
+		return true
+	}
+	return false
+}
+
 func (c *GameController) publishNetwork() {
 	for {
 		c.timer.WaitTillNextFull(100 * time.Millisecond)

internal/app/controller/state.go

@@ -244,24 +244,26 @@ type TeamInfo struct {
 	BallPlacementFailures int             `json:"ballPlacementFailures"`
 	CanPlaceBall          bool            `json:"canPlaceBall"`
 	MaxAllowedBots        int             `json:"maxAllowedBots"`
+	Connected             bool            `json:"connected"`
 }
 
 // State of the game
 type State struct {
-	Stage            Stage              `json:"stage"`
-	Command          RefCommand         `json:"command"`
-	CommandFor       Team               `json:"commandForTeam"`
-	GameEvents       []*GameEvent       `json:"gameEvents"`
-	StageTimeElapsed time.Duration      `json:"stageTimeElapsed"`
-	StageTimeLeft    time.Duration      `json:"stageTimeLeft"`
-	MatchTimeStart   time.Time          `json:"matchTimeStart"`
-	MatchDuration    time.Duration      `json:"matchDuration"`
-	TeamState        map[Team]*TeamInfo `json:"teamState"`
-	Division         Division           `json:"division"`
-	PlacementPos     *Location          `json:"placementPos"`
-	AutoContinue     bool               `json:"autoContinue"`
-	NextCommand      RefCommand         `json:"nextCommand"`
-	NextCommandFor   Team               `json:"nextCommandFor"`
+	Stage             Stage              `json:"stage"`
+	Command           RefCommand         `json:"command"`
+	CommandFor        Team               `json:"commandForTeam"`
+	GameEvents        []*GameEvent       `json:"gameEvents"`
+	StageTimeElapsed  time.Duration      `json:"stageTimeElapsed"`
+	StageTimeLeft     time.Duration      `json:"stageTimeLeft"`
+	MatchTimeStart    time.Time          `json:"matchTimeStart"`
+	MatchDuration     time.Duration      `json:"matchDuration"`
+	TeamState         map[Team]*TeamInfo `json:"teamState"`
+	Division          Division           `json:"division"`
+	PlacementPos      *Location          `json:"placementPos"`
+	AutoContinue      bool               `json:"autoContinue"`
+	NextCommand       RefCommand         `json:"nextCommand"`
+	NextCommandFor    Team               `json:"nextCommandFor"`
+	AutoRefsConnected []string           `json:"autoRefsConnected"`
 }
 
 // NewState creates a new state, initialized for the start of a new game

src/App.vue

@@ -6,7 +6,6 @@
         </div>
         <div id="main-elements">
             <div class="team-container">
-                <h2>Yellow Team</h2>
                 <TeamOverview class="team-views" team-color="Yellow"/>
                 <ControlTeam class="team-views" team-color="Yellow"/>
             </div>
@@ -25,7 +24,6 @@
                 </div>
             </div>
             <div class="team-container">
-                <h2>Blue Team</h2>
                 <TeamOverview class="team-views" team-color="Blue"/>
                 <ControlTeam class="team-views" team-color="Blue"/>
             </div>

src/components/events/Events.vue

@@ -2,6 +2,8 @@
     <div>
         <EventTable :current-page="currentPage" :per-page="perPage" :events="events"/>
         <div class="event-controls-container">
+            <span class="auto-refs-connected" v-b-tooltip.hover :title="autoRefs"><b>{{autoRefsConnected}}</b> autoRefs connected. </span>
+
             <b-pagination size="sm"
                           :total-rows="events.length"
                           v-model="currentPage"
@@ -40,7 +42,25 @@
             },
             state() {
                 return this.$store.state.refBoxState
-            }
+            },
+            autoRefsConnected() {
+                if (this.state.autoRefsConnected != null) {
+                    return this.state.autoRefsConnected.length;
+                }
+                return 0;
+            },
+            autoRefs() {
+                if (this.autoRefsConnected) {
+                    let autoRefs = 'Connected AutoRefs: ';
+                    for (let i = 0; i < this.state.autoRefsConnected.length; i++) {
+                        autoRefs += this.state.autoRefsConnected[i];
+                        if (i !== (this.state.autoRefsConnected.length - 1)) {
+                            autoRefs += ', '
+                        }
+                    }
+                    return autoRefs;
+                }
+            },
         },
     }
 </script>
@@ -56,4 +76,9 @@
         margin-bottom: 1rem;
         margin-left: 1rem;
     }
+
+    .auto-refs-connected {
+        margin-top: 0.2rem;
+        margin-right: 1rem;
+    }
 </style>

src/components/team/TeamOverview.vue

@@ -1,5 +1,14 @@
 <template>
     <div>
+        <h2>{{teamColor}} Team
+            <span v-b-tooltip.hover
+                  title="Team connected"
+                  v-if="team.connected">
+                <font-awesome-icon
+                        class="fa-xs"
+                        icon="signal"/>
+            </span>
+        </h2>
         <div class="content">
             <div>
                 <TeamName

src/main.js

@@ -11,7 +11,14 @@ import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 // Use fontawesome to load some icons
 import {library} from '@fortawesome/fontawesome-svg-core'
-import {faCaretSquareDown, faCaretSquareUp, faEdit, faToggleOff, faToggleOn} from '@fortawesome/free-solid-svg-icons'
+import {
+    faCaretSquareDown,
+    faCaretSquareUp,
+    faEdit,
+    faSignal,
+    faToggleOff,
+    faToggleOn
+} from '@fortawesome/free-solid-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
 // Connect to the backend with a single websocket that communicates with JSON format and is attached to the store
 import VueNativeSock from 'vue-native-websocket'
@@ -27,6 +34,7 @@ library.add(faCaretSquareDown);
 library.add(faCaretSquareUp);
 library.add(faToggleOn);
 library.add(faToggleOff);
+library.add(faSignal);
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 
 let wsAddress;

src/store.js

@@ -17,6 +17,7 @@ export class TeamState {
     ballPlacementFailures = 0;
     canPlaceBall = true;
     maxAllowedBots = 0;
+    connected = false;
 }
 
 export class RefBoxState {
@@ -32,6 +33,7 @@ export class RefBoxState {
     autoContinue = true;
     nextCommand = '';
     nextCommandFor = '';
+    autoRefsConnected = [];
 }
 
 export default new Vuex.Store({