🥖🏕️ ↝ [FCDB-3 CPW-2 SGV2-141]: Merge pull request #134 from Signal-K/…

…CPW-2

🦔🥖 ↝ [FCDB-3 CPW-2 SGV2-141]: Post cards & content from V1.0 into FCDB project/board

.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/[email protected]
+        with:
+          access_token: ${{ secrets.ACCESS_TOKEN }}
+          project_id: ${{ secrets.PROJECT_ID }}
+          space_push: true
+          list_on_discovery: true

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
     "jira-plugin.workingProject": "",
     "liveServer.settings.port": 5501,
-    "solidity.defaultCompiler": "localFile",
-    "solidity.compileUsingRemoteVersion": "v0.8.11+commit.d7f03943"
+    "solidity.compileUsingRemoteVersion": "v0.8.11+commit.d7f03943",
+    "solidity.defaultCompiler": "localFile"
 }

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/Content/Map/Hexagon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+interface HexagonProps {
+  filled: boolean;
+  fillType: string;
+  fillIcon: string;
+  colour: string;
+}
+
+const Hexagon: React.FC<HexagonProps> = ({ filled, fillType, fillIcon, colour }) => {
+  const hexagonClass = filled ? 'bg-opacity-50' : 'bg-opacity-20';
+  const outlineColor = colour || '#BBBBBB';
+
+  return (
+    <div className={`hexagon ${hexagonClass}`} style={{ borderColor: outlineColor }}>
+      {fillIcon && !filled && (
+        <img src={fillIcon} alt="" className="w-4/5 h-4/5 mx-auto my-auto" />
+      )}
+    </div>
+  );
+};
+
+export default Hexagon;

