Responsiveness

web/pages/_document.tsx

@@ -1,5 +1,4 @@
 import { Html, Head, Main, NextScript } from "next/document";
-import Script from "next/script";
 
 export default function Document() {
   return (

web/src/components/ConnectingView.module.css

@@ -16,7 +16,6 @@
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-  font-family: Inter;
   font-size: 20px;
   font-style: normal;
   font-weight: 700;
@@ -26,20 +25,28 @@
 
 .prompt {
   color: #fff;
-  font-family: Inter;
   font-size: 30px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
+  text-align: center;
 }
 
 .text {
   width: 402px;
   color: #bfbfbf;
   text-align: center;
-  font-family: Inter;
   font-size: 14px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
 }
+
+@media (max-width: 1023px) {
+  .container {
+    width: 90%;
+  }
+  .text {
+    width: 100%;
+  }
+}

web/src/components/ConnectingView.tsx

@@ -1,21 +1,18 @@
-import styles from "./ConnectingView.module.css";
-import globalStyles from "./tokens/OwnedTokens.module.css";
+import { useContext, useState } from "react";
 import { Flex, Spinner, Text } from "@chakra-ui/react";
-import { useContext, useEffect, useState } from "react";
+
 import Web3Context from "../contexts/Web3Context/context";
 import { useGameContext } from "../contexts/GameContext";
 import { chainByChainId } from "../contexts/Web3Context";
 
-const ConnectingView = ({ nextStep }: { nextStep: () => void }) => {
+import { EthereumError } from "../types";
+import globalStyles from "./tokens/OwnedTokens.module.css";
+import styles from "./ConnectingView.module.css";
+
+const ConnectingView = () => {
   const web3Provider = useContext(Web3Context);
   const [isSwitching, setIsSwitching] = useState(false);
   const { chainId } = useGameContext();
-  useEffect(() => {
-    if (web3Provider.buttonText === "Connected" && web3Provider.chainId === chainId) {
-      nextStep();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [web3Provider.buttonText, web3Provider.chainId]);
 
   const switchToWyrm = async () => {
     const wyrmID = 322;
@@ -26,8 +23,8 @@ const ConnectingView = ({ nextStep }: { nextStep: () => void }) => {
         method: "wallet_switchEthereumChain",
         params: [{ chainId: hexString }],
       });
-    } catch (switchError: any) {
-      if (switchError.code === 4902) {
+    } catch (switchError: unknown) {
+      if ((switchError as EthereumError).code === 4902) {
         try {
           await window.ethereum.request({
             method: "wallet_addEthereumChain",
@@ -44,6 +41,8 @@ const ConnectingView = ({ nextStep }: { nextStep: () => void }) => {
         } catch (addError) {
           console.log(addError);
         }
+      } else {
+        console.log(switchError);
       }
     }
     setIsSwitching(false);

web/src/components/GlobalStyles.module.css

@@ -4,7 +4,6 @@
     justify-content: center;
     align-items: center;
     gap: 5px;
-    /*align-self: stretch;*/
     border: 0.5px solid #f1e3bf;
     background: #00a341;
     color: #fff;
@@ -33,6 +32,26 @@
     position: relative;
 }
 
+.mobileButton {
+    display: flex;
+    padding: 4px 20px;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    width: 180px;
+    /*align-self: stretch;*/
+    border: 0.5px solid #f1e3bf;
+    /*border-radius: 50%;*/
+    background: #00a341;
+    color: #fff;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    height: 31px;
+    position: relative;
+}
+
 .commitButton:disabled {
     border: 1px solid #F1E3BF;
     opacity: 0.3;
@@ -45,7 +64,6 @@
     -webkit-text-fill-color: transparent;
     color: #FFF;
     text-align: center;
-    font-family: Inter;
     font-size: 24px;
     font-style: italic;
     font-weight: 700;
@@ -64,7 +82,7 @@
         padding: 8px 12px;
         border-radius: 4px;
         border: 1px solid #ccc;
-        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         font-size: 0.9rem;
     }
 

web/src/components/Playing.module.css

@@ -1,29 +1,14 @@
 .container {
-  /*display: flex;*/
-  /*width: 648px;*/
-  /*padding: 40px 20px;*/
-  /*flex-direction: column;*/
-  /*justify-content: center;*/
-  /*align-items: center;*/
-  /*width: 100%;*/
-  /*gap: 40px;*/
-  /*!*flex: 1 0 0;*!*/
-  /*border: 1px solid #4d4d4d;*/
-  /*background: rgba(41, 41, 41, 0.7);*/
     display: flex;
-    /*width: 1440px;*/
-    /*height: 800px;*/
     flex-direction: column;
     align-items: flex-start;
-    /*background-color: #221111;*/
 }
 
 .title {
   background: linear-gradient(92deg, #00a341 -10.37%, #fff 133.66%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-  font-family: Inter;
   font-size: 20px;
   font-style: normal;
   font-weight: 700;
@@ -33,7 +18,6 @@
 
 .prompt {
   color: #fff;
-  font-family: Inter;
   font-size: 30px;
   font-style: normal;
   font-weight: 700;

web/src/components/Playing.tsx

@@ -1,12 +1,12 @@
-import styles from "./Playing.module.css";
-import { Flex, Text } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
+
 import { useGameContext } from "../contexts/GameContext";
 import SessionsView from "./sessions/SessionsView";
-import { useEffect } from "react";
 import PlayView from "./playing/PlayView";
+import styles from "./Playing.module.css";
 
 const Playing = () => {
-  const { selectedSession, updateContext, selectedToken, watchingToken } = useGameContext();
+  const { selectedSession, selectedToken, watchingToken } = useGameContext();
 
   return (
     <Flex className={styles.container}>

web/src/components/TitleScreen.tsx

@@ -1,32 +1,17 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect } from "react";
+import { useQueryClient } from "react-query";
+
 import ConnectingView from "./ConnectingView";
 import Web3Context from "../contexts/Web3Context/context";
 import TitleScreenLayout from "./layout/TitleScreenLayout";
 import PlayingLayout from "./layout/PlayingLayout";
 import Playing from "./Playing";
-import { useRouter } from "next/router";
-import { useQuery, useQueryClient } from "react-query";
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-import queryCacheProps from "../hooks/hookCommon";
 import { useGameContext } from "../contexts/GameContext";
-import OwnedTokens from "./tokens/OwnedTokens";
-import SessionsView from "./sessions/SessionsView";
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 
 const TitleScreen = () => {
-  const [step, setStep] = useState(1);
   const web3ctx = useContext(Web3Context);
 
-  const router = useRouter();
-
-  const { selectedSession, contractAddress, selectedToken, updateContext, chainId } =
-    useGameContext();
-
-  // useEffect(() => {
-  //   if (typeof router.query.session_id === "string") {
-  //     updateContext({ sessionId: Number(router.query.session_id) });
-  //   }
-  // }, [router.query.session_id]);
+  const { chainId } = useGameContext();
 
   const queryClient = useQueryClient();
 
@@ -39,7 +24,7 @@ const TitleScreen = () => {
     <>
       {web3ctx.buttonText !== "Connected" || web3ctx.chainId !== chainId ? (
         <TitleScreenLayout>
-          <ConnectingView nextStep={() => setStep(3)} />
+          <ConnectingView />
         </TitleScreenLayout>
       ) : (
         <>
@@ -53,4 +38,3 @@ const TitleScreen = () => {
 };
 
 export default TitleScreen;
-1;

web/src/components/layout/Navbar.tsx

@@ -19,7 +19,7 @@ const Navbar = () => {
       justifyContent={"space-between"}
       pt={{ base: "15px", sm: "5px" }}
       gap={"15px"}
-      fontSize={{ sm: "16px", base: "14px" }}
+      fontSize={{ sm: "16px", base: "10px" }}
     >
       <Text className={styles.gradientText} fontSize={"14px"}>
         Fullcount

web/src/components/layout/PlayingLayout.tsx

@@ -11,6 +11,7 @@ const sounds = {
   clapping: `${FULLCOUNT_ASSETS_PATH}/sounds/clapping-male-crowd.wav`,
   hit: `${FULLCOUNT_ASSETS_PATH}/sounds/hard-hit.wav`,
   catch: `${FULLCOUNT_ASSETS_PATH}/sounds/ball-hit.wav`,
+  select: `${FULLCOUNT_ASSETS_PATH}/sounds/select.wav`,
 };
 
 const PlayingLayout = ({ children }: { children: ReactNode }) => {
@@ -19,7 +20,7 @@ const PlayingLayout = ({ children }: { children: ReactNode }) => {
       direction="column"
       minH={"100vh"}
       gap={"40px"}
-      p={"0 7% 60px 7%"}
+      p={{ lg: "0 7% 60px 7%", base: "0 10px 80px 10px" }}
       maxW={"1440px"}
       placeSelf={"center"}
       w={"100%"}
@@ -33,6 +34,7 @@ const PlayingLayout = ({ children }: { children: ReactNode }) => {
       <audio id="hit" src={sounds.hit} preload={"auto"} />
       <audio id="clapping" src={sounds.clapping} preload={"auto"} />
       <audio id="catch" src={sounds.catch} preload={"auto"} />
+      <audio id="selectSound" src={sounds.select} preload={"auto"}></audio>
 
       {children}
     </Flex>

web/src/components/layout/SoundFxSlider.tsx

@@ -6,7 +6,7 @@ const SoundFxSlider = () => {
 
   return (
     <Flex gap={"10px"} p={"10px"} border={"1px solid #4D4D4D"}>
-      <Text>Sound FX</Text>
+      <Text whiteSpace={"nowrap"}>Sound FX</Text>
       <Slider
         aria-label="slider-ex-4"
         value={soundVolume}

web/src/components/playing/ActionTypeSelector.tsx

@@ -0,0 +1,31 @@
+import { Flex } from "@chakra-ui/react";
+import styles from "./PlayView.module.css";
+
+const ActionTypeSelector = ({
+  types,
+  isDisabled,
+  selected,
+  setSelected,
+}: {
+  types: string[];
+  isDisabled: boolean;
+  selected: number;
+  setSelected: (value: number) => void;
+}) => {
+  return (
+    <Flex justifyContent={"center"} gap={"20px"}>
+      {types.map((type, idx) => (
+        <Flex
+          key={idx}
+          className={selected === idx ? styles.activeChoice : styles.inactiveChoice}
+          onClick={isDisabled ? undefined : () => setSelected(idx)}
+          cursor={isDisabled ? "default" : "pointer"}
+        >
+          {type}
+        </Flex>
+      ))}
+    </Flex>
+  );
+};
+
+export default ActionTypeSelector;