Merge pull request #96 from khalidh223/prevent-accessing-site-on-mobile

Prevents loading webapp if on a mobile device, displays mobile ad
khalidh223 · Dec 17, 2023 · 19f5fe9 · 19f5fe9
2 parents 66733ac + d05c5b0
commit 19f5fe9
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 5 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -28,6 +28,7 @@ export default function RootLayout({
           href="https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap"
           rel="stylesheet"
         />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </head>
       <body>
         <DrawSocketProvider>

diff --git a/app/page.tsx b/app/page.tsx
@@ -3,15 +3,27 @@
 import Box from "@mui/material/Box"
 import HomeButtons from "@/components/home/HomeButtons"
 import { useUser } from "./UserProvider"
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
 import { motion, AnimatePresence } from "framer-motion"
 import { sendWebSocketMessage } from "@/components/canvas/utils"
-import { Link, Typography } from "@mui/material"
-import { APP_VERSION } from "@/version";
-
+import { Link, Typography, useMediaQuery, useTheme } from "@mui/material"
+import { APP_VERSION } from "@/version"
+import MobileComingSoonAd from "@/components/MobileComingSoonAd"
+import styles from "./mobile_ad.module.css"
 
 export default function Home() {
   const { playerSocket, setPlayerSocket, role, username, gameCode } = useUser()
+  const [renderMobileAd, setRenderMobileAd] = useState(false)
+
+  useEffect(() => {
+    const isMobile =
+      /mobile|android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/.test(
+        navigator.userAgent.toLowerCase()
+      )
+    if (isMobile) {
+      setRenderMobileAd(true)
+    }
+  }, [])
 
   useEffect(() => {
     if (!playerSocket) {
@@ -49,6 +61,10 @@ export default function Home() {
     exit: { opacity: 0, transition: { duration: 0.5 } },
   }
 
+  if (renderMobileAd) {
+    return <MobileComingSoonAd />
+  }
+
   return (
     <AnimatePresence>
       {!role && (
@@ -83,7 +99,7 @@ export default function Home() {
             marginTop={"-4em"}
           >
             <Typography color={"#F20A7E"} fontWeight={"bold"}>
-              v{APP_VERSION} {" "} | {" "}Made by{" "}
+              v{APP_VERSION} | Made by{" "}
               <Link
                 color={"#F20A7E"}
                 href="https://github.com/khalidh223"

diff --git a/components/MobileComingSoonAd.tsx b/components/MobileComingSoonAd.tsx
@@ -0,0 +1,39 @@
+import { Box, Typography } from "@mui/material"
+import React from "react"
+
+const MobileComingSoonAd: React.FC = () => {
+  return (
+    <Box
+      display={"flex"}
+      flexDirection={"column"}
+      alignContent={"center"}
+      justifyContent={"center"}
+      alignItems={"center"}
+    >
+      <img src="/sad_qm.png" width={187} height={312} style={{marginBottom: '-5em', marginTop: '3em'}}></img>
+      <Typography variant="h2" fontWeight={"bold"} color={"white"} mt={"2em"}>
+        Sorry.
+      </Typography>
+      <Typography
+        variant="h6"
+        fontWeight={"bold"}
+        color={"white"}
+        mt={"2em"}
+        textAlign={"center"}
+      >
+        You need to be on desktop to play Fake Artist Online.
+      </Typography>
+      <Typography
+        variant="body1"
+        color={"white"}
+        mt={"2em"}
+        textAlign={"center"}
+        fontSize={"1.1rem"}
+      >
+        Fake Artist Online coming soon to iOS!
+      </Typography>
+    </Box>
+  )
+}
+
+export default MobileComingSoonAd
diff --git a/public/sad_qm.png b/public/sad_qm.png