Resolve "Zmena highlight pre zdna"

Closes #14 (closed)

src/components/core/visualisation/highlight-zdna.vue

+<template>
+    <div class="highlight">
+      <span v-for="part of sequenceHighlight" :class="part.styleClass">{{ part.nuclide }}</span>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    props: ['sequence', 'mask'],
+    data() {
+      return {}
+    },
+    computed: {
+      sequenceHighlight() {
+        const styleClass = {
+          'GC': 'gc', // Definícia štýlu pre sekvenciu "GC"
+          'default': 'other', // Predvolený štýl pre ostatné nukleotidy
+        }
+  
+        let ret = []
+        let sequence = this.sequence.toUpperCase()
+  
+        for (var i = 0; i < sequence.length; i++) {
+          if (sequence.substring(i, i + 2) === "GC") {
+            ret.push({
+              styleClass: styleClass['GC'] + (this.mask && this.mask[i] === 'W' ? ' mutation' : ''),
+              nuclide: "G",
+            })
+            ret.push({
+              styleClass: styleClass['GC'] + (this.mask && this.mask[i + 1] === 'W' ? ' mutation' : ''),
+              nuclide: "C",
+            })
+            i++; // Preskočíme ďalší znak, keďže sme už zvýraznili "GC"
+          } else {
+            ret.push({
+              styleClass: styleClass['default'] + (this.mask && this.mask[i] === 'W' ? ' mutation' : ''),
+              nuclide: sequence[i],
+            })
+          }
+        }
+        return ret
+      },
+    },
+  }
+  </script>
+  
+  
+  <style scoped>
+  .gc {
+    /* Definujte štýly pre zvýraznenie "GC" */
+    color: #dd0000; /* Príklad: zelená farba pre "GC" */
+  }
+  
+  
+  .other {
+    color: #0000dd;
+  }
+  
+  .highlight {
+    display: block;
+    word-wrap: break-word;
+    white-space: normal;
+    padding: 0;
+    margin: 0;
+    line-height: 1;
+    font-size: 1.3rem;
+  }
+  </style>
+  
+  
\ No newline at end of file