<template>
  <div class="connectionMarker" :class="{isConnected: connected}" >⬤</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
export default {
  computed: {
    ...mapGetters(['connected'])
  },

  methods: {
    ...mapActions(['ping'])
  },

  mounted: function() {
    this.ping()
    window.setInterval(() => {
      this.ping();
    }, 5000);
  }
};
</script>

<style scoped>
.connectionMarker{
  --ledColor: darkred;
  color: var(--ledColor);
  text-shadow: 0px 0px 2px  var(--ledColor), 0px 0px 4px  var(--ledColor), 0px 0px 8px  var(--ledColor), 0px 0px 16px  var(--ledColor);
}
.isConnected{
  --ledColor: greenyellow
}
</style>