Skip to content

Commit 8600f3b

Browse files
g3forceg3force
committed
[feature] Improve visualization of current+proposed game events
1 parent f890ddb commit 8600f3b

File tree

3 files changed

+70
-54
lines changed

3 files changed

+70
-54
lines changed

‎src/components/AutonomousControl.vue

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
<template>
22
<div id="container">
3+
<ManualControl class="view"/>
34
<TeamOverview class="view"/>
4-
<Events/>
5-
<ManualControl/>
6-
<CurrentEvents class="view"/>
7-
<EventProposals class="view"/>
5+
<Events class="view"/>
6+
<div class="view">
7+
<h2>Current Game Events</h2>
8+
<div class="game-events">
9+
<CurrentEvents/>
10+
<hr>
11+
<EventProposals/>
12+
</div>
13+
</div>
814
</div>
915
</template>
1016

@@ -43,6 +49,12 @@
4349
flex-grow: 1;
4450
}
4551
52+
.game-events {
53+
text-align: left;
54+
overflow-y: auto;
55+
max-height: 85vh;
56+
}
57+
4658
.view {
4759
margin: 0.5em;
4860
}

‎src/components/events/CurrentEvents.vue

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,26 @@
11
<template>
2-
<div>
3-
<h2>Current Game Events</h2>
4-
<div class="content">
5-
<span v-if="!gameEventsPresent">None</span>
6-
<div class="game-event-item"
7-
v-if="gameEventsPresent"
8-
v-for="(gameEvent, index) in gameEvents"
9-
:key="index">
10-
<span :class="{'team-blue': byTeam(gameEvent) === 2, 'team-yellow': byTeam(gameEvent) === 1}">
11-
{{gameEvent.type}}
12-
</span>
13-
<p>
14-
<span v-for="detail in detailsList(gameEvent)"
15-
:key="detail.key">{{detail.key}}: {{detail.value}}<br/></span>
16-
</p>
17-
<div class="buttons">
18-
<div class="btn-accept"
19-
v-if="gameEvent.type === 'possibleGoal'"
20-
v-b-tooltip.hover.righttop="'Accept this game event'">
21-
<a @click="acceptGoal(gameEvent)">
22-
<font-awesome-icon icon="check-circle" class="fa-lg"></font-awesome-icon>
23-
</a>
24-
</div>
25-
</div>
2+
<div class="content">
3+
<span v-if="!gameEventsPresent">None</span>
4+
<div class="game-event-item"
5+
v-if="gameEventsPresent"
6+
v-for="(gameEvent, index) in gameEvents"
7+
:key="index">
8+
<span :class="{'team-blue': byTeam(gameEvent) === 2, 'team-yellow': byTeam(gameEvent) === 1}">
9+
{{gameEvent.type}}
10+
</span>
11+
<p class="details-row"
12+
v-for="detail in detailsList(gameEvent)"
13+
:key="detail.key">{{detail.key}}: {{detail.value}}</p>
14+
<p class="details-row"
15+
v-if="gameEvent.origins !== null && gameEvent.origins.length > 0">
16+
Submitted by: {{gameEvent.origins}}
17+
</p>
18+
<div class="btn-accept"
19+
v-if="gameEvent.type === 'possibleGoal'"
20+
v-b-tooltip.hover.righttop="'Accept this goal'">
21+
<a @click="acceptGoal(gameEvent)">
22+
<font-awesome-icon icon="check-circle" class="fa-lg"></font-awesome-icon>
23+
</a>
2624
</div>
2725
</div>
2826
</div>
@@ -36,7 +34,7 @@
3634
return this.$store.state.refBoxState
3735
},
3836
gameEvents() {
39-
return this.state.protocol;
37+
return this.state.gameEvents;
4038
},
4139
gameEventsPresent() {
4240
return this.gameEvents != null && this.gameEvents.length > 0;
@@ -81,12 +79,21 @@
8179
.content {
8280
text-align: left;
8381
overflow-y: auto;
84-
max-height: 15em;
82+
/*max-height: 15em;*/
8583
}
8684
8785
.game-event-item {
8886
position: relative;
8987
min-height: 2em;
88+
border-style: dotted;
89+
border-width: thin;
90+
border-radius: 5px;
91+
padding: 0.2em;
92+
margin: 0.2em;
93+
}
94+
95+
.details-row {
96+
margin-bottom: 0;
9097
}
9198
9299
.buttons {

‎src/components/events/EventProposals.vue

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,24 @@
11
<template>
2-
<div>
3-
<h2>Proposed Game Events</h2>
4-
<div class="content">
5-
<span v-if="!eventProposalsPresent">None</span>
6-
<div class="proposal-item"
7-
v-if="eventProposalsPresent"
8-
v-for="(proposal, index) in eventProposals"
9-
:key="index">
2+
<div class="content">
3+
<div class="proposal-item"
4+
v-if="eventProposalsPresent"
5+
v-for="(proposal, index) in eventProposals"
6+
:key="index">
107
<span :class="{'team-blue': byTeam(proposal) === 2, 'team-yellow': byTeam(proposal) === 1}">
118
{{proposal.gameEvent.type}}
129
</span>
13-
<span>by {{proposal.proposerId}}</span>
14-
(<span v-format-ns-duration="proposalTimeout(proposal.validUntil)"></span>):
15-
<p>
10+
<span>by {{proposal.proposerId}}</span>
11+
(<span v-format-ns-duration="proposalTimeout(proposal.validUntil)"></span>):
12+
<p>
1613
<span v-for="detail in detailsList(proposal)"
1714
:key="detail.key">{{detail.key}}: {{detail.value}}<br/></span>
18-
</p>
19-
<a class="btn-accept"
20-
v-b-tooltip.hover
21-
title="Accept this game event"
22-
@click="accept(proposal.gameEvent)">
23-
<font-awesome-icon icon="check-circle" class="fa-lg"></font-awesome-icon>
24-
</a>
25-
</div>
15+
</p>
16+
<a class="btn-accept"
17+
v-b-tooltip.hover
18+
title="Accept this game event"
19+
@click="accept(proposal.gameEvent)">
20+
<font-awesome-icon icon="check-circle" class="fa-lg"></font-awesome-icon>
21+
</a>
2622
</div>
2723
</div>
2824
</template>
@@ -83,14 +79,15 @@
8379
</script>
8480

8581
<style scoped>
86-
.content {
87-
text-align: left;
88-
overflow-y: auto;
89-
max-height: 15em;
90-
}
9182
9283
.proposal-item {
9384
position: relative;
85+
min-height: 2em;
86+
border-style: dotted;
87+
border-width: thin;
88+
border-radius: 5px;
89+
padding: 0.2em;
90+
margin: 0.2em;
9491
}
9592
9693
.btn-accept {

0 commit comments

Comments
 (0)