feat: add new translations for settings and graphics; implement shortcut conflict detection and reset functionality

2026-06-06 03:32:06 +00:00 · 2026-05-16 14:15:36 +02:00
parent 6dbf648323
commit 7b302e4c21
5 changed files with 251 additions and 29 deletions
@@ -91,6 +91,12 @@ type Translations = {
  commentaryClear: string;
  aboutChangelog : string;
  aboutTechStackTitle : string;
+  settingsShortcutConflictWarning : string;
+  settingsShortcutStartRecording: string;
+  settingsShortcutStopRecording: string;
+  settingsShortcutResetSingle: string;
+  graphicsCopied : string;
+  graphicsOpenBrowser : string;
 };

 const STORAGE_KEY = 'scoreko-dev.language';
@@ -185,6 +191,12 @@ const messages: Record<Locale, Translations> = {
    commentaryClear: 'Clear commentary',
    aboutChangelog: 'Changelog',
    aboutTechStackTitle: 'Tech stack',
+    settingsShortcutConflictWarning: 'This shortcut is already assigned to',
+    settingsShortcutStartRecording: 'Start recording shortcut',
+    settingsShortcutStopRecording: 'Stop recording shortcut',
+    settingsShortcutResetSingle: 'Reset single player score shortcut',
+    graphicsCopied: 'URL copied to clipboard',
+    graphicsOpenBrowser: 'Open in browser',
  },
  es: {
    menuDashboard: 'Panel',
@@ -275,6 +287,12 @@ const messages: Record<Locale, Translations> = {
    commentaryClear: 'Limpiar comentario',
    aboutChangelog: 'Changelog',
    aboutTechStackTitle: 'Tech stack',
+    settingsShortcutConflictWarning: 'This shortcut is already assigned to',
+    settingsShortcutStartRecording: 'Start recording shortcut',
+    settingsShortcutStopRecording: 'Stop recording shortcut',
+    settingsShortcutResetSingle: 'Reset single player score shortcut',
+    graphicsCopied: 'URL copiada al portapapeles',
+    graphicsOpenBrowser: 'Abrir en el navegador',
  },
 };

@@ -175,9 +175,15 @@ export const useShortcutSettingsStore = defineStore('shortcut-settings', () => {
    persistSettings(shortcuts);
  };

+  const resetShortcut = (action: ShortcutAction) => {
+    shortcuts[action] = defaultShortcuts[action];
+    persistSettings(shortcuts);
+  };
+
  return {
    shortcuts,
    setShortcut,
    resetShortcuts,
+    resetShortcut,
  };
 });
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
 import { useHead } from '@unhead/vue';
+import { computed, ref, watch } from 'vue';
 import bundlePackage from '../../../../package.json';
 import { graphicsSettingsReplicant } from '../../../browser_shared/replicants';
 import { t } from '../i18n';

 defineOptions({ name: 'GraphicsView' });

