Minor fixes

.gitignore

@@ -24,5 +24,4 @@ yarn-error.log*
 
 # firebase
 
-/src/components/Firebase
+src/components/Firebase
-/src/components/Clockify

public/css_styles/styles.css

@@ -44,6 +44,11 @@
   background-color: #ffe83d;
   color: #000000;
 }
+.header-main-page .konami-code {
+  font-family: "Raleway", sans-serif;
+  font-weight: 700;
+  color: #4c8ad5;
+}
 
 @media (max-width: 991.98px) {
   .header-main-page {
@@ -70,7 +75,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 0px 5vw;
-  height: 7vh;
+  height: 8vh;
 }
 .banner-login p {
   margin: 0;
@@ -85,7 +90,7 @@
   background: none;
   border: none;
   width: 8vw;
-  font-size: 2.6vh;
+  font-size: 12pt;
   font-weight: bold;
   color: #ffffff;
   height: 6vh;
@@ -191,6 +196,9 @@
 }
 
 @media (max-width: 576px) {
+  .main-pomodoro {
+    height: auto;
+  }
   .main-pomodoro .timer {
     font-size: 80pt;
   }
@@ -335,7 +343,7 @@
   color: #4c8ad5;
 }
 .style-selector-container.dark-mode-component .style-selector .style-selection-container .checkbox_control {
-  border: 3px solid #3e70ae;
+  border: 3px solid #eff3f8;
 }
 .style-selector-container.dark-mode-component .style-selector .style-selection-container .checkbox__input input:checked + .checkbox_control {
   background-color: #4c8ad5;
@@ -672,6 +680,14 @@ html, body {
   .dark-mode {
     position: initial;
   }
+  .dark-mode label {
+    width: 50px;
+    height: 20px;
+  }
+  .dark-mode label::after {
+    width: 15px;
+    height: 15px;
+  }
 }
 @media (max-width: 576px) {
   .dark-mode {

public/sass_styles/_banner-login.scss

@@ -10,7 +10,7 @@
 
     padding: 0px 5vw;
 
-    height: 7vh;
+    height: 8vh;
 
     
     p {
@@ -27,7 +27,7 @@
         button {
             @include normalizeButton();
 
-            font-size: 2.6vh;
+            font-size: 12pt;
             font-weight: bold;
             color: #ffffff;
 

public/sass_styles/_dark-mode_toogle-switch.scss

@@ -49,7 +49,15 @@
     
     .dark-mode {
         position: initial;
-
+        label {
+            width: 50px;
+            height: 20px;
+        }
+    
+        label::after {
+            width: 15px;
+            height: 15px;
+        }
     }
 }
 

public/sass_styles/_header.scss

@@ -53,6 +53,12 @@
             }
         }
     }
+
+    .konami-code {
+        @include titleFont();
+
+        color: $lightest-color-dark;
+    }
 }
 
 

public/sass_styles/_mainPomodoro.scss

@@ -69,6 +69,8 @@
 @media (max-width: 576px) {
 
     .main-pomodoro {
+
+        height: auto;
         
         .timer {
             font-size: 80pt;

public/sass_styles/styles.scss

@@ -49,7 +49,7 @@ $second-color-dark: #3A4750;
 $light-color-dark: #D72323;
 $light-color-dark-darker: #7c1414;
 $lightest-color-dark: #4c8ad5;
-$lightest-color-dark-darker: #3e70ae;
+$lightest-color-dark-darker: #eff3f8;
 
 @import 'header';
 @import 'banner-login';

src/App.js

@@ -3,6 +3,8 @@ import {firebase} from './components/Firebase/firebase'
 import {getAuth, onAuthStateChanged} from 'firebase/auth'
 import { doc, updateDoc, getFirestore, collection, getDoc } from "firebase/firestore";
 
+import detectKeys from './components/Misc/detectKeys';
+
 import AboutThis from "./components/AboutThis";
 import BannerLogin from "./components/BannerLogin";
 import GoDownArrow from "./components/GoDownArrow";
@@ -37,6 +39,8 @@ function App() {
 
   const [darkMode, setDarkmode] = useState(false)
 
+  const [KonamiCodeActive, setKonamiCodeActive] = useState(false)
+
   const auth = getAuth()
 
   onAuthStateChanged(auth, (user) => {
@@ -69,6 +73,8 @@ function App() {
 
           darkMode={darkMode}
           setDarkmode={setDarkmode}
+
+          KonamiCodeActive= {KonamiCodeActive}
         />
         
         <Switch>
@@ -129,6 +135,9 @@ function App() {
               setProjectID={setProjectID}
 
               darkMode={darkMode}
+
+              setKonamiCodeActive = {setKonamiCodeActive}
+              KonamiCodeActive= {KonamiCodeActive}
             />
 
             <GoDownArrow 

src/components/ClockifyTasksDisplay.jsx

@@ -5,6 +5,7 @@ import { getAuth, onAuthStateChanged } from "firebase/auth";
 import { doc, updateDoc, getFirestore, collection, getDoc } from "firebase/firestore";
 import loadingGifLightTheme from './img/loading-light-theme.png'
 import loadingGifDarkTheme from './img/loading-dark-theme.png'
+import detectKeys from './Misc/detectKeys';
 
 const ClockifyTasksDisplay = (props) => {
     

src/components/Header.jsx

@@ -18,6 +18,9 @@ const Header = (props) => {
                 signIn={props.signIn}
                 darkMode={props.darkMode} 
                 />
+            <div className="konami-code">
+                {props.KonamiCodeActive ? 'Konami Code ON' : null}
+            </div>
         </header>
     )
 }

src/components/Identify.jsx

@@ -171,7 +171,7 @@ const Identify = (props) => {
 
         if (action === 'clss') {
             signOutFromApp()
-            props.history.push('/')
+            return
         }
 
         onAuthStateChanged(auth, (user) => {

src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx

@@ -3,6 +3,7 @@ import React, {useState} from 'react'
 import uploadToClockifyTimer from '../Clockify/uploadToClockifyTimer'
 import getAndFormatCurrentTime from '../Clockify/getAndFormatCurrentTime'
 import randomText from '../Misc/randomText'
+import detectKeys from '../Misc/detectKeys'
 
 import bell_x2 from '../sounds/bell-x2.mp3'
 import bell_x3 from '../sounds/bell-x3.mp3'
@@ -19,11 +20,15 @@ const MainPomodoroTimer = (props) => {
 
     const [timerActivity, setTimerActivity] = useState(false)
 
-    const [actualStyle, setActualStyle] = useState('Regular')
+    const [actualStyle, setActualStyle] = useState('')
 
     const [alreadyCountingStart, setAlreadyCountingStart] = useState(false) /* TOO MUCH FUCKING STATES https://pbs.twimg.com/media/EoM2rXuW8AMRxZh?format=png&name=large*/
     const [alreadyCountingEnd, setAlreadyCountingEnd] = useState(false)
 
+    const [controlKonamiCode, setControlKonamiCode] = useState(true)
+    
+    const [velocity, setVelocity] = useState(1) 
+    
     const setTimeStyle = () => {
 
         if (props.style === 'Can I play, Daddy?') {
@@ -141,14 +146,44 @@ const MainPomodoroTimer = (props) => {
         
     }
 
+
+
+
+
     React.useEffect (() => {
         if (actualStyle !== props.style) {
             setTimeStyle()
 
         }
+        
+        if (controlKonamiCode) {
+
+            detectKeys(props.setKonamiCodeActive)
+
+            setControlKonamiCode(false)
+        }
+    
     })
 
-    const startTimer = (velocity = 1) => {
+    const startTimer = () => {
+
+        document.title = minutes + ':' + seconds
+
+        document.addEventListener('visibilitychange', () => {
+
+            if (document.visibilityState === 'hidden') {
+
+                setVelocity(2)
+                console.log(document.visibilityState)
+            }
+
+            if (document.visibilityState === 'visible') {
+
+                setVelocity(1)
+                console.log(document.visibilityState)
+            }
+        });
+
         return setTimeout(() => {
             
             if (seconds === 0) {
@@ -238,7 +273,7 @@ const MainPomodoroTimer = (props) => {
                 getFavicon().href = './img/working favicon.ico'
                 
                 if (!alreadyCountingStart) {
-                    const time = getAndFormatCurrentTime()
+                    const time = getAndFormatCurrentTime(props.KonamiCodeActive)
                     props.setStartTime(time)
                     
                     setAlreadyCountingStart(true)
@@ -278,7 +313,7 @@ const MainPomodoroTimer = (props) => {
                     }
 
                     if (!alreadyCountingEnd) {
-                        const time = getAndFormatCurrentTime()
+                        const time = getAndFormatCurrentTime(props.KonamiCodeActive)
 
                         props.setEndTime(time)
                         setAlreadyCountingEnd(true)
@@ -292,7 +327,7 @@ const MainPomodoroTimer = (props) => {
 
                 if (minutes >= 0 || seconds > 0) {
                 
-                    idTimeOut = startTimer()                    
+                        idTimeOut = startTimer()                    
                  }
             }
 
@@ -350,7 +385,7 @@ const MainPomodoroTimer = (props) => {
                             setRestCounter((restCounter + 1))
                                                         
                                 if (!alreadyCountingEnd) {
-                                    const time = getAndFormatCurrentTime() 
+                                    const time = getAndFormatCurrentTime(props.KonamiCodeActive) 
 
                                     props.setEndTime(time)
                                     setAlreadyCountingEnd(true)

src/components/Main Pomodoro Childrens/timer.js

@@ -0,0 +1,166 @@
+import React from 'react'
+
+const timer = (props, setTimerActivity, weAreInBreakTime, getFavicon, alreadyCountingStart, getAndFormatCurrentTime, setAlreadyCountingStart, minutes, seconds, playAudio, restCounter, setPomodoroCounter, setRestCounter, setBreak, setWeAreInBreakTime, randomText, alreadyCountingEnd, setAlreadyCountingEnd, idTimeOut, startTimer, setTimeStyle, timerActivity) => {
+    
+    if (props.timerOn) {
+        setTimerActivity(true)
+
+        if (!weAreInBreakTime) {
+
+            
+            getFavicon().href = './img/working favicon.ico'
+            
+            if (!alreadyCountingStart) {
+                const time = getAndFormatCurrentTime()
+                props.setStartTime(time)
+                
+                setAlreadyCountingStart(true)
+
+                document.title = randomText('work')
+            }
+            
+            if (minutes === 0 && seconds === 0) {
+                setTimerActivity(false)
+
+                playAudio('work')
+                
+                if (restCounter !== 3){
+
+                    setTimeout( () => {
+                        setPomodoroCounter('Pomodoros')
+
+                        setRestCounter((restCounter + 1))
+
+                        setBreak(1, 0)
+                        setWeAreInBreakTime(true)
+                        
+                    }, 1000)
+                    
+                }
+
+                if (restCounter === 3) {
+                    
+                    setTimeout( () => {
+                        setPomodoroCounter('Pomodoros')
+                        setRestCounter((restCounter + 1))
+
+                        setBreak(0, 1)
+                        setWeAreInBreakTime(true)
+                        
+                    }, 1000)
+                }
+
+                if (!alreadyCountingEnd) {
+                    const time = getAndFormatCurrentTime()
+
+                    props.setEndTime(time)
+                    setAlreadyCountingEnd(true)
+
+                    props.setLetsUpload(true)
+
+                    document.title = randomText('rest')
+                }
+            }
+
+
+            if (minutes >= 0 || seconds > 0) {
+            
+                idTimeOut = startTimer()                    
+             }
+        }
+
+        if(weAreInBreakTime) {
+            
+            getFavicon().href = './img/rest favicon.ico'
+
+            if (minutes === 0 && seconds === 0) {
+                setTimerActivity(false)
+
+                playAudio('rest')
+                
+                setTimeout( () => {
+
+                    if (restCounter === 4) {
+                        setPomodoroCounter('Long Rest')
+                        setRestCounter(0)
+
+                    } else {
+                        setPomodoroCounter('Rest')
+                    }
+
+                    setWeAreInBreakTime(false)
+                    props.setTimerOn(false)
+                    
+                    setTimeStyle()
+                    
+                }, 1000)
+            }
+            
+            if (minutes >= 0 || seconds > 0) {
+
+                idTimeOut = startTimer()
+
+            }
+        }
+
+        return () => {
+            clearInterval(idTimeOut)
+            }
+
+        } 
+        
+        if (!props.timerOn) {
+            document.title = 'Clockify Pomodoro Timer'
+
+            getFavicon().href = './img/favicon.ico'
+
+            if ( timerActivity === true) {
+
+                if (!weAreInBreakTime) {
+
+                    if (minutes <= ( setTimeStyle().minutes / 2) ) {
+                        setPomodoroCounter('Pomodoros')
+                        setRestCounter((restCounter + 1))
+                                                    
+                            if (!alreadyCountingEnd) {
+                                const time = getAndFormatCurrentTime() 
+
+                                props.setEndTime(time)
+                                setAlreadyCountingEnd(true)
+                                
+                                props.setLetsUpload(true)
+                            }
+                        }
+                    }
+
+            
+
+                if (weAreInBreakTime) {
+
+                    
+
+                    if (restCounter === 4) {
+                        
+
+                        setPomodoroCounter('Long Rest')
+                        setRestCounter(0)
+
+                    } else {
+                        
+
+                        setPomodoroCounter('Rest')
+                    }
+
+                    setWeAreInBreakTime(false)
+                }
+
+                setTimerActivity(false)
+                setTimeStyle()
+            }
+
+            setAlreadyCountingStart(false)
+            setAlreadyCountingEnd(false)
+        }
+}
+
+export default timer

src/components/MainPomodoro.jsx

@@ -85,6 +85,10 @@ const MainPomodoro = (props) => {
                 setEndTime={setEndTime}
 
                 setLetsUpload={setLetsUpload}
+
+                setKonamiCodeActive={props.setKonamiCodeActive}
+                KonamiCodeActive= {props.KonamiCodeActive}
+
                 />
 
 

src/components/Misc/detectKeys.js

@@ -0,0 +1,82 @@
+import React from 'react'
+
+const detectKeys = (setKonamiCodeActive) => {
+    
+    let secuencie  = []
+
+    window.addEventListener('keydown', (event) => {
+        
+        console.log(event.key)
+
+
+        let k = event.key
+
+        secuencie.push(k)
+
+        if (
+            secuencie[0] === 'ArrowUp' &&
+            secuencie[1] === 'ArrowUp' &&
+            secuencie[2] === 'ArrowDown' &&
+            secuencie[3] === 'ArrowDown' &&
+            secuencie[4] === 'ArrowLeft' &&
+            secuencie[5] === 'ArrowRight' &&
+            secuencie[6] === 'ArrowLeft' &&
+            secuencie[7] === 'ArrowRight' &&
+            (secuencie[8] === 'b' || secuencie[8] === 'B') && 
+            (secuencie[9] === 'a' || secuencie[9] === 'A') && 
+            secuencie[10] === 'Enter' 
+        ) {
+
+            console.log('TODO BIEN')
+            secuencie = []
+
+            setKonamiCodeActive(true)
+
+            return true
+        }
+
+        if (secuencie.length >= 12) {
+            
+            secuencie = []
+        }
+       
+        switch (k) {
+            case 'ArrowUp':
+                break;
+        
+            case 'ArrowDown':
+                break;
+            
+            case 'ArrowRight':
+                break;
+            
+            case 'ArrowLeft':
+                break;
+
+            case 'b':
+                break;
+            
+            case 'B':
+                break;
+
+            case 'a':
+                break;
+            
+            case 'A':
+                break;
+
+            case 'Enter':
+                break;
+
+            default:
+
+                secuencie = []
+                break;
+        }
+
+        console.log(secuencie)
+        
+    })
+}
+
+export default detectKeys