add new design

src/assets/base.css

@@ -19,8 +19,7 @@
   /* Главный цвет */
   --main-color: rgb(34 50 60 / 100%);
 
-  /* --second-color: rgb(97, 74, 22); */
-  --second-color: burlywood;
+  --second-color: rgb(97, 74, 22);
   --main-back-color: rgb(240 240 240 / 100%);
   --main-back-item-color: rgb(254 254 254 / 100%);
 }

src/components/MessagePaper copy.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+/* код */
+</script>
+
+<template>
+  <div class="main">
+    <div class="message-cloud-3"></div>
+    <div class="message-cloud-2"></div>
+    <div class="message-cloud">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.main {
+  position: relative;
+}
+
+.message-cloud, .message-cloud-2, .message-cloud-3 {
+  background-color: bisque;
+}
+
+.message-cloud {
+  margin: 15px 0;
+  padding: 16px;
+  font-family: main;
+  color: black;
+  line-height: 20px;
+  font-size: 18px;
+  font-weight: 900;
+  position: relative;
+}
+
+.message-cloud,
+.message-cloud-2,
+.message-cloud-3 {
+  border-radius: 5px;
+  background-image: url("@/assets/images/paper.jpg");
+  background-size: cover;
+  display: flow-root;
+  box-shadow: 0px 0 5px black;
+}
+
+.message-cloud-2,
+.message-cloud-3 {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.message-cloud-2 {
+  transform: rotate(-3deg);
+  filter: brightness(50%);
+  height: 100%;
+  width: 100%;
+}
+
+.message-cloud-3 {
+  transform: rotate(2deg);
+  filter: brightness(80%);
+  height: 100%;
+  width: 100%;
+}
+</style>

src/components/PlaceBlock.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { Key24Regular } from '@vicons/fluent'
 import { LockOutlined } from '@vicons/material'
+import MessagePaper from './MessagePaper.vue';
 import { Icon } from '@vicons/utils'
-import { NButton,NDynamicInput, NInput, NInputGroup, NSpace, NSwitch, NText, NUpload, NUploadDragger } from 'naive-ui'
+import { NButton, NDynamicInput, NInput, NInputGroup, NSpace, NSwitch, NText, NUpload, NUploadDragger } from 'naive-ui'
 import type { PropType } from 'vue'
 
 import type { Application, Door, Key, Place } from '@/api/generated/crabs/evening_detective_server'
@@ -24,6 +25,9 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  addAction: {
+    type: Function as PropType<(param: string) => void>,
+  }
 })
 
 const emit = defineEmits<{
@@ -88,19 +92,19 @@ function onCreateKey(): Key {
 
   <div v-if="mode == 'show-editor'" class="place-block-hover show-editor-block" @click="updateMode('edit')">
     <div class="message-header">
-      {{ props.place.code }}: {{ props.place.name }}
+      {{ props.place?.code }}: {{ props.place?.name }}
     </div>
     <hr class="hr" />
     <div class="message-content">
-      <div v-if="props.place.image">
+      <div v-if="props.place?.image">
         <div class="message-image-border">
-          <img :src="props.place.image" class="message-image">
+          <img :src="props.place?.image" class="message-image">
         </div>
       </div>
-      {{ props.place.text }}
+      {{ props.place?.text }}
     </div>
 
-    <div v-for="door in props.place.doors" v-bind:key="door.code" class="door-block">
+    <div v-for="door in props.place?.doors" v-bind:key="door.code" class="door-block">
       {{ door.name }} <span v-for="key in door.keys" class="key-block">
         <Icon class="lock-icon">
           <LockOutlined />
@@ -108,17 +112,17 @@ function onCreateKey(): Key {
       </span>
     </div>
 
-    <hr class="hr" v-if="props.place.applications.length" />
-    <div class="message-footer application-block" v-for="application in props.place.applications"
+    <hr class="hr" v-if="props.place?.applications?.length" />
+    <div class="message-footer application-block" v-for="application in props.place?.applications"
       v-bind:key="application.name">
       Приложение: {{ application.name }}
     </div>
 
     <p class="gray-block">
-      <span v-if="place.hidden">
+      <span v-if="props.place?.hidden">
         Скрытая точка
       </span>
-      <span v-for="key in place.keys" class="key-block">
+      <span v-for="key in props.place?.keys" class="key-block">
         <Icon class="lock-icon">
           <Key24Regular />
         </Icon> {{ key.name }}
@@ -126,6 +130,45 @@ function onCreateKey(): Key {
     </p>
   </div>
 
+  <div v-if="mode == 'show'">
+    <MessagePaper>
+      <div class="message-show-header font">
+        {{ place?.code }}: {{ place?.name }}
+        <span class="collapse-icon collapse-icon-up" @click="updateMode('show-collapse')"></span>
+      </div>
+      <hr class="show-hr" />
+      <div class="message-show-content font">
+        <div v-if="place?.image?.length">
+          <div class="message-image-border">
+            <img v-bind:src="place?.image" class="message-image" />
+          </div>
+        </div>
+        {{ place?.text }}
+      </div>
+      <hr class="show-hr" v-if="props.place?.doors?.length" />
+      <div v-for="door in props.place?.doors" :key="door.code" class="button-dialog font"
+        v-on:click="addAction!(door.code!)">
+        <div class="button-dialog-text">
+          {{ door.code }} {{ door.name }}
+        </div>
+      </div>
+      <hr class="show-hr" v-if="props.place?.applications?.length" />
+      <div class="message-show-footer font" v-for="application in props.place?.applications" :key="application.name">
+        Приложение: {{ application.name }}
+        <!-- <div class="application-label">{{ application.number }}</div> -->
+      </div>
+    </MessagePaper>
+  </div>
+
+  <div v-if="mode == 'show-collapse'">
+    <MessagePaper>
+      <div class="message-header font">
+        {{ place?.code }}: {{ place?.name }}
+        <span class="collapse-icon" @click="updateMode('show')"></span>
+      </div>
+    </MessagePaper>
+  </div>
+
   <div v-if="mode == 'edit'" class="place-block">
     <n-space vertical>
       <n-input-group>
@@ -356,9 +399,70 @@ function onCreateKey(): Key {
 }
 
 .message-footer {
+  padding-right: 50px;
+  font-weight: 400;
+  color: burlywood;
+  position: relative;
+}
+
+.message-show-header {
+  font-size: 20px;
+  padding-right: 50px;
+}
+
+.collapse-icon {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 45px;
+  height: 28px;
+  cursor: pointer;
+  background-image: url("@/assets/images/collapse.png");
+  background-size: cover;
+  background-position: center;
+}
+
+.collapse-icon-up {
+  transform: rotate(-180deg);
+}
+
+.show-hr {
+  margin: 10px 0;
+  border: dashed 1px;
+  border-color: black;
+}
+
+.font {
+  font-family: 'font_old_typer';
+  font-size: 18px;
+}
+
+.message-show-content {
+  font-weight: 500;
+  white-space: pre-wrap;
+}
+
+.message-show-footer {
   padding-right: 50px;
   font-weight: 400;
   color: var(--second-color);
   position: relative;
 }
+
+.button-dialog {
+  display: inline-block;
+  font-weight: 600;
+  border-radius: 5px;
+  font-size: 16px;
+  margin-top: 10px;
+  margin-right: 10px;
+  background-image: url("@/assets/images/belt.png");
+  background-size: cover;
+  color: #bfa07d;
+  cursor: pointer;
+}
+
+.button-dialog-text {
+  padding: 5px 12px;
+}
 </style>

src/components/TeamStoryPage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { getAuthClient } from '@/api/auth_client';
-import type { Story } from '@/api/generated/crabs/evening_detective_server';
+import type { Place, Story } from '@/api/generated/crabs/evening_detective_server';
 import HeaderMenu from '@/components/HeaderMenu.vue'
 import { NCard, NFlex, NInput, NModal, NSpace, NText, NUpload, NUploadDragger, NAlert, NTag, NButton } from 'naive-ui'
 import { useMessage } from 'naive-ui';
@@ -14,49 +14,66 @@ const route = useRoute()
 const teamId = route.params.id
 const password = route.query.password
 
-const story = ref<Story>({
-    places: undefined
+const story = ref<AdvancedStory>({
+    places: []
 })
 
 const code = ref('')
 
-async function getStory(id: number, password: string) {
+async function getStory() {
     const res = await client.GetTeamStory({
-        id: id,
-        password: password
+        id: Number(teamId),
+        password: password as string
     })
     if (res.error != '') {
         message.error(res.error!)
         return
     }
-    story.value = res.story!
+    story.value = {
+        places: res.story!.places?.map((item) => {
+            return {
+                place: item,
+                mode: 'show'
+            }
+        }) || []
+    }
 }
-getStory(Number(teamId), password as string)
+getStory()
 
-async function addAction(id: number, password: string) {
+async function addAction(newCode: string) {
     const res = await client.AddTeamAction({
-        id: id,
-        password: password,
-        code: code.value
+        id: Number(teamId),
+        password: password as string,
+        code: newCode
     })
     if (res.error != '') {
         message.error(res.error!)
         return
     }
-    await getStory(id, password)
+    await getStory()
     code.value = ''
 }
+
+type AdvancedStory = {
+    places: AdvancedPlace[];
+}
+
+type AdvancedPlace = {
+    place: Place;
+    mode: string;
+}
 </script>
 
 <template>
     <div class="center-block-custom-big">
         <div class="places-container">
-            <PlaceBlock :place="place" mode="show-editor" v-for="place in story.places" v-bind:key="place.code">
+            <PlaceBlock :place="advancedPlace.place" v-model:mode="advancedPlace.mode"
+                v-for="advancedPlace in story.places" v-bind:key="advancedPlace.place.code" :addAction="addAction">
             </PlaceBlock>
 
             <n-space vertical>
                 <n-input v-model:value="code" type="text" placeholder="Ы-1" />
-                <n-button @click="addAction(Number(teamId), password as string)" ghost>Поехали</n-button>
+                <n-button @click="addAction(code)" ghost>Поехали</n-button>
             </n-space>
         </div>
     </div>