closeBth

Author: yugyeong60

src/game/stage1.jsx

@@ -134,7 +134,7 @@ const Stage1 = ({ onClose }) => {
         style={{
           position: 'relative',
           width: '1200px',
-          height: '450px',
+          height: '480px',
           border: '2px dashed #000',
           margin: '20px auto',
           backgroundImage: 'url(/images/stage1.png)',
@@ -187,9 +187,6 @@ const Stage1 = ({ onClose }) => {
         <button onClick={handleReset} style={{ margin: '5px' }}>
           리셋
         </button>
-        <button onClick={onClose} style={{ margin: '5px' }}>
-          돌아가기
-        </button>
         <button onClick={() => handleHint(1)}>힌트1</button>
         <button
           onClick={() => handleHint(2)}

src/game/stage2.css

@@ -30,11 +30,12 @@ p, h2 {
     border: 1px solid #8B4513;
     border-radius: 5px;
     margin: 10px;
-    max-width: 90%;
+    max-width: 70%;
+    margin-left: 200px;
 }
 
 .problem-image {
-    width: 100%;
+    width: 70%;
     height: auto;
     border: 2px solid #8B4513;
     border-radius: 5px;

src/game/stage2.js

@@ -200,7 +200,6 @@ const Stage2 = ({ onClose }) => {
         <button className='stage2btn' onClick={handleSubmit}>정답 확인</button>
         <button className='stage2btn' onClick={handleHint}>힌트</button>
         <button className='stage2btn' onClick={handleReset}>다시하기</button>
-        <button className='stage2btn' onClick={handleGoBack}>돌아가기</button> {/* Call handleGoBack to close the dashboard */}
       </div>
 
       {message && <p id="message">{message}</p>}

src/game/stage3.js

@@ -126,7 +126,7 @@ const Stage3 = ({ onClose }) => { // Add onClose prop
 
       {/* Back Button Positioned Below */}
       <div className="back-button-container">
-        <button onClick={handleBackToMap}>돌아가기</button> {/* Close the dashboard */}
+        <button >숫자들을 누르면 단소 소리가 나요!</button> {/* Close the dashboard */}
       </div>
 
       <div className="bubble-container">

src/imageslider.js

@@ -97,14 +97,22 @@ const ImageSlider = () => {
   };
 
   const startGame = () => {
-    if (currentIndex === 0) {
-      setShowStage1(true); // Show Stage1 for map1
-    } else if (currentIndex === 1) {
-      setShowStage2(true); // Show Stage2 for map2
-    } else if (currentIndex === 2) {
-      setShowStage3(true); // Show Stage3 for map3
+    if (showStage1 || showStage2 || showStage3) {
+      // If any stage is already open, close all stages
+      setShowStage1(false);
+      setShowStage2(false);
+      setShowStage3(false);
     } else {
-      navigate(`/game/stage${currentIndex + 1}`, { state: { stageIndex: currentIndex } });
+      // Otherwise, start the game based on the current index
+      if (currentIndex === 0) {
+        setShowStage1(true); // Show Stage1 for map1
+      } else if (currentIndex === 1) {
+        setShowStage2(true); // Show Stage2 for map2
+      } else if (currentIndex === 2) {
+        setShowStage3(true); // Show Stage3 for map3
+      } else {
+        navigate(`/game/stage${currentIndex + 1}`, { state: { stageIndex: currentIndex } });
+      }
     }
   };
 
@@ -242,7 +250,7 @@ const ImageSlider = () => {
         </map>
       </div>
       <button onClick={startGame} style={{ marginTop: '10px', marginBottom: '10px' }}>
-        미니 게임 시작
+        {showStage1 || showStage2 || showStage3 ? '미니 게임 닫기' : '미니 게임 시작'}
       </button>
       {currentIndex > 0 && (
         <button