Merge branch 'dev' into main

siddharthroy12 · Mar 26, 2022 · 38f4042 · 38f4042
2 parents f6d62cf + 7853bb3
commit 38f4042
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 60 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "recoded",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "MIT",
   "private": false,
   "dependencies": {

diff --git a/src/App.js b/src/App.js
@@ -3,7 +3,6 @@ import { useState, useRef, useEffect } from 'react';
 import Header from './components/Header';
 import Background from './components/Background';
 import Footer from './components/Footer';
-import ForkButton from './components/ForkButton';
 import domtoimage from 'dom-to-image-more';
 import { createGIF } from 'gifshot';
 import COLORS from './components/Background/Window/colors';
@@ -24,6 +23,7 @@ function App() {
   const [currentFrameToCapture, setCurrentFrameToCapture] = useState(0);
   const [filename, setFilename] = useState('App.js');
   const [frames, setFrames] = useState([]);
+  const [frameDuration, setFrameDuration] = useState(1);
   const [gifFrames, setGIFFrames] = useState([]);
   const [editorState, setEditorState] = useState('// Type your code here');
   const [allGIFFramesCaptured, setAllGIFFramesCaptured] = useState(false);
@@ -71,7 +71,9 @@ function App() {
         images: framesToExport,
         gifWidth: width,
         gifHeight: height,
-        numWorkers: 5
+        numWorkers: 5,
+        frameDuration,
+        sampleInterval: 7
       }, (obj) => {
         if (!obj.error) {
           downloadBlob(obj.image, `${filename}.gif`);
@@ -81,7 +83,7 @@ function App() {
         setFrames([]);
       });
     }
-  }, [allGIFFramesCaptured, gifFrames, frames]);
+  }, [allGIFFramesCaptured, gifFrames, frames, filename, frameDuration]);
 
   const takeSnapshot = async () => {
     const node = backgroundRef.current;
@@ -144,14 +146,14 @@ function App() {
 
   return (
     <>
-      <ForkButton />
       <Header
         padding={padding} setPadding={setPadding}
         colors={colors} setColors={setColors}
         language={language} setLanguage={setLanguage}
         backgroundColor={backgroundColor} setBackgroundColor={setBackgroundColor}
         exportingGIF={exportingGIF}
         allGIFFramesCaptured={allGIFFramesCaptured}
+        frameDuration={frameDuration} setFrameDuration={setFrameDuration}
         onExport={onExport}
         onRecord={onRecord}
       />

diff --git a/src/components/Background/Window/index.js b/src/components/Background/Window/index.js
@@ -20,7 +20,7 @@ export default function Window({ colors, language, padding,
         return prev
       }
     });
-  }, [language]);
+  }, [language, setFilename]);
 
   // For basic code formatting
   // This algorithm is not perfect but will be enough for those who were complaining
@@ -47,10 +47,19 @@ export default function Window({ colors, language, padding,
           }
         }
 
