Feature/Bugfix: Show game event details in UI

Author: g3force

internal/app/engine/process_proposals.go

@@ -30,7 +30,7 @@ func (e *Engine) processProposals() {
 	majority := int(math.Floor(float64(numAutoRefs) / 2.0))
 
 	if numProposals > majority {
-		log.Printf("Majority (%v > %v) reached for %v.", numProposals, majority, firstGameEvent.Type)
+		log.Printf("Majority of %v reached with %v out of %v for %v.", majority, numProposals, numAutoRefs, firstGameEvent.Type)
 		e.Enqueue(&statemachine.Change{
 			Change: &statemachine.Change_AcceptGameEventProposals{
 				AcceptGameEventProposals: &statemachine.AcceptGameEventProposals{

internal/app/statemachine/change_acceptproposal.go

@@ -33,7 +33,7 @@ func (s *StateMachine) processChangeAcceptGameEventProposals(newState *state.Sta
 
 func (s *StateMachine) createMergedGameEvent(events []*state.GameEventProposal) *state.GameEvent {
 	event := new(state.GameEvent)
-	proto.Merge(event, events[0])
+	proto.Merge(event, events[0].GameEvent)
 	event.Origin = []string{}
 	byTeam := map[state.Team]int{}
 	for _, e := range events {

src/components/game-events/CurrentEvents.vue

@@ -4,17 +4,15 @@
         <div class="game-event-item"
              v-if="gameEventsPresent"
              v-for="(gameEvent, index) in gameEvents"
+             @click="eventSelected(index)"
              :key="index">
             <span :class="{'team-blue': byTeam(gameEvent) === 'BLUE', 'team-yellow': byTeam(gameEvent) === 'YELLOW'}">
                 {{gameEvent.type}}
             </span>
             <p class="details-row"
+               v-if="selectedEvent === index"
                v-for="detail in detailsList(gameEvent)"
                :key="detail.key">{{detail.key}}: {{detail.value}}</p>
-            <p class="details-row"
-               v-if="gameEvent.origins && gameEvent.origins.length > 0">
-                Submitted by: {{gameEvent.origins}}
-            </p>
             <div class="btn-accept"
                  v-if="showAcceptGoal(gameEvent)"
                  v-b-tooltip.hover.d500.righttop="'Accept this goal'">
@@ -28,9 +26,15 @@
 
 <script>
     import {submitGameEvent} from "../../submit";
+    import {gameEventByTeam, gameEventDetailsList} from "../../gameEvents";
 
     export default {
         name: "CurrentEvents",
+        data() {
+            return {
+                selectedEvent: -1,
+            }
+        },
         computed: {
             gameEvents() {
                 return this.$store.state.matchState.gameEvents;
@@ -48,34 +52,21 @@
             }
         },
         methods: {
+            eventSelected(index) {
+                if (this.selectedEvent === index) {
+                    this.selectedEvent = -1;
+                } else {
+                    this.selectedEvent = index;
+                }
+            },
             showAcceptGoal(gameEvent) {
                 return !this.goalEventPresent && gameEvent.type === 'POSSIBLE_GOAL';
             },
-            details(gameEvent) {
-                Object.keys(gameEvent).forEach(function (wrapperKey) {
-                    if (wrapperKey !== 'type' && wrapperKey !== 'origin') {
-                        return gameEvent[wrapperKey];
-                    }
-                });
-                return {};
-            },
             detailsList(gameEvent) {
-                let list = [];
-                let i = 0;
-                let eventDetails = this.details(gameEvent);
-                Object.keys(eventDetails).forEach(function (key) {
-                    if (key !== 'byTeam') {
-                        list[i++] = {key: key, value: eventDetails[key]};
-                    }
-                });
-                return list;
+                return gameEventDetailsList(gameEvent);
             },
             byTeam(gameEvent) {
-                let eventDetails = this.details(gameEvent);
-                if (eventDetails.hasOwnProperty('byTeam')) {
-                    return eventDetails.byTeam;
-                }
-                return '';
+                return gameEventByTeam(gameEvent);
             },
             acceptGoal(gameEvent) {
                 submitGameEvent({

src/components/game-events/EventProposals.vue

@@ -3,14 +3,14 @@
         <div class="proposal-item"
              v-if="eventProposalsPresent"
              v-for="(proposal, index) in eventProposals"
+             @click="eventSelected(index)"
              :key="index">
-            <span :class="{'team-blue': byTeam(proposal) === 2, 'team-yellow': byTeam(proposal) === 1}">
+            <span :class="{'team-blue': byTeam(proposal.gameEvent) === 'BLUE', 'team-yellow': byTeam(proposal.gameEvent) === 'YELLOW'}">
                 {{proposal.gameEvent.type}}
             </span>
-            <span>by {{proposal.proposerId}}</span>
-            (<span v-format-ns-duration="proposalTimeout(proposal.validUntil)"></span>):
             <p class="details-row"
-               v-for="detail in detailsList(proposal)"
+               v-if="selectedEvent === index"
+               v-for="detail in detailsList(proposal.gameEvent)"
                :key="detail.key">{{detail.key}}: {{detail.value}}</p>
             <a class="btn-accept"
                v-b-tooltip.hover.d500
@@ -23,56 +23,41 @@
 </template>
 
 <script>
+    import {gameEventByTeam, gameEventDetailsList} from "../../gameEvents";
+
     export default {
         name: "EventProposals",
+        data() {
+            return {
+                selectedEvent: -1,
+            }
+        },
         computed: {
             eventProposals() {
-                return this.$store.state.matchState.proposedGameEvents;
+                return this.$store.state.matchState.gameEventProposals;
             },
             eventProposalsPresent() {
                 return this.eventProposals != null && this.eventProposals.length > 0;
             }
         },
         methods: {
-            details(gameEvent) {
-                Object.keys(gameEvent).forEach(function (wrapperKey) {
-                    if (wrapperKey !== 'type' && wrapperKey !== 'origin') {
-                        return gameEvent[wrapperKey];
-                    }
-                });
-                return {};
+            eventSelected(index) {
+                if (this.selectedEvent === index) {
+                    this.selectedEvent = -1;
+                } else {
+                    this.selectedEvent = index;
+                }
             },
             detailsList(gameEvent) {
-                let list = [];
-                let i = 0;
-                let eventDetails = this.details(gameEvent);
-                Object.keys(eventDetails).forEach(function (key) {
-                    if (key !== 'byTeam') {
-                        list[i++] = {key: key, value: eventDetails[key]};
-                    }
-                });
-                return list;
+                return gameEventDetailsList(gameEvent);
             },
             byTeam(gameEvent) {
-                let eventDetails = this.details(gameEvent);
-                if (eventDetails.hasOwnProperty('byTeam')) {
-                    return eventDetails.byTeam;
-                }
-                return '';
-            },
-            proposalTimeout(v) {
-                let validUntil = new Date(v);
-                let now = Date.now();
-                let remaining = validUntil - now;
-                if (remaining < 0) {
-                    return 0;
-                }
-                return remaining * 1e6;
+                return gameEventByTeam(gameEvent);
             },
             accept(gameEvent) {
-                this.$socket.sendObj({
-                    gameEvent: gameEvent
-                });
+                // TODO
+                // submitChange();
+                console.log('TODO: submit ' + gameEvent);
             },
         }
     }

src/components/protocol/ProtocolTable.vue

@@ -49,6 +49,7 @@
 <script>
     import "../../date.format";
     import {submitChange} from "../../submit";
+    import {gameEventDetails} from "../../gameEvents";
 
     export default {
         name: "EventTable",
@@ -94,14 +95,6 @@
                 }
                 return '';
             },
-            gameEventDetails(event) {
-                for (let key of Object.keys(event)) {
-                    if (key !== 'origin' && key !== 'type') {
-                        return event[key];
-                    }
-                }
-                return {};
-            },
             entryDetails(entry) {
                 let type = this.protocolType(entry);
                 return JSON.stringify(entry.change[type], null, 2);
@@ -118,11 +111,11 @@
                     case 'yellowCardOver':
                         return entry.change.yellowCardOver.forTeam;
                     case 'addGameEvent':
-                        return this.gameEventDetails(entry.change.addGameEvent.gameEvent).byTeam;
+                        return gameEventDetails(entry.change.addGameEvent.gameEvent).byTeam;
                     case 'addPassiveGameEvent':
-                        return this.gameEventDetails(entry.change.addPassiveGameEvent.gameEvent).byTeam;
+                        return gameEventDetails(entry.change.addPassiveGameEvent.gameEvent).byTeam;
                     case 'addProposedGameEvent':
-                        return this.gameEventDetails(entry.change.addProposedGameEvent.gameEvent).byTeam;
+                        return gameEventDetails(entry.change.addProposedGameEvent.proposal.gameEvent).byTeam;
                     case 'updateTeamState':
                         return entry.change.updateTeamState.forTeam;
                     case 'newGameState':
@@ -191,7 +184,7 @@
                     case 'addPassiveGameEvent':
                         return 'New passive game event: ' + entry.change.addPassiveGameEvent.gameEvent.type;
                     case 'addProposedGameEvent':
-                        return 'New proposed game event: ' + entry.change.addProposedGameEvent.gameEvent.type;
+                        return 'New proposed game event: ' + entry.change.addProposedGameEvent.proposal.type;
                     case 'startBallPlacement':
                         return 'Start ball placement';
                     case 'continue':

src/gameEvents.js

@@ -0,0 +1,28 @@
+export const gameEventDetails = function(event) {
+    for (let key of Object.keys(event)) {
+        if (key !== 'origin' && key !== 'type') {
+            return event[key];
+        }
+    }
+    return {};
+};
+
+export const gameEventByTeam = function(gameEvent) {
+    let eventDetails = gameEventDetails(gameEvent);
+    if (eventDetails.hasOwnProperty('byTeam')) {
+        return eventDetails.byTeam;
+    }
+    return '';
+};
+
+export const gameEventDetailsList = function(gameEvent) {
+    let list = [{key: 'Origins', value: gameEvent.origin}];
+    let i = 1;
+    let eventDetails = gameEventDetails(gameEvent);
+    Object.keys(eventDetails).forEach(function (key) {
+        if (key !== 'byTeam') {
+            list[i++] = {key: key, value: eventDetails[key]};
+        }
+    });
+    return list;
+};