🎼🪹 ↝ Garden

.github/workflows/deta.yml

@@ -0,0 +1,15 @@
+name: Push to Space
+on: push
+
+jobs:
+  push-to-space:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Deta Space Deployment Github Action
+        uses: neobrains/space-deployment-github-action@v0.5
+        with:
+          access_token: ${{ secrets.ACCESS_TOKEN }}
+          project_id: ${{ secrets.PROJECT_ID }}
+          space_push: true
+          list_on_discovery: true

Spacefile

@@ -0,0 +1,7 @@
+# Spacefile Docs: https://go.deta.dev/docs/spacefile/v0
+v: 0
+micros:
+  - name: client
+    src: ./
+    engine: next
+    primary: true

components/Gameplay/Content/Map/Garden.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { PlanetGalleryIndexComp } from '../../../../pages/tests/planets';
+
+interface Anomaly {
+ id: string;
+ name: string;
+ icon: string;
+}
+
+interface GardenProps {
+ anomalies: Anomaly[];
+}
+
+const Garden: React.FC<GardenProps> = ({ anomalies }) => {
+ return (
+    <div style={{ backgroundImage: `url('/garden.png')` }} className="bg-cover bg-center h-screen w-screen flex items-center justify-center relative">
+   {/* <button className="p-2 bg-blue-500 text-white">Add Anomaly</button> */}
+   <PlanetGalleryIndexComp />
+     {anomalies.map((anomaly) => (
+       <img key={anomaly.id} src={anomaly.icon} alt={anomaly.name} className="absolute top-0 left-0 w-16 h-16" />
+     ))}
+   </div>
+ );
+};
+
+export default Garden;

components/Gameplay/Planets/PlanetGalleryCard.tsx

@@ -59,4 +59,21 @@ export default function PlanetGalleryCard({ planet }: Props) {
       </Card>
     </div>
   );
+}
+
+export function PlanetGalleryCardGarden({ planet }: Props) {
+  const { id, content, cover, classification_status, difficulty } = planet;
+
+  return (
+    <div className="col-md-4 mb-4">
+        <div style={{ width: "10%", height: "100%", overflow: "hidden" }}>
+          <Card.Img
+            variant="top"
+            src={cover}
+            alt="Planet cover image"
+            className="w-100 h-auto"
+          />
+        </div>
+    </div>
+  );
 }

pages/garden.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import Garden from "../components/Gameplay/Content/Map/Garden";
+
+export default function GardenPage() {
+    return (
+        <Garden anomalies={[]} />
+    )
+}

pages/tests/map/honeycomb.tsx

@@ -16,7 +16,7 @@ const generateUnfilledHexagons = (count) => {
   return hexagons;
 };
 
-function App() {
+function HoneycombComponent() {
   const hexagons = generateUnfilledHexagons(100);
 
   return (
@@ -26,4 +26,4 @@ function App() {
   );
 }
 
-export default App;
+export default HoneycombComponent;

pages/tests/planets.tsx

@@ -3,7 +3,7 @@ import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { Container, Row } from "react-bootstrap";
 
 import Login from "../login";
-import PlanetGalleryCard from "../../components/Gameplay/Planets/PlanetGalleryCard";
+import { PlanetGalleryCardGarden } from "../../components/Gameplay/Planets/PlanetGalleryCard";
 import CoreLayout from "../../components/Core/Layout";
 
 export default function PlanetGalleryIndex() {
@@ -70,10 +70,77 @@ export default function PlanetGalleryIndex() {
       <Container>
         <Row className="mb-20">
           {planets.map((planet) => (
-            <PlanetGalleryCard key={planet.id} planet={planet} />
+            <PlanetGalleryCardGarden key={planet.id} planet={planet} />
           ))}
         </Row>
       </Container>
     </CoreLayout>
   );
+}
+
+export function PlanetGalleryIndexComp() {
+  const supabase = useSupabaseClient();
+  const session = useSession();
+  const [planets, setPlanets] = useState([]);
+  const [selectedDifficulty, setSelectedDifficulty] = useState<number | null>(1);
+
+  useEffect(() => {
+    getPlanets();
+  }, [session, selectedDifficulty]);
+
+  const getPlanets = async () => {
+    try {
+      let query = supabase
+        .from("planetsss")
+        .select("*")
+        .order("difficulty", { ascending: true })
+        .order("created_at", { ascending: false })
+        .limit(4)
+        .gte("id", 45)
+        .lt("id", 102);
+
+      const { data, error } = await query;
+
+      if (data != null) {
+        setPlanets(data);
+      }
+
+      if (error) {
+        throw error;
+      }
+    } catch (error: any) {
+      alert(error.message);
+    }
+  };   
+
+  const difficultyOptions = [
+    { value: 1, label: "Difficulty 1" },
+    { value: 2, label: "Difficulty 2" },
+    { value: 3, label: "Difficulty 3" },
+  ];
+
+  const buttonStyle = {
+    backgroundColor: "rgba(255, 255, 255, 0.2)",
+    border: "none",
+    color: "black",
+    transition: "background-color 0.3s ease",
+    cursor: "pointer",
+    marginRight: "8px",
+  };
+
+  const activeButtonStyle = {
+    backgroundColor: "rgba(255, 255, 255, 0.3)",
+  };
+
+  // if (!session) {
+  //   return <Login />;
+  // }
+
+  return (
+        <Row className="mb-20">
+          {planets.map((planet) => (
+            <PlanetGalleryCardGarden key={planet.id} planet={planet} />
+          ))}
+        </Row>
+  );
 }