diff --git a/slot-machine-ts/public/image/slot_item_1_0.png b/slot-machine-ts/public/image/slot_item_1_0.png new file mode 100644 index 0000000..a9e7eac Binary files /dev/null and b/slot-machine-ts/public/image/slot_item_1_0.png differ diff --git a/slot-machine-ts/src/img/slot_item_1_1.png b/slot-machine-ts/public/image/slot_item_1_1.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_1_1.png rename to slot-machine-ts/public/image/slot_item_1_1.png diff --git a/slot-machine-ts/src/img/slot_item_1_2.png b/slot-machine-ts/public/image/slot_item_1_2.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_1_2.png rename to slot-machine-ts/public/image/slot_item_1_2.png diff --git a/slot-machine-ts/src/img/slot_item_1_3.png b/slot-machine-ts/public/image/slot_item_1_3.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_1_3.png rename to slot-machine-ts/public/image/slot_item_1_3.png diff --git a/slot-machine-ts/src/img/slot_item_1_4.png b/slot-machine-ts/public/image/slot_item_1_4.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_1_4.png rename to slot-machine-ts/public/image/slot_item_1_4.png diff --git a/slot-machine-ts/public/image/slot_item_2_0.png b/slot-machine-ts/public/image/slot_item_2_0.png new file mode 100644 index 0000000..81cd3a9 Binary files /dev/null and b/slot-machine-ts/public/image/slot_item_2_0.png differ diff --git a/slot-machine-ts/src/img/slot_item_2_1.png b/slot-machine-ts/public/image/slot_item_2_1.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_2_1.png rename to slot-machine-ts/public/image/slot_item_2_1.png diff --git a/slot-machine-ts/src/img/slot_item_2_2.png b/slot-machine-ts/public/image/slot_item_2_2.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_2_2.png rename to slot-machine-ts/public/image/slot_item_2_2.png diff --git a/slot-machine-ts/src/img/slot_item_2_3.png b/slot-machine-ts/public/image/slot_item_2_3.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_2_3.png rename to slot-machine-ts/public/image/slot_item_2_3.png diff --git a/slot-machine-ts/src/img/slot_item_2_4.png b/slot-machine-ts/public/image/slot_item_2_4.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_2_4.png rename to slot-machine-ts/public/image/slot_item_2_4.png diff --git a/slot-machine-ts/public/image/slot_item_3_0.png b/slot-machine-ts/public/image/slot_item_3_0.png new file mode 100644 index 0000000..1a74940 Binary files /dev/null and b/slot-machine-ts/public/image/slot_item_3_0.png differ diff --git a/slot-machine-ts/src/img/slot_item_3_1.png b/slot-machine-ts/public/image/slot_item_3_1.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_3_1.png rename to slot-machine-ts/public/image/slot_item_3_1.png diff --git a/slot-machine-ts/src/img/slot_item_3_2.png b/slot-machine-ts/public/image/slot_item_3_2.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_3_2.png rename to slot-machine-ts/public/image/slot_item_3_2.png diff --git a/slot-machine-ts/src/img/slot_item_3_3.png b/slot-machine-ts/public/image/slot_item_3_3.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_3_3.png rename to slot-machine-ts/public/image/slot_item_3_3.png diff --git a/slot-machine-ts/src/img/slot_item_3_4.png b/slot-machine-ts/public/image/slot_item_3_4.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_3_4.png rename to slot-machine-ts/public/image/slot_item_3_4.png diff --git a/slot-machine-ts/public/image/slot_item_4_0.png b/slot-machine-ts/public/image/slot_item_4_0.png new file mode 100644 index 0000000..c6719ba Binary files /dev/null and b/slot-machine-ts/public/image/slot_item_4_0.png differ diff --git a/slot-machine-ts/src/img/slot_item_4_1.png b/slot-machine-ts/public/image/slot_item_4_1.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_4_1.png rename to slot-machine-ts/public/image/slot_item_4_1.png diff --git a/slot-machine-ts/src/img/slot_item_4_2.png b/slot-machine-ts/public/image/slot_item_4_2.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_4_2.png rename to slot-machine-ts/public/image/slot_item_4_2.png diff --git a/slot-machine-ts/src/img/slot_item_4_3.png b/slot-machine-ts/public/image/slot_item_4_3.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_4_3.png rename to slot-machine-ts/public/image/slot_item_4_3.png diff --git a/slot-machine-ts/src/img/slot_item_4_4.png b/slot-machine-ts/public/image/slot_item_4_4.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_4_4.png rename to slot-machine-ts/public/image/slot_item_4_4.png diff --git a/slot-machine-ts/public/image/slot_item_5_0.png b/slot-machine-ts/public/image/slot_item_5_0.png new file mode 100644 index 0000000..2f77631 Binary files /dev/null and b/slot-machine-ts/public/image/slot_item_5_0.png differ diff --git a/slot-machine-ts/src/img/slot_item_5_1.png b/slot-machine-ts/public/image/slot_item_5_1.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_5_1.png rename to slot-machine-ts/public/image/slot_item_5_1.png diff --git a/slot-machine-ts/src/img/slot_item_5_2.png b/slot-machine-ts/public/image/slot_item_5_2.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_5_2.png rename to slot-machine-ts/public/image/slot_item_5_2.png diff --git a/slot-machine-ts/src/img/slot_item_5_3.png b/slot-machine-ts/public/image/slot_item_5_3.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_5_3.png rename to slot-machine-ts/public/image/slot_item_5_3.png diff --git a/slot-machine-ts/src/img/slot_item_5_4.png b/slot-machine-ts/public/image/slot_item_5_4.png similarity index 100% rename from slot-machine-ts/src/img/slot_item_5_4.png rename to slot-machine-ts/public/image/slot_item_5_4.png diff --git a/slot-machine-ts/src/components/Game.tsx b/slot-machine-ts/src/components/Game.tsx index 7a19779..60bcad2 100644 --- a/slot-machine-ts/src/components/Game.tsx +++ b/slot-machine-ts/src/components/Game.tsx @@ -53,6 +53,8 @@ const Game = () => { const gameZoneRef = useRef(null); const arrowRef = useRef(null); const slotHandleRef = useRef(null); + const slotList = document.querySelectorAll('.slot_box > li') as NodeListOf; + const slotListArr = [...slotList]; const priviewDiv = document.querySelectorAll('.game_zone .preview > div') as NodeListOf; // result_zone @@ -75,6 +77,9 @@ const Game = () => { // 화살표 결과값 배열로 저장 let [resultArr, setResultArr] = useState([]); + // preview 결과 배경 이미지 배열로 저장 + let [bgImgArr, setBgImgArr] = useState([]); + // 게임 시작 const gameStartBtnEvent = () => { if(startZoneRef.current){ @@ -107,13 +112,22 @@ const Game = () => { } }, [persent, buttonAct, arrDirection]); - // round class 변경 + // round class 변경 useState로는 즉시 반영이 안됨 .. + // priview backgroundImage 변경 useEffect(() => { roundChange(); - console.log('roundCount', roundCount) - console.log('resultArr', resultArr) + return () => { + // roundAndBgChange(); + } }, [roundCount, resultArr]) + useEffect(() => { + console.log(bgImgArr) + // console.log(resultArr) + return () => { + } + }, [bgImgArr]) + const moveArr = () => { if (buttonAct) { if (arrDirection === 'right') { @@ -133,9 +147,23 @@ const Game = () => { }; const roundChange = () => { + // round 변경 if (gameRoundRef.current) { gameRoundRef.current.className = `round_${roundCount}`; } + console.log(resultArr.length, roundCount-1) + if (resultArr.length > 0) { // resultArr의 길이가 roundCount - 1 보다 클 때만 bgImageChange 호출 + bgImageChange(); + } + } + + // priview bg-image 변경 + const bgImageChange = () => { + if(resultArr.length == roundCount-1){ + setBgImgArr(prev => [...prev, process.env.PUBLIC_URL + `/image/slot_machine_${roundCount-1}_${resultArr[resultArr.length-1]}.png`]); + // priviewDiv[roundCount].style.backgroundImage = bgImgArr[roundCount]; + // console.log(priviewDiv[roundCount].style.backgroundImage) + } } const stopArrowBtnEvent = () => { @@ -147,6 +175,7 @@ const Game = () => { if(roundCount < 5){ setTimeout(() => {// round_ 클래스 카운트 변경 setRoundCount((prev) => prev + 1); + // console.log(roundCount) reStartSlot();// 슬롯 다시 시작 if(slotHandleRef.current){ @@ -154,6 +183,8 @@ const Game = () => { } }, 1000) }else{ + // 마지막 라운드 priview bg-image 변경 + // bgImageChange(); if(animationId !== undefined){ cancelAnimationFrame(animationId); } @@ -165,7 +196,7 @@ const Game = () => { if(resultZoneRef.current){ resultZoneRef.current.classList.add('on'); } - }, 1500); + }, 3000); return false; } } @@ -190,37 +221,7 @@ const Game = () => { } else { setResultArr((prev) => [...prev, 5]); } - - - // 선택한 요소의 스타일 가져오기 - console.log(roundCount, '여긴 선택한 요소의 스타일 가져오기') - priviewDiv.forEach((e, i) => { - // console.log(e) - // console.log(getPriviewElement) - if(i == resultArr.length){ - // console.log(priviewDiv[i]) - // console.log(getPriviewElement) - // let getImage = getComputedStyle(getPriviewElement).backgroundImage; - // priviewDiv[i].style.backgroundImage = getImage; - } - }) - - // let choiceElement = document.querySelector(`.game_zone .round_${roundCount} .slot_box li:nth-of-type(${resultArr[roundCount-1]})`); - // if (choiceElement) { - // let choiceStyle = getComputedStyle(choiceElement).backgroundImage; - - // // 결과 priview show - // priviewDiv.forEach((e, i)=>{ - // if(resultArr.length == i+1){ - // priviewDiv[i].style.display = 'block'; - // priviewDiv[i].style.backgroundImage = choiceStyle;// 게임 진행 preview 화면에 background-image 넣어주기 - // resultView[i].style.backgroundImage = choiceStyle;// 결과 화면에도 background-image 넣어주기 - // } - // }); - // }else{ - // // choiceElement가 null인 경우 - // console.error("stopSlot() choiceElement not found !"); - // } + } // 화살표 포지션 초기화, 재시작 @@ -268,7 +269,7 @@ const Game = () => { if(gameRoundRef.current){ gameRoundRef.current.className = `round_${roundCount}`; } - resultArr = []; + setResultArr([]); } return ( @@ -293,11 +294,11 @@ const Game = () => {
슬롯 머신
    -
  • -
  • -
  • -
  • -
  • +
  • +
  • +
  • +
  • +