add mobile warning

mluogh · Sep 16, 2023 · c518ef0 · c518ef0
1 parent 794fee4
commit c518ef0
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "phaser": "^3.60.0",
     "pubsub-js": "^1.9.4",
     "react": "^18.2.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",
     "react-github-login-button": "^1.0.1",

diff --git a/src/components/Login.tsx b/src/components/Login.tsx
@@ -9,6 +9,7 @@ import {
 } from "@chakra-ui/react";
 import GoogleButton from "react-google-button";
 import GithubButton from "react-github-login-button";
+import { BrowserView, MobileView } from "react-device-detect";
 
 export const Login = () => {
   const handleGitHubLogin = async () => {
@@ -99,12 +100,19 @@ export const Login = () => {
                   fontFamily={"vt323"}
                   marginBottom={3}
                 >
-                  <GithubButton onClick={handleGitHubLogin}>
-                    Sign in with GitHub
-                  </GithubButton>
-                  <GoogleButton onClick={handleGoogleLogin}>
-                    Sign in with Google
-                  </GoogleButton>
+                  <BrowserView>
+                    <GithubButton onClick={handleGitHubLogin}>
+                      Sign in with GitHub
+                    </GithubButton>
+                    <GoogleButton onClick={handleGoogleLogin}>
+                      Sign in with Google
+                    </GoogleButton>
+                  </BrowserView>
+                  <MobileView>
+                    <Text fontSize={"2xl"}>
+                      Demo requires keyboard. Use computer to play!
+                    </Text>
+                  </MobileView>
                 </VStack>
               </Box>
             </VStack>