feat: fix mobile view

Yash094 · Yash094 · commit bc6990831bfc · 2025-08-20T15:51:29.000+05:30
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
+import { MobileDetector } from '../components/MobileDetector'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -16,7 +17,10 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <MobileDetector />
+        {children}
+      </body>
     </html>
   )
 }
diff --git a/components/MobileDetector.tsx b/components/MobileDetector.tsx
@@ -0,0 +1,43 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export function MobileDetector() {
+  const [isMobile, setIsMobile] = useState(false)
+
+  useEffect(() => {
+    const checkMobile = () => {
+      const userAgent = navigator.userAgent.toLowerCase()
+      const isMobileDevice = /mobile|android|iphone|ipad|phone|tablet/i.test(userAgent)
+      const isSmallScreen = window.innerWidth < 768
+      setIsMobile(isMobileDevice || isSmallScreen)
+    }
+
+    checkMobile()
+    window.addEventListener('resize', checkMobile)
+    
+    return () => window.removeEventListener('resize', checkMobile)
+  }, [])
+
+  if (!isMobile) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-90 text-white">
+      <div className="text-center p-8 max-w-md">
+        <div className="text-6xl mb-4">🖥️</div>
+        <h1 className="text-2xl font-bold mb-4">Desktop Only</h1>
+        <p className="text-lg mb-6">
+          Crypto Racer is designed for desktop computers. Please open this app on a desktop or laptop for the best gaming experience.
+        </p>
+        <div className="text-sm text-gray-300">
+          <p>Mobile devices are not supported due to:</p>
+          <ul className="mt-2 space-y-1">
+            <li>• Complex keyboard controls</li>
+            <li>• Performance requirements</li>
+            <li>• Screen size limitations</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}
