puzzle/src/frontend/components/NewGameDialog.vue

<template>
  <div>
    <h1>New game</h1>
    <table>
      <tr>
        <td><label>Pieces: </label></td>
        <td><input type="text" v-model="tiles" /></td>
      </tr>
      <tr>
        <td><label>Scoring: </label></td>
        <td>
          <label><input type="radio" v-model="scoreMode" value="1" /> Any (Score when pieces are connected to each other or on final location)</label>
          <br />
          <label><input type="radio" v-model="scoreMode" value="0" /> Final (Score when pieces are put to their final location)</label>
        </td>
      </tr>
      <tr>
        <td><label>Image: </label></td>
        <td>
          <span v-if="image">
            <img :src="image.url" style="width: 150px;" />
            or
            <upload @uploaded="mediaImgUploaded($event)" accept="image/*" label="Upload an image" />
          </span>
          <span v-else>
            <upload @uploaded="mediaImgUploaded($event)" accept="image/*" label="Upload an image" />
            (or select from below)
          </span>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <button class="btn" :disabled="!canStartNewGame" @click="onNewGameClick">Start new game</button>
        </td>
      </tr>
    </table>

    <h1>Image lib</h1>
    <div>
      <image-teaser v-for="(i,idx) in images" :image="i" @click="image = i" :key="idx" />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

import { ScoreMode } from './../../common/GameCommon'
import Upload from './../components/Upload.vue'
import ImageTeaser from './../components/ImageTeaser.vue'

export default defineComponent({
  name: 'new-game-dialog',
  components: {
    Upload,
    ImageTeaser,
  },
  props: {
    images: Array,
  },
  emits: {
    newGame: null,
  },
  data() {
    return {
      tiles: 1000,
      image: '',
      scoreMode: ScoreMode.ANY,
    }
  },
  methods: {
    // TODO: ts type UploadedImage
    mediaImgUploaded(data: any) {
      this.image = data.image
    },
    canStartNewGame () {
      if (!this.tilesInt || !this.image || ![0, 1].includes(this.scoreModeInt)) {
        return false
      }
      return true
    },
    onNewGameClick() {
      this.$emit('newGame', {
        tiles: this.tilesInt,
        image: this.image,
        scoreMode: this.scoreModeInt,
      })
    },
  },
  computed: {
    scoreModeInt (): number {
      return parseInt(`${this.scoreMode}`, 10)
    },
    tilesInt (): number {
      return parseInt(`${this.tiles}`, 10)
    },
  },
})
</script>