nexus-timers/src/components/Objective.vue

<!--
    Copyright © 2021 Adrien Agez <adrien.agez@pm.me>

    This file is part of Nexus Timers.

    Nexus Timers is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Nexus Timers is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with Nexus Timers.  If not, see <https://www.gnu.org/licenses/>.
-->

<template>

  <div
    class="objective"
    @click="clearObjective"
    v-longclick="forceClearObjective">
    <div>
      {{ objective.name }}
      <span v-if="objective.position"> ({{ objective.position }})</span>
    </div>

    <div>
      <Timer
        ref="timer"
        class="objective-timer"
        :initialTime="objective.initialSpawnTime"
        />
    </div>
  </div>
</template>

<style lang="sass" scoped>
  .objective
    width: 100%
    text-align: center

    &-timer
      font-size: 2rem
</style>

<script>
  import Timer from '@/components/Timer'
  export default {
    name: 'Objective',
    props: {
      objective: Object
    },
    data () {
      return {
      }
    },
    methods: {
      clearObjective: function () {
        if (this.$refs.timer.currentTime === 0) {
          this.resetTimer()
        }
      },
      forceClearObjective: function () {
        this.resetTimer()
      },
      resetTimer: function () {
        this.$refs.timer.setTime(this.objective.respawnTime)
        this.$refs.timer.startTimer()
      }
    },
    components: {
      Timer
    }
  }
</script>