feat: enhance shortcuts functionality with control API integration, remove need for ctrl modifier

Author: g3force

CLAUDE.md

@@ -101,6 +101,10 @@ revert functionality.
 - `team/`: Team-specific settings and information
 - `game-events/`: Game event input forms and displays
 
+**Keyboard Shortcuts**: Centralized in `frontend/src/providers/shortcuts/` with global event listeners registered in the
+control plugin. All shortcuts (numpad commands, Ctrl+Space for auto-continue, Ctrl+1-9 for continue actions) are handled
+in one place with automatic disabling during text input.
+
 ### Adding New Teams
 
 For new teams, add the team name to `defaultTeams` in `internal/app/engine/config.go` and submit a pull request.

frontend/src/components/common/NumberInput.vue

@@ -6,6 +6,7 @@ import type {Shortcuts} from "@/providers/shortcuts";
 const props = defineProps<{
   modelValue?: number | bigint | "NaN" | "Infinity" | "-Infinity",
   label?: string,
+  clearable?: boolean,
 }>()
 
 const emit = defineEmits<(event: 'update:modelValue', payload: number | undefined) => void>();
@@ -47,7 +48,7 @@ const updateValue = (value: string | number | null) => {
       @focusout="onFocusout"
   >
     <template v-slot:prepend>
-      <q-icon name="close" @click="updateValue(null)"/>
+      <q-icon v-if="clearable" name="close" @click="updateValue(null)"/>
     </template>
   </q-input>
 </template>

frontend/src/components/game-events/common/LocationItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type {Vector2Json} from "@/proto/geom/ssl_gc_geometry_pb";
+import NumberInput from "@/components/common/NumberInput.vue";
 
 const props = defineProps<{
   modelValue?: Vector2Json,
@@ -11,26 +12,18 @@ const emit = defineEmits<(event: 'update:modelValue', payload: Vector2Json | und
 const updateValue = (v: Vector2Json | undefined) => {
   emit('update:modelValue', v)
 }
-const updateX = (x: string | number | null) => {
+const updateX = (x: number | undefined) => {
   if (x !== null) {
     const y = props.modelValue?.y || 0
-    if (typeof x === 'string') {
-      updateValue({x: parseFloat(x), y})
-    } else {
-      updateValue({x, y})
-    }
+    updateValue({x, y})
   } else {
     updateValue(undefined)
   }
 }
-const updateY = (y: string | number | null) => {
+const updateY = (y: number | undefined) => {
   if (y !== null) {
     const x = props.modelValue?.x || 0
-    if (typeof y === 'string') {
-      updateValue({x, y: parseFloat(y)})
-    } else {
-      updateValue({x, y})
-    }
+    updateValue({x, y})
   } else {
     updateValue(undefined)
   }
@@ -41,32 +34,26 @@ const updateY = (y: string | number | null) => {
 <template>
   <q-item>
     <q-item-section>
-      <q-input
-        input-class="text-center"
-        dense
-        type="number"
+      <NumberInput
         :label="(label || 'location') + ' x (m)'"
         :model-value="modelValue?.x"
         @update:model-value="updateX"
       >
         <template v-slot:prepend>
-          <q-icon name="close" @click="updateX(null)"/>
+          <q-icon name="close" @click="updateX(undefined)"/>
         </template>
-      </q-input>
+      </NumberInput>
     </q-item-section>
     <q-item-section>
-      <q-input
-        input-class="text-center"
-        dense
-        type="number"
+      <NumberInput
         :label="(label || 'location') + ' y (m)'"
         :model-value="modelValue?.y"
         @update:model-value="updateY"
       >
         <template v-slot:prepend>
-          <q-icon name="close" @click="updateY(null)"/>
+          <q-icon name="close" @click="updateY(undefined)"/>
         </template>
-      </q-input>
+      </NumberInput>
     </q-item-section>
   </q-item>
 </template>

frontend/src/plugins/control/index.ts

@@ -11,7 +11,7 @@ export const control = {
   install(app: App) {
     const controlApi = new ControlApi()
     const manualActions = new ManualActions(controlApi)
-    const shortcuts = new Shortcuts(manualActions)
+    const shortcuts = new Shortcuts(manualActions, controlApi)
     app.provide('control-api', controlApi)
     app.provide('command-actions', manualActions)
     app.provide('shortcuts', shortcuts)

frontend/src/providers/manualActions/index.ts

@@ -4,7 +4,6 @@ import {isPausedStage} from "@/helpers";
 import type {ControlApi} from "@/providers/controlApi";
 import {useMatchStateStore} from "@/store/matchState";
 import {commandName} from "@/helpers/texts";
-import {useGcStateStore} from "@/store/gcState";
 
 export interface ManualAction {
   send: () => void,
@@ -16,27 +15,12 @@ export interface ManualAction {
 
 export class ManualActions {
   private readonly matchStateStore = useMatchStateStore()
-  private readonly gcStateStore = useGcStateStore()
   private readonly controlApi: ControlApi
 
   constructor(controlApi: ControlApi) {
     this.controlApi = controlApi;
   }
 
-  public getContinueAction(): ManualAction {
-    const continueAction = this.gcStateStore.gcState.continueActions?.[0]
-    const enabled = continueAction?.state === 'READY_AUTO'
-      || continueAction?.state === 'READY_MANUAL'
-      || continueAction?.state === 'WAITING'
-    return {
-      send: () => continueAction && this.controlApi.Continue(continueAction),
-      enabled: enabled,
-      label: "Continue",
-      shortcutLabel: "NumpadEnter",
-      team: undefined,
-    }
-  }
-
   public getCommandAction(commandType: Command_TypeJson, forTeam?: TeamJson): ManualAction {
     return {
       send: () => this.sendCommand(commandType, forTeam),

frontend/src/providers/shortcuts/index.ts

@@ -1,12 +1,17 @@
 import type {ManualActions} from "@/providers/manualActions";
+import type {ControlApi} from "@/providers/controlApi";
+import {useGcStateStore} from "@/store/gcState";
 
 
 export class Shortcuts {
   private readonly manualActions: ManualActions
+  private readonly controlApi: ControlApi
+  private readonly gcStateStore = useGcStateStore()
   private enabled: boolean = true
 
-  constructor(manualActions: ManualActions) {
+  constructor(manualActions: ManualActions, controlApi: ControlApi) {
     this.manualActions = manualActions
+    this.controlApi = controlApi
     this.enabled = true
   }
 
@@ -29,6 +34,17 @@ export class Shortcuts {
       return
     }
 
+    if (e.key === " ") {
+      this.toggleAutoContinue()
+      e.preventDefault()
+      return
+    } else if (e.code.startsWith('Digit') && !isNaN(Number(e.key))) {
+      const id = Number(e.key)
+      this.continueWithAction(id - 1)
+      e.preventDefault()
+      return
+    }
+
     switch (e.code) {
       case "Numpad0":
         this.manualActions.getCommandAction('STOP').send()
@@ -61,11 +77,21 @@ export class Shortcuts {
         this.manualActions.getCommandAction('TIMEOUT', 'BLUE').send()
         break
       case "NumpadEnter":
-        this.manualActions.getContinueAction().send()
+        this.continueWithAction(0)
         break
       default:
         return
     }
     e.preventDefault()
   }
+
+  private continueWithAction(id: number) {
+    if (this.gcStateStore.gcState.continueActions!.length > id) {
+      this.controlApi.Continue(this.gcStateStore.gcState.continueActions![id])
+    }
+  }
+
+  private toggleAutoContinue() {
+    this.controlApi.ChangeConfig({autoContinue: !this.gcStateStore.config.autoContinue})
+  }
 }

frontend/src/views/MatchView.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import {computed, inject, onMounted, onUnmounted} from "vue";
+import {computed} from "vue";
 import ContinueActionButtonList from "@/components/match/ContinueActionButtonList.vue";
 import AutoContinueInput from "@/components/match/AutoContinueInput.vue";
 import MatchTeamTable from "@/components/match/MatchTeamTable.vue";
-import type {ControlApi} from "@/providers/controlApi";
 import {useGcStateStore} from "@/store/gcState";
 import {useUiStateStore} from "@/store/uiState";
 import SwitchColorButton from "@/components/start/SwitchColorButton.vue";
@@ -15,51 +14,16 @@ import CommandButton from "@/components/control/CommandButton.vue";
 const store = useMatchStateStore()
 const gcStore = useGcStateStore()
 const uiStore = useUiStateStore()
-const control = inject<ControlApi>('control-api')
-
-const continueWithAction = (id: number) => {
-  if (gcStore.gcState.continueActions!.length > id) {
-    control?.Continue(gcStore.gcState.continueActions![id])
-  }
-}
 
 const continueHints = computed(() => {
   return gcStore.gcState.continueHints || []
 })
 
-const toggleAutoContinue = () => {
-  control?.ChangeConfig({autoContinue: !gcStore.config.autoContinue})
-}
-
 const halftime = computed(() => {
   return store.matchState.stage === 'NORMAL_HALF_TIME' ||
     store.matchState.stage === 'EXTRA_HALF_TIME'
 })
 
-const keyListenerContinue = function (e: KeyboardEvent) {
-  if (!e.ctrlKey) {
-    return
-  }
-  if (e.key === " ") {
-    toggleAutoContinue()
-    e.preventDefault()
-  } else {
-    const id = Number(e.key)
-    if (!isNaN(id)) {
-      continueWithAction(id - 1)
-      e.preventDefault()
-    }
-  }
-};
-
-onMounted(() => {
-  document.addEventListener('keydown', keyListenerContinue)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', keyListenerContinue)
-})
-
 </script>
 
 <template>
@@ -82,13 +46,12 @@ onUnmounted(() => {
         <AutoContinueInput/>
       </div>
       <div class="row justify-evenly">
-        Press
         <div class="q-my-auto">
+          Press
           <em>
-            Ctrl +
             <q-badge label="id" color="orange"/>
           </em>
-          |
+          or
           <em>NumpadEnter</em>
           to continue
         </div>

frontend/src/views/PlaceBallView.vue

@@ -6,6 +6,7 @@ import {isPausedStage} from "@/helpers";
 import type {TeamJson} from "@/proto/state/ssl_gc_common_pb";
 import type {ControlApi} from "@/providers/controlApi";
 import type {Vector2} from "@/proto/geom/ssl_gc_geometry_pb";
+import NumberInput from "@/components/common/NumberInput.vue";
 
 const store = useMatchStateStore()
 const control = inject<ControlApi>('control-api')
@@ -55,18 +56,12 @@ const disable = computed(() => {
   </div>
 
   <div class="row justify-evenly q-mt-md">
-    <q-input
-      input-class="text-center"
-      dense
+    <NumberInput
       label="X-Coordinate"
-      type="number"
       v-model="newBallPos.x"
     />
-    <q-input
-      input-class="text-center"
-      dense
+    <NumberInput
       label="Y-Coordinate"
-      type="number"
       v-model="newBallPos.y"
     />
   </div>