From 3224d1737391ad1b79dfe393dcce3ba1fe5d6699 Mon Sep 17 00:00:00 2001
From: Quinta <0pietroquintavalle0@gmail.com>
Date: Sun, 18 Aug 2024 18:37:15 +0200
Subject: [PATCH] little stuff

---
 app/info/page.tsx             | 33 +++++++++++++++--------------
 components/GlyphGenerator.tsx | 40 ++++++++++++++++++++++++++++++-----
 2 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/app/info/page.tsx b/app/info/page.tsx
index ba89664..103de9f 100644
--- a/app/info/page.tsx
+++ b/app/info/page.tsx
@@ -2,9 +2,7 @@
 import React from 'react';
 import Header from '@/components/Header';
 import { Separator } from "@/components/ui/separator";
-import {Button} from "@/components/ui/button";
-import {router} from "next/client";
-import {useRouter} from "next/navigation";
+import { useRouter } from "next/navigation";
 import { ChevronsLeft } from 'lucide-react';
 import Link from "next/link";
 
@@ -13,17 +11,20 @@ export default function InfoPage() {
     return (
         <div className="min-h-screen flex flex-col">
             <Header />
-            <main className="flex-grow container mx-auto px-12 py-8">
+            <main className="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
                 <div className="flex items-center mb-6">
-                    <ChevronsLeft onClick={() => router.back()} className="mr-4" />
-                    <h1 className="text-3xl font-bold">No Man's Sky Portal Address Tool - Information</h1>
+                    <ChevronsLeft
+                        onClick={() => router.back()}
+                        className="mr-4 cursor-pointer text-gray-500 hover:bg-gray-200 rounded-full transition-colors duration-200"
+                        size={24}
+                    />
+                    <h1 className="text-2xl sm:text-3xl font-bold">No Man's Sky Portal Address Tool - Information</h1>
                 </div>
 
                 <section className="mb-8">
-                    <h2 className="text-2xl font-semibold mb-4">What is this tool?</h2>
-                    <p>This tool helps No Man's Sky players generate, translate, and share portal addresses. It consists
-                        of three main features:</p>
-                    <ul className="list-disc pl-5 mt-2">
+                    <h2 className="text-xl sm:text-2xl font-semibold mb-4">What is this tool?</h2>
+                    <p className="mb-2">This tool helps No Man's Sky players generate, translate, and share portal addresses. It consists of three main features:</p>
+                    <ul className="list-disc pl-5">
                         <li><strong>Generator:</strong> Create random portal addresses or input your own.</li>
                         <li><strong>Translator:</strong> Convert between hexadecimal addresses and glyph symbols.</li>
                         <li><strong>Gallery:</strong> Share and discover interesting locations with the community.</li>
@@ -31,32 +32,32 @@ export default function InfoPage() {
                 </section>
                 <Separator className="mb-8"/>
                 <section className="mb-8">
-                    <h2 className="text-2xl font-semibold mb-4">How to use the Generator</h2>
+                    <h2 className="text-xl sm:text-2xl font-semibold mb-4">How to use the Generator</h2>
                     <p>The generator allows you to create random portal addresses or input your own. You can also add descriptions, tags, and images to share in the gallery.</p>
                 </section>
                 <Separator className="mb-8"/>
                 <section className="mb-8">
-                    <h2 className="text-2xl font-semibold mb-4">How to use the Translator</h2>
+                    <h2 className="text-xl sm:text-2xl font-semibold mb-4">How to use the Translator</h2>
                     <p>The translator converts between hexadecimal addresses and glyph symbols. You can toggle between translating from hex to glyphs or from glyphs to hex.</p>
                 </section>
                 <Separator className="mb-8"/>
                 <section className="mb-8">
-                    <h2 className="text-2xl font-semibold mb-4">What is the Gallery?</h2>
+                    <h2 className="text-xl sm:text-2xl font-semibold mb-4">What is the Gallery?</h2>
                     <p>The gallery is a community-driven feature where players can share interesting locations they've discovered. You can add your own discoveries or browse and vote on others' finds.</p>
                 </section>
                 <Separator className="mb-8"/>
                 <section className="mb-8">
-                    <h2 className="text-2xl font-semibold mb-4">Why do I need to enter my NMS friendship code?</h2>
+                    <h2 className="text-xl sm:text-2xl font-semibold mb-4">Why do I need to enter my NMS friendship code?</h2>
                     <p>Your NMS friendship code is used to identify your contributions to the gallery and to prevent duplicate voting. It's not shared publicly and is only used within the tool.</p>
                 </section>
                 <Separator className="mb-8"/>
                 <section className="mb-8">
-                    <h2 className="text-2xl font-semibold mb-4">How Portal Addresses Work</h2>
+                    <h2 className="text-xl sm:text-2xl font-semibold mb-4">How Portal Addresses Work</h2>
                     <p>In No Man's Sky, portal addresses consist of 12 glyphs chosen from a set of 16 possible glyphs. The first glyph represents the planetary index, the next two the solar system index, followed by one for the planet index, and the remaining eight for specific X, Y, and Z coordinates within that system. By inputting a specific sequence of glyphs, players can teleport to corresponding locations across the vast game world.</p>
                 </section>
                 <Separator className="mb-8"/>
                 <section>
-                    <h2 className="text-2xl font-semibold mb-4">Special Thanks</h2>
+                    <h2 className="text-xl sm:text-2xl font-semibold mb-4">Special Thanks</h2>
                     <p>Thanks to the <Link href="https://www.youtube.com/@TheGameHubNMS" className="underline">The Game Hub</Link> and the No Man's Sky community for their support and inspiration.</p>
                     <p>And to Rask Rex for helping me with lots of feedback!</p>
                 </section>
diff --git a/components/GlyphGenerator.tsx b/components/GlyphGenerator.tsx
index bd66e10..a01879a 100644
--- a/components/GlyphGenerator.tsx
+++ b/components/GlyphGenerator.tsx
@@ -173,6 +173,7 @@ const GlyphGenerator = () => {
     const [user, setUser] = useState<User | null>(null);
     const [gallery, setGallery] = useState<GalleryItem[]>([]);
     const [selectedGalaxy, setSelectedGalaxy] = useState(galaxies[0]);
+    const [editingGalaxy, setEditingGalaxy] = useState(galaxies[0]);
 
     const getGlyphImagePath = (glyph: string) => {
         const basePath = process.env.NODE_ENV === 'production' ? '/nmsportal' : '';
@@ -415,23 +416,27 @@ const GlyphGenerator = () => {
             return;
         }
         setEditingItem(item);
-        setDescription(item.description);
-        setTags(item.tags.join(', '));
-        setImages(item.images.map(url => ({ url, file: null })));
+        setDescription(item.description || '');
+        setTags(item.tags?.join(', ') || '');
+        setImages(item.images?.map(url => ({ url, file: null })) || []);
+        setEditingGalaxy(item.galaxy || galaxies[0]);
     };
+
     const saveEdit = async () => {
         try {
             const updatedItem = {
                 ...editingItem,
                 description: description,
                 tags: tags.split(',').map(tag => tag.trim()),
-                images: images.map(img => img.url)
+                images: images.map(img => img.url),
+                galaxy: editingGalaxy === "Not Specified" ? null : editingGalaxy
             };
             await update(ref(database, `gallery/${editingItem?.id}`), updatedItem);
             setEditingItem(null);
             setDescription('');
             setTags('');
             setImages([]);
+            setEditingGalaxy(galaxies[0]);
             showAlertMessage('Address details updated successfully.');
             loadGallery(); // Reload the gallery to reflect the changes
         } catch (error) {
@@ -441,8 +446,21 @@ const GlyphGenerator = () => {
     };
 
     const handleFriendshipCodeInput = async (e: React.ChangeEvent<HTMLInputElement>) => {
-        const code = e.target.value;
+        let code = e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '');
+
+        code = code.replace(/-/g, '');
+
+        if (code.length > 4) {
+            code = code.slice(0, 4) + '-' + code.slice(4);
+        }
+        if (code.length > 9) {
+            code = code.slice(0, 9) + '-' + code.slice(9);
+        }
+
+        code = code.slice(0, 14);
+
         setFriendshipCode(code);
+
         if (user) {
             try {
                 await set(ref(database, `users/${user.uid}/friendshipCode`), code);
@@ -642,6 +660,18 @@ const GlyphGenerator = () => {
                                                 placeholder="Edit tags, separated by commas"
                                                 className="mb-2"
                                             />
+                                            <Select value={editingGalaxy} onValueChange={setEditingGalaxy}>
+                                                <SelectTrigger className="w-full mb-2">
+                                                    <SelectValue placeholder="Select galaxy (optional)" />
+                                                </SelectTrigger>
+                                                <SelectContent>
+                                                    {galaxies.map((galaxy) => (
+                                                        <SelectItem key={galaxy} value={galaxy}>
+                                                            {galaxy}
+                                                        </SelectItem>
+                                                    ))}
+                                                </SelectContent>
+                                            </Select>
                                             <Input
                                                 type="file"
                                                 multiple