up

src/components/GamePage.vue

@@ -113,6 +113,9 @@ const screenPlanDraft = ref<ScreenPlanStep[]>([])
 const screenPlanDirty = ref(false)
 const screenPlanSaving = ref(false)
 const screenPlanMode = ref<'use' | 'edit'>('use')
+let screenPlanRequestVersion = 0
+const screenPlanStepKeys = new WeakMap<ScreenPlanStep, number>()
+let nextScreenPlanStepKey = 0
 const previewQuestions = ref<ResultsQuestion[]>([])
 const previewTeams = ref<TeamResult[]>([])
 const mapItems = ref<MapItem[]>([])
@@ -189,8 +192,15 @@ function isScreenPlanEditing() {
 
 async function getScreenPlan() {
   if (isScreenPlanEditing() || screenPlanDirty.value) return
+  const requestVersion = ++screenPlanRequestVersion
   const res = await client.GetScreenPlan({ gameID: Number(gameId) })
-  if (isScreenPlanEditing() || screenPlanDirty.value) return
+  if (
+    requestVersion !== screenPlanRequestVersion ||
+    isScreenPlanEditing() ||
+    screenPlanDirty.value
+  ) {
+    return
+  }
   screenPlan.value = res.plan
   screenPlanDraft.value = res.plan?.steps?.map((step) => ({ ...step })) || []
 }
@@ -237,8 +247,18 @@ function markScreenPlanDirty() {
   screenPlanDirty.value = true
 }
 
+function getScreenPlanStepKey(step: ScreenPlanStep) {
+  let key = screenPlanStepKeys.get(step)
+  if (key === undefined) {
+    key = nextScreenPlanStepKey++
+    screenPlanStepKeys.set(step, key)
+  }
+  return key
+}
+
 async function saveScreenPlan() {
   if (screenPlanSaving.value) return
+  screenPlanRequestVersion += 1
   screenPlanSaving.value = true
   try {
     const currentStep = Math.min(
@@ -942,8 +962,16 @@ useSimplePolling(() => {
                 <n-button size="small" @click="editScreenPlan">Редактировать</n-button>
               </template>
               <template v-if="screenPlanMode === 'edit'">
-                <n-button size="small" @click="cancelScreenPlanEdit">Отменить</n-button>
-                <n-button size="small" type="primary" :loading="screenPlanSaving" @click="saveScreenPlan">
+                <n-button size="small" :disabled="screenPlanSaving" @click="cancelScreenPlanEdit">
+                  Отменить
+                </n-button>
+                <n-button
+                  size="small"
+                  type="primary"
+                  :loading="screenPlanSaving"
+                  :disabled="screenPlanSaving"
+                  @click="saveScreenPlan"
+                >
                   Сохранить план
                 </n-button>
               </template>
@@ -951,11 +979,12 @@ useSimplePolling(() => {
           </n-flex>
           <p v-if="!screenPlan && screenPlanMode === 'use'" class="screen-empty">План экранов ещё не создан.</p>
           <template v-else-if="screenPlanMode === 'edit'">
-            <n-space v-for="(step, index) in screenPlanDraft" :key="index" align="center" wrap>
+            <n-space v-for="(step, index) in screenPlanDraft" :key="getScreenPlanStepKey(step)" align="center" wrap>
               <n-text>{{ index + 1 }}</n-text>
               <n-select
                 v-model:value="step.mode"
                 :options="screenPlanModeOptions"
+                :disabled="screenPlanSaving"
                 size="small"
                 style="width: 180px"
                 @update:value="markScreenPlanDirty"
@@ -963,6 +992,7 @@ useSimplePolling(() => {
               <n-input
                 v-if="step.mode === 'SCREEN_MODE_TEXT'"
                 v-model:value="step.text"
+                :disabled="screenPlanSaving"
                 size="small"
                 placeholder="Текст экрана"
                 style="min-width: 240px"
@@ -971,6 +1001,7 @@ useSimplePolling(() => {
               <template v-if="step.mode === 'SCREEN_MODE_TIMER'">
                 <n-input
                   v-model:value="step.timerLabel"
+                  :disabled="screenPlanSaving"
                   size="small"
                   placeholder="Надпись таймера"
                   @update:value="markScreenPlanDirty"
@@ -979,26 +1010,46 @@ useSimplePolling(() => {
                   v-model:value="step.timerDurationSeconds"
                   :min="1"
                   :max="86400"
+                  :disabled="screenPlanSaving"
                   size="small"
                   placeholder="Секунды"
                   @update:value="markScreenPlanDirty"
                 />
               </template>
-              <n-button size="small" :disabled="index === 0" @click="moveScreenPlanStep(index, -1)">↑</n-button>
               <n-button
                 size="small"
-                :disabled="index === screenPlanDraft.length - 1"
+                :disabled="screenPlanSaving || index === 0"
+                @click="moveScreenPlanStep(index, -1)"
+              >
+                ↑
+              </n-button>
+              <n-button
+                size="small"
+                :disabled="screenPlanSaving || index === screenPlanDraft.length - 1"
                 @click="moveScreenPlanStep(index, 1)"
               >
                 ↓
               </n-button>
-              <n-button size="small" type="error" ghost @click="removeScreenPlanStep(index)">
+              <n-button
+                size="small"
+                type="error"
+                ghost
+                :disabled="screenPlanSaving"
+                @click="removeScreenPlanStep(index)"
+              >
                 Удалить
               </n-button>
             </n-space>
             <n-space>
-              <n-button size="small" @click="addScreenPlanStep">Добавить шаг</n-button>
-              <n-button v-if="screenPlanDraft.length" size="small" @click="screenPlanDraft = []; markScreenPlanDirty()">
+              <n-button size="small" :disabled="screenPlanSaving" @click="addScreenPlanStep">
+                Добавить шаг
+              </n-button>
+              <n-button
+                v-if="screenPlanDraft.length"
+                size="small"
+                :disabled="screenPlanSaving"
+                @click="screenPlanDraft = []; markScreenPlanDirty()"
+              >
                 Удалить план
               </n-button>
             </n-space>