[feature] Allow to revoke game events

Author: g3force

internal/app/controller/engine.go

@@ -395,6 +395,12 @@ func (e *Engine) processModify(m *EventModifyValue) error {
 		}
 	} else if m.GameEventBehavior != nil {
 		e.State.GameEventBehavior[m.GameEventBehavior.GameEventType] = m.GameEventBehavior.GameEventBehavior
+	} else if m.RemoveGameEvent != nil {
+		i := *m.RemoveGameEvent
+		if i >= len(e.State.GameEvents) {
+			return errors.Errorf("Game event id %d is too large.", i)
+		}
+		e.State.GameEvents = append(e.State.GameEvents[:i], e.State.GameEvents[i+1:]...)
 	} else if err := e.processTeamModify(m); err != nil {
 		return err
 	}

internal/app/controller/events.go

@@ -122,6 +122,7 @@ type EventModifyValue struct {
 	AutoContinue          *bool                         `json:"autoContinue,omitempty" yaml:"autoContinue"`
 	GameEventBehavior     *EventModifyGameEventBehavior `json:"gameEventBehavior,omitempty" yaml:"gameEventBehavior"`
 	BotSubstitutionIntend *bool                         `json:"botSubstitutionIntend,omitempty" yaml:"botSubstitutionIntend"`
+	RemoveGameEvent       *int                          `json:"removeGameEvent,omitempty" yaml:"removeGameEvent"`
 }
 
 func (m EventModifyValue) String() string {

src/App.vue

@@ -8,6 +8,7 @@
             <div class="team-container">
                 <TeamOverview class="team-views" team-color="Yellow"/>
                 <ControlTeam class="team-views" team-color="Yellow"/>
+                <CurrentEvents class="team-views"/>
             </div>
             <div class="main-middle-container">
                 <Events/>
@@ -26,7 +27,7 @@
             <div class="team-container">
                 <TeamOverview class="team-views" team-color="Blue"/>
                 <ControlTeam class="team-views" team-color="Blue"/>
-                <EventProposals class="team-views event-proposals"/>
+                <EventProposals class="team-views"/>
             </div>
         </div>
         <ControlMatch id="match-controls"/>
@@ -41,10 +42,12 @@
     import ControlMatch from "./components/control/ControlMatch";
     import Events from "./components/events/Events";
     import EventProposals from "./components/events/EventProposals";
+    import CurrentEvents from "./components/events/CurrentEvents";
 
     export default {
         name: 'app',
         components: {
+            CurrentEvents,
             EventProposals,
             Events,
             ControlMatch,

src/components/events/CurrentEvents.vue

@@ -0,0 +1,92 @@
+<template>
+    <div>
+        <h2>Current Game Events</h2>
+        <div class="content">
+            <span v-if="!gameEventsPresent">None</span>
+            <div class="game-event-item"
+                 v-if="gameEventsPresent"
+                 v-for="(gameEvent, index) in gameEvents"
+                 :key="index">
+                <span :class="{'team-blue': byTeam(gameEvent) === 2, 'team-yellow': byTeam(gameEvent) === 1}">
+                    {{gameEvent.type}}
+                </span>
+                <p>
+                <span v-for="detail in detailsList(gameEvent)"
+                      :key="detail.key">{{detail.key}}: {{detail.value}}<br/></span>
+                </p>
+                <div class="btn-revoke"
+                     v-b-tooltip.hover.righttop="'Revoke this game event'">
+                    <a @click="revoke(index)">
+                        <font-awesome-icon icon="times-circle" class="fa-lg"></font-awesome-icon>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "CurrentEvents",
+        computed: {
+            state() {
+                return this.$store.state.refBoxState
+            },
+            gameEvents() {
+                return this.state.gameEvents;
+            },
+            gameEventsPresent() {
+                return this.gameEvents != null && this.gameEvents.length > 0;
+            }
+        },
+        methods: {
+            details(gameEvent) {
+                let key = Object.keys(gameEvent.details)[0];
+                return gameEvent.details[key];
+            },
+            detailsList(gameEvent) {
+                let list = [];
+                let details = this.details(gameEvent);
+                let i = 0;
+                Object.keys(details).forEach(function (key) {
+                    if (key !== 'by_team') {
+                        list[i++] = {key: key, value: details[key]};
+                    }
+                });
+                return list;
+            },
+            byTeam(gameEvent) {
+                let details = this.details(gameEvent);
+                if (details.hasOwnProperty('by_team')) {
+                    return details.by_team;
+                }
+                return '';
+            },
+            revoke(index) {
+                this.$socket.sendObj({
+                    "modify": {"removeGameEvent": index}
+                });
+            },
+        }
+    }
+</script>
+
+<style scoped>
+    .content {
+        text-align: left;
+        overflow-y: auto;
+        max-height: 15em;
+    }
+
+    .game-event-item {
+        position: relative;
+        min-height: 2em;
+    }
+
+    .btn-revoke {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        margin: 0.3em;
+    }
+</style>

src/main.js

@@ -15,6 +15,7 @@ import {
     faCaretSquareDown,
     faCaretSquareUp,
     faCheckCircle,
+    faTimesCircle,
     faEdit,
     faSignal,
     faToggleOff,
@@ -40,6 +41,7 @@ library.add(faToggleOn);
 library.add(faToggleOff);
 library.add(faSignal);
 library.add(faCheckCircle);
+library.add(faTimesCircle);
 library.add(faShieldAlt);
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 

src/store.js

@@ -23,7 +23,7 @@ export class RefBoxState {
     stage = 'unknown';
     command = '';
     commandForTeam = '';
-    gameEvents = [{type: '', details: {}}];
+    gameEvents = [];
     stageTimeElapsed = 0;
     stageTimeLeft = 0;
     matchDuration = 0;