De la telefon la tabletă: Adaptarea jocului Spânzurătoarea

Când am lansat prima versiune a jocului Spânzurătoarea, designul era optimizat strict pentru ecrane de telefon (360–428dp). Totul era compact, vertical și gândit pentru utilizarea cu o singură mână. Însă, când am deschis aplicația pe un iPad Pro, experiența a fost dezamăgitoare: elementele erau întinse la maximum, iar spațiul alb domina ecranul. Iată cum am trecut de la o interfață “mobile-only” la una cu adevărat adaptivă.

Strategia de layout: Dincolo de simpla scalare

Greșeala principală pe care am făcut-o inițial a fost să încerc să scalez componentele. Pe o tabletă, tastatura nu trebuie să fie uriașă, ci mai degrabă mai bine organizată. Am implementat un hook simplu pentru a detecta breakpoint-urile:

import { useWindowDimensions } from 'react-native';

export const useBreakpoint = () => {
  const { width } = useWindowDimensions();
  return {
    isMobile: width < 600,
    isTabletCompact: width >= 600 && width < 900,
    isTabletLarge: width >= 900,
  };
};

Reorganizarea elementelor: Portrait vs Landscape

Pe telefon, tabela de joc și tastatura stau vertical. Pe tabletă, am trecut la un layout lateral. În modul landscape, am mutat vizualul spânzurătorii în stânga și tastatura cu lista de litere în dreapta, folosind flexDirection: 'row'.

const GameScreen = () => {
  const { isMobile } = useBreakpoint();
  
  return (
    <View style={isMobile ? styles.column : styles.row}>
      <HangmanVisual />
      <KeyboardContainer />
    </View>
  );
};

Tastatura adaptivă pe iPad

Pe iPad, tastatura alfabetică devenea greu de folosit dacă păstram layout-ul de telefon. Am creat un grid dinamic care recalculează lățimea tastelor în funcție de minItemWidth. Folosind flexWrap: 'wrap', tastatura se ajustează natural:

const AdaptiveKeyboard = ({ letters }) => {
  return (
    <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center' }}>
      {letters.map(letter => (
        <Key key={letter} style={{ width: '10%' }} />
      ))}
    </View>
  );
};

Split View și SafeAreaView

Provocarea majoră pe iPadOS a fost modul Split View. Aplicația trebuie să știe când fereastra devine îngustă. useWindowDimensions combinat cu SafeAreaView este esențial aici pentru a evita coliziunea cu notch-ul sau bara de gesturi în modurile de multitasking.

Testarea pe Android: De la Samsung DeX la tablete low-end

Testarea pe Samsung DeX a scos la iveală bug-uri de redimensionare. Am observat că pe tabletele mai vechi, precum Samsung Tab A, randarea unei tastaturi cu 26 de butoane individuale încetinea UI-ul. Soluția a fost utilizarea unui FlatList cu initialNumToRender optimizat și memo pentru componentele tastelor, prevenind re-randările inutile.

Concluzie

Adaptarea pentru tabletă nu înseamnă doar „mai mult spațiu”, ci o regândire a fluxului de utilizator. Dacă pe telefon utilizatorul se concentrează pe un singur element, pe tabletă oferim context. Prin folosirea breakpoint-urilor și a componentelor modulare, am reușit să transformăm Spânzurătoarea dintr-o aplicație de telefon într-o experiență completă, indiferent de dispozitivul pe care este rulată.