[feature] Add a table for game events and a control ui to send them

g3force · g3force · commit a3870be5ee35 · 2018-08-16T20:47:47.000+02:00
diff --git a/internal/app/controller/apiServer.go b/internal/app/controller/apiServer.go
@@ -16,6 +16,11 @@ type EventConsumer interface {
 	OnNewEvent(event Event)
 }
 
+type MessageWrapper struct {
+	State      *State          `json:"state"`
+	GameEvents *[]RefereeEvent `json:"gameEvents"`
+}
+
 // WsHandler handles incoming web socket connections
 func (a *ApiServer) WsHandler(w http.ResponseWriter, r *http.Request) {
 	u := websocket.Upgrader{
@@ -38,8 +43,8 @@ func (a *ApiServer) WsHandler(w http.ResponseWriter, r *http.Request) {
 	a.listenForNewEvents(conn)
 }
 
-func (a *ApiServer) PublishState(state State) {
-	b, err := json.Marshal(state)
+func (a *ApiServer) PublishWrapper(wrapper MessageWrapper) {
+	b, err := json.Marshal(wrapper)
 	if err != nil {
 		log.Println("Marshal error:", err)
 	}
@@ -52,6 +57,16 @@ func (a *ApiServer) PublishState(state State) {
 	}
 }
 
+func (a *ApiServer) PublishState(state State) {
+	wrapper := MessageWrapper{State: &state}
+	a.PublishWrapper(wrapper)
+}
+
+func (a *ApiServer) PublishGameEvents(gameEvents []RefereeEvent) {
+	wrapper := MessageWrapper{GameEvents: &gameEvents}
+	a.PublishWrapper(wrapper)
+}
+
 func (a *ApiServer) disconnect(conn *websocket.Conn) {
 	conn.Close()
 	for i, c := range a.connections {
diff --git a/internal/app/controller/controller.go b/internal/app/controller/controller.go
@@ -67,6 +67,9 @@ func (r *GameController) OnNewEvent(event Event) {
 		log.Println("Could not process event:", event, err)
 	} else {
 		r.publish(cmd)
+		if cmd != nil {
+			r.publishGameEvents()
+		}
 	}
 }
 
@@ -131,6 +134,11 @@ func (r *GameController) publish(command *EventCommand) {
 	r.Publisher.Publish(r.Engine.State, command)
 }
 
+// publishGameEvents publishes the current list of game events
+func (r *GameController) publishGameEvents() {
+	r.ApiServer.PublishGameEvents(r.Engine.GameEvents)
+}
+
 // saveLatestState writes the current state into a file
 func (r *GameController) saveLatestState() {
 	jsonState, err := json.MarshalIndent(r.Engine.State, "", "  ")
diff --git a/internal/app/controller/engine.go b/internal/app/controller/engine.go
@@ -14,6 +14,7 @@ type Engine struct {
 	config       ConfigGame
 	StateHistory []State
 	TimeProvider func() time.Time
+	GameEvents   []RefereeEvent
 }
 
 func NewEngine(config ConfigGame) (e Engine) {
@@ -55,9 +56,33 @@ func (e *Engine) Process(event Event) (*EventCommand, error) {
 	if err == nil {
 		e.StateHistory = append(e.StateHistory, *e.State)
 	}
+	if cmd != nil {
+		e.LogCommand(cmd)
+	}
 	return cmd, err
 }
 
+func (e *Engine) LogGameEvent(eventType GameEventType) {
+	gameEvent := RefereeEvent{
+		Timestamp:     e.TimeProvider(),
+		StageTime:     e.State.StageTimeElapsed,
+		Type:          RefereeEventGameEvent,
+		GameEventType: &eventType,
+	}
+	e.GameEvents = append(e.GameEvents, gameEvent)
+}
+
+func (e *Engine) LogCommand(command *EventCommand) {
+	gameEvent := RefereeEvent{
+		Timestamp: e.TimeProvider(),
+		StageTime: e.State.StageTimeElapsed,
+		Type:      RefereeEventCommand,
+		Command:   &command.Type,
+		Team:      command.ForTeam,
+	}
+	e.GameEvents = append(e.GameEvents, gameEvent)
+}
+
 func (e *Engine) loadStages() {
 	e.StageTimes = map[Stage]time.Duration{}
 	for _, stage := range Stages {
diff --git a/internal/app/controller/gameEvents.go b/internal/app/controller/gameEvents.go
@@ -0,0 +1,22 @@
+package controller
+
+import "time"
+
+type GameEventType string
+
+type RefereeEventType string
+
+const (
+	RefereeEventCommand   RefereeEventType = "command"
+	RefereeEventGameEvent RefereeEventType = "gameEvent"
+)
+
+type RefereeEvent struct {
+	Timestamp     time.Time        `json:"timestamp"`
+	StageTime     time.Duration    `json:"stageTime"`
+	Type          RefereeEventType `json:"type"`
+	GameEventType *GameEventType   `json:"gameEventType"`
+	Command       *RefCommand      `json:"command"`
+	Team          *Team            `json:"team"`
+	Description   *string          `json:"description"`
+}
diff --git a/src/App.vue b/src/App.vue
@@ -9,18 +9,20 @@
                 <h2>Yellow Team</h2>
                 <TeamOverview class="team-views" team-color="Yellow"/>
                 <ControlTeam class="team-views" team-color="Yellow"/>
+                <ControlTeamEvent class="team-views" team-color="Yellow"/>
             </div>
-            <div id="field">
+            <div class="main-middle-container">
+                <GameEvents/>
                 <iframe src="http://localhost:8082/" frameborder="none"></iframe>
             </div>
             <div class="team-container">
                 <h2>Blue Team</h2>
                 <TeamOverview class="team-views" team-color="Blue"/>
                 <ControlTeam class="team-views" team-color="Blue"/>
+                <ControlTeamEvent class="team-views" team-color="Blue"/>
             </div>
         </div>
         <ControlMatch id="match-controls"/>
-        <Debug id="debug"/>
     </div>
 </template>
 
@@ -29,14 +31,16 @@
     import TeamOverview from "./components/team/TeamOverview";
     import ControlGeneral from "./components/control/ControlGeneral";
     import ControlTeam from "./components/control/ControlTeam";
-    import Debug from "./components/Debug";
     import ControlMatch from "./components/control/ControlMatch";
+    import ControlTeamEvent from "./components/control/ControlTeamEvent";
+    import GameEvents from "./components/GameEvents";
 
     export default {
         name: 'app',
         components: {
+            GameEvents,
+            ControlTeamEvent,
             ControlMatch,
-            Debug,
             ControlTeam,
             ControlGeneral,
             TeamOverview,
@@ -86,11 +90,17 @@
         flex-grow: 1;
     }
 
-    #field {
+    .main-middle-container {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-content: stretch;
         flex-grow: 1;
     }
 
-    #field iframe {
+    .main-middle-container iframe {
+        flex-grow: 1;
         width: 100%;
         height: 100%;
     }
diff --git a/src/components/Debug.vue b/src/components/Debug.vue
diff --git a/src/components/GameEvents.vue b/src/components/GameEvents.vue
@@ -0,0 +1,82 @@
+<template>
+    <div>
+        <b-table striped hover small
+                 responsive="true"
+                 :sort-by.sync="sortBy"
+                 :sort-desc.sync="sortDesc"
+                 :per-page="perPage"
+                 :current-page="currentPage"
+                 :items="gameEvents"
+                 :fields="fields">
+            <template slot="timestamp" slot-scope="data">
+                {{formatTimestamp(data.item.timestamp)}}
+            </template>
+            <template slot="stageTime" slot-scope="data">
+                <span v-format-ns-duration="data.item.stageTime"></span>
+            </template>
+        </b-table>
+        <b-pagination size="sm"
+                      align="center"
+                      :total-rows="gameEvents.length"
+                      v-model="currentPage"
+                      :per-page="perPage">
+        </b-pagination>
+    </div>
+</template>
+
+<script>
+    import "../date.format";
+
+    export default {
+        name: "GameEvents",
+        data() {
+            return {
+                sortBy: 'timestamp',
+                sortDesc: true,
+                currentPage: 1,
+                perPage: 5,
+                fields: [
+                    {
+                        key: 'timestamp',
+                        sortable: true
+                    },
+                    {
+                        key: 'stageTime',
+                        sortable: false
+                    },
+                    {
+                        key: 'type',
+                        sortable: true
+                    },
+                    {
+                        key: 'command',
+                        sortable: false
+                    },
+                    {
+                        key: 'team',
+                        sortable: false
+                    },
+                    {
+                        key: 'description',
+                        sortable: false
+                    },
+                ],
+            }
+        },
+        computed: {
+            gameEvents() {
+                return this.$store.state.gameEvents;
+            }
+        },
+        methods: {
+            formatTimestamp(timestamp) {
+                let date = new Date(timestamp);
+                return date.format("HH:MM:ss,l");
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/control/ControlTeamEvent.vue b/src/components/control/ControlTeamEvent.vue
@@ -0,0 +1,65 @@
+<template>
+    <div class="container">
+        <span v-b-tooltip.hover
+              v-for="event in events"
+              :key="event.key"
+              :title="event.title">
+            <b-button v-on:click="send('stop')"
+                      v-bind:disabled="false">
+                {{event.name}}
+            </b-button>
+        </span>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "ControlTeamEvent",
+        props: {
+            teamColor: String,
+            events: {
+                type: Array,
+                default: function () {
+                    return [
+                        {key: 'BALL_LEFT_FIELD', name: 'BALL_LEFT_FIELD', title: ''},
+                        {key: 'GOAL', name: 'GOAL', title: ''},
+                        {key: 'KICK_TIMEOUT', name: 'KICK_TIMEOUT', title: ''},
+                        {key: 'NO_PROGRESS_IN_GAME', name: 'NO_PROGRESS_IN_GAME', title: ''},
+                        {key: 'BOT_COLLISION', name: 'BOT_COLLISION', title: ''},
+                        {key: 'MULTIPLE_DEFENDER', name: 'MULTIPLE_DEFENDER', title: ''},
+                        {key: 'MULTIPLE_DEFENDER_PARTIALLY', name: 'MULTIPLE_DEFENDER_PARTIALLY', title: ''},
+                        {key: 'ATTACKER_IN_DEFENSE_AREA', name: 'ATTACKER_IN_DEFENSE_AREA', title: ''},
+                        {key: 'ICING', name: 'ICING', title: ''},
+                        {key: 'BALL_SPEED', name: 'BALL_SPEED', title: ''},
+                        {key: 'ROBOT_STOP_SPEED', name: 'ROBOT_STOP_SPEED', title: ''},
+                        {key: 'BALL_DRIBBLING', name: 'BALL_DRIBBLING', title: ''},
+                        {key: 'ATTACKER_TOUCH_KEEPER', name: 'ATTACKER_TOUCH_KEEPER', title: ''},
+                        {key: 'DOUBLE_TOUCH', name: 'DOUBLE_TOUCH', title: ''},
+                        {key: 'ATTACKER_TO_DEFENCE_AREA', name: 'ATTACKER_TO_DEFENCE_AREA', title: ''},
+                        {key: 'DEFENDER_TO_KICK_POINT_DISTANCE', name: 'DEFENDER_TO_KICK_POINT_DISTANCE', title: ''},
+                        {key: 'BALL_HOLDING', name: 'BALL_HOLDING', title: ''},
+                        {key: 'INDIRECT_GOAL', name: 'INDIRECT_GOAL', title: ''},
+                        {key: 'BALL_PLACEMENT_FAILED', name: 'BALL_PLACEMENT_FAILED', title: ''},
+                        {key: 'CHIP_ON_GOAL', name: 'CHIP_ON_GOAL', title: ''},
+                    ]
+                }
+            }
+        },
+        methods: {
+            send: function (command) {
+                this.$socket.sendObj({'command': {'commandType': command}})
+            }
+        },
+    }
+</script>
+
+<style scoped>
+    button {
+        margin: 0.1em;
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+    }
+</style>
diff --git a/src/date.format.js b/src/date.format.js
diff --git a/src/store.js b/src/store.js

Original file line number	Diff line number	Diff line change
`@@ -67,6 +67,9 @@ func (r *GameController) OnNewEvent(event Event) {`
`67`	`67`	`log.Println("Could not process event:", event, err)`
`68`	`68`	`} else {`
`69`	`69`	`r.publish(cmd)`
	`70`	`+ if cmd != nil {`
	`71`	`+ r.publishGameEvents()`
	`72`	`+ }`
`70`	`73`	`}`
`71`	`74`	`}`
`72`	`75`
`@@ -131,6 +134,11 @@ func (r GameController) publish(command EventCommand) {`
`131`	`134`	`r.Publisher.Publish(r.Engine.State, command)`
`132`	`135`	`}`
`133`	`136`
	`137`	`+// publishGameEvents publishes the current list of game events`
	`138`	`+func (r *GameController) publishGameEvents() {`
	`139`	`+ r.ApiServer.PublishGameEvents(r.Engine.GameEvents)`
	`140`	`+}`
	`141`	`+`
`134`	`142`	`// saveLatestState writes the current state into a file`
`135`	`143`	`func (r *GameController) saveLatestState() {`
`136`	`144`	`jsonState, err := json.MarshalIndent(r.Engine.State, "", " ")`