feat: frontend working multiplayer

vycdev · Jul 22, 2020 · cfd9fb3 · cfd9fb3
1 parent dc18f6b
commit cfd9fb3
Show file tree

Hide file tree

Showing 10 changed files with 454 additions and 101 deletions.
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -31,7 +31,8 @@
         "react-rotating-text": "^1.4.1",
         "react-router-dom": "^5.1.2",
         "recharts": "^1.8.5",
-        "typescript": "^3.7.4"
+        "typescript": "^3.7.4",
+        "ws-heartbeat": "^1.1.0"
     },
     "devDependencies": {
         "@babel/core": "^7.6.4",

diff --git a/packages/web/src/components/common/typingBox/components/progressbar/progressBar.tsx b/packages/web/src/components/common/typingBox/components/progressbar/progressBar.tsx
@@ -21,6 +21,7 @@ interface PropsProgressBar {
     userid: number;
     place: number;
     multiplayer: boolean;
+    wpm?: number;
 }
 
 const array = [
@@ -76,7 +77,8 @@ export const ProgressBar = (props: PropsProgressBar) => {
     };
 
     const getUserData = async (id: string) => {
-        if (id === "0") return {};
+        if (id === "0" || id === "undefined" || id === "-1" || id === "NaN")
+            return {};
         const userData = await fetch(`${apiUrl}/users/userData/${id}`, {
             method: "GET",
             credentials: "include",
@@ -110,24 +112,44 @@ export const ProgressBar = (props: PropsProgressBar) => {
                     {userData.exp
                         ? Math.floor(Math.sqrt(userData?.exp / 10) * 100) / 100
                         : 0}
+                    <span>
+                        {props.wpm ? " WPM: " : ""}
+                        {props.wpm ? props.wpm : ""}
+                    </span>
                 </LevelDisplay>
             </NameFlag>
+
             <PlaceProgressWrapper>
-                <ProgressOutside color={color} multiplayer={props.multiplayer}>
+                <ProgressOutside
+                    color={
+                        props.multiplayer
+                            ? props.userid % array.length === -1
+                                ? array[1]
+                                : array[props.userid % array.length]
+                            : color
+                    }
+                    multiplayer={props.multiplayer}
+                >
                     <ProgressInside
                         progress={percentage}
-                        color={color}
+                        color={
+                            props.multiplayer
+                                ? props.userid % array.length === -1
+                                    ? array[1]
+                                    : array[props.userid % array.length]
+                                : color
+                        }
                     ></ProgressInside>
                 </ProgressOutside>
                 {props.multiplayer
                     ? place === 1
-                        ? place + "st"
+                        ? place + "st "
                         : place === 2
-                        ? place + "nd"
+                        ? place + "nd "
                         : place === 3
-                        ? place + "rd"
-                        : place + "th"
-                    : ""}
+                        ? place + "rd "
+                        : place + "th "
+                    : ""}{" "}
             </PlaceProgressWrapper>
         </Wrapper>
     );

diff --git a/packages/web/src/components/common/typingBox/helpers/gettext.ts b/packages/web/src/components/common/typingBox/helpers/gettext.ts
@@ -15,23 +15,40 @@ interface TextInfo {
     text: string;
     ordered: boolean;
     tutorial: boolean;
+    author: number;
+    requirements: unknown;
 }
 
-export const getDataBaseTextInfo = async (mode: "easy" | "hard") => {
-    const result = await (
-        await fetch(
-            `${apiUrl}/texts/getrandomtext/${
-                mode === "easy" ? "false" : "true"
-            }`,
-            {
-                method: "GET",
-                credentials: "include",
-                headers: {
-                    "Content-Type": "application/json"
-                }
-            }
-        )
-    ).json();
+export const getDataBaseTextInfo = async (mode: "easy" | "hard", id = -1) => {
+    const result =
+        id === -1
+            ? await (
+                  await fetch(
+                      `${apiUrl}/texts/getrandomtext/${
+                          mode === "easy" ? "false" : "true"
+                      }`,
+                      {
+                          method: "GET",
+                          credentials: "include",
+                          headers: {
+                              "Content-Type": "application/json"
+                          }
+                      }
+                  )
+              ).json()
+            : (
+                  await (
+                      await fetch(`${apiUrl}/texts/getalltexts`, {
+                          method: "GET",
+                          credentials: "include",
+                          headers: {
+                              "Content-Type": "application/json"
+                          }
+                      })
+                  ).json()
+              ).filter((value: TextInfo) => {
+                  return value.id === id;
+              })[0];
 
     return result;
 };
diff --git a/packages/web/src/components/common/typingBox/helpers/interfaces.ts b/packages/web/src/components/common/typingBox/helpers/interfaces.ts
@@ -7,6 +7,7 @@ export interface TypingBoxProps {
         correct: string;
         notTyped: string;
     };
+    ws?: WebSocket;
 }
 
 // typedArrayInterface is the interface for the typedArray variable in the typing box

diff --git a/packages/web/src/components/common/typingBox/style.tsx b/packages/web/src/components/common/typingBox/style.tsx
@@ -159,3 +159,13 @@ export const BlockOfFinishedText = styled.div`
 export const TextInfo = styled.div`
     border-bottom: 1px solid ${theme.background.secondary};
 `;
+
+export const WaitingPlayers = styled.div`
+    text-align: center;
+    font-size: 20px;
+    color: ${theme.text.primary};
+
+    margin-bottom: 5px;
+
+    font-family: "Verdana";
+`;