From f03a0c96dcdb03da0ff408ddf091993fa9200f47 Mon Sep 17 00:00:00 2001
From: William Petit <wpetit@cadoles.com>
Date: Wed, 26 Aug 2020 09:16:05 +0200
Subject: [PATCH] =?UTF-8?q?Ajout=20du=20Konami=20code=20r=C3=A9glementaire?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/App.tsx      | 18 +++++++++++++++++-
 client/src/hooks/useKonamiCode.tsx | 20 ++++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 client/src/hooks/useKonamiCode.tsx

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<AppProps> = () => {
   const { user } = useUserProfile();
 
+  const [ showBoneyM, setShowBoneyM ] = useState(false);
+  useKonamiCode(() => setShowBoneyM(true));
+
   return (
     <LoggedInContext.Provider value={user.id !== ''}>
       <BrowserRouter>
@@ -28,6 +33,17 @@ export const App: FunctionComponent<AppProps> = () => {
           <Route component={() => <Redirect to="/" />} />
         </Switch>
       </BrowserRouter>
+      {
+        showBoneyM ?
+        <Modal active={true} showCloseButton={true} onClose={() => setShowBoneyM(false)}>
+          <iframe width={560} height={315}
+            frameBorder={0}
+            allowFullScreen={true}
+            src="https://www.youtube.com/embed/uVzT5QEEQ2c?autoplay=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
+          </iframe>
+        </Modal> :
+        null
+      }
     </LoggedInContext.Provider>
   );
 }
\ 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