06 로또번호뽑기

 

 

import React, { useState, useRef, useEffect } from 'react';

/*
바뀌는 부분 - 숫자 나오는 부분 / 버튼
- getNumbers 60이하의 숫자 7개 랜덤으로 뽑아서 리턴
*/

// 랜덤 숫자 리턴
function getRandomNums(count, max) {
    const nums = new Set();
    while (nums.size < count) {
        nums.add(Math.floor((Math.random() * max) + 1));
    }
    // const bonus = nums[count];
    // nums.remove(nums[count])
    const result = (Array.from(nums)).sort((a, b) => a - b);
    return result;
}
// 숫자 번호대별로 다른 클래스 추가
function getColorClassName(num) {
    if (num < 10) {
        return 'zeros';
    } else if (num >= 10 && num < 20) {
        return 'tens';
    } else if (num >= 20 && num < 30) {
        return 'twenties';
    } else if (num >= 30 && num < 40) {
        return 'thirties';
    } else if (num >= 40 && num < 50) {
        return 'fourties';
    } else {
        return 'fifties';
    }
}

const Lotto = () => {
    const [nums, setNums] = useState(getRandomNums(7, 60));
    const [animating, setAnimating] = useState(false);
    const listItems = useRef();

    const fadeIn = () => {
        listItems.current.forEach((v, i) => {
            setAnimating(true);
            setTimeout(() => {
                v.classList.add('show');
                if (listItems.current.length === i + 1) {
                    setAnimating(false);
                }
            }, 200 * (i + 1));
        });
    }
    const fadeOut = () => {
        listItems.current.forEach((v) => {
            v.classList.remove('show');
        })
    }

    useEffect(() => {
        listItems.current = document.querySelectorAll('.nums li');
        fadeIn();
        return () => { };
    }, []);

    const onClickBtn = () => {
        if (!animating) {
            fadeOut();
            setNums(getRandomNums(7, 60));
            fadeIn();
        }
    }

    return (
        <>
            <div className="lotto-wrap">
                <h5>로또 추첨기</h5>
                <ul className="nums">
                    {nums.map((v, i) => {
                        return (nums.length === i + 1) ?
                            <li className="bonus">{v}</li>
                            : <li className={`${getColorClassName(v)}`}> {v}</li>
                    })}
                </ul>
                <button className={animating ? `grey` : null}
                    onClick={onClickBtn}>한번더</button>
            </div>
        </>
    )
}

export default Lotto;

 

 

 

.lotto-wrap {
    margin: 10px;
    width: 300px;
    /* outline: 1px solid gold; */
}

.lotto-wrap ul.nums {
    width: 100%;
    height: 100px;
}

.lotto-wrap div {}

.lotto-wrap ul.nums li {
    float: left;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 33px;
    border-radius: 50%;
    margin: 8px;
    border: 1px solid grey;
}

.zeros {
    background-color: rgb(255, 255, 170);
}

.tens {
    background-color: rgb(255, 170, 184)
}

.twenties {
    background-color: #85c9ee;
}

.thirties {
    background-color: rgb(189, 118, 255)
}

.fourties {
    background-color: rgb(132, 208, 132);
}

.fifties {
    background-color: rgb(139, 139, 255)
}

.bonus {
    margin-left: 10px;
    background-color: #d06a6a;
}

/* for fadeIn animation */
.nums li {
    opacity: 0;
    /* transform: translateY(20px); */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.nums li.show {
    opacity: 1;
    transform: translateY(0);
}

button.grey {
    background-color: #737373;
    /*cursor: not-allowed*/
    cursor: wait;
}

/* .nums li:nth-child(1) {
    transition-delay: 0.1s;
}

.nums li:nth-child(2) {
    transition-delay: 0.2s;
}

.nums li:nth-child(3) {
    transition-delay: 0.3s;
}

.nums li:nth-child(4) {
    transition-delay: 0.4s;
}

.nums li:nth-child(5) {
    transition-delay: 0.5s;
}

.nums li:nth-child(6) {
    transition-delay: 0.6s;
}

.nums li:nth-child(7) {
    transition-delay: 0.9s;
} */