switch to typescript

public/views/Replay.vue.js

@@ -1,144 +0,0 @@
-"use strict"
-
-import Scores from './../components/Scores.vue.js'
-import PuzzleStatus from './../components/PuzzleStatus.vue.js'
-import SettingsOverlay from './../components/SettingsOverlay.vue.js'
-import PreviewOverlay from './../components/PreviewOverlay.vue.js'
-import HelpOverlay from './../components/HelpOverlay.vue.js'
-
-import { main, MODE_REPLAY } from './../game.js'
-
-export default {
-  name: 'replay',
-  components: {
-    PuzzleStatus,
-    Scores,
-    SettingsOverlay,
-    PreviewOverlay,
-    HelpOverlay,
-  },
-  template: `<div id="replay">
-    <settings-overlay v-show="overlay === 'settings'" @bgclick="toggle('settings', true)" v-model="g.player" />
-    <preview-overlay v-show="overlay === 'preview'" @bgclick="toggle('preview', false)" :img="g.previewImageUrl" />
-    <help-overlay v-show="overlay === 'help'" @bgclick="toggle('help', true)" />
-
-    <puzzle-status
-      :finished="finished"
-      :duration="duration"
-      :piecesDone="piecesDone"
-      :piecesTotal="piecesTotal"
-    >
-      <div>
-        <div>{{replayText}}</div>
-        <button class="btn" @click="g.replayOnSpeedUp()">⏫</button>
-        <button class="btn" @click="g.replayOnSpeedDown()">⏬</button>
-        <button class="btn" @click="g.replayOnPauseToggle()">⏸️</button>
-      </div>
-    </puzzle-status>
-
-    <div class="menu">
-      <div class="tabs">
-        <router-link class="opener" :to="{name: 'index'}" target="_blank">🧩 Puzzles</router-link>
-        <div class="opener" @click="toggle('preview', false)">🖼️ Preview</div>
-        <div class="opener" @click="toggle('settings', true)">🛠️ Settings</div>
-        <div class="opener" @click="toggle('help', true)">ℹ️ Help</div>
-      </div>
-    </div>
-
-    <scores :activePlayers="activePlayers" :idlePlayers="idlePlayers" />
-  </div>`,
-  data() {
-    return {
-      activePlayers: [],
-      idlePlayers: [],
-
-      finished: false,
-      duration: 0,
-      piecesDone: 0,
-      piecesTotal: 0,
-
-      overlay: null,
-
-      g: {
-        player: {
-          background: '',
-          color: '',
-          name: '',
-        },
-        previewImageUrl: '',
-        setHotkeys: () => {},
-        onBgChange: () => {},
-        onColorChange: () => {},
-        onNameChange: () => {},
-        replayOnSpeedUp: () => {},
-        replayOnSpeedDown: () => {},
-        replayOnPauseToggle: () => {},
-        disconnect: () => {},
-      },
-
-      replay: {
-        speed: 1,
-        paused: false,
-      },
-    }
-  },
-  async mounted() {
-    if (!this.$route.params.id) {
-      return
-    }
-    this.$watch(() => this.g.player.background, (value) => {
-      this.g.onBgChange(value)
-    })
-    this.$watch(() => this.g.player.color, (value) => {
-      this.g.onColorChange(value)
-    })
-    this.$watch(() => this.g.player.name, (value) => {
-      this.g.onNameChange(value)
-    })
-    this.g = await main(
-      this.$route.params.id,
-      this.$clientId,
-      this.$config.WS_ADDRESS,
-      MODE_REPLAY,
-      this.$el,
-      {
-        setActivePlayers: (v) => { this.activePlayers = v },
-        setIdlePlayers: (v) => { this.idlePlayers = v },
-        setFinished: (v) => { this.finished = v },
-        setDuration: (v) => { this.duration = v },
-        setPiecesDone: (v) => { this.piecesDone = v },
-        setPiecesTotal: (v) => { this.piecesTotal = v },
-        togglePreview: () => { this.toggle('preview', false) },
-        setConnectionState: (v) => { this.connectionState = v },
-        setReplaySpeed: (v) => { this.replay.speed = v },
-        setReplayPaused: (v) => { this.replay.paused = v },
-      }
-    )
-  },
-  unmounted () {
-    this.g.disconnect()
-  },
-  computed: {
-    replayText () {
-      return 'Replay-Speed: ' +
-        (this.replay.speed + 'x') +
-        (this.replay.paused ? ' Paused' : '')
-    },
-  },
-  methods: {
-    toggle(overlay, affectsHotkeys) {
-      if (this.overlay === null) {
-        this.overlay = overlay
-        if (affectsHotkeys) {
-          this.g.setHotkeys(false)
-        }
-      } else {
-        // could check if overlay was the provided one
-        this.overlay = null
-        if (affectsHotkeys) {
-          this.g.setHotkeys(true)
-        }
-      }
-    },
-  },
-}