Feat/pause

src/App.js

@@ -24,25 +24,8 @@ import Home from "./components/home/Home";
 import FlagsApi from "./components/flags/FlagsApi";
 import Profile from "./components/flags/Profile";
 
-//
-// const store = storeCreator();
-//
-//
-//
-
 const store = createStore(appReducers);
 
-// function addTodo(text) {
-//   return {
-//     type: 'ADD_TODO',
-//     text
-//   }
-// }
-
-// store.dispatch(addTodo('Read the docs'))
-// store.dispatch(addTodo('Read about the middleware'))
-
-
 store.dispatch({type: 'initial'});
 // store.dispatch('add');
 function App() {

src/components/flags/FlagsApi.js

@@ -24,7 +24,8 @@ class FlagsApi extends React.Component {
     answerLocked = false;
 
     state = {
-        loading: true
+        loading: true,
+        paused: false
     };
 
     async handleClick(action) {
@@ -119,7 +120,7 @@ class FlagsApi extends React.Component {
     async startGame() {
         this.gameEnded = false;
         this.answerLocked = false;
-        this.setState({ loading: true });
+        this.setState({ loading: true, paused: false });
         this.stopTimer();
         await this.handleClick('api')
             .then(() => this.startTimer())
@@ -167,14 +168,42 @@ class FlagsApi extends React.Component {
         this.array = [];
         console.log('Timer stop');
     }
+
+    togglePause = () => {
+        if (this.props.lifes <= 0) return;
+
+        if (this.state.paused) {
+            this.resumeGame();
+        } else {
+            this.pauseGame();
+        }
+    }
+
+    pauseGame = () => {
+        this.stopTimer();
+        this.setState({ paused: true });
+    }
+
+    resumeGame = () => {
+        this.setState({ paused: false });
+        this.startTimerFromCurrent();
+    }
+
+    startTimerFromCurrent = () => {
+        let interval = setInterval(() => {
+            this.props.dispatch({type: 'tick'});
+            this.tickTimer();
+        }, 1000);
+
+        this.array.push(interval);
+    }
 
     tickTimer() {
         if (this.props.timer == 15) {
 
         } else {
             if (this.props.timer == 0) {
                 this.timeout();
-
             }
         }
     }
@@ -222,25 +251,9 @@ class FlagsApi extends React.Component {
     answers = [];
     question = [];
     prepareStat() {
-        // console.log('FOO');
-        // console.log(this.props);
-        // console.log(this.props.flags);
         this.props.flagi.map((item) =>
-            // () => alert()
             this.question.push(item)
-            // console.log(item)
-            // (item) => { alert(); console.log('xaxa' + item)}
         );
-
-
-        // this.array.map(item => clearInterval(item));
-
-
-        // console.log();
-        // for (let item of this.props.flagi) {
-        //     this.question.push(item.getAllKeys()[0])
-        // }
-        // console.log(this.question);
     }
 
     saveAnswer(correct) {
@@ -275,20 +288,17 @@ class FlagsApi extends React.Component {
                         <div style={{
                             'display' : 'flex',
                             'justify-content' : 'space-between',
-                            'margin' : '0 10px'
+                            'padding' : '0 12px',
+                            'alignItems' : 'center'
                         }}>
                             <span><strong className="question-text">Select the flag of</strong></span>
                             <span>Time: <strong>{this.props.timer}</strong></span>
-
                         </div>
 
                         <h4  style={{
                             'margin' : '10px 10px'
                         }}>{this.props.ques}</h4>
-                        <span  style={{
-                            'display' : 'flex',
-                            'justify-content' : 'space-between',
-                        }}>
+                        <div className={`flags-container ${this.state.paused ? 'paused' : ''}`}>
                         {
                             this.props.flags.map(item =>
                                 (
@@ -302,7 +312,12 @@ class FlagsApi extends React.Component {
                                 )
                             )
                         }
-                        </span>
+                        {this.state.paused && (
+                            <div className="pause-overlay" onClick={this.togglePause}>
+                                PAUSED - Click to Resume
+                            </div>
+                        )}
+                        </div>
                         <Alert key={'idx'} variant={'warning'} style={this.props.lifes <= 0 ? {display: 'block'} : {display: 'none'} }>
                             <strong>GAME OVER! Your score: {this.props.counter}</strong>
                         </Alert>
@@ -335,13 +350,20 @@ class FlagsApi extends React.Component {
                 {/*<button onClick={ () => this.submitScore(4)}>PEW</button>*/}
 
             </Container>
-                <div style={{'display' : 'flex', 'margin-top' : '25px', 'justify-content' : 'center'}}>
+                <div style={{'display' : 'flex', 'margin-top' : '25px', 'justify-content' : 'center', 'gap' : '8px'}}>
                     <Button variant="outline-secondary" onClick={() => this.exitGame()}>
                         QUIT
-                    </Button>&nbsp;
+                    </Button>
                     <Button variant="outline-secondary" onClick={() => this.restartGame()}>
                         RESTART
                     </Button>
+                    <Button
+                        variant="outline-secondary"
+                        onClick={this.togglePause}
+                        disabled={this.props.lifes <= 0}
+                    >
+                        {this.state.paused ? '▶ PLAY' : '❚❚ PAUSE'}
+                    </Button>
                 </div>
         </div>
     )

src/components/flags/styles.css

@@ -13,16 +13,37 @@ h1 {
 }
 
 .flag {
-    font-size: 80px;
+    font-size: 64px;
     border: 3px dotted transparent;
     display: inline-block;
     cursor: pointer;
-    transition: transform 0.2s;
+    transition: transform 0.2s ease, filter 0.3s;
     max-width: 100%;
+    transform: scale(1);
+}
+
+.flags-container > span {
+    display: inline-block;
+}
+
+.flags-container > span:hover .flag {
+    transform: scale(1.25) !important;
+}
+
+@media (max-width: 400px) {
+    .flag {
+        font-size: 56px;
+    }
+}
+
+@media (max-width: 350px) {
+    .flag {
+        font-size: 48px;
+    }
 }
 
 .flag:hover {
-    transform: scale(1.05);
+    transform: scale(1.25);
 }
 
 /* Don't show correct answer by default - showCorrect() will set border dynamically */
@@ -36,9 +57,18 @@ h1 {
 
 /* Game area toast - responsive width */
 .game-toast {
-    width: 90vw;
+    width: 100%;
     max-width: 500px;
     min-height: 300px;
+    margin: 0 auto;
+}
+
+@media (max-width: 520px) {
+    .game-toast {
+        max-width: 100%;
+        width: 100%;
+        border-radius: 0;
+    }
 }
 
 @media (min-width: 576px) {
@@ -135,3 +165,32 @@ td:nth-of-type(2){
     font-weight: bold;
     animation: shake 0.4s ease-out;
 }
+
+/* Pause functionality */
+.flags-container {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+}
+
+.flags-container.paused .flag {
+    filter: blur(15px);
+    pointer-events: none;
+    user-select: none;
+}
+
+.pause-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.7);
+    font-size: 1.2em;
+    font-weight: bold;
+    color: #6c757d;
+    cursor: pointer;
+}