center renderer + add min build config

package.json

@@ -1,7 +1,12 @@
 {
   "name": "crimata-messenger",
+  "productName": "crimata-messenger",
+  "description": "Cross-platform messenger application built with electron, vue3, and TS.",
   "version": "0.1.0",
   "private": true,
+  "author": {
+    "name": "Enrique Hernandez"
+  },
   "scripts": {
     "dev": "yarn electron:serve",
     "serve": "vue-cli-service serve",

src/components/UI/UIDetails/messageRenderer.vue

@@ -5,12 +5,14 @@
     xmlns:xlink="http://www.w3.org/1999/xlink"
     :viewBox="scrollView"
   >
-    <g id="messageRenderer">
+    <g id="messageRenderer" transform="translate(0, 5)">
       <g
         v-for="(item, index) in renderArr"
         :key="index"
         class="messageList"
-        transform="translate(0, 0)"
+        transform="translate(0, 25)"
+        preserverAspectRatio="none"
+
       >
         <transition
           appear
@@ -65,3 +67,13 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="scss" scoped>
+svg {
+  height: 1%;
+  overflow: hidden;
+}
+#messageRenderer {
+  margin: 0;
+}
+</style>

src/composables/messageRenderer/useMessageRenderer.ts

@@ -14,7 +14,7 @@ export default function useMessageRenderer() {
     function animateMessage(el: SVGGElement): void {
         const transform = {
             initialTranslate: `translate(${messageOffset.x} ${messageOffset.y})`,
-            finalTranslate: `translate(${messageOffset.x} ${messageOffset.y + 5})`
+            finalTranslate: `translate(${messageOffset.x} ${messageOffset.y})`
         }
         shift ? shiftAnimate(el, transform, shiftValue, messageList) : stackAnimate(el, transform);
     }
@@ -29,11 +29,11 @@ export default function useMessageRenderer() {
     }
 
     function afterEnter(el: SVGGElement) {
-        const messagePadding = 10;
+        const messagePadding = 15;
 
         if (message) {
             messageOffset = calculateMessageOffsets(message);
-            shift = messageOffset.y > 450 ? true : false;
+            shift = messageOffset.y > 445 ? true : false;
         }
         if (shift) {
             shiftValue -= el.getBBox().height + messagePadding;

src/composables/messageRenderer/useOffsetCalculator.ts

@@ -2,9 +2,9 @@ import { ref } from "vue";
 export default function useOffsetCalculator() {
     const xOffset = ref(0);
     const yOffset = ref(0);
-    const firstChildMarginTop = 40;
+    const firstChildMarginTop = 0;
     let previousMessageHeight = 0;
-    const messagePadding = 10;
+    const messagePadding = 15;
 
     function setXoffset(message: HTMLElement): void {
         const computedQuery = window.getComputedStyle(message)

src/composables/messageRenderer/useRendererAnims.ts

@@ -37,6 +37,8 @@ export default function useRendererAnims() {
                 anime({
                     targets: el,
                     transform: transform.finalTranslate,
+                    easing: "easeInOutQuad",
+                    duration: 500,
                     offset: 1000
                 });
             }

src/composables/scroller/useScroller.ts

@@ -8,7 +8,7 @@ export default function useScroller({ targetId }: {targetId: string}) {
 
     const clampedScroll = computed(() => {
       if (targetHeight.value === 0) { return 0; }
-      topBound = -targetHeight.value + 440;
+      topBound = -targetHeight.value + 450;
       return Math.max(topBound, Math.min(scroll.value, 0)) as number;
     })
 

src/router/index.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
+import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from "vue-router";
 import HomeIndex from "../views/home/index.vue";
 
 const routes: Array<RouteRecordRaw> = [
@@ -10,7 +10,7 @@ const routes: Array<RouteRecordRaw> = [
 ];
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: process.env.IS_ELECTRON ? createWebHashHistory() : createWebHistory(process.env.BASE_URL),
   routes
 });
 

vue.config.js

@@ -21,7 +21,7 @@ module.exports = {
       builderOptions: {
         // TODO electron-builder config https://www.electron.build/configuration/configuration
         appId: "com.crimata.messenger",
-        name: "CrimataMessenger"
+        productName: "Crimata-Messenger"
       },
       preload: "src/preload.ts"
     }