Structure globale de l'application client

Signed-off-by: Emmy D'Anello <emmy@luemy.eu>

client/app/(tabs)/_layout.tsx

@@ -0,0 +1,50 @@
+import { Tabs } from 'expo-router'
+import React from 'react'
+
+import { Colors } from '@/constants/Colors'
+import { useColorScheme } from '@/hooks/useColorScheme'
+import { FontAwesome6, MaterialIcons } from '@expo/vector-icons'
+
+export default function TabLayout() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+      }}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Carte',
+          headerShown: false,
+          tabBarIcon: ({ color }) => <FontAwesome6 name="map-location-dot" size={24} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="challenges"
+        options={{
+          title: 'Challenges',
+          headerTitleStyle: {fontSize: 32},
+          tabBarIcon: ({ color }) => <FontAwesome6 name="coins" size={24} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="train"
+        options={{
+          title: 'Ajouter un trajet',
+          headerTitleStyle: {fontSize: 32},
+          tabBarIcon: ({ color }) => <FontAwesome6 name="train" size={24} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="history"
+        options={{
+          title: 'Historique',
+          headerTitleStyle: {fontSize: 32},
+          tabBarIcon: ({ color }) => <MaterialIcons name="history" size={24} color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}

client/app/(tabs)/challenges.tsx

@@ -0,0 +1,14 @@
+import { ScrollView } from 'react-native';
+
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+
+export default function ChallengesScreen() {
+  return (
+    <ScrollView>
+      <ThemedView>
+        <ThemedText>Ici on aura la gestion des challenges</ThemedText>
+      </ThemedView>
+    </ScrollView>
+  );
+}

client/app/(tabs)/history.tsx

@@ -0,0 +1,14 @@
+import { ScrollView } from 'react-native';
+
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+
+export default function HistoryScreen() {
+  return (
+    <ScrollView>
+      <ThemedView>
+        <ThemedText>Ici on aura la gestion de l'historique des trains empruntés et des challenges effectués</ThemedText>
+      </ThemedView>
+    </ScrollView>
+  );
+}

client/app/(tabs)/index.jsx

@@ -0,0 +1,46 @@
+import { Platform, StyleSheet } from 'react-native'
+import { ThemedView } from '@/components/ThemedView'
+
+export default function MapScreen() {
+  if (Platform.OS === "web") {
+    const maplibre = require('react-map-gl/maplibre')
+    const Map = maplibre.Map
+    return <ThemedView style={styles.page}>
+        <Map
+        initialViewState={{
+          longitude: 0,
+          latitude: 0,
+          zoom: 1
+        }}
+        mapStyle="https://demotiles.maplibre.org/style.json"
+      />
+    </ThemedView>
+  }
+  else {
+    const MapLibreGL = require('@maplibre/maplibre-react-native')
+    MapLibreGL.setAccessToken(null)
+    return (
+      <ThemedView style={styles.page}>
+        <MapLibreGL.MapView
+            style={styles.map}
+            logoEnabled={false}
+            styleURL="https://demotiles.maplibre.org/style.json"
+            children={[]}
+          />
+      </ThemedView>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  page: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  map: {
+    flex: 1,
+    alignSelf: 'stretch',
+  },
+});

client/app/(tabs)/train.tsx

@@ -0,0 +1,14 @@
+import { ScrollView } from 'react-native';
+
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+
+export default function TrainScreen() {
+  return (
+    <ScrollView>
+      <ThemedView>
+        <ThemedText>Ici on aura la page pour ajouter un trajet en train depuis Rail Planner</ThemedText>
+      </ThemedView>
+    </ScrollView>
+  );
+}

client/app/_layout.tsx

@@ -1,10 +1,15 @@
 import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
 import { Stack } from "expo-router"
 import { useColorScheme } from '@/hooks/useColorScheme'
+import { StatusBar } from 'expo-status-bar'
 
 export default function RootLayout() {
   const colorScheme = useColorScheme()
   return <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-    <Stack />
+    <Stack>
+      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      <Stack.Screen name="+not-found" />
+    </Stack>
+    <StatusBar style="auto" />
   </ThemeProvider>
 }

client/app/index.tsx

@@ -1,16 +0,0 @@
-import { View } from "react-native"
-import { ThemedText } from "@/components/ThemedText"
-
-export default function Index() {
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <ThemedText>Bienvue sur « Traintrape-moi » !</ThemedText>
-    </View>
-  );
-}