diff --git a/client/src/components/App.tsx b/client/src/components/App.tsx index f22bc35..f0b3e67 100644 --- a/client/src/components/App.tsx +++ b/client/src/components/App.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent } from 'react'; +import React, { FunctionComponent, useState } from 'react'; import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom"; import { HomePage } from './HomePage/HomePage'; import { ProfilePage } from './ProfilePage/ProfilePage'; @@ -8,6 +8,8 @@ import { DashboardPage } from './DashboardPage/DashboardPage'; import { useUserProfile } from '../gql/queries/profile'; import { LoggedInContext } from '../hooks/useLoggedIn'; import { PrivateRoute } from './PrivateRoute'; +import { useKonamiCode } from '../hooks/useKonamiCode'; +import { Modal } from './Modal'; export interface AppProps { @@ -16,6 +18,9 @@ export interface AppProps { export const App: FunctionComponent = () => { const { user } = useUserProfile(); + const [ showBoneyM, setShowBoneyM ] = useState(false); + useKonamiCode(() => setShowBoneyM(true)); + return ( @@ -28,6 +33,17 @@ export const App: FunctionComponent = () => { } /> + { + showBoneyM ? + setShowBoneyM(false)}> + + : + null + } ); } \ No newline at end of file diff --git a/client/src/hooks/useKonamiCode.tsx b/client/src/hooks/useKonamiCode.tsx new file mode 100644 index 0000000..9520950 --- /dev/null +++ b/client/src/hooks/useKonamiCode.tsx @@ -0,0 +1,20 @@ +import { useEffect } from "react"; + +export function useKonamiCode(cb: Function) { + const KONAMI_CODE = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65]; + let cursor = 0; + + useEffect(()=> { + const onKeyDown = (e) => { + cursor = (e.keyCode == KONAMI_CODE[cursor]) ? cursor + 1 : 0; + if (cursor == KONAMI_CODE.length) { + cb(); + cursor = 0; + } + }; + + document.addEventListener('keydown', onKeyDown); + + return () => document.removeEventListener('keydown', onKeyDown); + }, []); +} \ No newline at end of file