NHNerd
diff --git a/‎index.html‎
Lines changed: 2 additions & 2 deletions b/‎index.html‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎src/App.tsx‎
Lines changed: 5 additions & 2 deletions b/‎src/App.tsx‎
Lines changed: 5 additions & 2 deletions
diff --git a/‎src/about/About.module.css‎
Lines changed: 13 additions & 0 deletions b/‎src/about/About.module.css‎
Lines changed: 13 additions & 0 deletions
diff --git a/‎src/about/About.tsx‎
Lines changed: 21 additions & 0 deletions b/‎src/about/About.tsx‎
Lines changed: 21 additions & 0 deletions
@@ -1,10 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>React Draggable Card Deck</title>
   </head>
   <body>
     <div id="root"></div>
 
@@ -3,6 +3,7 @@ import React, { useRef, useState } from 'react';
 import Bar from './gameSession/bar/Bar';
 import Deck from './gameSession/deck/Deck';
 import Btns from './gameSession/footer/Btns';
+import About from './about/About';
 import DebugVisual from './dev/debugVisual/DebugVisual';
 import type { CardType, DragsStatusType } from './types/types';
 
@@ -18,6 +19,7 @@ function App() {
   const [devDeckRest, devDeckRestSet] = useState<number>(0);
   const [devDragsStatus, setDevDragsStatus] = useState<DragsStatusType[]>([]);
   const [devDeckVisible, devDeckVisibleSet] = useState<CardType[]>([]);
+  const devSpeed = useRef<1 | 0.3 | 0.05>(1);
 
   return (
     <>
@@ -31,16 +33,17 @@ function App() {
             btnsSet={btnsSet}
             devDeckRestSet={devDeckRestSet}
             devDeckVisibleSet={devDeckVisibleSet}
-            devDragsStatus={devDragsStatus}
             setDevDragsStatus={setDevDragsStatus}
+            devSpeed={devSpeed}
           />
         </section>
         <section className='flexChildren3'>
           <Btns btns={btns} btnsSet={btnsSet} />
         </section>
       </section>
 
-      <DebugVisual devDragsStatus={devDragsStatus} devDeckVisible={devDeckVisible} />
+      <DebugVisual devDragsStatus={devDragsStatus} devDeckVisible={devDeckVisible} devSpeed={devSpeed} />
+      <About />
     </>
   );
 }
 
@@ -0,0 +1,13 @@
+.aboutBtn {
+  margin: 10px;
+  padding: 10px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  user-select: none;
+  font-size: 18px;
+}
+
+.opacity0 {
+  opacity: 0;
+}
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import AboutCss from './About.module.css';
+
+function About() {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <button onClick={() => setIsOpen(!isOpen)} className={AboutCss.aboutBtn}>
+        ?
+      </button>
+      <section className={`${isOpen ? '' : AboutCss.opacity0}`}>
+        About
+        <main>Description</main>
+        <footer>Contacts</footer>
+      </section>
+    </>
+  );
+}
+
+export default About;