Skip to content

Commit 275aa6a

Browse files
g3forceg3force
committed
[ui] Improve formatting and description of team data overview
1 parent feb5fbf commit 275aa6a

13 files changed

+158
-93
lines changed

‎ui/src/components/GameState.vue

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,27 @@
11
<template>
22
<div class="game-state">
3-
{{state.stage}} |
4-
<span v-format-ns-duration="state.gameTimeElapsed"></span> |
5-
<span v-format-ns-duration="state.gameTimeLeft"></span> |
6-
<span v-format-ns-duration="state.matchDuration"></span> |
7-
{{state.gameState}} <span v-if="state.gameStateForTeam != null">for {{state.gameStateForTeam}}</span>
3+
<span v-b-tooltip.hover title="The current stage of the game">
4+
{{state.stage}}
5+
</span>
6+
|
7+
<span v-format-ns-duration="state.gameTimeElapsed"
8+
v-b-tooltip.hover
9+
title="Total time elapsed in the current stage">
10+
</span>
11+
|
12+
<span v-format-ns-duration="state.gameTimeLeft"
13+
v-b-tooltip.hover
14+
title="Total time left for this stage">
15+
</span>
16+
|
17+
<span v-format-ns-duration="state.matchDuration"
18+
v-b-tooltip.hover
19+
title="Total real time elapsed since the match has been started">
20+
</span>
21+
|
22+
<span v-b-tooltip.hover title="Current game state">
23+
{{state.gameState}} <span v-if="state.gameStateForTeam != null">for {{state.gameStateForTeam}}</span>
24+
</span>
825
</div>
926
</template>
1027

‎ui/src/components/common/EditableLabelDuration.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="editable-label">
2+
<span class="editable-label">
33
<span v-show="g.edit === false"
44
@dblclick="edit"
55
ref="span-id"
@@ -11,7 +11,7 @@
1111
@keyup.enter="updateValue"
1212
size="5"
1313
/>
14-
</div>
14+
</span>
1515
</template>
1616

1717
<script>

‎ui/src/components/common/EditableLabelNumber.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="editable-label">
2+
<span class="editable-label">
33
<label v-show="g.edit === false"
44
for="edit-input"
55
@dblclick="edit">
@@ -18,7 +18,7 @@
1818
:title="title"
1919
:min="min"
2020
:max="max"/>
21-
</div>
21+
</span>
2222
</template>
2323

2424
<script>

‎ui/src/components/common/EditableLabelSelect.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div>
2+
<span>
33
<label v-show="edit === false"
44
@dblclick="switchToEdit">
55
{{label}} {{value}}
@@ -12,7 +12,7 @@
1212
v-model="editValue"
1313
:options="options"
1414
class="mb-3"></b-form-select>
15-
</div>
15+
</span>
1616
</template>
1717

1818
<script>

‎ui/src/components/common/EditableLabelText.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div>
2+
<span>
33
<label v-show="g.edit === false"
44
for="edit-input"
55
@dblclick="edit">
@@ -15,7 +15,7 @@
1515
@keyup.enter="updateValue"
1616
id="edit-input"
1717
size="10"/>
18-
</div>
18+
</span>
1919
</template>
2020

2121
<script>

‎ui/src/components/team/TeamGoalie.vue

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
<template>
2-
<div class="team-goalie">
3-
<EditableLabelNumber
4-
label="Goalie: "
5-
title="The goalie number"
6-
:value="goalie"
7-
:callback="updateGoalie"
8-
:min="0"
9-
:max="15"/>
10-
</div>
2+
<EditableLabelNumber
3+
label="Goalie: "
4+
title="The goalie number"
5+
:value="goalie"
6+
:callback="updateGoalie"
7+
:min="0"
8+
:max="15"/>
119
</template>
1210

1311
<script>

‎ui/src/components/team/TeamHalf.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
2-
<div>
3-
<span v-show="teamState.onPositiveHalf">On positive half</span>
4-
<span v-show="!teamState.onPositiveHalf">On negative half</span>
5-
</div>
2+
<span>
3+
<label v-show="teamState.onPositiveHalf">On positive half</label>
4+
<label v-show="!teamState.onPositiveHalf">On negative half</label>
5+
</span>
66
</template>
77

88
<script>

