<template>
  <div
    class="nodes"
    v-for="(nodes, index) in otherNodes.otherNodes"
    :key="index"
    :style="{
      backgroundColor: nodes.node_color,
    }"
  >
    <p
      class="readmode"
      :id="nodes.node_id"
      v-html="marked(nodes.node_text)"
    ></p>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState } from 'vuex'
import marked from 'marked'

export default {
  name: 'OtherNodes',

  computed: {
    ...mapState({
      otherNodes: (state) => state.otherNodes,
    }),
  },

  mounted() {
    this.$store.dispatch('getOthernodes')
    setTimeout(this.loadData, 500)
    setInterval(this.loadData, 5000)
  },

  methods: {
    loadData() {
      this.$store.dispatch('setOthernodes')
    },
    marked,
  },
}
</script>

<style>
h1 {
  margin: 0em;
  padding: 0em;
  font-size: 4.2em;
  font-family: houschka-rounded, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: black;
}

h2 {
  margin: 0em;
  padding: 0em;
  font-size: 3.2em;
  font-family: houschka-rounded, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: black;
}

h3 {
  margin: 0em;
  padding: 0em;
  font-size: 2.2em;
  font-family: houschka-rounded, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: black;
}

.nodes {
  width: 95%;
  background-color: rgb(155, 194, 216);
  margin-top: 1em;
  margin-left: 0.5em;
}
img {
  width: 45%;
}
</style>