+        console.log({ secondLastCharacter });
+        console.log({ lastCharacter });
+
         if (['{', '[', '(', ':'].includes(secondLastCharacter) && lastCharacter === '\n' && code[lastCharacterIndex - 1] !== ' ') {
           return code + ' '.repeat(TABSIZE);
         } else if (['}', ']', ')'].includes(lastCharacter)) {
-          if (code[lastCharacterIndex-1] === ' ') {
+          for (let i = code.length - 2; i >= 0; i--) {
+             if (code[i] !== ' ') {
+               secondLastCharacter = code[i];
+               break;
+             }
+          }
+          if (code[lastCharacterIndex-1] === ' ' && secondLastCharacter === '\n') {
             let codeSplit = code.split('');
             codeSplit.splice(code.length - (1 + TABSIZE), TABSIZE);
 

diff --git a/src/components/Footer/index.css b/src/components/Footer/index.css
@@ -6,6 +6,7 @@ footer {
   color: var(--footer-text);
   font-size: 0.8em;
   position: fixed;
+  flex-wrap: wrap;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
@@ -20,7 +21,8 @@ footer {
 .footer-section {
   display: flex;
   align-items: center;
-  margin: 0 30px;
+  margin: 0 20px;
+  height: 30px;
 }
 
 .footer-section p {

diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
@@ -1,3 +1,5 @@
+import ForkButton from '../ForkButton'
+
 import './index.css';
 
 export default function Footer() {
@@ -16,6 +18,7 @@ export default function Footer() {
           <path fillRule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"/>
         </svg>
       </div>
+      <ForkButton />
     </footer>
   );
 }
diff --git a/src/components/ForkButton/index.css b/src/components/ForkButton/index.css
@@ -1,45 +1,14 @@
 .fork-button {
-  position: fixed;
-  right: 20px;
-  bottom: 25px;
   background-color: var(--header-background);
   border: var(--header-border);
-  border-radius: 50px;
-  width: 40px;
-  height: 40px;
-  display: grid;
-  place-items: center;
+  border-radius: 5px;
   color: #d1d1d1;
   cursor: pointer;
+  display: flex;
+  font-size: 15px;
+  align-items: center;
+  text-decoration: none;
+  padding: 2px 10px;
+  padding-right: 15px;
 }
 
-.fork-button:hover .fork-button__tool-tip {
-  opacity: 100%;
-}
-
-.fork-button__tool-tip {
-  opacity: 0;
-  transition-duration: 200ms;
-  pointer-events: none;
-  position: absolute;
-  left: -106px;
-  bottom: 0;
-  background: var(--header-background);
-  padding: 10px 15px;
-  border: var(--header-border);
-  font-size: 14px;
-  border-radius: 4px;
-}
-
-.fork-button__tool-tip__arrow {
-  width: 10px;
-  height: 10px;
-  position: absolute;
-  background: var(--header-background);
-  border: var(--header-border);
-  right: -6px;
-  border-bottom: none;
-  border-left: none;
-  transform: translateY(50%) rotate(45deg);
-  bottom: 50%;
-}
diff --git a/src/components/ForkButton/index.js b/src/components/ForkButton/index.js
@@ -3,13 +3,10 @@ import './index.css';
 export default function ForkButton() {
   return (
     <a className="fork-button" href="https://github.com/siddharthroy12/recoded" target="_blank" rel="noreferrer">
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg width="19" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M7 5C7 3.89543 7.89543 3 9 3C10.1046 3 11 3.89543 11 5C11 5.74028 10.5978 6.38663 10 6.73244V14.0396H11.7915C12.8961 14.0396 13.7915 13.1441 13.7915 12.0396V10.7838C13.1823 10.4411 12.7708 9.78837 12.7708 9.03955C12.7708 7.93498 13.6662 7.03955 14.7708 7.03955C15.8753 7.03955 16.7708 7.93498 16.7708 9.03955C16.7708 9.77123 16.3778 10.4111 15.7915 10.7598V12.0396C15.7915 14.2487 14.0006 16.0396 11.7915 16.0396H10V17.2676C10.5978 17.6134 11 18.2597 11 19C11 20.1046 10.1046 21 9 21C7.89543 21 7 20.1046 7 19C7 18.2597 7.4022 17.6134 8 17.2676V6.73244C7.4022 6.38663 7 5.74028 7 5Z" fill="currentColor" />
       </svg>
-      <div className="fork-button__tool-tip">
-        Fork Me!
-        <div className="fork-button__tool-tip__arrow" />
-      </div>
+      <span>Fork</span>
     </a>
   );
 }
diff --git a/src/components/Header/Button/index.css b/src/components/Header/Button/index.css
@@ -9,6 +9,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-top: 25px;
+}
+
+.button:nth-child(1) {
+  margin-left: 0;
 }
 
 .button.record {

diff --git a/src/components/Header/SelectInput/index.css b/src/components/Header/SelectInput/index.css
@@ -30,4 +30,5 @@
   flex-direction: column;
   position: relative;
   margin-right: 20px;
+  margin-bottom: 20px;
 }
diff --git a/src/components/Header/index.css b/src/components/Header/index.css
@@ -14,12 +14,11 @@
   border-radius: 5px;
   border: var(--header-border);
   box-shadow: var(--header-box-shadow);
+  padding-bottom: 5px;
 }
 
 .header__part {
   display: flex;
-  justify-content: flex-end;
-  align-items: flex-end;
   height: 100%;
   flex-wrap: wrap;
 }
@@ -56,3 +55,8 @@
   align-items: center;
   font-size: 0.8em;
 }
+
+.buttons {
+  display: flex;
+  margin-bottom: 20px;
+}
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -9,22 +9,26 @@ import COLORS from '../Background/Window/colors';
 export default function Header({ padding, setPadding, colors, setColors,
                                  language, setLanguage, backgroundColor,
                                  setBackgroundColor, onExport, onRecord,
-                                 exportingGIF, allGIFFramesCaptured }) {
+                                 exportingGIF, allGIFFramesCaptured, frameDuration,
+                                 setFrameDuration }) {
   const recordButtonText = (exportingGIF || allGIFFramesCaptured) ? 'Saving' : 'Export GIF';
   return (
     <div className="header-container">
     <header className="header">
       <div className="header__part">
         <SelectInput name="Colors" value={colors} onChange={setColors} options={COLORS} />
         <NumberInput name="Padding" value={padding} onChange={setPadding} />
+        <NumberInput name="Frame Duration" value={frameDuration} onChange={setFrameDuration} />
         <SelectInput name="Language" value={language} onChange={setLanguage} options={Object.keys(LANGUAGE)} />
         <BackgroundColorInput value={backgroundColor} onChange={setBackgroundColor} />
-        <Button type="export" onClick={onExport}>
-          Export PNG
-        </Button>
-        <Button type="record" onClick={onRecord} disabled={exportingGIF || allGIFFramesCaptured}>
-          { recordButtonText }
-        </Button>
+        <div className="buttons">
+          <Button type="export" onClick={onExport}>
+            Export PNG
+          </Button>
+          <Button type="record" onClick={onRecord} disabled={exportingGIF || allGIFFramesCaptured}>
+            { recordButtonText }
+          </Button>
+        </div>
       </div>
     </header>
     </div>