Replace tooltips with a help text in the top bar

Author: g3force

package.json

@@ -14,7 +14,6 @@
     "bootstrap": "5.1.3",
     "bootstrap-vue": "2.21.2",
     "jquery": "3.6.0",
-    "popper.js": "1.16.1",
     "protobufjs": "6.11.2",
     "v-hotkey": "0.9.0",
     "vue": "2.6.14",

src/components/GameController.vue

@@ -3,6 +3,7 @@
         <div v-if="initialized">
             <div id="app-header">
                 <MatchSettingsBar class="app-header-item"/>
+                <HelpText class="app-header-item"/>
                 <GameStateBar class="app-header-item"/>
             </div>
 
@@ -24,10 +25,12 @@
     import ControlFlowBar from "./control/ControlFlowBar";
     import SwitchWindowBar from "./control/SwitchWindowBar";
     import ActiveTrackerSource from "./control/ActiveTrackerSource";
+    import HelpText from "@/components/control/HelpText";
 
     export default {
         name: 'GameController',
         components: {
+            HelpText,
             ActiveTrackerSource,
             SwitchWindowBar,
             MatchSettingsBar,

src/components/GameStateBar.vue

@@ -2,54 +2,47 @@
     <div class="game-state-bar">
         <span v-if="currentActionTimePositive">
             <span v-format-ns-duration="state.currentActionTimeRemaining"
-                  v-b-tooltip.hover.d500
-                  title="Remaining time until lack of progress">
+                  v-help-text="'Remaining time until lack of progress'">
             </span>
             |
             </span>
-        <span v-b-tooltip.hover.d500 title="Next command">
+        <span v-help-text="'Next command'">
             <span v-if="state.nextCommand"
                   :class="teamColorClassNextCommand">
             {{state.nextCommand.type}}
             </span>
             <span v-else>-</span>
         </span>
         |
-        <span v-b-tooltip.hover.d500
-              title="Current command"
+        <span v-help-text="'Current command'"
               :class="teamColorClassCommand">
             {{state.command.type}}
         </span>
         |
-        <span v-b-tooltip.hover.d500 title="The current stage of the game">
+        <span v-help-text="'The current stage of the game'">
             {{stageText}}
         </span>
         |
-        <span v-b-tooltip.hover.d500
-              title="Goals for yellow"
+        <span v-help-text="'Goals for yellow'"
               class="team-yellow">
             {{teamStateYellow.goals}}
         </span>
         :
-        <span v-b-tooltip.hover.d500
-              title="Goals for blue"
+        <span v-help-text="'Goals for blue'"
               class="team-blue">
             {{teamStateBlue.goals}}
         </span>
         |
         <span v-format-ns-duration="state.stageTimeElapsed"
-              v-b-tooltip.hover.d500
-              title="Total time elapsed in the current stage">
+              v-help-text="'Total time elapsed in the current stage'">
         </span>
         |
         <span v-format-ns-duration="state.stageTimeLeft"
-              v-b-tooltip.hover.d500
-              title="Total time left for this stage">
+              v-help-text="'Total time left for this stage'">
         </span>
         |
         <span v-format-ns-duration="matchDuration"
-              v-b-tooltip.hover.d500
-              title="Total real time elapsed since the match has been started">
+              v-help-text="'Total real time elapsed since the match has been started'">
         </span>
     </div>
 </template>

src/components/common/DualSwitch.vue

@@ -1,14 +1,12 @@
 <template>
     <div class="btn-group-toggle btn-group">
-        <label v-b-tooltip.hover.d500
-               :title="leftTitle"
+        <label v-help-text="leftTitle"
                :class="{btn:true, 'btn-active': (selectedValue === leftValue), 'btn-passive': (selectedValue !== leftValue)}"
                @click="callback(leftValue)"
                :disabled="disabled">
             {{leftLabel}}
         </label>
-        <label v-b-tooltip.hover.d500
-               :title="rightTitle"
+        <label v-help-text="rightTitle"
                :class="{btn:true, 'btn-active': (selectedValue === rightValue), 'btn-passive': (selectedValue !== rightValue)}"
                @click="callback(rightValue)"
                :disabled="disabled">

src/components/control/ControlFlowBar.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="control-flaw-bar">
-        <div v-b-tooltip.hover.d500
-             :title="'Immediately stop all robots (' + Object.keys(keymapHalt)[0] + ')'">
+        <div v-help-text="'Immediately stop all robots (' + Object.keys(keymapHalt)[0] + ')'">
             <b-button v-hotkey="keymapHalt"
                       ref="btnHalt"
                       v-on:click="send('HALT')"
@@ -10,8 +9,7 @@
             </b-button>
         </div>
 
-        <div v-b-tooltip.hover.d500
-             :title="'Continue based on last game event (' + Object.keys(keymapContinue)[0] + ')'">
+        <div v-help-text="'Continue based on last game event (' + Object.keys(keymapContinue)[0] + ')'">
             <b-button v-hotkey="keymapContinue"
                       ref="btnContinue"
                       :class="continueButtonClass"

src/components/control/HelpText.vue

@@ -0,0 +1,23 @@
+<template>
+    <label class="help-text">
+        {{ hoverHelpText }}
+    </label>
+</template>
+
+<script>
+export default {
+    name: "HelpText",
+    computed: {
+        hoverHelpText() {
+            return this.$store.state.hoverHelpText;
+        }
+    }
+}
+</script>
+
+<style scoped>
+.help-text {
+    font-size: 1.2em;
+    font-weight: bold;
+}
+</style>

src/components/control/MatchSettingsBar.vue

@@ -5,29 +5,25 @@
         </div>
 
         <div class="btn-group-toggle btn-group" v-hotkey="keymapToggleAutoRef">
-            <label v-b-tooltip.hover.d500
-                   :title="'Enable automatic continuation based on game events (' + Object.keys(keymapToggleAutoRef)[0] + ')'"
+            <label v-help-text="'Enable automatic continuation based on game events (' + Object.keys(keymapToggleAutoRef)[0] + ')'"
                    :class="{btn:true, 'btn-active': autoContinue, 'btn-passive': !autoContinue}"
                    @click="setAutoContinue(true)">
                 Auto
             </label>
-            <label v-b-tooltip.hover.d500
-                   :title="'Disable automatic continuation based on game events (' + Object.keys(keymapToggleAutoRef)[0] + ')'"
+            <label v-help-text="'Disable automatic continuation based on game events (' + Object.keys(keymapToggleAutoRef)[0] + ')'"
                    :class="{btn:true, 'btn-active': !autoContinue, 'btn-passive': autoContinue}"
                    @click="setAutoContinue(false)">
                 Manual
             </label>
         </div>
 
-        <b-button v-b-tooltip.hover.d500
-                  title="Proceed to the next stage"
+        <b-button v-help-text="'Proceed to the next stage'"
                   v-on:click="nextStage"
                   :disabled="forbidMatchControls || noNextStage || preStage">
             Proceed to {{nextStageText}}
         </b-button>
 
-        <b-button v-b-tooltip.hover.d500
-                  title="Finish the game"
+        <b-button v-help-text="'Finish the game'"
                   v-on:click="endGame"
                   v-if="showEndGame"
                   :disabled="forbidMatchControls || noNextStage">

src/components/game-events/CurrentEvents.vue

@@ -11,11 +11,11 @@
             <div class="event_buttons"
                  v-if="showAcceptAndRejectGoal(gameEvent)">
                 <a @click="rejectGoal(gameEvent)"
-                   v-b-tooltip.hover.d500.righttop="'Reject this goal'">
+                   v-help-text="'Reject this goal'">
                     <font-awesome-icon icon="times-circle" class="fa-lg"></font-awesome-icon>
                 </a>
                 <a @click="acceptGoal(gameEvent)"
-                   v-b-tooltip.hover.d500.righttop="'Accept this goal'">
+                   v-help-text="'Accept this goal'">
                     <font-awesome-icon icon="check-circle" class="fa-lg"></font-awesome-icon>
                 </a>
             </div>

src/components/game-events/EventProposals.vue

@@ -16,8 +16,7 @@
                    :key="detail.key">{{detail.key}}: {{detail.value}}</p>
             </div>
             <a class="btn-accept"
-               v-b-tooltip.hover.d500
-               title="Accept this proposal group"
+               v-help-text="'Accept this proposal group'"
                v-if="!group.accepted"
                @click="accept(groupId)">
                 <font-awesome-icon icon="check-circle" class="fa-lg"></font-awesome-icon>

src/components/manual-control/ManualControlCommon.vue

@@ -2,8 +2,7 @@
     <table>
         <tr>
             <td>
-                <div v-b-tooltip.hover.d500
-                     :title="'Immediately stop all robots (' + Object.keys(keymapHalt)[0] + ')'">
+                <div v-help-text="'Immediately stop all robots (' + Object.keys(keymapHalt)[0] + ')'">
                     <b-button v-hotkey="keymapHalt"
                               ref="btnHalt"
                               class="manual-control-button"
@@ -14,8 +13,7 @@
                 </div>
             </td>
             <td>
-                <div v-b-tooltip.hover.d500
-                     :title="'Robots have to keep distance to the ball (' + Object.keys(keymapStop)[0] + ')'">
+                <div v-help-text="'Robots have to keep distance to the ball (' + Object.keys(keymapStop)[0] + ')'">
                     <b-button v-hotkey="keymapStop"
                               ref="btnStop"
                               class="manual-control-button"
@@ -28,8 +26,7 @@
         </tr>
         <tr>
             <td>
-                <div v-b-tooltip.hover.d500
-                     :title="'Restart the game in draw situations (' + Object.keys(keymapForceStart)[0] + ')'">
+                <div v-help-text="'Restart the game in draw situations (' + Object.keys(keymapForceStart)[0] + ')'">
                     <b-button v-hotkey="keymapForceStart"
                               ref="btnForceStart"
                               class="manual-control-button"
@@ -40,8 +37,7 @@
                 </div>
             </td>
             <td>
-                <div v-b-tooltip.hover.d500
-                     :title="'Continue game after a prepare state (' + Object.keys(keymapNormalStart)[0] + ')'">
+                <div v-help-text="'Continue game after a prepare state (' + Object.keys(keymapNormalStart)[0] + ')'">
                     <b-button v-hotkey="keymapNormalStart"
                               ref="btnNormalStart"
                               class="manual-control-button"