-useHead(() => ({ title: t('graphicsTitle') }));type GraphicConfig = {
+type GraphicConfig = {
  name?: string;
  title?: string;
  file: string;
@@ -129,19 +129,29 @@ const cards = computed<GraphicCard[]>(() => {
  return result;
 });

-const copyUrl = async (graphic: GraphicConfig) => {
+const copiedCardId = ref<string | null>(null);
+
+const copyUrl = async (graphic: GraphicConfig, cardId: string) => {
  const url = buildGraphicUrl(graphic);
  if (navigator.clipboard?.writeText) {
    await navigator.clipboard.writeText(url);
-    return;
+  } else {
+    const input = document.createElement('input');
+    input.value = url;
+    document.body.appendChild(input);
+    input.select();
+    document.execCommand('copy');
+    document.body.removeChild(input);
  }

-  const input = document.createElement('input');
-  input.value = url;
-  document.body.appendChild(input);
-  input.select();
-  document.execCommand('copy');
-  document.body.removeChild(input);
+  copiedCardId.value = cardId;
+  setTimeout(() => {
+    copiedCardId.value = null;
+  }, 2000);
+};
+
+const openUrl = (graphic: GraphicConfig) => {
+  window.open(buildGraphicUrl(graphic), '_blank');
 };

 const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
@@ -225,11 +235,11 @@ const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {

            <div class="row items-center q-gutter-sm">
              <QBtn
-                color="primary"
-                icon="content_copy"
+                :color="copiedCardId === card.id ? 'positive' : 'primary'"
+                :icon="copiedCardId === card.id ? 'check' : 'content_copy'"
                no-caps
-                :label="t('graphicsCopyUrl')"
-                @click="copyUrl(card.graphic)"
+                :label="copiedCardId === card.id ? t('graphicsCopied') : t('graphicsCopyUrl')"
+                @click="copyUrl(card.graphic, card.id)"
              />
              <QBtn
                color="secondary"
@@ -239,6 +249,13 @@ const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
                :label="t('graphicsDragObs')"
                @dragstart="onDragStart($event, card.graphic)"
              />
+              <QBtn
+                color="grey-7"
+                icon="open_in_new"
+                no-caps
+                :label="t('graphicsOpenBrowser')"
+                @click="openUrl(card.graphic)"
+              />
            </div>
          </QCardSection>
        </QCard>
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
 import { useHead } from '@unhead/vue';
 import type { QTableColumn } from 'quasar';
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
 import { getCountryLabel, getCountryOptions } from '../../../shared/countries';
 import type { Schemas } from '../../../types';
 import { locale, t } from '../i18n';
@@ -524,6 +524,20 @@ const hasChallongeTokenConfigured = computed(() => Boolean(challongeToken.value.

 const challongeConnectionLabel = computed(() => (hasValidatedChallongeToken.value ? t('playersConnected') : 'Token set'));

+const playerSource = (id: string): 'startgg' | 'challonge' | null => {
+  if (id in temporaryStartGGPlayers.value) return 'startgg';
+  if (id in temporaryChallongePlayers.value) return 'challonge';
+  return null;
+};
+
+const playerExpiresAt = (id: string): number | null => {
+  const meta = temporaryStartGGPlayers.value[id] ?? temporaryChallongePlayers.value[id] ?? null;
+  return meta ? meta.expiresAt : null;
+};
+
+const formatExpiresAt = (ts: number): string =>
+  new Date(ts * 1000).toLocaleDateString(locale.value, { month: 'short', day: 'numeric', year: 'numeric' });
+
 const filterChallongeTournaments = (value: string, update: (callback: () => void) => void) => {
  update(() => {
    const needle = value.toLowerCase().trim();
@@ -684,6 +698,22 @@ const openSelectedTournamentImportDialog = () => {
  void openStartGGImportDialog(selectedTournamentOption.value);
 };

+const toggleAllStartGGPlayers = () => {
+  if (selectedStartGGPlayerIds.value.length === startGGPlayers.value.length) {
+    selectedStartGGPlayerIds.value = [];
+  } else {
+    selectedStartGGPlayerIds.value = startGGPlayers.value.map((p) => p.id);
+  }
+};
+
+const toggleAllChallongePlayers = () => {
+  if (selectedChallongePlayerIds.value.length === challongePlayers.value.length) {
+    selectedChallongePlayerIds.value = [];
+  } else {
+    selectedChallongePlayerIds.value = challongePlayers.value.map((p) => p.id);
+  }
+};
+
 const importSelectedStartGGPlayers = () => {
  const selectedPlayers = startGGPlayers.value.filter((player) =>
    selectedStartGGPlayerIds.value.includes(player.id),
@@ -837,6 +867,7 @@ onBeforeUnmount(() => {
              <QIcon name="search" />
            </template>
          </QInput>
+          <span class="text-caption text-grey-6">{{ rows.length }} players</span>
          <QBtn
            color="secondary"
            outline
@@ -873,6 +904,45 @@ onBeforeUnmount(() => {
          :filter="filter"
          :rows-per-page-options="[10, 20, 50]"
        >
+          <template #body-cell-gamertag="{ row }">
+            <QTd>
+              <div class="row items-center q-gutter-x-sm">
+                <span class="text-weight-medium">{{ row.gamertag }}</span>
+                <QChip
+                  v-if="playerSource(row.id) === 'startgg'"
+                  dense
+                  outline
+                  color="blue-4"
+                  class="q-ma-none"
+                  style="font-size: 10px; height: 18px;"
+                >
+                  start.gg
+                  <QTooltip v-if="playerExpiresAt(row.id)">
+                    Temporary · expires {{ formatExpiresAt(playerExpiresAt(row.id)!) }}
+                  </QTooltip>
+                </QChip>
+                <QChip
+                  v-else-if="playerSource(row.id) === 'challonge'"
+                  dense
+                  outline
+                  color="orange-4"
+                  class="q-ma-none"
+                  style="font-size: 10px; height: 18px;"
+                >
+                  Challonge
+                  <QTooltip v-if="playerExpiresAt(row.id)">
+                    Temporary · expires {{ formatExpiresAt(playerExpiresAt(row.id)!) }}
+                  </QTooltip>
+                </QChip>
+              </div>
+              <div
+                v-if="row.name"
+                class="text-caption text-grey-6"
+              >
+                {{ row.name }}
+              </div>
+            </QTd>
+          </template>
          <template #body-cell-actions="{ row }">
            <QTd align="right">
              <QBtn
@@ -1199,6 +1269,20 @@ onBeforeUnmount(() => {
            <span>Loading participants...</span>
          </div>
          <div v-else>
+            <div class="row q-gutter-sm q-mb-sm">
+              <QBtn
+                flat
+                dense
+                no-caps
+                size="sm"
+                color="primary"
+                :label="selectedStartGGPlayerIds.length === startGGPlayers.length ? 'Deselect all' : 'Select all'"
+                @click="toggleAllStartGGPlayers"
+              />
+              <span class="text-caption text-grey-6 self-center">
+                {{ selectedStartGGPlayerIds.length }} / {{ startGGPlayers.length }} selected
+              </span>
+            </div>
            <QOptionGroup
              v-model="selectedStartGGPlayerIds"
              type="checkbox"
@@ -1246,6 +1330,20 @@ onBeforeUnmount(() => {
            <span>Loading participants...</span>
          </div>
          <div v-else>
+            <div class="row q-gutter-sm q-mb-sm">
+              <QBtn
+                flat
+                dense
+                no-caps
+                size="sm"
+                color="primary"
+                :label="selectedChallongePlayerIds.length === challongePlayers.length ? 'Deselect all' : 'Select all'"
+                @click="toggleAllChallongePlayers"
+              />
+              <span class="text-caption text-grey-6 self-center">
+                {{ selectedChallongePlayerIds.length }} / {{ challongePlayers.length }} selected
+              </span>
+            </div>
            <QOptionGroup
              v-model="selectedChallongePlayerIds"
              type="checkbox"
@@ -1340,6 +1438,8 @@ onBeforeUnmount(() => {
                  dense
                  class="players-underlined-field"
                  autofocus
+                  :rules="[(v) => !!v?.trim() || 'Gamertag is required']"
+                  lazy-rules
                />
              </div>
              <div class="col-12">
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref } from 'vue';
 import { useHead } from '@unhead/vue';
+import { computed, onBeforeUnmount, ref } from 'vue';
 import type { Locale } from '../i18n';
 import { locale, setLocale, t } from '../i18n';
 import {
@@ -28,6 +28,9 @@ const selectedLanguage = computed<Locale>({
 const shortcutSettingsStore = useShortcutSettingsStore();
 const recordingAction = ref<ShortcutAction | null>(null);

+// Ref para detectar clicks fuera del contenedor de atajos
+const shortcutsContainerRef = ref<HTMLElement | null>(null);
+
 const shortcutFields = computed<{ action: ShortcutAction; label: string; hint: string }[]>(() => [
  { action: 'leftIncrement', label: t('settingsShortcutLeftIncrementLabel'), hint: t('settingsShortcutLeftIncrementHint') },
  { action: 'leftDecrement', label: t('settingsShortcutLeftDecrementLabel'), hint: t('settingsShortcutLeftDecrementHint') },
@@ -35,6 +38,21 @@ const shortcutFields = computed<{ action: ShortcutAction; label: string; hint: s
  { action: 'rightDecrement', label: t('settingsShortcutRightDecrementLabel'), hint: t('settingsShortcutRightDecrementHint') },
 ]);

+// Detecta atajos duplicados entre acciones
+const conflictingActions = computed(() => {
+  const seen = new Map<string, ShortcutAction>();
+  const conflicts = new Set<ShortcutAction>();
+  for (const [action, shortcut] of Object.entries(shortcutSettingsStore.shortcuts) as [ShortcutAction, string][]) {
+    if (seen.has(shortcut)) {
+      conflicts.add(action);
+      conflicts.add(seen.get(shortcut)!);
+    } else {
+      seen.set(shortcut, action);
+    }
+  }
+  return conflicts;
+});
+
 const stopRecording = () => {
  recordingAction.value = null;
  if (typeof document !== 'undefined') {
@@ -43,20 +61,34 @@ const stopRecording = () => {
 };

 const onRecordKeydown = (event: KeyboardEvent) => {
-  if (!recordingAction.value) {
+  if (!recordingAction.value) return;
+
+  // Escape cancela la grabación sin asignar ningún atajo
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    stopRecording();
    return;
  }

  const shortcut = eventToShortcut(event);
-  if (!shortcut) {
-    return;
-  }
+  if (!shortcut) return;

  event.preventDefault();
  shortcutSettingsStore.setShortcut(recordingAction.value, shortcut);
  stopRecording();
 };

+// Click fuera del área de atajos también cancela la grabación
+const onDocumentMousedown = (event: MouseEvent) => {
+  if (
+    recordingAction.value &&
+    shortcutsContainerRef.value &&
+    !shortcutsContainerRef.value.contains(event.target as Node)
+  ) {
+    stopRecording();
+  }
+};
+
 const startRecording = (action: ShortcutAction) => {
  if (recordingAction.value === action) {
    stopRecording();
@@ -71,11 +103,13 @@ const startRecording = (action: ShortcutAction) => {

 if (typeof window !== 'undefined') {
  window.addEventListener('keydown', onRecordKeydown);
+  document.addEventListener('mousedown', onDocumentMousedown);
 }

 onBeforeUnmount(() => {
  if (typeof window !== 'undefined') {
    window.removeEventListener('keydown', onRecordKeydown);
+    document.removeEventListener('mousedown', onDocumentMousedown);
  }
  stopRecording();
 });
@@ -99,15 +133,16 @@ onBeforeUnmount(() => {
    >
      <!-- Language -->
      <QCardSection class="q-pa-lg">
-        <div class="text-overline text-grey-6 q-mb-md">
-          {{ t('settingsLanguageLabel') }}
-        </div>
-
+        <!--
+          Label movido al propio QSelect (más idiomático en Quasar con outlined).
+          Se elimina el text-overline redundante de encima.
+        -->
        <QSelect
          v-model="selectedLanguage"
          emit-value
          map-options
          :options="languageOptions"
+          :label="t('settingsLanguageLabel')"
          outlined
          dense
        />
@@ -142,12 +177,39 @@ onBeforeUnmount(() => {
          {{ t('settingsShortcutDescription') }}
        </div>

-        <div class="column q-gutter-md">
+        <!-- Aviso de conflicto: se muestra si dos acciones comparten el mismo atajo -->
+        <QBanner
+          v-if="conflictingActions.size > 0"
+          class="bg-warning text-white q-mb-md"
+          rounded
+          dense
+        >
+          <template #avatar>
+            <QIcon name="warning" color="white" />
+          </template>
+          {{ t('settingsShortcutConflictWarning') }}
+        </QBanner>
+
+        <!--
+          ref="shortcutsContainerRef" permite detectar clicks fuera
+          de esta área para cancelar la grabación automáticamente.
+        -->
+        <div
+          ref="shortcutsContainerRef"
+          class="column q-gutter-md"
+        >
          <QInput
            v-for="field in shortcutFields"
            :key="field.action"
            :model-value="shortcutSettingsStore.shortcuts[field.action]"
            :hint="recordingAction === field.action ? t('settingsShortcutRecordingHint') : field.hint"
+            :color="
+              recordingAction === field.action
+                ? 'negative'
+                : conflictingActions.has(field.action)
+                  ? 'warning'
+                  : 'primary'
+            "
            readonly
            outlined
            dense
@@ -155,14 +217,33 @@ onBeforeUnmount(() => {
            :label="field.label"
          >
            <template #append>
+              <!-- Botón grabar / detener -->
              <QBtn
                flat
                round
                dense
                :icon="recordingAction === field.action ? 'stop_circle' : 'keyboard'"
                :color="recordingAction === field.action ? 'negative' : 'primary'"
+                :aria-label="
+                  recordingAction === field.action
+                    ? t('settingsShortcutStopRecording')
+                    : t('settingsShortcutStartRecording')
+                "
                @click="startRecording(field.action)"
              />
+
+              <!-- Botón reset individual por atajo -->
+              <QBtn
+                flat
+                round
+                dense
+                icon="restart_alt"
+                color="grey-5"
+                :aria-label="t('settingsShortcutResetSingle')"
+                @click="shortcutSettingsStore.resetShortcut(field.action)"
+              >
+                <QTooltip>{{ t('settingsShortcutResetSingle') }}</QTooltip>
+              </QBtn>
            </template>
          </QInput>
        </div>