[feature] Show event proposals in UI

Author: g3force

internal/app/controller/state.go

@@ -257,9 +257,9 @@ const (
 
 // GameEventProposal holds a proposal for a game event from an autoRef
 type GameEventProposal struct {
-	ProposerId string
-	GameEvent  GameEvent
-	ValidUntil time.Time
+	ProposerId string    `json:"proposerId"`
+	GameEvent  GameEvent `json:"gameEvent"`
+	ValidUntil time.Time `json:"validUntil"`
 }
 
 // State of the game

src/App.vue

@@ -26,6 +26,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"/>
             </div>
         </div>
         <ControlMatch id="match-controls"/>
@@ -39,10 +40,12 @@
     import ControlTeam from "./components/control/ControlTeam";
     import ControlMatch from "./components/control/ControlMatch";
     import Events from "./components/events/Events";
+    import EventProposals from "./components/events/EventProposals";
 
     export default {
         name: 'app',
         components: {
+            EventProposals,
             Events,
             ControlMatch,
             ControlTeam,
@@ -149,6 +152,7 @@
     .team-container {
         display: flex;
         flex-direction: column;
+        align-items: stretch;
     }
 
     #match-controls {
@@ -168,4 +172,12 @@
         width: 100%;
         height: 100%
     }
+
+    .team-yellow {
+        color: gold;
+    }
+
+    .team-blue {
+        color: blue;
+    }
 </style>

src/components/GameState.vue

@@ -55,11 +55,4 @@
 </script>
 
 <style scoped>
-    .team-yellow {
-        color: gold;
-    }
-
-    .team-blue {
-        color: blue;
-    }
 </style>

src/components/events/EventBehavior.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <table>
-            <tr v-for="eventType in eventTypes">
+            <tr v-for="eventType in eventTypes" :key="eventType">
                 <td align="left">{{eventType}}</td>
                 <td>
                     <div class="btn-group-toggle btn-group">

src/components/events/EventProposals.vue

@@ -0,0 +1,81 @@
+<template>
+    <div>
+        <h2>Proposed Game Events</h2>
+        <div class="content">
+            <span v-if="!eventProposalsPresent">None</span>
+            <div v-if="eventProposalsPresent" v-for="(proposal, index) in eventProposals"
+                 :key="index">
+            <span :class="{'team-blue': byTeam(proposal) === 2, 'team-yellow': byTeam(proposal) === 1}">
+                {{proposal.gameEvent.type}}
+            </span>
+                <span>by {{proposal.proposerId}}</span>
+                (<span v-format-ns-duration="proposalTimeout(proposal.validUntil)"></span>):
+                <p>
+                <span v-for="detail in detailsList(proposal)"
+                      :key="detail.key">{{detail.key}}: {{detail.value}}<br/></span>
+                </p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "EventProposals",
+        computed: {
+            state() {
+                return this.$store.state.refBoxState
+            },
+            eventProposals() {
+                return this.state.gameEventProposals;
+            },
+            eventProposalsPresent() {
+                return this.eventProposals != null && this.eventProposals.length > 0;
+            }
+        },
+        methods: {
+            details(proposal) {
+                let key = Object.keys(proposal.gameEvent.details)[0];
+                return proposal.gameEvent.details[key];
+            },
+            detailsStr(proposal) {
+                let p = this.details(proposal);
+                delete p.by_team;
+                return p;
+            },
+            detailsList(proposal) {
+                let list = [];
+                let details = this.details(proposal);
+                delete details.by_team;
+                Object.keys(details).forEach(function (key, i) {
+                    list[i] = {key: key, value: details[key]}
+                });
+                return list;
+            },
+            byTeam(proposal) {
+                let details = this.details(proposal);
+                if (details.hasOwnProperty('by_team')) {
+                    return details.by_team;
+                }
+                return '';
+            },
+            proposalTimeout(v) {
+                let validUntil = new Date(v);
+                let now = Date.now();
+                let remaining = validUntil - now;
+                if (remaining < 0) {
+                    return 0;
+                }
+                return remaining * 1e6;
+            },
+        }
+    }
+</script>
+
+<style scoped>
+    .content {
+        text-align: left;
+        overflow-y: auto;
+        max-height: 15em;
+    }
+</style>

src/store.js

@@ -35,6 +35,7 @@ export class RefBoxState {
     nextCommandFor = '';
     autoRefsConnected = [];
     gameEventBehavior = {};
+    gameEventProposals = [{proposerId: '', gameEvent: {type: '', details: {foo: 'bar'}}, validUntil: 0}];
 }
 
 export default new Vuex.Store({