@@ -241,13 +277,6 @@ export default function IslandsWorld({ theme, onIslandClick, onOpenMap, onOpenPl
)}
- {/* Create Island CTA (for authenticated users without island) */}
- {authenticated && (
- ${(post.title || post.caption || '').slice(0, 30)}...
+ `;
+ el.addEventListener('click', () => {
+ window.dispatchEvent(new CustomEvent('sw:openPostDetail', { detail: { post } }));
+ });
+
+ new maplibregl.Marker({ element: el, anchor: 'bottom' })
+ .setLngLat([lng, lat])
+ .addTo(map);
+ });
+ });
+
+ return () => {
+ map.remove();
+ };
+ }, [island, posts, colors]);
+
+ return
@@ -198,7 +226,7 @@ export default function PlanetsWorld({ theme, onOpenMap, onOpenIslands }) {
{/* Hovered planet tooltip */}
- {hoveredPlanet && (
+ {hoveredPlanet && !zoomedPlanet && (
@@ -213,59 +241,6 @@ export default function PlanetsWorld({ theme, onOpenMap, onOpenIslands }) {
)}
- {/* Planet detail modal */}
- {selectedPlanet && (
-
setSelectedPlanet(null)}>
-
e.stopPropagation()}>
-
-
-
-
-
-
-
{selectedPlanet.name}
-
{selectedPlanet.description || t('worlds.noDescription')}
-
-
-
-
- {selectedPlanet.member_count || 0}
- {t('worlds.members')}
-
-
- {selectedPlanet.post_count || 0}
- {t('worlds.posts')}
-
-
- {selectedPlanet.theme || 'default'}
- {t('worlds.theme')}
-
-
-
-
-
-
-
-
-
- )}
-
- {/* Create Planet CTA */}
- {authenticated && (
-
- )}
-
{/* Loading overlay */}
{loading && (
@@ -273,10 +248,232 @@ export default function PlanetsWorld({ theme, onOpenMap, onOpenIslands }) {
{t('worlds.loadingPlanets')}
)}
+
+ {/* Planet Terrain View - Full screen when zoomed */}
+ {zoomedPlanet && (
+
+
+
+
+
{zoomedPlanet.name || 'Planet'}
+ {zoomedPlanet.theme || 'default'}
+
+
+
+ {authenticated && (
+
+ )}
+
+
+
+ {/* Terrain canvas with posts */}
+
+ {terrainLoading ? (
+
+
+
{t('worlds.loadingTerrain')}
+
+ ) : (
+
+ )}
+
+
+ )}
);
}
+/**
+ * Planet Terrain Canvas - renders the planet as a large terrain with posts
+ */
+function PlanetTerrainCanvas({ planet, posts }) {
+ const canvasRef = useRef(null);
+ const mapRef = useRef(null);
+
+ const themeColors = {
+ 'default': { main: '#9b59b6', accent: '#8e44ad', bg: '#1a0a2e' },
+ 'tech': { main: '#3498db', accent: '#2980b9', bg: '#0a1a2e' },
+ 'gaming': { main: '#e74c3c', accent: '#c0392b', bg: '#2e0a0a' },
+ 'music': { main: '#1abc9c', accent: '#16a085', bg: '#0a2e2a' },
+ 'art': { main: '#e91e63', accent: '#c2185b', bg: '#2e0a1a' },
+ 'science': { main: '#00bcd4', accent: '#0097a7', bg: '#0a2e2e' },
+ 'sports': { main: '#ff9800', accent: '#f57c00', bg: '#2e1a0a' },
+ };
+
+ const colors = themeColors[planet.theme] || themeColors['default'];
+
+ useEffect(() => {
+ if (!canvasRef.current) return;
+
+ const map = new maplibregl.Map({
+ container: canvasRef.current,
+ style: {
+ version: 8,
+ sources: {},
+ layers: [
+ {
+ id: 'background',
+ type: 'background',
+ paint: { 'background-color': colors.bg }
+ }
+ ]
+ },
+ center: [0, 0],
+ zoom: 3,
+ pitch: 45,
+ bearing: 0,
+ attributionControl: false
+ });
+
+ mapRef.current = map;
+
+ map.on('load', () => {
+ // Create planet surface with craters/features
+ const seed = planet.id || (planet.name || '').charCodeAt(0) || 42;
+ const surfaceData = generatePlanetSurface(seed, colors.main, colors.accent);
+
+ map.addSource('surface', { type: 'geojson', data: surfaceData.terrain });
+ map.addSource('features', { type: 'geojson', data: surfaceData.features });
+
+ // Planet surface
+ map.addLayer({
+ id: 'surface',
+ type: 'fill',
+ source: 'surface',
+ paint: {
+ 'fill-color': colors.main,
+ 'fill-opacity': 1
+ }
+ });
+
+ // Surface features (craters, mountains)
+ map.addLayer({
+ id: 'features',
+ type: 'circle',
+ source: 'features',
+ paint: {
+ 'circle-radius': ['get', 'size'],
+ 'circle-color': ['get', 'color'],
+ 'circle-opacity': ['get', 'opacity']
+ }
+ });
+
+ // Add posts as markers on the terrain
+ posts.forEach((post, idx) => {
+ const angle = (idx / Math.max(posts.length, 1)) * Math.PI * 2;
+ const radius = 0.01 + Math.random() * 0.02;
+ const lng = Math.cos(angle) * radius;
+ const lat = Math.sin(angle) * radius;
+
+ const el = document.createElement('div');
+ el.className = 'terrain-post-marker planet-post-marker';
+ el.innerHTML = `
+
+
+
+
${(post.title || post.caption || '').slice(0, 30)}...
+ `;
+ el.addEventListener('click', () => {
+ window.dispatchEvent(new CustomEvent('sw:openPostDetail', { detail: { post } }));
+ });
+
+ new maplibregl.Marker({ element: el, anchor: 'bottom' })
+ .setLngLat([lng, lat])
+ .addTo(map);
+ });
+ });
+
+ return () => {
+ map.remove();
+ };
+ }, [planet, posts, colors]);
+
+ return
;
+}
+
+/**
+ * Generate planet surface GeoJSON
+ */
+function generatePlanetSurface(seed, mainColor, accentColor) {
+ const rng = seededRandom(seed);
+ const numPoints = 32;
+ const surfacePoints = [];
+
+ for (let i = 0; i < numPoints; i++) {
+ const angle = (i / numPoints) * Math.PI * 2;
+ const radius = 0.03 + rng() * 0.01;
+ surfacePoints.push([Math.cos(angle) * radius, Math.sin(angle) * radius]);
+ }
+ surfacePoints.push(surfacePoints[0]);
+
+ // Generate craters and features
+ const features = [];
+ const featureCount = 20 + Math.floor(rng() * 15);
+
+ for (let i = 0; i < featureCount; i++) {
+ const angle = rng() * Math.PI * 2;
+ const radius = rng() * 0.025;
+ const lng = Math.cos(angle) * radius;
+ const lat = Math.sin(angle) * radius;
+
+ const type = rng();
+ let color, size, opacity;
+ if (type < 0.4) {
+ // Crater
+ color = accentColor;
+ size = 3 + rng() * 4;
+ opacity = 0.6;
+ } else if (type < 0.7) {
+ // Mountain/ridge
+ color = mainColor;
+ size = 2 + rng() * 3;
+ opacity = 0.8;
+ } else {
+ // Glowing spot
+ color = '#ffffff';
+ size = 1 + rng() * 2;
+ opacity = 0.4;
+ }
+
+ features.push({
+ type: 'Feature',
+ geometry: { type: 'Point', coordinates: [lng, lat] },
+ properties: { color, size, opacity }
+ });
+ }
+
+ return {
+ terrain: {
+ type: 'Feature',
+ geometry: { type: 'Polygon', coordinates: [surfacePoints] }
+ },
+ features: { type: 'FeatureCollection', features }
+ };
+}
+
+/**
+ * Seeded random number generator
+ */
+function seededRandom(seed) {
+ let s = seed;
+ return function() {
+ s = (s * 9301 + 49297) % 233280;
+ return s / 233280;
+ };
+}
+
/**
* Create a stylized planet marker element
*/