up

src/components/GameMapPanel.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { NButton, NFlex, NSpace, NText } from 'naive-ui'
+import { NButton, NFlex, NInput, NInputNumber, NSelect, NSpace, NText } from 'naive-ui'
 import { computed, onBeforeUnmount, ref } from 'vue'
 
 import type {
   Application,
   MapItem,
   ResultsQuestion,
+  ScreenCommand,
+  ScreenMode,
+  ScreenPlan,
+  ScreenPlanStep,
   ScreenState,
   Team,
   TeamResult,
@@ -18,11 +22,30 @@ const props = defineProps<{
   screens: ScreenState[]
   previewQuestions: ResultsQuestion[]
   previewTeams: TeamResult[]
+  screenPlan?: ScreenPlan
+  screenPlanDraft: ScreenPlanStep[]
+  screenPlanDirty: boolean
+  screenPlanSaving: boolean
+  screenPlanMode: 'use' | 'edit'
+  screenVolume: number
+  screenPosition: number
 }>()
 
 const emit = defineEmits<{
   saveItem: [item: MapItem, hidden?: boolean]
   giveApplication: [team: Team, application: Application]
+  addStep: []
+  edit: []
+  cancel: []
+  removeStep: [index: number]
+  moveStep: [index: number, offset: number]
+  dirty: []
+  clearPlan: []
+  save: []
+  setStep: [index: number]
+  command: [mode: ScreenMode | undefined, command: ScreenCommand]
+  'update:screenVolume': [value: number | null]
+  'update:screenPosition': [value: number | null]
 }>()
 
 const mapScale = ref(1)
@@ -34,6 +57,16 @@ const teamsNeedingApplications = computed(
   () =>
     new Map(props.teams.filter((team) => team.applications?.length).map((team) => [team.ID, team])),
 )
+const screenPlanModeOptions = [
+  { label: 'Обложка', value: 'SCREEN_MODE_COVER' },
+  { label: 'Введение', value: 'SCREEN_MODE_INTRO' },
+  { label: 'Успехов', value: 'SCREEN_MODE_INTRO_DONE' },
+  { label: 'Закрывашка', value: 'SCREEN_MODE_CONCLUSION' },
+  { label: 'Спасибо за игру', value: 'SCREEN_MODE_CONCLUSION_DONE' },
+  { label: 'Результаты', value: 'SCREEN_MODE_RESULTS' },
+  { label: 'Таймер', value: 'SCREEN_MODE_TIMER' },
+  { label: 'Текст', value: 'SCREEN_MODE_TEXT' },
+]
 let dragState:
   { item: MapItem; startX: number; startY: number; itemX: number; itemY: number } | undefined
 let panState: { startX: number; startY: number; offsetX: number; offsetY: number } | undefined
@@ -211,6 +244,210 @@ onBeforeUnmount(() => {
         :teams="previewTeams"
       />
       <div v-else class="screen-preview-placeholder">Экран не подключён</div>
+      <div class="screen-plan">
+        <n-flex align="center" justify="space-between">
+          <p class="screens-title">План экранов</p>
+          <n-space>
+            <n-button
+              v-if="!screenPlan && screenPlanMode === 'use'"
+              size="small"
+              @click="emit('addStep')"
+            >
+              Создать план
+            </n-button>
+            <n-button
+              v-if="screenPlan && screenPlanMode === 'use'"
+              size="small"
+              @click="emit('edit')"
+            >
+              Редактировать
+            </n-button>
+            <template v-if="screenPlanMode === 'edit'">
+              <n-button size="small" :disabled="screenPlanSaving" @click="emit('cancel')">
+                Отменить
+              </n-button>
+              <n-button
+                size="small"
+                type="primary"
+                :loading="screenPlanSaving"
+                :disabled="screenPlanSaving"
+                @click="emit('save')"
+              >
+                Сохранить план
+              </n-button>
+            </template>
+          </n-space>
+        </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-text>{{ index + 1 }}</n-text>
+            <n-select
+              v-model:value="step.mode"
+              :options="screenPlanModeOptions"
+              :disabled="screenPlanSaving"
+              size="small"
+              style="width: 180px"
+              @update:value="emit('dirty')"
+            />
+            <n-input
+              v-if="step.mode === 'SCREEN_MODE_TEXT'"
+              v-model:value="step.text"
+              :disabled="screenPlanSaving"
+              size="small"
+              placeholder="Текст экрана"
+              style="min-width: 240px"
+              @update:value="emit('dirty')"
+            />
+            <template v-if="step.mode === 'SCREEN_MODE_TIMER'">
+              <n-input
+                v-model:value="step.timerLabel"
+                :disabled="screenPlanSaving"
+                size="small"
+                placeholder="Надпись таймера"
+                @update:value="emit('dirty')"
+              />
+              <n-input-number
+                v-model:value="step.timerDurationSeconds"
+                :min="1"
+                :max="86400"
+                :disabled="screenPlanSaving"
+                size="small"
+                placeholder="Секунды"
+                @update:value="emit('dirty')"
+              />
+            </template>
+            <n-button
+              size="small"
+              :disabled="screenPlanSaving || index === 0"
+              @click="emit('moveStep', index, -1)"
+            >
+              ↑
+            </n-button>
+            <n-button
+              size="small"
+              :disabled="screenPlanSaving || index === screenPlanDraft.length - 1"
+              @click="emit('moveStep', index, 1)"
+            >
+              ↓
+            </n-button>
+            <n-button
+              size="small"
+              type="error"
+              ghost
+              :disabled="screenPlanSaving"
+              @click="emit('removeStep', index)"
+            >
+              Удалить
+            </n-button>
+          </n-space>
+          <n-space>
+            <n-button size="small" :disabled="screenPlanSaving" @click="emit('addStep')">
+              Добавить шаг
+            </n-button>
+            <n-button
+              v-if="screenPlanDraft.length"
+              size="small"
+              :disabled="screenPlanSaving"
+              @click="emit('clearPlan')"
+            >
+              Удалить план
+            </n-button>
+          </n-space>
+        </template>
+        <template v-else-if="screenPlan">
+          <n-space v-for="(step, index) in screenPlan.steps || []" :key="index" align="center" wrap>
+            <n-text>{{ index + 1 }}</n-text>
+            <n-text>
+              {{ screenPlanModeOptions.find((option) => option.value === step.mode)?.label }}
+              <template v-if="step.mode === 'SCREEN_MODE_TEXT'">: {{ step.text }}</template>
+              <template v-else-if="step.mode === 'SCREEN_MODE_TIMER'">
+                : {{ step.timerLabel }} ({{ step.timerDurationSeconds }} с)
+              </template>
+            </n-text>
+            <n-button
+              size="small"
+              :type="screenPlan.currentStep === index ? 'primary' : 'default'"
+              :disabled="screenPlan.currentStep === index"
+              @click="emit('setStep', index)"
+            >
+              Показать
+            </n-button>
+            <template v-if="screenPlan.currentStep === index">
+              <template v-if="step.mode === 'SCREEN_MODE_TIMER'">
+                <n-button
+                  size="small"
+                  @click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_START')"
+                >
+                  Старт
+                </n-button>
+                <n-button
+                  size="small"
+                  @click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_PAUSE')"
+                >
+                  Пауза
+                </n-button>
+                <n-button
+                  size="small"
+                  @click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_RESUME')"
+                >
+                  Продолжить
+                </n-button>
+                <n-button
+                  size="small"
+                  @click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_RESET')"
+                >
+                  Сбросить
+                </n-button>
+              </template>
+              <template
+                v-else-if="
+                  step.mode === 'SCREEN_MODE_INTRO' || step.mode === 'SCREEN_MODE_CONCLUSION'
+                "
+              >
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_PLAY')">
+                  Запуск
+                </n-button>
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_PAUSE')">
+                  Пауза
+                </n-button>
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_RESUME')">
+                  Продолжить
+                </n-button>
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_STOP')">
+                  Стоп
+                </n-button>
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_REPLAY')">
+                  Повтор
+                </n-button>
+                <n-input-number
+                  :value="screenVolume"
+                  :min="0"
+                  :max="100"
+                  :step="5"
+                  size="small"
+                  @update:value="emit('update:screenVolume', $event)"
+                />
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_VOLUME')">
+                  Громкость
+                </n-button>
+                <n-input-number
+                  :value="screenPosition"
+                  :min="0"
+                  :step="5"
+                  size="small"
+                  @update:value="emit('update:screenPosition', $event)"
+                />
+                <n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_SEEK')">
+                  Перемотать
+                </n-button>
+              </template>
+            </template>
+          </n-space>
+        </template>
+      </div>
     </aside>
   </div>
 </template>
@@ -247,10 +484,11 @@ onBeforeUnmount(() => {
 }
 
 .map-field {
+  aspect-ratio: 1;
   background-color: #151515;
   border: 1px dashed rgb(255 255 255 / 20%);
   cursor: grab;
-  height: 420px;
+  height: auto;
   min-height: 200px;
   overflow: hidden;
   position: relative;