<!-- component template -->
<template>
  <div data-name="game4_phase2" class="page">

    <div class="navbar">
      <div class="navbar-inner">
        <div class="title">{{ $root.appdict.game4_title }}</div>
        <div class="right"><i class="fas fa-wifi" style="margin-right: 0.5rem"></i> http://{{publicurl}}</div>
      </div>
    </div>

    <div class="page-content">

      <div class="block-title">{{ $root.appdict.game4_title }}</div>
      <div class="block">

        <div class="row">
          <div class="col-40">
            {{ $root.appdict.game4_info }}
          </div>
          <div class="col-60">
            {{ screenshot }}
          </div>

        </div>

      </div>

      <div class="block block-strong">
        <div class="row">
          <div class="col-55">
            <span id="timer-output"></span>
          </div>
          <div class="col-30">
            <button @click="toggleTimer" id="toggleTimer-button"
              class="button button-large button-outline">{{ $root.appdict.label_pausetimer }}</button>
          </div>
          <div class="col-15">
            <button @click="skipToNext" class="button button-large button-outline">{{ $root.appdict.btn_skip }}</button>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>


<style>

</style>


<script>
  // script must return component object
  return {
    data: function () {
      return {
        publicurl: ui.publicUrl,
        screenshot: ui.tmp.screenShot
      }
    },
    methods: {
      toggleTimer: function () {
        ui.timerPause = !ui.timerPause
        if (ui.timerPause) {
          $$("#toggleTimer-button").html(`<i class="fas fa-play-circle"></i> ${framework.data.appdict.label_resumetimer}`)
        } else {
          $$("#toggleTimer-button").html(`<i class="fas fa-pause-circle"></i> ${framework.data.appdict.label_pausetimer}`)
        }
      },
      skipToNext: function () {
        if (ui.triggerEnd) {
          ui.fn.triggerEndgame()
        } else {
          ui.fn.nextPhase()
        }
      }
    },
    on: {
      pageBeforeIn: function () {


      },
      pageAfterIn: function () {

        ui.timer = 20
        ui.timerPause = false

        ui.lastUpdate = Date.now()
        ui.timer += 0.9

        function updatePage() {
          let timerVal = ui.fn.timerUpdate()
          $$("#timer-output").html(`${framework.data.appdict.label_phasetimer} <strong>${timerVal}</strong>`)
          if (timerVal === 0 && !ui.timerPause) {

            if (ui.triggerEnd) {
              ui.fn.triggerEndgame()
            } else {
              ui.fn.nextPhase()
            }

          }
        }

        updatePage()
        ipcRenderer.send('ipcF2M_setGameState', 'Phase2')

        // This can be true if trigger end is set in Phase 1 by teacher!
        if (ui.triggerEnd) {
          ipcRenderer.send('ipcF2M_notifyEndgameTriggered_pushToClients')
          ipcRenderer.send('ipcF2M_forceEnd_pushToClients')
        } else {
          ipcRenderer.send('ipcF2M_updateNodeLists_pushToClients')
          ipcRenderer.send('ipcF2M_tallyMoveVotes_pushToClients')
        }

        ui.update = setInterval(updatePage, 500)
        ui.shotUpdate = setInterval(ui.fn.updateScreenShot, 5000)
      },
    }
  }
</script>