[vue]가위바위보 게임 만들기[3]

3. 재결투 버튼만들기

한판만 하면 심심하니까 여러번 재경기를 할수있는 재결투버튼을 만들었다 .
결투를 할때마다 총횟수, 승률을 볼수 있게 구현해보자.

<template>
  <Layout :isFooter="false">
    <div class="c-inner">
      <p class="rival">{{ list[moveindex] }}</p>
      <button
        v-for="(item, index) in list"
        :key="item.i"
        @click="choice(index)"
        class="btn"
      >
        {{ item }}
      </button>
      <p>{{ result }}</p>
      <button
        @click="reset(), change()"
        class="reset-btn"
      >
        재결투
      </button>
      <p>총: {{total}}판 중 {{win}}판 승 !! 승률은 {{total!=0?Math.floor((win/total)*100)+'%':'아직 없음'}}</p>
    </div>
  </Layout>
</template>

<script>
export default {
  data() {
    return {
      list: ["✌️", "✊", "🖐"],
      index: 0,
      myChoice: null,
      result: "",
      total:0,
      win:0
    };
  },

  methods: {
    change() {
      if (this.myChoice == null) {
        //버튼을 누르기 전
        this.index++;
        setTimeout(() => {
          if (this.index < this.list.length - 1) {
            this.change();
          } else {
            this.index = -1;
            this.change();
          }
        }, 100);
      } else {
        this.total++
        //버튼을누른 후
        if (this.index == 0) {
          if (this.myChoice == 0) {
            this.result = "비겼다";
          } else if (this.myChoice == 1) {
            this.result = "이겼다";
            this.win++
          } else {
            this.result = "졌다";
          }
        } else if (this.index == 1) {
          if (this.myChoice == 0) {
            this.result = "졌다";
          } else if (this.myChoice == 1) {
            this.result = "비겼다";
          } else {
            this.result = "이겼다";
            this.win++
          }
        } else if (this.index == 2) {
          if (this.myChoice == 0) {
            this.result = "이겼다";
            this.win++
          } else if (this.myChoice == 1) {
            this.result = "졌다";
          } else {
            this.result = "비겼다";
          }
        } else {
          //-1일때
          if (this.myChoice == 0) {
            this.result = "이겼다";
            this.win++
          } else if (this.myChoice == 1) {
            this.result = "졌다";
          } else {
            this.result = "비겼다";
          }
        }
      }
    },
    choice(index) {
      this.myChoice = index;
    },
    reset(){
      this.myChoice=null
      this.result=''
    }
  },
  mounted() {
    this.change();
  },
  computed: {
    moveindex() {
      if (this.index == 0) {
        return 0;
      } else if (this.index == 1) {
        return 1;
      } else {
        return 2;
      }
    }
  }
};
</script>

<style lang="scss">
.rival {
  font-size: 40px;
}
.btn {
  font-size: 20px;
  padding: 5px;
  &:hover {
    border: 1px solid #ddd;
  }
}
.reset-btn {
  padding: 5px 10px;
  border-radius: 12px;
  border: 1px solid pink;
}
</style>

결과