Play und Pause sollten jetzt immer funktionieren. Ich habe auch die...

Play und Pause sollten jetzt immer funktionieren. Ich habe auch die AnimationData als Variable gespeichert, um DRY-Methoden zu folgen. Ich habe auch die andere Lottie-Datei (links oder rechts) aktualisiert, wenn die andere aktualisiert wird, so dass die Eingabefelder mit den beiden Lotties immer konsistent sind.

src/App.vue

@@ -9,21 +9,24 @@ const nachname = ref("");
 const funktionZeileEins = ref("");
 const funktionZeileZwei = ref("");
 const BBEcke = ref("");
-let playLottieStatus = ref(false);
+let playLottieStatus = ref(true);
 let pauseLottieStatus = ref(false);
 let falseLoopStatus = ref(false);
 
 function playLottie(data: boolean) {
   playLottieStatus.value = data;
+  console.log( "play status shows:" + playLottieStatus.value);
+  falseLoopStatus.value = false;
 }
 
 function pauseLottie(data: boolean) {
   pauseLottieStatus.value = data;
+  console.log( "pause shows:" + pauseLottieStatus.value);
 }
 
 function falseStatusLottieLoop(data: boolean) {
   falseLoopStatus.value = data;
-  console.log("stuck status = " + falseLoopStatus.value)
+  console.log("stuck status = " + falseLoopStatus.value);
 }
 
 </script>

src/components/Form.vue

@@ -30,7 +30,7 @@ watch(
   () => {
     if (props.falseLoopStatus == true) {
       console.log("we gotta false loop!")
-  startAnimation();
+      startAnimation()
     }
   });
 
@@ -179,6 +179,7 @@ function download(content: string, fileName: string, contentType: string) {
   color: #266ca3;
   border: 1px solid #266ca3;
 }
+
 .inputField {
   width: 98%;
 }

src/components/Lottie.vue

 <script setup>
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, nextTick } from "vue";
 import { LottieAnimation } from "lottie-web-vue";
 import AnimationDataJSON from "../assets/Lottiefile_Bauchbinde_Beispiel.json";
 import AnimationRechtsBB from "../assets/bbrechts_v2.json";
@@ -8,10 +8,11 @@ import AnimationLinksBB from "../assets/bblinks_v2.json";
 
 const emit = defineEmits(["falseStatusLottieLoop"]);
 
-let anim = ref();
+let anim = ref(null);
 let BBUnselected = true;
 let animationData = AnimationDataJSON;
 let showAnimation = false;
