我们接着继续开发 测验区 的部分

测验区

先来看看画面:

可以看到测试区除了上面的总分之外，我们有四副牌(button + label 组成的)。
所以我们这边牌做成一个组件(component)，
然後在测试区这边加入四组牌就可以达到我们要的效果了。

1. 在src/components 新增 card.vue
2. 先从test.vue中的<div id='starting-game'> 开始修改:

<div id='starting-game'>
<table>
    <thead>
        <tr>
        <th colspan="4">目前积分:{{getPoint()}}</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            
            <td>
                <card :id=1 @getcard='increase'></card>
            </td>
            <td>
                <card :id=2 @getcard='increase'></card>
            </td>
            <td>
                <card :id=3 @getcard='increase'></card>
            </td>
            <td>
                <card :id=4 @getcard='increase'></card>
            </td>
        </tr>
    </tbody>
</table>
</div>

希望透过<card>这个component来显示每一组牌的样式。
每当抽牌之後透过@getcard取得事件，和得到抽到牌的分数。
最後透过getPoint()来取得目前的总积分。

3. 接着我们设计test.vue 里面的 script:
   script:

<script>
import userInfo from '../components/userInfo'
import card from '../components/card'
import store from "../vuex"; // 引用 store

export default {
  name: 'test',
  store:store,
  components: {
    userInfo,card

  },
  methods:{
      increase(card){
          store.state.point = store.state.point + card
      },
      getPoint(){
          return store.state.point
      }
  }
}
</script>

实作 increase()帮我们进行分数的加总并存入到全域变数store.state.point中;
getPoint()回传我们的总分数。

4. 在 vuex.js 新增 point变数:

state () {
        return {
          point:2000,
        }
 }

给予预设值 2000分

5. 设计card.vue 的样板:
   template:

<template>
  <div class="card">
    <div class="title">
      <p>
        <b>{{ title }}</b>
      </p>
    </div>
    <div class="imageblock"></div>
    <div class="operational">
      <button class="draw" @click="clickEvent">抽牌</button>
    </div>
  </div>
</template>

这边分成三个区块，

• title : 用来显示第几副牌组
• imageblock : 显示牌的样式
• operational : 处理抽牌事件

6. 接着处理card.vue里面的script:
   methods:

methods: {
    clickEvent() {
        //取得牌组
      var cards = this.getCards;
      //乱数取得一张牌
      var card = cards[this.getRandomInt(cards.length)]
      console.log(`card: ${card}`);
      //传到test.vue中触发
      this.$emit('getcard',card)
    },
    getRandomInt(max) {
      return Math.floor(Math.random() * Math.floor(max));
    },
  },

每当触发clickEvent()之後，获取一副牌组this.getCards。
将获取到的牌组使用乱数抽牌，
最後发送@getcard事件到test.vue，并回传所抽取到牌的分数card

getRandomInt() : 随机抽取一张牌

computed:

computed: {
    getCards() {
      var cards = []; //牌组
      var reward_count = 0; //奖励牌数量
      var reward_dividend = 0; //奖励积分
      var penalty_count = 0; //惩罚牌数量
      var penalty_dividend = 0; //惩罚积分

      //设定奖励/惩罚 牌的 数量及积分
      switch (this.id) {
        case 1:
          reward_count = store.state.cardInfo.first.reward.count;
          reward_dividend = store.state.cardInfo.first.reward.dividend;
          penalty_count = store.state.cardInfo.first.penalty.count;
          penalty_dividend = store.state.cardInfo.first.penalty.dividend;
          break;
        case 2:
          reward_count = store.state.cardInfo.second.reward.count;
          reward_dividend = store.state.cardInfo.second.reward.dividend;
          penalty_count = store.state.cardInfo.second.penalty.count;
          penalty_dividend = store.state.cardInfo.second.penalty.dividend;
          break;
        case 3:
          reward_count = store.state.cardInfo.third.reward.count;
          reward_dividend = store.state.cardInfo.third.reward.dividend;
          penalty_count = store.state.cardInfo.third.penalty.count;
          penalty_dividend = store.state.cardInfo.third.penalty.dividend;
          break;
        case 4:
          reward_count = store.state.cardInfo.fourth.reward.count;
          reward_dividend = store.state.cardInfo.fourth.reward.dividend;
          penalty_count = store.state.cardInfo.fourth.penalty.count;
          penalty_dividend = store.state.cardInfo.fourth.penalty.dividend;
          break;
        default:
          console.log(`Sorry, we are out of ${this.id}.`);
      }
      //加入奖励牌
      for (var i = 0; i < reward_count; i++) {
        cards[cards.length] = reward_dividend;
      }
      //加入惩罚牌
      for (var j = 0; j < penalty_count; j++) {
        cards[cards.length] = penalty_dividend;
      }
      //可有可无的洗牌
      cards.sort(() => Math.random() - 0.5);
      return cards;
    },

    title() {
      return `第${this.id}组牌`;
    },

这部分的数值，我们希望建立之後不会再有更动，所以写在computed，
以便提升我们的效能。
getCards,帮我们从store取出对应的 奖惩分数及牌的数量，
并制作出一副牌组。

title: 显示牌组名称

7. 接着我们在card.vue中的<style> 设计一下我们的造型:

<style>
.draw {
  width: 6em;
  height: 6em;
  border-radius: 50%;
  border-color: red orange yellow greenyellow;
  border-width: 0.7em;
  border-style: solid;
  padding: 0em;
}
.imageblock {
  width: 15em;
  height: 20em;
  background: #394057;
  background-image: radial-gradient(
      closest-side,
      transparent 98%,
      rgba(0, 0, 0, 1) 99%
    ),
    radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 1) 99%);
  /*上下两个圆错开相交*/
  background-position: 0 0em, 1em 1em;
  background-size: 2em 2em;
}
.operational {
  /* background-color: darkmagenta; */
}
</style>

.draw 将我们的<button> 变成 彩色圆形的按钮
.imageblock 制作纸牌的花纹

到这边我们就完成了测验区的部分。

功能列

因为功能列的部分这边只有简单的画面的跳转，
所以我们这边就简单的在test.vue上面设计

1. 在test.vue 中的template 修改 功能区:

 <div>
    <table id='op_table' cellpadding="10" border='1'>
      <thead>
        <tr>
          <th>
            <router-link to="/">回首页</router-link>
          </th>
          <th>
            <!-- 先不设计结算画面 -->
            <router-link to="/settlement">结算</router-link>
          </th>
        </tr>
      </thead>
    </table>
  </div>

(个人喜好用table)
接着设计边框线条

style:

<style>
#op_table{
    border:3px #cccccc solid
}
</style>

在边框上加个线条

完工!!~

结语

有余力的小夥伴 可以试试看在card.vue上面做动画，
每当按下抽牌之後显示抽到牌的积分。

下一篇，我们会来设计最後的结算画面，敬请期待

git: https://github.com/kyminjob72/iowa_gambling_task/tree/version04