Merge pull request #154 from moonstream-to/fullcount-player-integration

Fullcount player integration

web/pages/_app.tsx

@@ -8,6 +8,7 @@ import theme from "../src/theme";
 import { Web3Context } from "../src/contexts";
 import "../src/styles/globals.css";
 import { GameContextProvider } from "../src/contexts/GameContext";
+import { UserProvider } from "../src/contexts/UserContext";
 
 export default function App({ Component, pageProps }: AppProps) {
   const [queryClient] = useState(new QueryClient());
@@ -17,9 +18,11 @@ export default function App({ Component, pageProps }: AppProps) {
       <ChakraProvider theme={theme}>
         <QueryClientProvider client={queryClient}>
           <Web3Context>
-            <GameContextProvider>
-              <Component {...pageProps} />
-            </GameContextProvider>
+            <UserProvider>
+              <GameContextProvider>
+                <Component {...pageProps} />
+              </GameContextProvider>
+            </UserProvider>
           </Web3Context>
         </QueryClientProvider>
       </ChakraProvider>

web/pages/landing/index.tsx

@@ -0,0 +1,12 @@
+import Layout from "../../src/components/layout/layout";
+import Landing from "../../src/components/landing/Landing";
+
+const Home = () => {
+  return (
+    <Layout home={true} title="Fullcount">
+      <Landing />
+    </Layout>
+  );
+};
+
+export default Home;

web/src/components/AnimatedMessage.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+import styles from "./playing/PlayView.module.css";
+
+const AnimatedMessage = ({ message }: { message: string }) => {
+  const [numberOfDots, setNumberOfDots] = useState({ number: 1, trend: "up" });
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setNumberOfDots((prevCount) => {
+        if (prevCount.number === 1) {
+          return { number: 2, trend: "up" };
+        } else if (prevCount.number === 3) {
+          return { number: 2, trend: "down" };
+        } else {
+          return {
+            number: prevCount.trend === "up" ? 3 : 1,
+            trend: "",
+          };
+        }
+      });
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return (
+    <div className={styles.waitingMessage}>
+      {`${message}${".".repeat(numberOfDots.number)}`}
+      <span style={{ color: "transparent" }}>{".".repeat(3 - numberOfDots.number)}</span>
+    </div>
+  );
+};
+
+export default AnimatedMessage;

web/src/components/account/Account.module.css

@@ -0,0 +1,84 @@
+.loginButton {
+    display: flex;
+    padding: 5px 10px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: 20px;
+    background: #353535;
+    color: #FFF;
+    font-family: Space Grotesk, sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1;
+    white-space: nowrap;
+}
+
+.signUpButton {
+    display: flex;
+    padding: 5px 10px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: 20px;
+    background: #F56646;
+    color: #FFF;
+    font-family: Space Grotesk, sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 100%;
+    white-space: nowrap;
+}
+
+.portalButton {
+    display: flex;
+    padding: 4px 9px;
+    align-items: center;
+    gap: 10px;
+    border-radius: 30px;
+    border: 1px solid #FFF;
+    background-color: transparent;
+    color: #FFF;
+    text-align: center;
+    font-family: Space Grotesk, sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 100%; /* 12px */
+}
+
+.divider {
+    background-color: #8F8F8F;
+    height: 3px;
+    width: 3px;
+    border-radius: 50%;
+}
+
+@media (min-width: 768px) {
+    .portalButton {
+        padding: 9px 14px;
+        height: 36px;
+        font-size: 16px;
+    }
+
+    .loginButton, .signUpButton {
+        padding: 5px 15px;
+        font-size: 16px;
+        height: 36px;
+
+    }
+}
+
+.portalButton:hover {
+    background-color: #FFF;
+    color: black;
+}
+
+
+.portalButtonText:hover {
+    background: -webkit-linear-gradient(0deg, #F56646, #f89a85);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}

web/src/components/account/Account.tsx

@@ -0,0 +1,70 @@
+import RouterLink from "next/link";
+
+import React, { useState } from "react";
+import {
+  Flex,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Divider,
+  Spinner,
+  useMediaQuery,
+} from "@chakra-ui/react";
+
+import LoginButton from "./LoginButton";
+import { BsPerson } from "react-icons/bs";
+import useUser from "../../contexts/UserContext";
+import useLogout from "../../hooks/useLogout";
+import SignUp from "./SignUp";
+import { useRouter } from "next/router";
+import globalStyles from "../GlobalStyles.module.css";
+
+const Account = ({ ...props }: { [x: string]: any }) => {
+  const { user } = useUser();
+  const { logout, isLoading: isLoggingOut } = useLogout();
+  const [isSignUpOpen, setIsSignUpOpen] = useState(false);
+  const [isBaseView] = useMediaQuery(["(max-width: 767px)"]);
+
+  const router = useRouter();
+
+  return (
+    <>
+      <Flex gap={{ base: "5px", sm: "10px" }} alignItems={"center"}>
+        {!user && (
+          <>
+            <LoginButton>
+              <button className={globalStyles.button}>Log&nbsp;in</button>
+            </LoginButton>
+            {!isBaseView && (
+              <>
+                <SignUp isOpen={isSignUpOpen} onClose={() => setIsSignUpOpen(false)} />
+                <button className={globalStyles.button} onClick={() => setIsSignUpOpen(true)}>
+                  Sign&nbsp;up
+                </button>
+              </>
+            )}
+          </>
+        )}
+      </Flex>
+      {isLoggingOut && <Spinner />}
+      {user && !isLoggingOut && (
+        <Menu>
+          <MenuButton {...props} bg={"transparent"}>
+            <Flex gap="5px" alignItems="center">
+              <BsPerson />
+              {user.username.length > 13 ? user.username.slice(0, 11) + "..." : user.username}
+            </Flex>
+          </MenuButton>
+          <MenuList borderRadius="10px" border="1px solid white" minW="fit-content" p="20px">
+            <MenuItem p="0px" onClick={() => logout()}>
+              Log out
+            </MenuItem>
+          </MenuList>
+        </Menu>
+      )}
+    </>
+  );
+};
+
+export default Account;

web/src/components/account/ForgotPassword.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+
+import {
+  FormControl,
+  InputGroup,
+  Button,
+  Input,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalBody,
+  Flex,
+  Text,
+} from "@chakra-ui/react";
+import useForgotPassword from "../../hooks/useForgotPassword";
+import { CloseIcon } from "@chakra-ui/icons";
+
+const ForgotPassword = ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) => {
+  const [email, setEmail] = useState("");
+  const { forgotPassword, isLoading } = useForgotPassword();
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    forgotPassword({ email });
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <form onSubmit={handleSubmit}>
+        <ModalContent p="0" borderRadius="20px" bg="transparent">
+          <ModalBody bg="transparent">
+            <Flex
+              direction="column"
+              bgColor="#1A1D22"
+              borderRadius="20px"
+              gap="30px"
+              p="30px"
+              alignItems="center"
+              border="1px solid white"
+            >
+              <Flex justifyContent="space-between" w="100%">
+                <Text>Forgot Password</Text>
+                <CloseIcon
+                  cursor="pointer"
+                  onClick={() => {
+                    onClose();
+                  }}
+                />
+              </Flex>
+              <FormControl my={4}>
+                <InputGroup>
+                  <Input
+                    type="text"
+                    placeholder="Enter your email"
+                    name="email"
+                    value={email}
+                    onChange={(event) => setEmail(event.target.value)}
+                  />
+                </InputGroup>
+              </FormControl>
+              <Button
+                fontSize="lg"
+                h="46px"
+                type="submit"
+                width="100%"
+                variant="plainOrange"
+                isLoading={isLoading}
+              >
+                Send
+              </Button>
+            </Flex>
+          </ModalBody>
+        </ModalContent>
+      </form>
+    </Modal>
+  );
+};
+
+export default ForgotPassword;

web/src/components/account/LoginButton.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import { Box } from "@chakra-ui/react";
+import SignIn from "./SignIn";
+import SignUp from "./SignUp";
+import ForgotPassword from "./ForgotPassword";
+
+interface LoginButtonProps {
+  children: React.ReactNode;
+}
+
+const LoginButton: React.FC<LoginButtonProps> = ({ children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isSignUpOpen, setIsSignUpOpen] = useState(false);
+  const [isForgotPassOpen, setIsForgotPassOpen] = useState(false);
+
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <div onClick={() => handleOpen()} style={{ cursor: "pointer", display: "inline" }}>
+      <SignIn
+        isOpen={isOpen}
+        onClose={handleClose}
+        onSignUp={() => setIsSignUpOpen(true)}
+        onForgotPassword={() => setIsForgotPassOpen(true)}
+      />
+      <SignUp isOpen={isSignUpOpen} onClose={() => setIsSignUpOpen(false)} />
+      <ForgotPassword isOpen={isForgotPassOpen} onClose={() => setIsForgotPassOpen(false)} />
+      {children}
+    </div>
+  );
+};
+
+export default LoginButton;