+const lottie = ref(0);
 
 const props = defineProps({
   vorname: {
@@ -48,74 +49,71 @@ function breakLottieFalseLoop() {
   emit("falseStatusLottieLoop", true)
 }
 
-
 watch(
   () => props.BBEcke,
-  () => {
-    console.log(props.BBEcke);
+  async () => {
     if (props.BBEcke === "links") {
-      animationData = AnimationLinksBB
+      animationData = AnimationLinksBB;
       BBUnselected = false;
       showAnimation = true;
-      setMaxMustermann();
-      console.log("play status = " + props.playLottieStatus)
-      console.log("pause status = " + props.pauseLottieStatus)
+      lottie.value++;
+      await nextTick();
       if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
-        console.log("breaking out!")
         breakLottieFalseLoop();
       }
     }
     if (props.BBEcke === "rechts") {
-      animationData = AnimationRechtsBB
+      animationData = AnimationRechtsBB;
       BBUnselected = false;
       showAnimation = true;
-      setMaxMustermann();
-      console.log("play status = " + props.playLottieStatus)
-      console.log("pause status = " + props.pauseLottieStatus)
+      lottie.value++;
+      await nextTick();
       if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
-        console.log("breaking out!")
         breakLottieFalseLoop();
       }
     }
   }
 );
-
 watch(
   () => props.playLottieStatus,
   () => {
     if (props.playLottieStatus) {
       anim.value.play();
-    } else {
-      anim.value.pause();
     }
   }
 );
-
 watch(
   () => props.pauseLottieStatus,
   () => {
-    
     if (props.pauseLottieStatus) {
       anim.value.pause();
-    } else {
-      anim.value.play();
     }
   }
 );
 
-const lottie = ref(0);
 
 // Added array.filter to improve adaptability to different lottie files
 
 watch(
   () => props.vorname,
-  () => {
+  async () => {
     animationData.layers.filter((layer) => {
       return layer.nm === "VORNAME";
     })[0].t.d.k[0].s.t = props.vorname.toUpperCase();
+
+    if (props.BBEcke == "links"){
+      AnimationRechtsBB.layers.filter((layer) => {
+      return layer.nm === "VORNAME";
+    })[0].t.d.k[0].s.t = props.vorname.toUpperCase();
+    } else if (props.BBEcke == "rechts") {
+      AnimationLinksBB.layers.filter((layer) => {
+      return layer.nm === "VORNAME";
+    })[0].t.d.k[0].s.t = props.vorname.toUpperCase();
+    }
+
     lottie.value++;
+    await nextTick();
     if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
-        console.log("breaking out!")
       breakLottieFalseLoop();
     }
   }
@@ -123,13 +121,24 @@ watch(
 
 watch(
   () => props.nachname,
-  () => {
+  async () => {
     animationData.layers.filter((layer) => {
       return layer.nm === "NACHNAME";
     })[0].t.d.k[0].s.t = props.nachname.toUpperCase();
+
+    if (props.BBEcke == "links"){
+      AnimationRechtsBB.layers.filter((layer) => {
+      return layer.nm === "NACHNAME";
+    })[0].t.d.k[0].s.t = props.nachname.toUpperCase();
+    } else if (props.BBEcke == "rechts") {
+      AnimationLinksBB.layers.filter((layer) => {
+      return layer.nm === "NACHNAME";
+    })[0].t.d.k[0].s.t = props.nachname.toUpperCase();
+    }
+
     lottie.value++;
+    await nextTick();
     if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
-        console.log("breaking out!")
       breakLottieFalseLoop();
     }
   }
@@ -137,13 +146,23 @@ watch(
 
 watch(
   () => props.funktionZeileEins,
-  () => {
+  async () => {
     animationData.layers.filter((layer) => {
       return layer.nm === "FUNKTION1";
     })[0].t.d.k[0].s.t = props.funktionZeileEins;
+    if (props.BBEcke == "links")
+    {
+      AnimationRechtsBB.layers.filter((layer) => {
+      return layer.nm === "FUNKTION1";
+    })[0].t.d.k[0].s.t = props.funktionZeileEins;
+    } else if (props.BBEcke == "rechts") {
+      AnimationLinksBB.layers.filter((layer) => {
+      return layer.nm === "FUNKTION1";
+    })[0].t.d.k[0].s.t = props.funktionZeileEins;
+    }
     lottie.value++;
+    await nextTick();
     if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
-        console.log("breaking out!")
       breakLottieFalseLoop();
     }
   }
@@ -151,36 +170,53 @@ watch(
 
 watch(
   () => props.funktionZeileZwei,
-  () => {
+  async () => {
     animationData.layers.filter((layer) => {
       return layer.nm === "FUNKTION2";
     })[0].t.d.k[0].s.t = props.funktionZeileZwei;
+
+    if (props.BBEcke == "links")
+    {
+      AnimationRechtsBB.layers.filter((layer) => {
+      return layer.nm === "FUNKTION2";
+    })[0].t.d.k[0].s.t = props.funktionZeileZwei;
+    } else if (props.BBEcke == "rechts") {
+      AnimationLinksBB.layers.filter((layer) => {
+      return layer.nm === "FUNKTION2";
+    })[0].t.d.k[0].s.t = props.funktionZeileZwei;
+    }
+
     lottie.value++;
+    await nextTick();
     if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
-        console.log("breaking out!")
       breakLottieFalseLoop();
     }
   }
 );
 
 function setMaxMustermann() {
+  animationData = AnimationRechtsBB;
+  animationData.layers[1].t.d.k[0].s.t = "MAX";
+  animationData.layers[3].t.d.k[0].s.t = "MUSTERMANN";
+  animationData.layers[5].t.d.k[0].s.t = "Testperson";
+  animationData.layers[7].t.d.k[0].s.t = "";
+  animationData = AnimationLinksBB;
   animationData.layers[1].t.d.k[0].s.t = "MAX";
   animationData.layers[3].t.d.k[0].s.t = "MUSTERMANN";
   animationData.layers[5].t.d.k[0].s.t = "Testperson";
   animationData.layers[7].t.d.k[0].s.t = "";
+
+}
+
+function updateValues () {
+  // animationData.layers[1].t.d.k[0].s.t = props.vorname;
+  // animationData.layers[3].t.d.k[0].s.t = props.nachname;
+  // animationData.layers[5].t.d.k[0].s.t = props.funktionZeileEins;
+  // animationData.layers[7].t.d.k[0].s.t = props.funktionZeileZwei;
 }
 
 onMounted(() => {
-  // Added this temporarily to improve initial animation output
-  // animationData.layers[1].t.d.k[0].s.t = "MAX";
-  // animationData.layers[3].t.d.k[0].s.t = "MUSTERMANN";
-  // animationData.layers[5].t.d.k[0].s.t = "Testperson";
-  // animationData.layers[7].t.d.k[0].s.t = "";
-
-  setTimeout(() => {
-    // console.log(anim.value.goToAndPlay(150, true));
-    anim.value;
-  }, 500);
+  setMaxMustermann();
 });
 </script>
 <template>
@@ -188,8 +224,8 @@ onMounted(() => {
     Bitte eine Position für<br />
     die Bauchbinde auswählen
   </h2>
-  <div class="animation" v-if="showAnimation">
-    <LottieAnimation :key="lottie" ref="anim" :animation-data="animationData" :loop="true" :auto-play="true" :speed="1"
+  <div class="animation" v-if="showAnimation" :key="lottie">
+    <LottieAnimation ref="anim" :animation-data="animationData" :loop="true" :auto-play="true" :speed="1"
       @loopComplete="loopComplete" @complete="complete" @enterFrame="enterFrame" @segmentStart="segmentStart"
       @stopped="stopped" />
   </div>

tsconfig.json

@@ -3,9 +3,14 @@
     "target": "ES2020",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "skipLibCheck": true,
-
+    "noImplicitAny": false,
+    "allowJs": true,
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
@@ -13,13 +18,20 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve",
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
 }
\ No newline at end of file