[筆記] React 隨手記 （React 抽獎機率設定）

實作 React 抽獎機率設定
共7筆
每筆％數設定
1%、5%、10%、21%、21%、21%、21%

下圖一：prizeArray 陣列包7項物件

const prizeArray = [
  {
    id: 1,
    picture: 1,
    left: 133,
    top: -177,
    width: 129,
    height: 123,
    opacity: 0,
    medal: null,
    percent: 21,
  },
  {
    id: 2,
    picture: 2,
    left: 276,
    top: -72,
    width: 138,
    height: 124,
    opacity: 0.6,
    medal: null,
    percent: 21,
  },
  {
    id: 3,
    picture: 3,
    left: 446,
    top: -13,
    width: 143,
    height: 139,
    opacity: 0.8,
    medal: null,
    percent: 21,
  },
  {
  ...
  },
  {
  ...
  },
  {
  ...
  },
  {
  ...
  },
];
export default prizeArray;

把 useLottery 另外拉出來寫成 hook

寫一個箭頭函示 變數命名為 getRandomNumber = () => {}

1. 利用 prizeArray.sort((a, b) => a.percent - b.percent); 將 prizeArray 排序，用.percent 取得物件％數，兩兩一組大小相減後，把小的排前面
   可得結果,目前為[1,5,10,21,21,21,21]並把結果賦值到變數sortPrizes

2. 利用 sortPrizes.map 做一個依序累加的計數
   將 [1,5,10,21,21,21,21] 累加結果為
   [1,6,16,37,58,69,100] 賦值到變數 weightArray 並 return 出去

3. 利用 js 提供的語法 Math.random() 取到 0~1 的值
   乘以 weightArray[weightArray.length - 1]
   這裡的 weightArray[weightArray.length - 1] 表示 weightArray 在陣列長度最後一個的值，在目前 weightArray 陣列裡的值正好為 100，所以內容會是 Math.random()*100 賦值到變數 random

4.
寫一個回圈每一圈查看 weightArray[i] 有沒有大於 random
如果有，就在第一個找到那圈回圈設定 break 停下來，並把 index = i 把得到的 index 結果 return 給 sortPrizes[index].picture;抓到該位置的照片

import { useState, useEffect } from 'react';
import prizeArray from '../config/prizeArray';

export default function useLottery() {
  const [isDraw, setIsDraw] = useState(false);
  const [picture, setPicture] = useState('pokemonball');
  const handleClickDraw = () => {
    if (isDraw) {
      return;
    }
    setIsDraw(true);
    setTimeout(() => {
      setIsDraw(false);
    }, 3000);
    setTimeout(() => {
      setPicture(getRandomNumber());
    }, 2400);
  };
  const getRandomNumber = () => {
    let sortPrizes = prizeArray.sort((a, b) => a.percent - b.percent);
    //.sort排序
    //變數.sort((a, b) => a - b);為固定寫法，單純數字值可直接使用，此地方因為我們 prizeArray 為物件，所以要用 .percent 取得％數值
    console.log('sortPrizes: ', sortPrizes);
    let weightArray = sortPrizes.map((_, index) => {
    //利用 .map 做一個計數累加
      let count = 0;
      for (let i = 0; i <= index; i++) {
        count += sortPrizes[i].percent;
      }
      return count;
    });
    console.log('weightArray: ', weightArray);
    let random = Math.random() * weightArray[weightArray.length - 1];
    //用 Math.random()取得 0~1的值 
    //weightArray[weightArray.length - 1]
    //取得 weightArray 陣列長度的最後一個數
    let index;
    for (let i = 0; i <= weightArray.length; i++) {
      if (weightArray[i] >= random) {
        index = i;
        break;
      }
    }
    console.log('random: ', random);
    console.log('index: ', index);
    return sortPrizes[index].picture;
    //取該 index 的照片
  };
  return {
    isDraw,
    picture,
    handleClickDraw,
  };
}