bugfixes

src/components/Pulse.vue

@@ -0,0 +1,55 @@
+<template>
+  <span ref="element">
+    <slot/>
+  </span>
+</template>
+
+<script setup>
+import {ref, watchEffect} from "vue";
+
+const props = defineProps(['touch', 'color'])
+
+const element = ref(null)
+let lastValue = props.touch
+
+function pulse() {
+  if (props.touch === lastValue) return
+  console.log(`value changed from ${lastValue} to ${props.touch}`)
+  lastValue = props.touch
+  const e = element.value;
+  console.log('element', e)
+  if (!e.classList.contains('pulse')) {
+    // add class for the first time
+    console.log('first pulse')
+    e.classList.add('pulse')
+  }
+  else {
+    // restart
+    console.log('reset pulse')
+    e.getAnimations().forEach((a) => {
+      console.log('animation', a)
+      a.cancel();
+      a.play();
+    })
+  }
+}
+
+watchEffect(pulse)
+</script>
+
+<style scoped lang="scss">
+.pulse {
+  animation: forwards;
+  animation-duration: 1s;
+  animation-name: pulse;
+}
+
+@keyframes pulse {
+  0% {
+    background-color: gray;
+  }
+  100% {
+    background-color: white;
+  }
+}
+</style>