faral/pokerface
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Show desktop-only message on mobile devices
All checks were successful
Build & Push Container Image / build (push) Successful in 8s
Details

Browse source 
Pokerface is designed for desktop use. On screens below 768px, show
a simple message asking users to open on their PC or Mac. Legal
pages remain accessible on mobile.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jan Willem Mannaerts 2026-02-28 16:10:44 +01:00
parent 03ba19042d
commit fe9b51309d
1 changed files with 33 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

33
frontend/src/App.jsx
View file

@ -20,6 +20,34 @@ function useDarkMode() {
return [dark, () => setDark((d) => !d)];
}
function useMobileCheck() {
const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768);
useEffect(() => {
const mq = window.matchMedia('(max-width: 767px)');
const handler = (e) => setIsMobile(e.matches);
mq.addEventListener('change', handler);
return () => mq.removeEventListener('change', handler);
}, []);
return isMobile;
}
function MobileGate({ dark }) {
return (
<div className="min-h-screen flex flex-col items-center justify-center px-8 text-center"
style={{ background: dark ? '#09090b' : '#f0f1f5' }}>
<h1 className="font-syne text-2xl font-extrabold tracking-tight mb-4"
style={{ color: dark ? '#fff' : '#0f172a' }}>
POKERFACE
</h1>
<div className="w-10 h-px bg-emerald-500 mb-6" />
<p className="text-sm leading-relaxed max-w-xs"
style={{ color: dark ? '#94a3b8' : '#475569' }}>
Pokerface is designed for desktop use. Please open it on your PC or Mac for the best experience.
</p>
</div>
);
}
export default function App() {
const [view, setView] = useState(() => {
const legalPages = { '/terms': 'legal-terms', '/privacy': 'legal-privacy', '/support': 'legal-support' };
@ -29,6 +57,7 @@ export default function App() {
const [activeRoom, setActiveRoom] = useState(null);
const [prevView, setPrevView] = useState('login');
const [dark, toggleDark] = useDarkMode();
const isMobile = useMobileCheck();
useEffect(() => {
if (!view.startsWith('legal-')) checkAuth();
@ -107,6 +136,10 @@ export default function App() {
}} />;
}
if (isMobile) {
return <MobileGate dark={dark} />;
}
if (view === 'login') {
return <LoginScreen dark={dark} toggleDark={toggleDark} onShowLegal={showLegal} />;
}