‎ui/src/components/team/TeamName.vue

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
<template>
2-
<div>
32
<EditableLabelSelect
43
label="Name: "
54
:value="team.name"
65
:options="teams"
76
:callback="updateTeamName"
87
/>
9-
</div>
10-
118
</template>
129

1310
<script>

‎ui/src/components/team/TeamOverview.vue

Lines changed: 43 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,61 @@
11
<template>
22
<div class="team-overview">
3-
<h2> Team {{teamColor}}</h2>
4-
<TeamName
5-
:team-color="teamColor"/>
6-
<TeamScore
7-
:team-color="teamColor"
8-
:score="team.goals"
9-
/>
10-
<TeamGoalie
11-
:team-color="teamColor"
12-
:goalie="team.goalie"
13-
/>
14-
<TeamTimeouts
15-
:team-color="teamColor"
16-
:timeouts-left="team.timeoutsLeft"
17-
:timeout-time-left="team.timeoutTimeLeft"
18-
/>
19-
<TeamCards
20-
:team-color="teamColor"
21-
:yellow-cards="team.yellowCards"
22-
:red-cards="team.redCards"
23-
:yellow-card-times="team.yellowCardTimes"
24-
/>
25-
<TeamHalf
26-
:team-color="teamColor"
27-
/>
3+
<h2 v-b-tooltip.hover title="Edit team data by double-clicking a value"> Team {{teamColor}}</h2>
4+
<div>
5+
<TeamName
6+
:team-color="teamColor"/>
7+
</div>
8+
<div>
9+
<TeamScore
10+
:team-color="teamColor"
11+
:score="team.goals"/>
12+
</div>
13+
<div>
14+
<TeamGoalie
15+
:team-color="teamColor"
16+
:goalie="team.goalie"/>
17+
</div>
18+
<div>
19+
<TeamHalf
20+
:team-color="teamColor"/>
21+
</div>
22+
<div>
23+
<TeamTimeouts
24+
:team-color="teamColor"
25+
:timeouts-left="team.timeoutsLeft"
26+
:timeout-time-left="team.timeoutTimeLeft"/>
27+
</div>
28+
<div>
29+
<TeamRedCards
30+
:team-color="teamColor"
31+
:red-cards="team.redCards"/>
32+
</div>
33+
<div>
34+
<TeamYellowCards
35+
:team-color="teamColor"
36+
:yellow-cards="team.yellowCards"
37+
:yellow-card-times="team.yellowCardTimes"/>
38+
</div>
2839
</div>
2940
</template>
3041

3142
<script>
3243
import TeamScore from "./TeamScore";
3344
import TeamTimeouts from "./TeamTimeouts";
3445
import TeamGoalie from "./TeamGoalie";
35-
import TeamCards from "./TeamCards";
3646
import EditableLabelText from "../common/EditableLabelText";
3747
import TeamHalf from "./TeamHalf";
3848
import TeamName from "./TeamName";
49+
import TeamYellowCards from "./TeamYellowCards";
50+
import TeamRedCards from "./TeamRedCards";
3951
4052
export default {
4153
name: "TeamOverview",
42-
components: {TeamName, TeamHalf, EditableLabelText, TeamGoalie, TeamTimeouts, TeamScore, TeamCards},
54+
components: {
55+
TeamRedCards,
56+
TeamYellowCards,
57+
TeamName, TeamHalf, EditableLabelText, TeamGoalie, TeamTimeouts, TeamScore
58+
},
4359
props: {
4460
teamColor: String
4561
},

‎ui/src/components/team/TeamRedCards.vue

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<EditableLabelNumber
3+
label="Red cards: "
4+
:value="redCards"
5+
:callback="updateRedCards"
6+
:min="0"
7+
:max="99"/>
8+
</template>
9+
10+
<script>
11+
import EditableLabelNumber from "../common/EditableLabelNumber";
12+
import EditableLabelDuration from "../common/EditableLabelDuration";
13+
14+
export default {
15+
name: "TeamRedCards",
16+
components: {EditableLabelDuration, EditableLabelNumber},
17+
props: {
18+
teamColor: String,
19+
redCards: Number
20+
},
21+
methods: {
22+
updateRedCards: function (v) {
23+
this.$socket.sendObj({
24+
'modify': {
25+
'forTeam': this.teamColor,
26+
'redCards': Number(v)
27+
}
28+
})
29+
},
30+
},
31+
}
32+
</script>
33+
34+
<style scoped>
35+
</style>

0 commit comments

Comments
 (0)