appear animation v1

src/components/inputItem.vue

@@ -1,10 +1,15 @@
 <template>
+
   <div id=inputItem
     class="input-item playing"
-    :style="{ top: `${elementY}px`, left: `${elementX}px` }">
+    :style="{ top: `${elementY}px`, left: `${elementX}px` }"
+  >
+
     <span class="play"></span>
     <span class="pause"></span>
+
   </div>
+  
 </template>
 
 <script lang="ts">

src/components/messageItem.vue

@@ -42,16 +42,21 @@
 </template>
 
 <script lang='ts'>
+
  import {defineComponent} from 'vue';
+
  export default defineComponent({
   name: "MessageItem",
+
   props: {
       message: {
         type: Object,
         required: true
       } 
   }
+
  })
+
 </script>
 
 <style lang="scss" scoped>
@@ -119,6 +124,10 @@
     padding: 10px;
 
     border-radius: 10px;
+
+    // Animate on render.
+    animation-name: appear;
+    animation-duration: 0.25s;
   }
 
   #aiBubble {
@@ -160,4 +169,13 @@
     border-radius: 15px;
   }
 
+  @keyframes appear {
+    from {
+      transform: scale(0.3);
+    }
+    to {
+      transform: scale(1);
+    }
+  }
+
 </style>

src/test.vue

@@ -1,66 +0,0 @@
-    // Snap to the nearest window border and update percentages. Called when
-    // user stops dragging the inputItem.
-    const mouseUp = (e: any) => {
-      window.removeEventListener('mousemove', divMove, true);
-
-      const winW = window.innerWidth
-      const winH = window.innerHeight
-      console.log(`Window dimensions: W${winW} H${winH}`)
-
-      // First, are we changing inputItemX or inputItemY?
-
-      let xShort = winW - inputItemX.value
-      if (xShort > winW / 2) {
-        xShort = inputItemX.value
-      }
-
-      let yShort = winH - inputItemY.value
-      if (yShort > winH / 2) {
-        yShort = inputItemY.value
-      }
-
-      const shortest = (xShort < yShort) ? "inputItemX" : "inputItemY"
-
-      // Then, are we tranlating it positive or negative?
-      // To answer this, we see which side is it closer to.
-      // We also update percentages to aid in window resizing (handleResize).
-
-      if (shortest == "inputItemX") {
-        if (inputItemX.value < winW / 2) {
-          inputItemX.value = 0
-          percentX = 0.0
-        } else {
-          inputItemX.value = winW - 38
-          percentX = 1.0
-        }
-        percentY = inputItemY.value / winH
-      } else {
-        if (inputItemY.value < winH / 2) {
-          inputItemY.value = 0
-          percentY = 0.0
-        } else {
-          inputItemY.value = winH - 38
-          percentY = 1.0
-        }
-        percentX = inputItemX.value / winW
-
-      }
-      console.log(`Percents updated: iX: ${percentX} iY: ${percentY}`)
-    }
-
-
-
-
-    if (percentX == 1.0) {
-        inputItemX.value = window.innerWidth * percentX - 38
-      } else {
-        inputItemX.value = window.innerWidth * percentX
-      }
-
-      if (percentY == 1.0) {
-        inputItemY.value = window.innerHeight * percentY - 38
-      } else {
-        inputItemY.value = window.innerHeight * percentY
-      }
-
-    }

src/views/messenger.vue

@@ -32,11 +32,18 @@ export default defineComponent({
     // List of messages in the view.
     // Oldest message first.
     const messages: Message[] = reactive([]);
+    const messages_ref: any = {}
 
     // Render a message.
+    // Called on "enter" instead of on "recv message"
     const render = (message: Message) => {
       messages.push(message);
-      console.log(`Pushing: ${message.modifier}: ${message.content.text} ${message.context}`);
+      messages_ref[message.id] = message;
+    }
+
+    // Annotate/update an existing message.
+    const annotate = (message: Message) => {
+      1+1
     }
 
     onMounted(() => {
@@ -68,7 +75,6 @@ export default defineComponent({
     position: fixed;
 
     width: 100vw;
-    min-height: 100vh;
 
     overflow-y: scroll;