knowyt/client/src/components/admin/AdminTileGameinfo.vue

<template>
  <AdminTile class="admin-tile-gameinfo" title="Game">
    <table>
      <tr>
        <td>Name:</td>
        <td>{{ gameinfo.name }}</td>
        <td><div class="admin-tile-gameinfo__edit-game-name" @click="editName()"></div></td>
      </tr>
      <tr>
        <td>Created:</td>
        <td colspan="2">{{ $formatter.date(gameinfo.created) }}</td>
      </tr>
      <tr>
        <td># Players:</td>
        <td colspan="2">{{ players.length }}</td>
      </tr>
      <tr>
        <td># Quotes played:</td>
        <td colspan="2">
          {{ gameinfo.numQuotesTotal - gameinfo.numQuotesLeft }} / {{ gameinfo.numQuotesTotal }}
        </td>
      </tr>
      <tr v-if="!showId">
        <td colspan="3" @click="showId=true">&nbsp;</td>
      </tr>
      <tr v-if="showId">
        <td colspan="3">{{ gameinfo.id }}</td>
      </tr>
    </table>
  </AdminTile>
</template>

<script>
export default {
  props: ['gameinfo', 'players'],
  data() {
    return {
      showId: false,
    }
  },
  methods: {
    async editName() {
      const name = window.prompt('new game name: ')
      if (name) {
        const g = this.$store.state.engine.user.game
        await this.$engine.setGameName({ g, name })
        await this.$engine.fetchGameInfo({ g })
      }
    },
  },
}
</script>

<style lang="scss">
.admin-tile-gameinfo {
  &__edit-game-name {
    cursor: pointer;
    &:hover {
      color: #a0a0a0;
    }
    &::after {
      content: '✎';
    }
  }
}
</style>