Add shortcuts for commands and continue

Author: g3force

frontend/src/App.vue

@@ -27,6 +27,11 @@ if (uiStore.darkMode !== undefined) {
   $q.dark.set(uiStore.darkMode)
 }
 
+const showShortcuts = computed(() => uiStore.showShortcuts)
+const toggleShortcuts = () => {
+  uiStore.showShortcuts = !uiStore.showShortcuts
+}
+
 let initialDrawerWidth = 0
 const resizeRightDrawer = (ev: any) => {
   if (ev.isFirst === true) {
@@ -64,7 +69,11 @@ const dev = computed(() => {
         <div class="q-mx-md">
           <ExternalConnectionStatus/>
         </div>
-        <q-toggle dense flat round @click="toggleDarkMode" :model-value="darkMode" color="black">Dark</q-toggle>
+        <q-toggle dense flat round class="q-mx-sm" @click="toggleDarkMode" :model-value="darkMode" color="black">Dark
+        </q-toggle>
+        <q-toggle dense flat round class="q-mx-sm" @click="toggleShortcuts" :model-value="showShortcuts" color="black">
+          Show Shortcuts
+        </q-toggle>
         <q-btn dense flat round icon="menu" @click="toggleRightDrawer"/>
       </q-toolbar>
 

frontend/src/components/common/NumberInput.vue

@@ -1,13 +1,21 @@
 <script setup lang="ts">
 
+import {inject} from "vue";
+import type {Shortcuts} from "@/providers/shortcuts";
+
 defineProps<{
   modelValue?: number,
   label?: string,
 }>()
+
 const emit = defineEmits<{
   (event: 'update:modelValue', payload: number | undefined): void;
 }>();
 
+const shortcuts = inject<Shortcuts>('shortcuts')!
+const onFocusin = () => shortcuts.disable()
+const onFocusout = () => shortcuts.enable()
+
 const updateValue = (value: string | number | null) => {
   if (value !== null) {
     if (typeof value === 'string') {
@@ -23,12 +31,14 @@ const updateValue = (value: string | number | null) => {
 
 <template>
   <q-input
-    input-class="text-center"
-    dense
-    :label="label"
-    type="number"
-    :model-value="modelValue"
-    @update:model-value="updateValue"
+      input-class="text-center"
+      dense
+      :label="label"
+      type="number"
+      :model-value="modelValue"
+      @update:model-value="updateValue"
+      @focusin="onFocusin"
+      @focusout="onFocusout"
   >
     <template v-slot:prepend>
       <q-icon name="close" @click="updateValue(null)"/>

frontend/src/components/common/TextInput.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 
+import {inject} from "vue";
+import type {Shortcuts} from "@/providers/shortcuts";
+
 defineProps<{
   modelValue?: string,
   label?: string,
@@ -9,6 +12,10 @@ const emit = defineEmits<{
   (event: 'update:modelValue', payload: string | undefined): void;
 }>();
 
+const shortcuts = inject<Shortcuts>('shortcuts')!
+const onFocusin = () => shortcuts.disable()
+const onFocusout = () => shortcuts.enable()
+
 const updateValue = (v: string | number | null) => {
   if (v) {
     if (typeof v === 'number') {
@@ -28,6 +35,8 @@ const updateValue = (v: string | number | null) => {
     :label="label"
     :model-value="modelValue"
     @update:model-value="updateValue"
+    @focusin="onFocusin"
+    @focusout="onFocusout"
   >
     <template v-slot:prepend>
       <q-icon name="close" @click="updateValue(null)"/>

frontend/src/components/control/CommandButton.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import TeamBadge from "@/components/common/TeamBadge.vue";
+import type {ManualActions} from "@/providers/manualActions";
+import {computed, inject} from "vue";
+import type {Command_Type} from "@/proto/ssl_gc_state";
+import type {Team} from "@/proto/ssl_gc_common";
+import {useUiStateStore} from "@/store/uiState";
+
+const props = defineProps<{
+  type: Command_Type,
+  team?: Team,
+}>()
+
+const manualActions = inject<ManualActions>('command-actions')!
+const uiStore = useUiStateStore()
+const action = computed(() => manualActions.getCommandAction(props.type, props.team))
+const label = computed(() => {
+  if (uiStore.showShortcuts && action.value.shortcutLabel) {
+    return `${action.value.label} [${action.value.shortcutLabel}]`
+  }
+  return action.value.label
+})
+
+</script>
+
+<template>
+  <q-btn class="q-mx-md q-my-xs" color="primary" @click="action.send" :disable="!action.enabled" :label="label">
+    <TeamBadge :team="action.team" floating/>
+  </q-btn>
+</template>

frontend/src/components/control/ForceStartButton.vue

@@ -2,7 +2,7 @@
 import {inject} from "vue";
 import ControlButton from "@/components/control/ControlButton.vue";
 import {GameEvent_Goal, GameEvent_Type} from "@/proto/ssl_gc_game_event";
-import type {ControlApi} from "@/providers/controlApi/ControlApi";
+import type {ControlApi} from "@/providers/controlApi";
 import type {Team} from "@/proto/ssl_gc_common";
 
 const props = defineProps<{