add update game window

src/components/GamePage.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
+
+import { Settings } from '@vicons/carbon'
 import { getAuthClient } from '@/api/auth_client';
+import { Icon } from '@vicons/utils'
+import { NButton } from 'naive-ui'
 import type { Game } from '@/api/generated/crabs/evening_detective_server';
+import { NCard, NInput, NModal, NSpace } from 'naive-ui'
 import HeaderMenu from '@/components/HeaderMenu.vue'
 import { useMessage } from 'naive-ui';
 import { ref } from 'vue';
@@ -13,6 +18,8 @@ const gameId = route.params.id
 
 const message = useMessage()
 
+const showSettingsModal = ref(false)
+
 const game = ref<Game>({
     id: undefined,
     name: undefined,
@@ -36,11 +43,38 @@ getGame(Number(gameId))
 async function toTeamStory(id: number, password: string) {
     router.push('/team-story/' + id + '?password=' + password)
 }
+
+async function updateGame() {
+    const res = await client.UpdateGame({
+        id: game.value.id,
+        name: game.value.name,
+        description: game.value.description,
+        startAt: game.value.startAt,
+        scenarioId: game.value.scenario?.id,
+    })
+    if (res.error != '') {
+        message.error(res.error!)
+        return
+    }
+    await getGame(game.value.id!)
+    showSettingsModal.value = false
+}
 </script>
 
 <template>
     <div class="center-block-custom">
         <div class="width1200">
+
+            <div class="settings-block">
+                {{ game.name }}
+                <n-button quaternary @click="showSettingsModal = true" class="settings-button">
+                    <Icon class="settings-icon">
+                        <Settings />
+                    </Icon>
+                    Настройки
+                </n-button>
+            </div>
+
             <div v-for="team in game.teams" class="team-block" @click="toTeamStory(team.id!, team.password!)">
                 <div class="team-title">
                     {{ team.name }}
@@ -49,6 +83,27 @@ async function toTeamStory(id: number, password: string) {
         </div>
     </div>
 
+    <!-- Окно настроек -->
+    <n-modal v-model:show="showSettingsModal">
+        <n-card style="width: 600px" title="Настройки игры" :bordered="false" size="huge" role="dialog"
+            aria-modal="true">
+            <template #header-extra>
+                <n-button @click="showSettingsModal = false"> x </n-button>
+            </template>
+            <n-space vertical>
+                <p>Название</p>
+                <n-input v-model:value="game.name" type="text" placeholder='Дело №0 "Следствие ведут овечки"' />
+
+                <p class="settings-header">Описание</p>
+                <n-input v-model:value="game.description" type="textarea" placeholder="Убийство пастуха..." />
+
+                <n-button @click="updateGame()" ghost> Сохранить изменения </n-button>
+
+            </n-space>
+            <template #footer> </template>
+        </n-card>
+    </n-modal>
+
     <HeaderMenu active="games" />
 </template>
 
@@ -69,4 +124,16 @@ async function toTeamStory(id: number, password: string) {
     font-size: 24px;
     margin-bottom: 10px;
 }
+
+.settings-block {
+    height: 40px;
+}
+
+.settings-button {
+    float: right;
+}
+
+.settings-icon {
+    width: 20px;
+}
 </style>

src/components/ScenariosEditorPage.vue

@@ -16,7 +16,7 @@ const client = getAuthClient()
 const route = useRoute()
 const scenarioId = route.params.id
 
-const showSettingsScenarioModal = ref(false)
+const showSettingsModal = ref(false)
 const statusScenarioName = ref('')
 const deletedScenarioName = ref('')
 
@@ -66,7 +66,7 @@ async function publicScenario(id: number) {
   }
   await getScenario(Number(scenarioId))
   statusScenarioName.value = ''
-  showSettingsScenarioModal.value = false
+  showSettingsModal.value = false
 }
 
 async function addGame(name: string, id: number) {
@@ -100,7 +100,7 @@ async function draftScenario(id: number) {
   }
   await getScenario(Number(scenarioId))
   statusScenarioName.value = ''
-  showSettingsScenarioModal.value = false
+  showSettingsModal.value = false
 }
 
 async function uploadFile(file: File | null, filename: string): Promise<string> {
@@ -148,7 +148,7 @@ async function updateScenario() {
     return
   }
   await getScenario(Number(scenarioId))
-  showSettingsScenarioModal.value = false
+  showSettingsModal.value = false
 }
 
 function uint8ToBase64(uint8Array: Uint8Array) {
@@ -282,7 +282,7 @@ async function deletePlace(place: Place) {
 
         <div class="settings-block">
           Точек: {{ scenario.story?.places?.length }}
-          <n-button quaternary @click="showSettingsScenarioModal = true" class="settings-button">
+          <n-button quaternary @click="showSettingsModal = true" class="settings-button">
             <Icon class="settings-icon">
               <Settings />
             </Icon>
@@ -310,12 +310,12 @@ async function deletePlace(place: Place) {
     </div>
   </div>
 
-  <!-- Окно настроек сценария -->
+  <!-- Окно настроек -->
-  <n-modal v-model:show="showSettingsScenarioModal">
+  <n-modal v-model:show="showSettingsModal">
     <n-card style="width: 600px" title="Настройки сценария" :bordered="false" size="huge" role="dialog"
       aria-modal="true">
       <template #header-extra>
-        <n-button @click="showSettingsScenarioModal = false"> x </n-button>
+        <n-button @click="showSettingsModal = false"> x </n-button>
       </template>
       <n-space vertical>
         <p>Название</p>