[feature] Add bot interchange intend to UI

Author: g3force

internal/app/controller/engine.go

@@ -454,6 +454,8 @@ func (e *Engine) processTeamModify(m *EventModifyValue) error {
 		}
 	} else if m.CanPlaceBall != nil {
 		teamState.CanPlaceBall = *m.CanPlaceBall
+	} else if m.BotInterchangeIntend != nil {
+		teamState.BotInterchangeIntend = *m.BotInterchangeIntend
 	} else {
 		return errors.Errorf("Unknown modify: %v", m)
 	}

internal/app/controller/events.go

@@ -114,6 +114,7 @@ type EventModifyValue struct {
 	Division              *Division                     `json:"division,omitempty"`
 	AutoContinue          *bool                         `json:"autoContinue,omitempty"`
 	GameEventBehavior     *EventModifyGameEventBehavior `json:"gameEventBehavior,omitempty"`
+	BotInterchangeIntend  *bool                         `json:"botInterchangeIntend,omitempty"`
 }
 
 func (m EventModifyValue) String() string {

internal/app/controller/state.go

@@ -245,6 +245,7 @@ type TeamInfo struct {
 	CanPlaceBall          bool            `json:"canPlaceBall"`
 	MaxAllowedBots        int             `json:"maxAllowedBots"`
 	Connected             bool            `json:"connected"`
+	BotInterchangeIntend  bool            `json:"botInterchangeIntend"`
 }
 
 type GameEventBehavior string

src/components/team/TeamBotInterchange.vue

@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <label>Intends to interchange a bot: </label>
+        <a class="btn-edit" v-on:click="edit()">
+            <font-awesome-icon icon="toggle-on" v-if="botInterchangeIntend"/>
+            <font-awesome-icon icon="toggle-off" v-if="!botInterchangeIntend"/>
+        </a>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "TeamBotInterchange",
+        props: {
+            teamColor: String
+        },
+        methods: {
+            edit: function () {
+                this.$socket.sendObj({
+                    'modify': {
+                        'forTeam': this.teamColor,
+                        'botInterchangeIntend': !this.botInterchangeIntend
+                    }
+                })
+            }
+        },
+        computed: {
+            teamState: function () {
+                return this.$store.state.refBoxState.teamState[this.teamColor]
+            },
+            botInterchangeIntend() {
+                return this.teamState.botInterchangeIntend;
+            },
+        }
+    }
+</script>
+
+<style scoped>
+    .btn-edit {
+        margin-left: 0.3em;
+        margin-right: 0.3em;
+    }
+</style>

src/components/team/TeamOverview.vue

@@ -53,6 +53,10 @@
                 <TeamBallPlacement
                         :team-color="teamColor"/>
             </div>
+            <div>
+                <TeamBotInterchange
+                        :team-color="teamColor"/>
+            </div>
             <div>
                 Max <b>{{maxAllowedBots}}</b> bots allowed on the field
             </div>
@@ -71,10 +75,12 @@
     import TeamRedCards from "./TeamRedCards";
     import TeamCounters from "./TeamCounters";
     import TeamBallPlacement from "./TeamBallPlacement";
+    import TeamBotInterchange from "./TeamBotInterchange";
 
     export default {
         name: "TeamOverview",
         components: {
+            TeamBotInterchange,
             TeamBallPlacement,
             TeamCounters,
             TeamRedCards,