up

src/components/GameControlPanel.vue

@@ -15,15 +15,16 @@ const dialog = useDialog()
 const game = computed(() => props.state.game?.key === props.selectedKey ? props.state.game : null)
 const status = computed(() => game.value ? gameStatuses[game.value.status] : null)
 const disabled = computed(() => props.isBusy || props.state.busy || !props.state.authenticated || !!props.state.gameError)
+const availableCommands = computed(() => game.value && props.selectedKey ? gameCommands[game.value.status] : [])
 const commands = {
   start: { label: 'Начать игру', path: 'm8 5 12 7-12 7z' },
-  play: { label: 'Продолжить игру', path: 'm8 5 12 7-12 7z' },
   pause: { label: 'Поставить игру на паузу', path: 'M8 5v14M16 5v14' },
+  play: { label: 'Продолжить игру', path: 'M5 5v14m5-14 10 7-10 7z' },
   finish: { label: 'Завершить игру', path: 'M5 21V3m0 1h14l-4 5 4 5H5' },
   reset: { label: 'Сбросить игру', path: 'M4 5v6h6M4 11a8 8 0 1 1 2 7' },
 }
 function run(command: GameCommand) {
-  if (disabled.value || !game.value || !props.selectedKey) return
+  if (disabled.value || !game.value || !props.selectedKey || !availableCommands.value.includes(command)) return
   if (command !== 'reset') {
     emit('action', { action: 'game-command', command, key: props.selectedKey })
     return
@@ -57,19 +58,18 @@ function run(command: GameCommand) {
         <n-alert v-if="state.gameError" type="warning" role="status">
           {{ state.gameError }}{{ game ? ' Показано последнее полученное состояние.' : '' }}
         </n-alert>
-        <n-space v-if="game && selectedKey" align="center">
+        <n-space align="center">
           <n-button
-            v-for="command in gameCommands[game.status]"
+            v-for="(config, command) in commands"
             :key="command"
             square
-            :disabled="disabled"
+            :disabled="disabled || !availableCommands.includes(command)"
-            :type="command === 'finish' || command === 'reset' ? 'error' : 'default'"
+            :aria-label="config.label"
-            :aria-label="commands[command].label"
+            :title="config.label"
-            :title="commands[command].label"
             @click="run(command)"
           >
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-              <path :d="commands[command].path" />
+              <path :d="config.path" />
             </svg>
           </n-button>
         </n-space>

src/components/ScreenConnectionPanel.vue

@@ -22,14 +22,7 @@ function run(intent: OnlineIntent) {
     <slot />
     <n-space v-if="state.screenId" align="center">
       <span>Экран №{{ state.screenId }}</span>
-      <n-button
+      <span role="status" data-testid="sound-assignment">
-        :disabled="isBusy || state.busy"
-        @click="run({ action: 'disconnect' })"
-        >Отключиться</n-button
-      >
-    </n-space>
-    <template v-if="state.screenId">
-      <p role="status" data-testid="sound-assignment">
         {{
           state.soundEnabled === null
             ? 'Назначение звука пока неизвестно'
@@ -40,8 +33,13 @@ function run(intent: OnlineIntent) {
         <template v-if="state.soundEnabled !== null && state.connection !== 'connected'">
           · Последнее состояние
         </template>
-      </p>
+      </span>
-    </template>
+      <n-button
+        :disabled="isBusy || state.busy"
+        @click="run({ action: 'disconnect' })"
+        >Отключиться</n-button
+      >
+    </n-space>
     <n-space v-if="state.screenId">
       <n-button
         v-if="state.soundEnabled !== true"