added rankings but ugly and tired

source/components/DeviceSection.js

@@ -0,0 +1,36 @@
+// components/DeviceSection.js
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { LoadingBar } from './LoadingBar.js';
+
+function renderDeviceInfo(deviceInfo, deviceError) {
+  if (deviceError) {
+    return <Text color="red">{deviceError}</Text>;
+  }
+  if (!deviceInfo) {
+    return <Text>Chargement des informations...</Text>;
+  }
+
+  const percentage = deviceInfo.percentage;
+  if (percentage == null) {
+    return <Text>Status : {deviceInfo.status || 'N/A'}</Text>;
+  } else {
+    return (
+      <Box flexDirection="column" marginTop={1}>
+        <LoadingBar percentage={percentage} />
+        <Text>Temps restant : {deviceInfo.remainingTime || 'N/A'}</Text>
+        <Text>Status : {deviceInfo.status || 'N/A'}</Text>
+      </Box>
+    );
+  }
+}
+
+export function DeviceSection({ deviceInfo, deviceError, width }) {
+  return (
+    <Box flexDirection="column" marginTop={1} width={width}>
+      <Text color="green">Informations du device :</Text>
+      {renderDeviceInfo(deviceInfo, deviceError)}
+    </Box>
+  );
+}

source/components/LoadingBar.js

@@ -0,0 +1,20 @@
+// components/LoadingBar.js
+
+import React from 'react';
+import { Box, Text } from 'ink';
+
+export const LoadingBar = ({ percentage }) => {
+  const width = 30;
+  const filledWidth = Math.round((percentage / 100) * width);
+  const emptyWidth = width - filledWidth;
+
+  return (
+    <Box>
+      <Text color="green">[</Text>
+      <Text color="green">{'='.repeat(filledWidth)}</Text>
+      <Text>{' '.repeat(emptyWidth)}</Text>
+      <Text color="green">]</Text>
+      <Text> {percentage}%</Text>
+    </Box>
+  );
+};

source/components/MatchesSection.js

@@ -0,0 +1,25 @@
+// components/MatchesSection.js
+
+import React from 'react';
+import { Box, Text } from 'ink';
+
+function translateHomeAway(homeAway) {
+  if (homeAway === 'Home') return 'domicile';
+  if (homeAway === 'Away') return 'extérieur';
+  return homeAway;
+}
+
+export function MatchesSection({ matches, teamColor, teamName, width }) {
+  return (
+    <Box flexDirection="column" marginTop={1} width={width}>
+      <Text color={teamColor}>Matches à venir de <Text color={teamColor}>{teamName}</Text> :</Text>
+      {!matches && <Text>Chargement des matchs...</Text>}
+      {matches && matches.length === 0 && <Text>Aucun match trouvé.</Text>}
+      {matches && matches.slice(0, 2).map((m, i) => (
+        <Text key={i} wrap="truncate-end">
+          {m.date} {m.time} - <Text color={teamColor}>{teamName}</Text> vs {m.opponent} ({translateHomeAway(m.homeAway)})
+        </Text>
+      ))}
+    </Box>
+  );
+}

source/components/MemoSection.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+export function MemoSection({ latestMemo, width, height }) {
+  const lines = latestMemo.split('\n');
+  const maxLines = Math.max(height - 28, 4);
+  return (
+    <Box flexDirection="column" marginTop={1} width={width}>
+      <Text color="magenta">Liste de courses</Text>
+      {lines.slice(0, maxLines).map((line, index) => (
+        <Text key={index} wrap="truncate-end">{line}</Text>
+      ))}
+    </Box>
+  );
+}

source/components/TaskTroveSection.js

@@ -0,0 +1,36 @@
+// components/TaskTroveSection.js
+
+import React from 'react';
+import { Box, Text } from 'ink';
+
+function renderTaskTroveList(tasks) {
+  if (!tasks) {
+    return <Text>Chargement des tâches...</Text>;
+  }
+
+  if (tasks.length === 0) {
+    return <Text>Aucune tâche à afficher.</Text>;
+  }
+
+  return (
+    <Box flexDirection="column">
+      {tasks.map((task, index) => {
+        const color = task.priority === 1 ? 'red' : task.priority === 2 ? 'yellow' : 'white';
+        return (
+          <Text key={index} color={color}>
+            - {task.title}
+          </Text>
+        );
+      })}
+    </Box>
+  );
+}
+
+export function TaskTroveSection({ tasks, width }) {
+  return (
+    <Box flexDirection="column" marginTop={1} width={width}>
+      <Text color="cyan">To-Do List</Text>
+      {renderTaskTroveList(tasks)}
+    </Box>
+  );
+}

source/components/WeatherSection.js

@@ -0,0 +1,28 @@
+// components/WeatherSection.js
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { weatherCodeMap } from '../utils/weatherCodes.js';
+
+function renderWeather(location, weather) {
+  if (!weather) return <Text>{location}: Loading weather...</Text>;
+
+  const weatherInfo = weatherCodeMap[weather.weathercode] || { desc: 'Unknown', color: 'white' };
+
+  return (
+    <Text>
+      {location}: <Text color={weatherInfo.color}>{weatherInfo.desc}</Text>,{' '}
+      <Text color="cyan">{weather.temperature}°C</Text> (Vent : {weather.windspeed} km/h)
+    </Text>
+  );
+}
+
+export function WeatherSection({ weatherNancy, weatherParis, width }) {
+  const flexDirection = width >= 60 ? "row" : "column";
+  return (
+    <Box flexDirection={flexDirection} justifyContent="space-between" width={width}>
+      {renderWeather('Nancy', weatherNancy)}
+      {renderWeather('Paris', weatherParis)}
+    </Box>
+  );
+}