add colors for planets

Author: flexbox

hackathon/spacecraft/.vscode/settings.json

@@ -1,9 +1,7 @@
 {
-  "settings": {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
-    }
-  }
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always"
+  },
 }

hackathon/spacecraft/src/hooks/useAppearanceTheme.tsx renamed to hackathon/spacecraft/src/hooks/useAppearanceTheme.ts

@@ -1,8 +1,10 @@
-import { Text, TouchableOpacity, View } from "react-native";
+import { FlatList, TouchableOpacity, View } from "react-native";
+import { Text } from "react-native-paper";
 
 import { ScreenContainer } from "~/components/ScreenContainer";
 import { usePlanets } from "~/hooks/usePlanets";
 import { Routes } from "~/navigation/Routes";
+import { getTerrainColor } from "~/utils/getTerrainColor";
 
 interface ExploreScreenProps {}
 
@@ -25,20 +27,46 @@ export function ExploreScreen({ navigation }: ExploreScreenProps) {
     );
   }
 
+  const renderItem = ({ item }) => {
+    if (!item || item.name === "Bespin") {
+      return null;
+    }
+
+    const backgroundColor = getTerrainColor(item.terrain);
+    const size = item.diameter / 100;
+
+    return (
+      <View style={{ padding: 64 }}>
+        <TouchableOpacity
+          onPress={() =>
+            navigation.navigate(Routes.PLANET_DETAILS_SCREEN, { planet: item })
+          }
+        >
+          <Text variant="headlineMedium" style={{ textAlign: "center" }}>
+            {item.name}
+          </Text>
+        </TouchableOpacity>
+        <View
+          style={{
+            width: size,
+            height: size,
+            backgroundColor: backgroundColor,
+            borderRadius: "100%",
+            margin: 8,
+          }}
+        />
+      </View>
+    );
+  };
+
   return (
     <ScreenContainer title={"Explore"}>
-      <View>
-        {data?.results.map((planet) => (
-          <TouchableOpacity
-            key={planet.name}
-            onPress={() =>
-              navigation.navigate(Routes.PLANET_DETAILS_SCREEN, { planet })
-            }
-          >
-            <Text>{planet.name}</Text>
-          </TouchableOpacity>
-        ))}
-      </View>
+      <FlatList
+        data={data.results}
+        renderItem={renderItem}
+        keyExtractor={(ship) => ship.model}
+        horizontal={true}
+      />
     </ScreenContainer>
   );
 }

hackathon/spacecraft/src/hooks/useImage.tsx renamed to hackathon/spacecraft/src/hooks/useImage.ts

@@ -37,12 +37,6 @@ export interface PlanetDetailsScreenProps {
 }
 
 export function PlanetDetailsScreen(props: PlanetDetailsScreenProps) {
-  console.log(
-    "🚀 ~ file: PlanetDetailsScreen.tsx:6 ~ PlanetDetailsScreen ~ props:",
-    props.route
-  );
-
-
   return (
     <ScreenContainer title={props.route.params.planet.name} withGoBack>
       <Text>PlanetDetailsScreen</Text>

hackathon/spacecraft/src/hooks/usePilot.tsx renamed to hackathon/spacecraft/src/hooks/usePilot.ts

@@ -0,0 +1,29 @@
+const terrainColorMap = {
+  desert: "#EDC9AF",
+  grasslands: "#7CFC00",
+  mountains: "#8B4513",
+  jungle: "#228B22",
+  rainforests: "#006400",
+  tundra: "#D3D3D3",
+  "ice caves": "#ADD8E6",
+  "mountain ranges": "#8B4513",
+  swamp: "#556B2F",
+  jungles: "#228B22",
+  "gas giant": "#FFD700",
+  forests: "#228B22",
+  lakes: "#0000FF",
+  "grassy hills": "#7CFC00",
+  cityscape: "#A9A9A9",
+  ocean: "#0000FF",
+};
+
+export function getTerrainColor(terrain: string) {
+  console.log("🚀 ~ terrain:", terrain);
+  for (const [key, color] of Object.entries(terrainColorMap)) {
+    if (terrain.includes(key)) {
+      return color;
+    }
+  }
+
+  return "#000000"; // default color if no match
+}