ui enhacements and next-gen input item code (not implented)

src/components/drag.ts

@@ -0,0 +1,26 @@
+
+// When user clicks and holds inputItem.
+function onMouseDown (e: any) {
+    window.addEventListener('mousemove', onMouseMove, true);
+}
+
+// When user drags inputItem.
+function onMouseMove (e: any) {
+
+    const element = document.getElementById('inputItem')
+
+    if (element) {
+
+        const inputItemRect = element.getBoundingClientRect()
+        inputItemX.value = inputItemRect.left + e.movementX
+        inputItemY.value = inputItemRect.top + e.movementY
+
+    }
+    
+}
+
+// When user lets go of inputItem.
+function onMouseUp (e: any) {
+
+}
+

src/components/inputItem.vue

@@ -0,0 +1,133 @@
+<template>
+  <div id=inputItem 
+    :style="{ top: `${inputItemY}px`, left: `${inputItemX}px` }">
+    
+  </div>
+</template>
+
+<script lang="ts">
+
+import { defineComponent, onMounted, ref, onUnmounted } from "vue";
+
+export default defineComponent({
+  name: "InputItem",
+
+  setup() {
+
+    let inputItemX = ref(0)
+    let inputItemY = ref(0)
+
+    let xShort: object = {
+      distance: Number,
+      side: String
+    }
+
+    let percentX: number;
+    let percentY: number;
+
+    // Draggable on mousedown.
+    const mouseDown = (e: any) => {
+       window.addEventListener('mousemove', divMove, true);
+    }
+
+    // Update the positional refs.
+    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}`)
+      
+    }
+
+    // Called on mousemove event. Updates the inputItem cords when user is
+    // dragging it.
+    const divMove = (e: any) => {
+      const element = document.getElementById('inputItem')
+
+      if (element) {
+
+        const inputItemRect = element.getBoundingClientRect()
+        inputItemX.value = inputItemRect.left + e.movementX
+        inputItemY.value = inputItemRect.top + e.movementY
+
+      }
+
+    }
+
+    // Adjust position of inputItem on window resize.
+    // If inputItem is within 10% of corner, keep the distances from that
+    // corner fixed, else resize relative to percentages.
+    const handleResize = (e: any) => {
+
+      // Adjust X:
+      // Is X close to a vertical side?
+      // If so: position fixed
+      if (inputItemX.onSide) {
+
+        if (inputItemX.rightSide) {
+          inputItemX.value = window.innerWidth - xShort
+        } else {
+          inputItemX.value = xShort
+        }
+
+      // Else: position relative
+      } else {
+        inputItemX.value = window.innerWidth * percentX
+      }
+
+    // Initialize InputPosition.
+    inputItemX.value = 300
+    inputItemY.value = 300
+    percentX = 0.5
+    percentY = 0.5
+
+    onMounted(() => {
+
+      const element = document.getElementById('inputItem')
+
+      if (element) {
+        element.addEventListener('mousedown', mouseDown, false);
+      }
+
+      window.addEventListener('mouseup', mouseUp, false);
+      window.addEventListener('resize', handleResize, false)
+
+    });
+
+    return {
+      inputItemX,
+      inputItemY
+    }
+  }
+
+});
+
+</script>
+
+<style lang="scss" scoped>
+
+  #inputItem {
+    position: absolute;
+
+    width: 30px;
+    height: 30px;
+
+    border-radius: 19px;
+
+    z-index: 20;
+
+    top: 200px;
+    right: 0px;
+
+    border-style: solid;
+    border-width: 4px;
+    border-color: #C3C3C3;
+
+    background-color: white;
+
+  }
+
+</style>

src/components/messageItem.vue

@@ -5,6 +5,9 @@
     :key="message.id"
   >
 
+    <!-- Three types of messages: self (sf), friend (fr), and crimata (ai) -->
+    <!-- !denoted by the modifier attribute -->
+
     <!-- Includes bubble and context. -->
     <div class="messageBox" :id="`${message.modifier}MessageBox`">
 
@@ -13,19 +16,20 @@
         class="bubble"
         :id="`${message.modifier}Bubble`"
       >
-        {{ message.content }}
+        {{ message.content.text }}
       </div>
 
       <!-- message context -->
       <span class="context">
 
-        <!-- Render Crimata icon or initials. -->
-        <div v-if="message.avatar == 'crimata'" class="photo">
+        <!-- Render Crimata icon or friend's initials. -->
+        <div v-if="message.modifier == 'ai'" class="photo">
           <img src="@/assets/crimata.svg"/>
         </div>
 
-        <div v-else class="photo">
-          {{ message.avatar }}
+        <!-- Render Crimata icon or friend's initials. -->
+        <div v-if="message.modifier == 'fr'" class="photo">
+          {{ message.context[0] }}
         </div>
 
         {{ message.context }}
@@ -79,12 +83,28 @@
     align-items: flex-end;
   }
 
+  #frMessage {
+    align-items: flex-start;
+  }
+
+  .messageBox {
+    display: flex;
+    flex-direction: column;
+  }
+
   #aiMessageBox {
     margin-left: 20px;
+    align-items: flex-start;
   }
 
   #sfMessageBox {
     margin-right: 20px;
+    align-items: flex-end;
+  }
+
+  #frMessageBox {
+    margin-left: 20px;
+    align-items: flex-start;
   }
 
   .bubble {
@@ -110,6 +130,10 @@
     color: white;
   }
 
+  #frBubble {
+    background-color: white;
+  }
+
   .context {
     display: flex;
     align-items: center;
@@ -117,7 +141,6 @@
     font-family: "SF Compact Display";
     font-size: 12px;
     font-weight: bold;
-    margin-left: 7px;
     margin-top: 5px;
   }
 

src/components/resize.ts

@@ -0,0 +1,7 @@
+
+// Update inputItem position on window resize.
+// Gets called on window.resize event.
+function handleWindowResize (e: any) {
+
+}
+