add icons and scroll

src/components/TeamStoryPage.vue

@@ -4,7 +4,7 @@ import type { Place, Story } from '@/api/generated/crabs/evening_detective_serve
 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';
-import { ref } from 'vue';
+import { nextTick, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import PlaceBlock from '@/components/PlaceBlock.vue'
 import GameInputForm from '@/components/GameInputForm.vue'
@@ -16,12 +16,23 @@ const route = useRoute()
 const teamId = route.params.id
 const password = route.query.password
 
+const newPlacesCount = ref(0)
+
+const scrollContainer = ref<HTMLDivElement | null>();
+
 const story = ref<AdvancedStory>({
     places: []
 })
 
 const code = ref('')
 
+const isAtBottom = () => {
+    const container = scrollContainer.value;
+    if (!container) return false;
+
+    return container.scrollHeight - container.scrollTop - container.clientHeight < 1;
+};
+
 async function getStory() {
     const res = await client.GetTeamStory({
         id: Number(teamId),
@@ -31,6 +42,15 @@ async function getStory() {
         message.error(res.error!)
         return
     }
+
+    const wasAtBottom = isAtBottom();
+
+    if (wasAtBottom) {
+        newPlacesCount.value = 0
+    }
+
+    const oldCount = story.value.places.length
+
     story.value = {
         places: res.story!.places?.map((item) => {
             return {
@@ -39,6 +59,19 @@ async function getStory() {
             }
         }) || []
     }
+
+    const newCount = story.value.places.length
+
+    if (newCount > oldCount && oldCount != 0) {
+        newPlacesCount.value += newCount - oldCount
+    }
+
+    await nextTick();
+    if (wasAtBottom && oldCount != 0) {
+        const container = scrollContainer.value;
+        if (!container) return false;
+        container.scrollTop = container.scrollHeight;
+    }
 }
 getStory()
 
@@ -54,6 +87,9 @@ async function addAction(newCode: string) {
     }
     await getStory()
     code.value = ''
+
+    await nextTick();
+    newPlacesCount.value = 0
 }
 
 type AdvancedStory = {
@@ -68,13 +104,14 @@ type AdvancedPlace = {
 useSimplePolling(() => {
     getStory()
 }, 2000);
+
 </script>
 
 <template>
-    <div class="center-block-custom bottom-margin">
-
+    <div class="center-block-custom bottom-margin smooth-scroll" ref="scrollContainer">
         <div class="width700">
-            <GameInputForm :addAction="addAction"></GameInputForm>
+            <GameInputForm :addAction="addAction" :allPlacesCount="story.places.length"
+                :newPlacesCount="newPlacesCount"></GameInputForm>
 
             <PlaceBlock :place="advancedPlace.place" v-model:mode="advancedPlace.mode"
                 v-for="advancedPlace in story.places" v-bind:key="advancedPlace.place.code" :addAction="addAction">
@@ -90,6 +127,10 @@ useSimplePolling(() => {
     height: calc(100dvh - 70px - 76px);
 }
 
+.smooth-scroll {
+    scroll-behavior: smooth;
+}
+
 @media (width >=1024px) {
     .bottom-margin {
         height: calc(100dvh - 70px - 76px);