<div id="mount"></div>

.container {
  max-width: 758px;
  margin: 0 auto;
  user-select: none;
}

.score {
  background-color: black;
  color: white;
  font-size: 22px;
  padding: 15px;
  text-align: center;
  font-family: 'Roboto'
}

.green {
  color: green;
}

.red {
  color: red;
}

const topo = HaikuVueAdapter(HaikuComponent_robertodip_topo)

new Vue({
  el: '#mount',
  template: `
  <div class="container">
    <div class="score">
      SCORE: <span v-bind:class="scoreColor">{{score}}</span>
    </div>
    <topo v-on:haikuComponentDidMount="updateScore"></topo>
  </div>
`,
  components: {
    topo,
  },
  data: {
    score: 0
  },
  computed: {
     scoreColor: function () {
       return this.score >= 0 ? 'green' : 'red'
     }
  },
  methods: {
    updateScore: function (component) {
      component.on('scored', (score) => {
        this.score = score
      })
    }
  }
})