useEffect(() => {
const shuffleArray = (array) => {
for (let i = array.length - 1; i > 0; i--) {
// 무작위로 index 값 생성 (0 이상 i 미만)
let j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
};
shuffleArray(checkedWords);
setGameLists(checkedWords);
}, []);
const [sec, setSec] = useState(12);
const [num, setNum] = useState(0);
const time = useRef(12);
//타이머
useEffect(() => {
timerId.current = setInterval(() => {
setSec(parseInt(time.current));
time.current -= 1;
}, 1000);
return () => clearInterval(timerId.current);
}, []);
//타임아웃
useEffect(() => {
if (time.current < 0) {
console.log("타임 아웃");
clearInterval(timerId.current);
}
}, [sec]);
return (
<div
className={`bg-light-green rounded-full h-full
${sec === 11 && "w-11/12"}
${sec === 10 && "w-10/12"}
${sec === 9 && "w-9/12"}
${sec === 8 && "w-8/12"}
${sec === 7 && "w-7/12"}
${sec === 6 && "w-6/12"}
${sec === 5 && "w-5/12"}
${sec === 4 && "w-4/12"}
${sec === 3 && "w-3/12"}
${sec === 2 && "w-2/12"}
${sec === 1 && "w-1/12"}
${sec === 0 && "w-0"}`}
></div>
)
const dispatch = useDispatch();
const { checkedWordLists } = useSelector((state) => state.game);
const checkedWords = [...checkedWordLists];
const { wordLists, checkedWordList } = useSelector((state) => state.word); //checkedWordList는 빈배열임
const checkedData = [...checkedWordList];
const allData = [...wordLists];
const numbers = [1, 2, 3, 4];
const result = [];
const onStartGame = useCallback(() => {
if (checkedWordList.length < 10) {
console.log("10개 미만!");
setAlert(true);
setGameStart(false);
setOpen(true);
} else {
const remainderData = allData.filter((data) => data.status === "A");
const remainderEnglish = [];
const remainderIndex = [];
remainderData.map((data, i) => {
remainderEnglish.push(data.english);
remainderIndex.push(i);
// remainderIndex(0, 5);
});
remainderIndex.splice(0, 5);
const shuffleArray = (array) => {
for (let i = array.length - 1; i > 0; i--) {
// 무작위로 index 값 생성 (0 이상 i 미만)
let j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
};
shuffleArray(remainderEnglish);
shuffleArray(remainderIndex);
checkedData.map((data, i) => {
shuffleArray(numbers); //랜덤 1, 2, 3, 4
const randomIdx1 = remainderIndex[0];
const randomIdx2 = remainderIndex[1];
const randomIdx3 = remainderIndex[2];
if (numbers[0] === 1) {
result.push({
question: data.korean,
answer: 1,
choices: [
data.english,
remainderEnglish[randomIdx1],
remainderEnglish[randomIdx2],
remainderEnglish[randomIdx3],
],
});
} else if (numbers[0] === 2) {
result.push({
question: data.korean,
answer: 2,
choices: [
remainderEnglish[randomIdx1],
data.english,
remainderEnglish[randomIdx2],
remainderEnglish[randomIdx3],
],
});
} else if (numbers[0] === 3) {
result.push({
question: data.korean,
answer: 3,
choices: [
remainderEnglish[randomIdx1],
remainderEnglish[randomIdx2],
data.english,
remainderEnglish[randomIdx3],
],
});
} else if (numbers[0] === 4) {
result.push({
question: data.korean,
answer: 4,
choices: [
remainderEnglish[randomIdx1],
remainderEnglish[randomIdx2],
remainderEnglish[randomIdx3],
data.english,
],
});
}
});
// console.log("checkedData", checkedData);
console.log("result", result);
dispatch(startGameRequest(result));
setGameStart(true);
setOpen(false);
console.log("gameStart", gameStart);
}
}, [result]);
{
id: 2,
english: "red",
korean: "빨강",
type: "easy",
status: "A",
},
{
question: "빨강",
answer: 1,
choices: ["red", "purple", "yellow", "blue"],
},
const plusPoint = (p, pointName, name) => {
let copy = [...answers];
copy[p] = true;
setAnswers(copy);
const pointDivName = document.getElementById(pointName);
let div = document.createElement("div");
div.id = name;
div.className =
"z-10 absolute right-0 bottom-8 bg-light-orange pt-2 pl-2 transform rotate-0 rounded-full h-12 w-12 text-white font-bold shadow-md transform text-black text-lg";
let text = document.createTextNode("+10");
div.appendChild(text);
pointDivName.appendChild(div);
};
const errorAnswer = (p, pointName, name) => {
let copy = [...answers];
copy[p] = true;
setAnswers(copy);
const pointDivName = document.getElementById(pointName);
let div = document.createElement("div");
div.id = name;
div.className =
"z-10 text-xl absolute left-0 top-2 text-lg font-bold text-center bg-red-500 pt-2 transform rotate-0 rounded-full h-12 w-12 text-white font-bold shadow-md text-white";
let text = document.createTextNode("X");
div.appendChild(text);
pointDivName.appendChild(div);
};