codenames/src/components/Card.vue

<template>
  <div class="card" :class="{ 'reverse': isBack, 'captain': isSelect }" @click="onReverse">
    <div class="front">{{card.text}}</div>
    <div class="back" :style="backColor">{{card.text}}</div>
  </div>
</template>

<script>
import http from '@/http'

export default {
  name: 'card',
  props: {
    card: {
      type: Object,
      default: () => ({
        text: '',
        status: 0,
        group: 0
      })
    },
    index: {
      type: Number,
      default: 0
    },
    isCaptain: {
      type: Boolean,
      default: false
    },
    winner: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // isBack: false
    }
  },
  computed: {
    backColor() {
      const group = this.card.group
      let color = ''
      switch (group) {
        case 0:
          color = '#888'
          break
        case 1:
          color = '#409EFF'
          break
        case 2:
          color = 'red'
          break
        default:
          color = '#000'
      }
      return {
        backgroundColor: color
      }
    },
    isBack() {
      if (this.isCaptain) {
        return 1
      }
      const status = this.card.status
      return status !== 0
    },
    isSelect() {
      if (!this.isCaptain) return false
      if (this.card.status !== 0) return true
      return false
    }
  },
  methods: {
    async onReverse() {
      const { index, isCaptain, winner } = this
      const code = this.$store.getters.code
      if (!code || isCaptain || winner) return

      const { success, data = {} } = await http.put(`/api/status/${code}`, { index })
      if (success) {
        this.$emit('statusChange', index, data.status)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  position: relative;
  color: #fff;
  width: 100%;
  height: 100%;
  &.reverse {
    .front {
      transform: rotateY(180deg);
    }
    .back {
      transform: rotateY(360deg);
    }
  }
  &.captain {
    .back {
      filter: brightness(0.5) blur(1px);
    }
  }
  .front, .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: 1s;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
  }
  @media screen and (max-width: 800px) {
    .front, .back {
      font-size: 20px;
    }
  }
  .front {
    z-index: 2;
    /* background-image: url('./scape.jpg'); */
    color: #333;
    background-color: #fff;
    border: 1px solid #ddd;
    /* box-shadow: 0 0 6px 3px #ddd; */
  }
  .back {
    transform: rotateY(180deg);
    z-index: 1;
    border: 1px solid #ddd;
    /* background-image: url('./scape1.jpg') */
  }
}
</style>