Dev to main

README.md

@@ -1,4 +1,4 @@
-**TL;DR:** [Nerd Web](http://57.129.69.232/) is a new web interface for all gen2 commands with preview features, a cheat sheet, and more coming soon.
+**TL;DR:** [Nerd Web](https://nerdweb.socksm.dev/) is a new web interface for all gen2 commands with preview features, a cheat sheet, and more coming soon.
 
 # Nerd Web (Beta)
 Hello Nerds, today I'm happy to announce Nerd Web beta. A tool for using the bot with a web based interface.
@@ -25,17 +25,15 @@ Current Features:
 <img src=".github/assets/images/PreviewFeature.png" alt="PreviewFeature.png"><br>
 - Share generator inputs feature
   - You can easily click a button and send the link to someone, and it will share the inputs you gave for a certain gen
-
-Planned features:
-- A generator history saved in the cookies.
-- Keep input upon refresh (ties into the above.)
+- A generator history
+  - You can easily view your past generations and their inputs, and even click a button to copy the inputs to the generator again.
 
 ## Bugs
 For bug reporting [create a new issue](https://github.com/SkyBlock-Nerds/NerdWeb/issues/new) in the repo.
 
 ## Website:
 Ready to try it? Here you go:<br>
-[NerdWeb Beta](http://57.129.69.232/)<br>
+[NerdWeb](https://nerdweb.socksm.dev/)<br>
 Currently it's not being run on a Domain name. I plan on later buying a domain and linking it to this website.<br>
 This does however mean that it's "not secure". What does this mean? In the current state of the application, not much. The secure tag is mainly there to encrypt traffic between the website and the host. However, no sensitive information is being transmitted so it doesn't matter for now.
 

src/components/input-fields/impl/custom/MultiNpcDialogueLineField.tsx

@@ -2,21 +2,27 @@ import MultiDialogueLine from "../../../../api-client/api-models/generator/submo
 import DropdownField from "../../DropdownField.tsx";
 import SmallTextField from "../../SmallTextField.tsx";
 import StyleCodeParser from "../../../style-code-parser/StyleCodeParser.tsx";
+import { CreateNpcTag } from "../../../../utils/CreateNpcTag.ts";
 
-function MultiNpcDialogueLineField({npcNames, dialogueLine, setDialogueLine, onRemove}: {
+function MultiNpcDialogueLineField({npcNames, dialogueLine, setDialogueLine, onRemove, abiphone}: {
     npcNames: string[];
     dialogueLine: MultiDialogueLine;
     setDialogueLine: (value: MultiDialogueLine) => void;
     onRemove: () => void;
+    abiphone: boolean;
 }) {
+    let npcName = "NPC Name";
+    if (dialogueLine.npcIndex && dialogueLine.npcIndex < npcNames.length && dialogueLine.npcIndex >= 0) {
+        npcName = npcNames[dialogueLine.npcIndex];
+    }
+
     return (
         <>
             <label className="form-label">Line:</label>
             <div className="mb-3">
                 <div className="input-group align-items-start">
                     <DropdownField
                         value={npcNames[dialogueLine.npcIndex]}
-                        /*No warranty on this: I wrote this 2 seconds ago and already forgot how it works*/
                         setValue={(selectedValue) => {
                             const npcIndex = npcNames.indexOf(selectedValue);
                             if (npcIndex !== -1) {
@@ -45,7 +51,7 @@ function MultiNpcDialogueLineField({npcNames, dialogueLine, setDialogueLine, onR
                         Remove
                     </button>
                 </div>
-                <StyleCodeParser textToBeParsed={dialogueLine.line}/>
+                <StyleCodeParser textToBeParsed={`${CreateNpcTag(npcName, abiphone)} &f ${dialogueLine.line}`}/>
             </div>
         </>
     );

src/components/input-fields/impl/custom/SingleNpcDialogueLineField.tsx

@@ -3,10 +3,11 @@ import SmallTextField from "../../SmallTextField.tsx";
 import StyleCodeParser from "../../../style-code-parser/StyleCodeParser.tsx";
 
 
-function SingleNpcDialogueLineField({dialogueLine, setDialogueLine, onRemove}: {
+function SingleNpcDialogueLineField({dialogueLine, setDialogueLine, onRemove, npcNameFormatted}: {
     dialogueLine: string;
     setDialogueLine: (value: string) => void;
     onRemove: () => void
+    npcNameFormatted: string;
 }) {
     return (
         <>
@@ -30,7 +31,7 @@ function SingleNpcDialogueLineField({dialogueLine, setDialogueLine, onRemove}: {
                         Remove
                     </button>
                 </div>
-                <StyleCodeParser textToBeParsed={dialogueLine}/>
+                <StyleCodeParser textToBeParsed={`${npcNameFormatted} ${dialogueLine}`}/>
             </div>
         </>
     );

src/components/input-fields/impl/custom/list/MultiNpcDialogueLineListField.tsx

@@ -9,10 +9,11 @@ type LocalLine = {
     data: MultiDialogueLine;
 };
 
-function MultiNpcDialogueLineListField({setValue, npcNames, value = []}: {
+function MultiNpcDialogueLineListField({setValue, npcNames, value = [], abiphone}: {
     npcNames: string[];
     setValue: (value: MultiDialogueLine[]) => void;
     value?: MultiDialogueLine[];
+    abiphone: boolean;
 }) {
     const [lines, setLines] = useState<LocalLine[]>(
         value.map((line) => ({ id: uuid(), data: line }))
@@ -42,6 +43,7 @@ function MultiNpcDialogueLineListField({setValue, npcNames, value = []}: {
                     setDialogueLine={(updatedItem) => handleSetInventoryItem(index, updatedItem)}
                     onRemove={() => handleRemoveLine(index)}
                     npcNames={npcNames}
+                    abiphone={abiphone}
                 />
             ))}
 

src/components/input-fields/impl/custom/list/SingleNpcDialogueLineListField.tsx

@@ -8,9 +8,10 @@ type LocalLine = {
     data: string;
 };
 
-function SingleNpcDialogueLineListField({setValue, value = []}: {
+function SingleNpcDialogueLineListField({setValue, value = [], npcNameFormatted}: {
     setValue: (value: string[]) => void;
     value?: string[];
+    npcNameFormatted: string;
 }) {
     const [lines, setLines] = useState<LocalLine[]>(
         value.map((line) => ({ id: uuid(), data: line }))
@@ -39,6 +40,7 @@ function SingleNpcDialogueLineListField({setValue, value = []}: {
                     dialogueLine={itemWrapper.data}
                     setDialogueLine={(updatedItem) => handleSetInventoryItem(index, updatedItem)}
                     onRemove={() => handleRemoveLine(index)}
+                    npcNameFormatted={npcNameFormatted}
                 />
             ))}
 

src/pages/image-generator/generator/MultiDialogueGenerator.tsx

@@ -40,6 +40,7 @@ function MultiDialogueGenerator() {
                                     return updatedRequest;
                                 })
                             }
+                            abiphone={currentRequest.abiphone || false}
                         />
                     </div>
                     <div className="mb-3">

src/pages/image-generator/generator/SingleDialogueGenerator.tsx

@@ -7,6 +7,7 @@ import AbiphoneField from "../../../components/input-fields/impl/checkbox/Abipho
 import SingleNpcDialogueLineListField from "../../../components/input-fields/impl/custom/list/SingleNpcDialogueLineListField.tsx";
 import { useLocation } from "react-router-dom";
 import { ensureInstanceOf } from "../../../utils/ensureInstanceOf.ts";
+import { CreateNpcTag } from "../../../utils/CreateNpcTag.ts";
 
 function SingleDialogueGenerator() {
     const location = useLocation();
@@ -40,6 +41,7 @@ function SingleDialogueGenerator() {
                                     return updatedRequest;
                                 })
                             }
+                            npcNameFormatted={CreateNpcTag(currentRequest.npcName || "NPC Name", currentRequest.abiphone || false) + "&f"}
                         />
                     </div>
                     <div className="mb-3">

src/utils/CreateNpcTag.ts

@@ -0,0 +1,6 @@
+export function CreateNpcTag(npcName: string, abiphone: boolean = false)
+{
+    let str = `&e[NPC] ${npcName}&f: `;
+    if (abiphone) str += `&b✆ `;
+    return str;
+}