components/Gameplay/Content/Map/honeyComb.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Hexagon from './Hexagon';
+
+interface HexagonProps {
+    filled: boolean;
+    fillType: string;
+    fillIcon: string;
+    colour: string;
+};
+
+interface HoneycombProps {
+  hexagons: Array<HexagonProps>;
+  backgroundImage: string;
+}
+
+const Honeycomb: React.FC<HoneycombProps> = ({ hexagons, backgroundImage }) => {
+  const honeycombStyle = {
+    backgroundImage: `url(${backgroundImage})`,
+  };
+
+  return (
+    <div className="honeycomb-container" style={honeycombStyle}>
+      <div className="grid grid-cols-3 gap-4">
+        {hexagons.map((hexagon, index) => (
+          <Hexagon key={index} {...hexagon} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Honeycomb;

components/Gameplay/Content/background.tsx

@@ -0,0 +1,39 @@
+import React, { ReactNode } from "react";
+
+interface BackgroundPageProps {
+  backgroundImage: string;
+  children: ReactNode;
+}
+
+const BackgroundPage: React.FC<BackgroundPageProps> = ({
+  backgroundImage,
+  children,
+}) => {
+  const backgroundStyle: React.CSSProperties = {
+    backgroundImage: `url(${backgroundImage})`,
+    backgroundSize: "cover",
+    backgroundRepeat: "no-repeat",
+    backgroundAttachment: "fixed",
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: -1,
+  };
+
+  const contentContainerStyle: React.CSSProperties = {
+    position: "relative", // To allow children to be positioned relative to this container
+    zIndex: 1, // Ensure content appears above the background
+  };
+
+  return (
+    <div style={backgroundStyle}>
+      <div style={contentContainerStyle}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default BackgroundPage;

components/Gameplay/Planets/Data/CreatePlanetSector.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from "react";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+
+function CreateSectorComponent({ planetId }) {
+  const supabase = useSupabaseClient();
+  const session = useSession();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const createSector = async () => {
+    if (!session?.user?.id) {
+      return;
+    }
+
+    if (!planetId) {
+      // User is not on a planet
+      return;
+    }
+
+    // Generate random mineral deposits
+    const depositCount = Math.floor(Math.random() * 5);
+    const minerals = ['Gold', 'life', 'water', 'carbon', 'iron', 'hydrogen', 'energy', 'minerals'];
+    const deposits = [];
+    for (let i = 0; i < depositCount; i++) {
+      const randomMineral = minerals[Math.floor(Math.random() * minerals.length)];
+      deposits.push(randomMineral);
+    }
+
+    // Calculate cost (1 silfur for the first sector, and 1 additional silfur for each additional sector)
+    const cost = 1 // + (1 * /* Replace with the number of sectors on the planet */);
+
+    // Create the new sector
+    setIsLoading(true);
+    const { data, error } = await supabase.from('planetsssSECTORS').upsert([
+      {
+        ownerId: session.user.id,
+        planetId: planetId,
+        cost: cost,
+        metadata: '',
+        deposits: deposits,
+        sectorImage: '', // Leave this blank for now
+        images: {}, // Leave this blank for now
+      },
+    ]);
+
+    setIsLoading(false);
+
+    if (error) {
+      console.error('Error creating sector:', error);
+      // Handle the error here
+    } else {
+      console.log('Sector created:', data);
+      // Handle success, e.g., show a success message
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={createSector} disabled={isLoading}>
+        Create Sector
+      </button>
+    </div>
+  );
+}
+
+export default CreateSectorComponent;

components/Gameplay/Planets/Data/PlanetSectors.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface Sector {
+  id: number;
+  metadata: string;
+  // Add more fields as needed
+}
+
+interface PlanetSectorsProps {
+  sectors: Sector[];
+}
+
+const PlanetSectors: React.FC<PlanetSectorsProps> = ({ sectors }) => {
+  return (
+    <div className="sector-container">
+      {sectors.map((sector, index) => (
+        <div key={index} className="sector">
+          <div className="sector-number">{index + 1}</div>
+          <div className="sector-metadata">{sector.metadata}</div>
+          {/* Add more sector information here */}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default PlanetSectors;

components/Gameplay/Planets/Data/RetrievePlotImage.tsx

@@ -0,0 +1,30 @@
+import { useState } from "react";
+
+function GeneratePlot() {
+  const [plotPath, setPlotPath] = useState("");
+
+  const generateSectorPlot = async (ticId) => {
+    try {
+      const response = await fetch("http://127.0.0.1:5000/generate_sector_plot", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ ticId }),
+      });
+      const data = await response.json();
+      setPlotPath(data.plot_path);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={() => generateSectorPlot("55525572")}>Generate Sector Plot</button>
+      {plotPath && <img src={plotPath} alt="Sector Plot" />}
+    </div>
+  );
+}
+
+export default GeneratePlot;

components/Gameplay/Planets/Data/RetrieveStarData.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+
+const StarInfoComponent = () => {
+  const [ticId, setTicId] = useState('');
+  const [starInfo, setStarInfo] = useState<{ [key: string]: string }>({});
+  const [error, setError] = useState('');
+
+  const handleTicIdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setTicId(e.target.value);
+  };
+
+  const getStarInfo = async () => {
+    try {
+      const response = await axios.post('http://127.0.0.1:5000/get_star_info', { ticId });
+      setStarInfo(response.data);
+      setError('');
+    } catch (error) {
+      setError('Error: Unable to fetch star information.');
+      setStarInfo({});
+    }
+  };
+
+  return (
+    <div className="max-w-sm mx-auto p-4 bg-white shadow-md rounded-md">
+      <h1 className="text-2xl font-bold mb-4">Star Information</h1>
+      <div className="mb-4">
+        <input
+          type="text"
+          placeholder="Enter TIC ID"
+          value={ticId}
+          onChange={handleTicIdChange}
+          className="w-full px-3 py-2 border rounded-md"
+        />
+      </div>
+      <button onClick={getStarInfo} className="w-full bg-blue-500 text-white py-2 rounded-md">
+        Get Star Info
+      </button>
+      {error && <div className="text-red-500 mt-4">{error}</div>}
+      {Object.keys(starInfo).length > 0 && (
+        <div className="mt-4">
+          <h2 className="text-lg font-semibold">Star Info:</h2>
+          <ul>
+            {Object.entries(starInfo).map(([key, value]) => (
+              <li key={key} className="mt-2">
+                <strong>{key}:</strong> {value}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StarInfoComponent;

components/Gameplay/Planets/Data/SectorGrid.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+
+interface Sector {
+  id: number;
+  metadata: string;
+  // Add more fields as needed
+}
+
+interface SectorGridProps {
+  sectors: Sector[];
+}
+
+const SectorGrid: React.FC<SectorGridProps> = ({ sectors }) => {
+  const [selectedSector, setSelectedSector] = useState<Sector | null>(null);
+
+  const handleHexagonClick = (sector: Sector) => {
+    setSelectedSector(sector);
+  };
+
+  return (
+    <div className="sector-grid">
+      {sectors.map((sector, index) => (
+        <div key={index} className="hexagon" onClick={() => handleHexagonClick(sector)}>
+          <div className="sector-number">{index + 1}</div>
+        </div>
+      ))}
+      {selectedSector && (
+        <div className="sector-info">
+          <h2>Sector Information</h2>
+          <p>ID: {selectedSector.id}</p>
+          <p>Metadata: {selectedSector.metadata}</p>
+          {/* Add more sector information here */}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SectorGrid;