refactor: improved typing box code and fixed some bugs

vycdev · Apr 16, 2020 · a0c7edd · a0c7edd
1 parent 7d20a93
commit a0c7edd
Show file tree

Hide file tree

Showing 4 changed files with 270 additions and 289 deletions.
diff --git a/packages/web/src/components/common/typingBox/helpers/interfaces.ts b/packages/web/src/components/common/typingBox/helpers/interfaces.ts
@@ -0,0 +1,20 @@
+export interface typingBoxProps {
+    mode: "easy" | "hard";
+    colorCodes: {
+        wrong: string;
+        correct: string;
+        notTyped: string;
+    };
+}
+export interface typedArrayInterface {
+    word: string;
+    state: "correct" | "wrong";
+    time: number;
+    wpm: number;
+    accuracy: number;
+    timeUsed: string;
+}
+
+export interface DataBoxType {
+    data: Array<typingBoxProps>;
+}
diff --git a/packages/web/src/components/common/typingBox/style.tsx b/packages/web/src/components/common/typingBox/style.tsx
@@ -1,37 +1,64 @@
-import styled from "@emotion/styled"
+import styled from "@emotion/styled";
 
 export const Wrapper = styled.div`
     width: 100%;
-`
-export const LetterElement = styled.span`
-    display: inline;
-    font-size: 23px;
-`
+    padding: 15px;
+`;
 
 export const Container = styled.div`
-    @import url("https://fonts.googleapis.com/css?family=Hind&display=swap");
-    font-family: "Hind";
-
     width: 750px;
     height: 250px;
     position: relative;
+    text-align: center;
 
     margin: auto;
-`
 
-export const Top = styled.div`
+    @import url("https://fonts.googleapis.com/css?family=Hind&display=swap");
+    font-family: "Hind";
+`;
+
+export const Displayer = styled.div`
     text-align: center;
     width: 100%;
     height: 25px;
     border-bottom: 1px solid #9e9e9e;
-`
+`;
+
+export const TextBox = styled.div`
+    margin-left: 2px;
+    display: inline-flex;
+    flex-wrap: wrap;
+    text-align: center;
+    justify-content: center;
+    font-size: 20px;
 
-export const Bottom = styled.input`
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+
+    -ms-overflow-style: none;
+
+    width: 99%;
+    max-height: 200px;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+    .spaced {
+        padding-right: 4px;
+    }
+    .isBeingTyped {
+        display: inline-flex;
+        flex-wrap: wrap;
+    }
+`;
+
+export const InputBox = styled.input`
     width: 100%;
 
     border-style: solid;
     border-width: 0;
     border-top: 1px solid #9e9e9e;
+    border-bottom: 1px solid #9e9e9e;
 
     position: absolute;
     bottom: 0;
@@ -42,22 +69,22 @@ export const Bottom = styled.input`
 
     outline: none;
 
-    font-size: 24px;
-`
-export const Text = styled.div`
-    margin-left: 2px;
-
-    text-align: center;
-
-    overflow: scroll;
-    scroll-behavior: smooth;
-
-    -ms-overflow-style: none;
+    font-size: 22px;
+`;
 
-    width: 99%;
-    height: 200px;
+export const DataBoxWrapper = styled.div`
+    width: 100%;
+    border-bottom: 1px solid #9e9e9e;
+`;
 
-    &::-webkit-scrollbar {
-        display: none;
-    }
-`
+export const TryAgainButton = styled.button`
+    background: #198cf6;
+    border: none;
+    text-align: center;
+    text-decoration: none;
+    color: white;
+    font-size: 18px;
+    font-weight: bold;
+    margin-top: 10px;
+    padding: 3px;
+`;