Skip to content

Commit bf0c8f8

Browse files
g3forceg3force
committed
Replace tooltips with a help text in the top bar
1 parent c1b2672 commit bf0c8f8

23 files changed

+93
-84
lines changed

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
"bootstrap": "5.1.3",
1515
"bootstrap-vue": "2.21.2",
1616
"jquery": "3.6.0",
17-
"popper.js": "1.16.1",
1817
"protobufjs": "6.11.2",
1918
"v-hotkey": "0.9.0",
2019
"vue": "2.6.14",

‎src/components/GameController.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<div v-if="initialized">
44
<div id="app-header">
55
<MatchSettingsBar class="app-header-item"/>
6+
<HelpText class="app-header-item"/>
67
<GameStateBar class="app-header-item"/>
78
</div>
89

@@ -24,10 +25,12 @@
2425
import ControlFlowBar from "./control/ControlFlowBar";
2526
import SwitchWindowBar from "./control/SwitchWindowBar";
2627
import ActiveTrackerSource from "./control/ActiveTrackerSource";
28+
import HelpText from "@/components/control/HelpText";
2729
2830
export default {
2931
name: 'GameController',
3032
components: {
33+
HelpText,
3134
ActiveTrackerSource,
3235
SwitchWindowBar,
3336
MatchSettingsBar,

‎src/components/GameStateBar.vue‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,54 +2,47 @@
22
<div class="game-state-bar">
33
<span v-if="currentActionTimePositive">
44
<span v-format-ns-duration="state.currentActionTimeRemaining"
5-
v-b-tooltip.hover.d500
6-
title="Remaining time until lack of progress">
5+
v-help-text="'Remaining time until lack of progress'">
76
</span>
87
|
98
</span>
10-
<span v-b-tooltip.hover.d500 title="Next command">
9+
<span v-help-text="'Next command'">
1110
<span v-if="state.nextCommand"
1211
:class="teamColorClassNextCommand">
1312
{{state.nextCommand.type}}
1413
</span>
1514
<span v-else>-</span>
1615
</span>
1716
|
18-
<span v-b-tooltip.hover.d500
19-
title="Current command"
17+
<span v-help-text="'Current command'"
2018
:class="teamColorClassCommand">
2119
{{state.command.type}}
2220
</span>
2321
|
24-
<span v-b-tooltip.hover.d500 title="The current stage of the game">
22+
<span v-help-text="'The current stage of the game'">
2523
{{stageText}}
2624
</span>
2725
|
28-
<span v-b-tooltip.hover.d500
29-
title="Goals for yellow"
26+
<span v-help-text="'Goals for yellow'"
3027
class="team-yellow">
3128
{{teamStateYellow.goals}}
3229
</span>
3330
:
34-
<span v-b-tooltip.hover.d500
35-
title="Goals for blue"
31+
<span v-help-text="'Goals for blue'"
3632
class="team-blue">
3733
{{teamStateBlue.goals}}
3834
</span>
3935
|
4036
<span v-format-ns-duration="state.stageTimeElapsed"
41-
v-b-tooltip.hover.d500
42-
title="Total time elapsed in the current stage">
37+
v-help-text="'Total time elapsed in the current stage'">
4338
</span>
4439
|
4540
<span v-format-ns-duration="state.stageTimeLeft"
46-
v-b-tooltip.hover.d500
47-
title="Total time left for this stage">
41+
v-help-text="'Total time left for this stage'">
4842
</span>
4943
|
5044
<span v-format-ns-duration="matchDuration"
51-
v-b-tooltip.hover.d500
52-
title="Total real time elapsed since the match has been started">
45+
v-help-text="'Total real time elapsed since the match has been started'">
5346
</span>
5447
</div>
5548
</template>

‎src/components/common/DualSwitch.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
<template>
22
<div class="btn-group-toggle btn-group">
3-
<label v-b-tooltip.hover.d500
4-
:title="leftTitle"
3+
<label v-help-text="leftTitle"
54
:class="{btn:true, 'btn-active': (selectedValue === leftValue), 'btn-passive': (selectedValue !== leftValue)}"
65
@click="callback(leftValue)"
76
:disabled="disabled">
87
{{leftLabel}}
98
</label>
10-
<label v-b-tooltip.hover.d500
11-
:title="rightTitle"
9+
<label v-help-text="rightTitle"
1210
:class="{btn:true, 'btn-active': (selectedValue === rightValue), 'btn-passive': (selectedValue !== rightValue)}"
1311
@click="callback(rightValue)"
1412
:disabled="disabled">

‎src/components/control/ControlFlowBar.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<template>
22
<div class="control-flaw-bar">
3-
<div v-b-tooltip.hover.d500
4-
:title="'Immediately stop all robots (' + Object.keys(keymapHalt)[0] + ')'">
3+
<div v-help-text="'Immediately stop all robots (' + Object.keys(keymapHalt)[0] + ')'">
54
<b-button v-hotkey="keymapHalt"
65
ref="btnHalt"
76
v-on:click="send('HALT')"
@@ -10,8 +9,7 @@
109
</b-button>
1110
</div>
1211

13-
<div v-b-tooltip.hover.d500
14-
:title="'Continue based on last game event (' + Object.keys(keymapContinue)[0] + ')'">
12+
<div v-help-text="'Continue based on last game event (' + Object.keys(keymapContinue)[0] + ')'">
1513
<b-button v-hotkey="keymapContinue"
1614
ref="btnContinue"
1715
:class="continueButtonClass"

‎src/components/control/HelpText.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<label class="help-text">
3+
{{ hoverHelpText }}
4+
</label>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: "HelpText",
10+
computed: {
11+
hoverHelpText() {
12+
return this.$store.state.hoverHelpText;
13+
}
14+
}
15+
}
16+
</script>
17+
18+
<style scoped>
19+
.help-text {
20+
font-size: 1.2em;
21+
font-weight: bold;
22+
}
23+
</style>

‎src/components/control/MatchSettingsBar.vue‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,25 @@
55
</div>
66

77
<div class="btn-group-toggle btn-group" v-hotkey="keymapToggleAutoRef">
8-
<label v-b-tooltip.hover.d500
9-
:title="'Enable automatic continuation based on game events (' + Object.keys(keymapToggleAutoRef)[0] + ')'"
8+
<label v-help-text="'Enable automatic continuation based on game events (' + Object.keys(keymapToggleAutoRef)[0] + ')'"
109
:class="{btn:true, 'btn-active': autoContinue, 'btn-passive': !autoContinue}"
1110
@click="setAutoContinue(true)">
1211
Auto
1312
</label>
14-
<label v-b-tooltip.hover.d500
15-
:title="'Disable automatic continuation based on game events (' + Object.keys(keymapToggleAutoRef)[0] + ')'"
13+
<label v-help-text="'Disable automatic continuation based on game events (' + Object.keys(keymapToggleAutoRef)[0] + ')'"
1614
:class="{btn:true, 'btn-active': !autoContinue, 'btn-passive': autoContinue}"
1715
@click="setAutoContinue(false)">
1816
Manual
1917
</label>
2018
</div>
2119

22-
<b-button v-b-tooltip.hover.d500
23-
title="Proceed to the next stage"
20+
<b-button v-help-text="'Proceed to the next stage'"
2421
v-on:click="nextStage"
2522
:disabled="forbidMatchControls || noNextStage || preStage">
2623
Proceed to {{nextStageText}}
2724
</b-button>
2825

29-
<b-button v-b-tooltip.hover.d500
30-
title="Finish the game"
26+
<b-button v-help-text="'Finish the game'"
3127
v-on:click="endGame"
3228
v-if="showEndGame"
3329
:disabled="forbidMatchControls || noNextStage">

‎src/components/game-events/CurrentEvents.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@
1111
<div class="event_buttons"
1212
v-if="showAcceptAndRejectGoal(gameEvent)">
1313
<a @click="rejectGoal(gameEvent)"
14-
v-b-tooltip.hover.d500.righttop="'Reject this goal'">
14+
v-help-text="'Reject this goal'">
1515
<font-awesome-icon icon="times-circle" class="fa-lg"></font-awesome-icon>
1616
</a>
1717
<a @click="acceptGoal(gameEvent)"
18-
v-b-tooltip.hover.d500.righttop="'Accept this goal'">
18+
v-help-text="'Accept this goal'">
1919
<font-awesome-icon icon="check-circle" class="fa-lg"></font-awesome-icon>
2020
</a>
2121
</div>

‎src/components/game-events/EventProposals.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@
1616
:key="detail.key">{{detail.key}}: {{detail.value}}</p>
1717
</div>
1818
<a class="btn-accept"
19-
v-b-tooltip.hover.d500
20-
title="Accept this proposal group"
19+
v-help-text="'Accept this proposal group'"
2120
v-if="!group.accepted"
2221
@click="accept(groupId)">
2322
<font-awesome-icon icon="check-circle" class="fa-lg"></font-awesome-icon>

‎src/components/manual-control/ManualControlCommon.vue‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
<table>
33
<tr>
44
<td>
5-
<div v-b-tooltip.hover.d500
6-
:title="'Immediately stop all robots (' + Object.keys(keymapHalt)[0] + ')'">
5+
<div v-help-text="'Immediately stop all robots (' + Object.keys(keymapHalt)[0] + ')'">
76
<b-button v-hotkey="keymapHalt"
87
ref="btnHalt"
98
class="manual-control-button"
@@ -14,8 +13,7 @@
1413
</div>
1514
</td>
1615
<td>
17-
<div v-b-tooltip.hover.d500
18-
:title="'Robots have to keep distance to the ball (' + Object.keys(keymapStop)[0] + ')'">
16+
<div v-help-text="'Robots have to keep distance to the ball (' + Object.keys(keymapStop)[0] + ')'">
1917
<b-button v-hotkey="keymapStop"
2018
ref="btnStop"
2119
class="manual-control-button"
@@ -28,8 +26,7 @@
2826
</tr>
2927
<tr>
3028
<td>
31-
<div v-b-tooltip.hover.d500
32-
:title="'Restart the game in draw situations (' + Object.keys(keymapForceStart)[0] + ')'">
29+
<div v-help-text="'Restart the game in draw situations (' + Object.keys(keymapForceStart)[0] + ')'">
3330
<b-button v-hotkey="keymapForceStart"
3431
ref="btnForceStart"
3532
class="manual-control-button"
@@ -40,8 +37,7 @@
4037
</div>
4138
</td>
4239
<td>
43-
<div v-b-tooltip.hover.d500
44-
:title="'Continue game after a prepare state (' + Object.keys(keymapNormalStart)[0] + ')'">
40+
<div v-help-text="'Continue game after a prepare state (' + Object.keys(keymapNormalStart)[0] + ')'">
4541
<b-button v-hotkey="keymapNormalStart"
4642
ref="btnNormalStart"
4743
class="manual-control-button"

0 commit comments

Comments
 (0)