11'use client'
22
3- import React , { useEffect , useState } from "react"
4- import Image from "next/image"
5- import { useSupabaseClient , useSession } from "@supabase/auth-helpers-react"
6- import { useParams } from "next/navigation"
3+ import React , { useEffect , useState } from "react" ;
4+ import Image from "next/image" ;
5+ import { useSupabaseClient , useSession } from "@supabase/auth-helpers-react" ;
6+ import { useParams , useRouter } from "next/navigation" ;
77import { Classification } from "../../[id]/page" ;
8- import { useRouter } from "next/navigation"
98import GameNavbar from "@/components/Layout/Tes" ;
10- import PlanetGenerator from "@/components/Data/Generator/Astronomers/PlanetHunters/PlanetGenerator"
11- import { Button } from "@/components/ui/button"
9+ import PlanetGenerator from "@/components/Data/Generator/Astronomers/PlanetHunters/PlanetGenerator" ;
10+ import { Button } from "@/components/ui/button" ;
11+ import { Cog } from "lucide-react" ;
1212
1313export default function PaintYourPlanetPage ( ) {
14- const params = useParams ( ) ;
15- const id = params ?. id as string ;
16-
17- const router = useRouter ( ) ;
18-
19- const supabase = useSupabaseClient ( ) ;
20- const session = useSession ( ) ;
21-
22- const [ classification , setClassification ] = useState < Classification | null > ( null ) ;
23-
24- const [ loading , setLoading ] = useState < boolean > ( false ) ;
25- const [ error , setError ] = useState < string > ( '' ) ;
26-
27- useEffect ( ( ) => {
28- if ( ! params . id ) {
29- return ;
30- } ;
31-
32- const fetchClassification = async ( ) => {
33- const {
34- data,
35- error
36- } = await supabase
37- . from ( "classifications" )
38- . select ( "*, anomaly:anomalies(*), classificationConfiguration, media" )
39- . eq ( "id" , params . id )
40- . single ( ) ;
41-
42- if ( error ) {
43- console . error ( "Error fetching planet details: " , error ) ;
44- setError ( 'Failed to fetch classification data' ) ;
45- return ;
46- } ;
47-
48- setClassification ( data ) ;
49- } ;
50-
51- fetchClassification ( ) ;
52- } , [ params ] ) ;
53-
54- if ( ! classification ) {
55- return (
56- < p > Loading...</ p >
57- ) ;
14+ const params = useParams ( ) ;
15+ const id = params ?. id as string ;
16+
17+ const router = useRouter ( ) ;
18+ const supabase = useSupabaseClient ( ) ;
19+ const session = useSession ( ) ;
20+
21+ const [ classification , setClassification ] = useState < Classification | null > ( null ) ;
22+ const [ loading , setLoading ] = useState < boolean > ( false ) ;
23+ const [ error , setError ] = useState < string > ( '' ) ;
24+
25+ const [ showSettings , setShowSettings ] = useState ( false ) ;
26+
27+ useEffect ( ( ) => {
28+ const fetchClassification = async ( ) => {
29+ if ( ! id ) return ;
30+ const { data, error } = await supabase
31+ . from ( "classifications" )
32+ . select ( "*, anomaly:anomalies(*), classificationConfiguration, media" )
33+ . eq ( "id" , id )
34+ . single ( ) ;
35+
36+ if ( error ) {
37+ console . error ( "Error fetching planet details: " , error ) ;
38+ setError ( 'Failed to fetch classification data' ) ;
39+ return ;
40+ }
41+
42+ setClassification ( data ) ;
5843 } ;
5944
60- return (
61- < div className = "min-h-screen w-screen flex flex-col bg-black text-white" >
62- < GameNavbar />
63- < div className = "relative flex-1 overflow-hidden" >
64- < div className = "absolute inset-0 z-0 pointer-events-none" >
65- < Image
66- src = "/assets/Backdrops/background1.jpg"
67- alt = 'background'
68- fill
69- priority
70- className = "object-cover"
71- />
72- < div className = "absolute inset-0 bg-black/30 pointer-events-none" />
73- </ div >
74-
75- { /* Main content container fills remaining space */ }
76- < main className = "relative z-10 flex flex-col h-full px-4 pt-4" >
77- { /* Limit PlanetGenerator height so it doesn't overflow */ }
78- < div className = "flex-grow overflow-auto max-h-[calc(100vh-160px)]" >
79- < PlanetGenerator
80- classificationId = { classification . id . toString ( ) }
81- editMode = { true }
82- />
83- </ div >
84-
85- < div className = "flex flex-col sm:flex-row gap-3 pt-4 border-t border-[#D8DEE9] pb-4" >
86- < Button variant = "outline" onClick = { ( ) => router . push ( `/structures/telescope` ) } >
87- 🧬 Back to Structure
88- </ Button >
89- < Button variant = "ghost" onClick = { ( ) => router . push ( '/' ) } >
90- 🏠 Home
91- </ Button >
92- </ div >
93- </ main >
94- </ div >
45+ fetchClassification ( ) ;
46+ } , [ id ] ) ;
47+
48+ if ( ! classification ) return < p > Loading...</ p > ;
49+
50+ return (
51+ < div className = "min-h-screen w-screen flex flex-col bg-black text-white" >
52+ < GameNavbar />
53+
54+ < div className = "relative flex-1 overflow-hidden" >
55+ { /* Background */ }
56+ < div className = "absolute inset-0 z-0 pointer-events-none" >
57+ < Image
58+ src = "/assets/Backdrops/background1.jpg"
59+ alt = "background"
60+ fill
61+ priority
62+ className = "object-cover"
63+ />
64+ < div className = "absolute inset-0 bg-black/30 pointer-events-none" />
9565 </ div >
96- )
66+
67+ < main className = "relative z-10 flex flex-col h-full px-4 pt-4" >
68+ < div className = "flex-grow overflow-auto max-h-[calc(100vh-160px)]" >
69+ < PlanetGenerator
70+ classificationId = { classification . id . toString ( ) }
71+ editMode = { true }
72+ showSettings = { showSettings }
73+ onToggleSettings = { ( ) => setShowSettings ( prev => ! prev ) }
74+ />
75+ </ div >
76+
77+ < blockquote className = "mx-auto my-6 max-w-xl rounded-lg border border-blue-600 bg-blue-900/30 px-6 py-4 text-blue-300 text-center text-sm leading-relaxed" >
78+ Complete missions, make key discoveries about your planet with your Telescope, and unlock deeper planet editing tools.
79+ From atmosphere tweaks to anomaly behaviors, your progress will shape what you can customise.
80+ The more you uncover, the more control you'll have over your planet’s unique traits.
81+ </ blockquote >
82+
83+ < div className = "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 pt-4 border-t border-[#D8DEE9] pb-4" >
84+ < div className = "flex flex-col sm:flex-row gap-3" >
85+ < Button variant = "outline" onClick = { ( ) => router . push ( `/structures/telescope` ) } >
86+ 🧬 Back to Telescope
87+ </ Button >
88+ < Button variant = "ghost" onClick = { ( ) => router . push ( '/' ) } >
89+ 🏠 Home
90+ </ Button >
91+ </ div >
92+
93+ { /* Mobile-only Planet Settings Button */ }
94+ < div className = "md:hidden" >
95+ < Button
96+ onClick = { ( ) => setShowSettings ( prev => ! prev ) }
97+ className = "flex items-center gap-2 text-white border border-white/20"
98+ variant = "outline"
99+ >
100+ < Cog className = "w-4 h-4" />
101+ Planet Settings
102+ </ Button >
103+ </ div >
104+ </ div >
105+ </ main >
106+ </ div >
107+ </ div >
108+ ) ;
97109} ;
0 commit comments