🔀 Merge pull request #15 from NMSCD/develop

🔖 0.8.5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "creature-builder",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "description": "Creature builder built for the No Man's Sky Hub built by AssistantNMS",
   "author": "AssistantNMS (Kurt Lourens)",
   "main": "public/electron.js",

src/components/setting/settingCommon.tsx

@@ -1,5 +1,7 @@
+type SimpleStringFunc = (input: string) => void
+
 export interface ISettingOptionAttrMapping {
-    [name: string]: string;
+    [name: string]: string | SimpleStringFunc;
 }
 
 export interface ISettingOptionCompProps<T> {
@@ -8,4 +10,5 @@ export interface ISettingOptionCompProps<T> {
     value: T,
     additionalProps?: ISettingOptionAttrMapping;
     onChange: (newValue: T) => void
+    getCurrentJson: () => string
 }

src/components/setting/settingLink.tsx

@@ -0,0 +1,34 @@
+import { FormControl, FormLabel } from '@chakra-ui/react';
+import React from 'react';
+import { ISettingOptionCompProps } from '../../components/setting/settingCommon';
+
+interface IProps extends ISettingOptionCompProps<boolean> {
+    icon?: string;
+    width?: string;
+    customOnClick?: (jsonStr: string) => void;
+}
+
+export const SettingLink: React.FC<IProps> = (props: IProps) => {
+    return (
+        <FormControl
+            key={props.id}
+            display="flex"
+            alignItems="center"
+            className="noselect"
+            width={props.width ?? '270px'}
+            onClick={() => {
+                if (props.customOnClick == null) return;
+                const json = props.getCurrentJson();
+                props.customOnClick(json);
+            }}
+        >
+            {
+                props.icon != null && (
+                    <img src={props.icon} alt={props.label} style={{ maxHeight: '1.5em', paddingRight: '0.5em' }} />
+                )
+            }
+            <FormLabel htmlFor={props.id} mb="0">{props.label}</FormLabel>
+        </FormControl>
+    );
+}
+

src/constants/image.ts

@@ -1,8 +1,9 @@
 export const AppImages = {
-    assistantNMS: 'https://avatars.githubusercontent.com/u/54021133?s=200',
-    kurt: 'https://kurtlourens.com/assets/images/KurtAvatar.svg',
-    meogi: './assets/img/meogi.webp',
-    nmsHub: './assets/img/invisible.webp',
-    silent: './assets/img/silent.jpg',
-    monkeyMan: 'https://avatars.githubusercontent.com/u/8000597?v=4',
-}
+  assistantNMS: "https://avatars.githubusercontent.com/u/54021133?s=200",
+  kurt: "https://kurtlourens.com/assets/images/KurtAvatar.svg",
+  meogi: "./assets/img/meogi.webp",
+  nmsHub: "./assets/img/invisible.webp",
+  silent: "./assets/img/silent.jpg",
+  monkeyMan: "https://avatars.githubusercontent.com/u/8000597?v=4",
+  nmsCenter: "./assets/img/nms.center.webp",
+};

src/integration/nmsCenter.ts

@@ -0,0 +1,64 @@
+import { ToastService } from "../services/common/toastService";
+
+export const navigateToNmsCenterEggDelivery =
+  (toastService: ToastService) => (json: string) => {
+    const jsonObj = JSON.parse(json);
+    const encoded = minifyPetJson(jsonObj);
+
+    const url = `https://nomansapp.com/?service=egg&base64=${encoded}`;
+
+    try {
+      window.open(url, "_blank")!.focus();
+      return;
+    } catch {}
+
+    navigator?.clipboard?.writeText?.(url)?.then?.(() => {
+      toastService.warn(
+        "Something went wrong but the url was copied to your clipboard. Please open a new tab and paste the url",
+        {
+          autoClose: false,
+        }
+      );
+    });
+  };
+
+export const minifyPetJson = (jsonObj: any): string => {
+  let encoded = btoa(JSON.stringify(jsonObj));
+  const maxLength = 1800;
+
+  if (encoded.length > maxLength) {
+    jsonObj.CustomName = "";
+    jsonObj.CustomSpeciesName = "";
+
+    encoded = btoa(JSON.stringify(jsonObj));
+  }
+
+  if (encoded.length > maxLength) {
+    jsonObj.Scale = Number(jsonObj.Scale.toFixed(2));
+    jsonObj.Traits[0] = Number(jsonObj.Traits[0].toFixed(2));
+    jsonObj.Traits[1] = Number(jsonObj.Traits[1].toFixed(2));
+    jsonObj.Traits[2] = Number(jsonObj.Traits[2].toFixed(2));
+    jsonObj.Moods[0] = Number(jsonObj.Moods[0].toFixed(2));
+    jsonObj.Moods[1] = Number(jsonObj.Moods[1].toFixed(2));
+
+    encoded = btoa(JSON.stringify(jsonObj));
+  }
+
+  if (encoded.length > maxLength) {
+    if (jsonObj.CreatureSeed[1].startsWith("0x00"))
+      jsonObj.CreatureSeed[1] = "0x00";
+    if (jsonObj.CreatureSecondarySeed[1].startsWith("0x00"))
+      jsonObj.CreatureSecondarySeed[1] = "0x00";
+    if (jsonObj.SpeciesSeed[1].startsWith("0x00"))
+      jsonObj.SpeciesSeed[1] = "0x00";
+    if (jsonObj.GenusSeed[1].startsWith("0x00")) jsonObj.GenusSeed[1] = "0x00";
+    if (jsonObj.ColourBaseSeed[1].startsWith("0x00"))
+      jsonObj.ColourBaseSeed[1] = "0x00";
+    if (jsonObj.BoneScaleSeed[1].startsWith("0x00"))
+      jsonObj.BoneScaleSeed[1] = "0x00";
+
+    encoded = btoa(JSON.stringify(jsonObj));
+  }
+
+  return encoded;
+};

src/page/builder/builderPage.tsx

@@ -186,6 +186,13 @@ export const BuilderPage: React.FC = () => {
     })
   }
 
+  const copyJson = () => {
+    const json = getJsonFromMappings(mappingString + ',' + descriptorId);
+    navigator?.clipboard?.writeText?.(json)?.then?.(() => {
+      toastService.success(<span>Copied!</span>)
+    });
+  }
+
   const creatureIdIsNotNull = (selectedPet.CreatureId != null);
 
   return (
@@ -218,10 +225,8 @@ export const BuilderPage: React.FC = () => {
           settings={settings}
           setSettings={applyChangesToSettings}
           triggerJsonInterval={triggerJsonInterval}
-          getMappingsFromJson={e => {
-            console.log(e);
-            getMappingsFromJson(e)
-          }}
+          getMappingsFromJson={getMappingsFromJson}
+          getCurrentJson={() => getJsonFromMappings(mappingString + ',' + descriptorId)}
         />
         <Flex className="builder-page-flex">
           <BuilderPageResultPreview
@@ -258,7 +263,7 @@ export const BuilderPage: React.FC = () => {
           </Box>
         </Flex>
         <Box mt="12" className="hidden-in-desktop ta-center">
-          <Button width="100%" colorScheme="green">
+          <Button width="100%" colorScheme="green" onClick={copyJson}>
             <span>Copy JSON result</span>
           </Button>
         </Box>

src/page/builder/builderPageSettingsRow.tsx

@@ -1,12 +1,16 @@
 import { SettingsIcon } from '@chakra-ui/icons';
 import { Button, Spacer, Wrap, WrapItem } from '@chakra-ui/react';
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { ContentCreatorCreaturesBottomModalSheet } from '../../components/dialog/contentCreatorCreaturesBottomModalSheet';
 import { JsonExplanationBottomModalSheet } from '../../components/dialog/jsonExplanationBottomModalSheet';
 import { ISettingOptionAttrMapping, ISettingOptionCompProps } from '../../components/setting/settingCommon';
+import { SettingLink } from '../../components/setting/settingLink';
 import { SettingSwitch } from '../../components/setting/settingSwitch';
 import { controlSpacing } from '../../constants/UIConstant';
 import { toggleHtmlNodeClass } from '../../helper/documentHelper';
+import { AppImages } from '../../constants/image';
+import { navigateToNmsCenterEggDelivery } from '../../integration/nmsCenter';
+import { DependencyInjectionContext } from '../../integration/DependencyInjectionProvider';
 
 export interface IBuilderPageSettings {
     showSimplifiedNames: boolean;
@@ -39,12 +43,15 @@ interface ISettingOption {
 
 interface IProps {
     settings: IBuilderPageSettings;
+    getCurrentJson: () => string;
     triggerJsonInterval: () => void;
     getMappingsFromJson: (event: any) => void;
     setSettings: (func: (newState: IBuilderPageSettings) => IBuilderPageSettings) => void;
 }
 
 export const BuilderPageSettingsRow: React.FC<IProps> = (props: IProps) => {
+    const { toastService } = useContext(DependencyInjectionContext);
+
     const [isJsonExplanationOpen, setJsonExplanationOpen] = useState<boolean>(false);
     const [isContentCreatorModalOpen, setContentCreatorModalOpen] = useState<boolean>(false);
     const [showSettings, setShowSettings] = useState<boolean>(false);
@@ -85,6 +92,16 @@ export const BuilderPageSettingsRow: React.FC<IProps> = (props: IProps) => {
             label: 'Enable Advanced Mode',
             component: SettingSwitch,
         },
+        {
+            id: 'deliverViaNmsCenter',
+            propName: 'deliverViaNmsCenter',
+            label: 'Deliver via Service Bot',
+            component: SettingLink,
+            additionalProps: {
+                icon: AppImages.nmsCenter,
+                customOnClick: navigateToNmsCenterEggDelivery(toastService)
+            },
+        },
     ];
 
     const miscSettingOptions: Array<ISettingOption> = [
@@ -128,12 +145,13 @@ export const BuilderPageSettingsRow: React.FC<IProps> = (props: IProps) => {
         if (hideOpt) return null;
 
         return (
-            <WrapItem key={opt.id}>
+            <WrapItem key={opt.id} className='pointer'>
                 <Comp
                     {...opt.additionalProps}
                     id={opt.id}
                     label={opt.label}
                     value={value}
+                    getCurrentJson={props.getCurrentJson}
                     onChange={(newValue: any) => {
                         props.setSettings((prev: IBuilderPageSettings) => ({
                             ...prev,

src/sass/main.scss

@@ -47,6 +47,10 @@ body {
 
 .pointer {
     cursor: pointer;
+
+    label {
+        cursor: pointer;
+    }
 }
 
 .drag {
@@ -149,4 +153,4 @@ body {
 
 .chakra-switch__thumb {
     background: var(--chakra-colors-chakra-subtle-bg) !important;
-}
+}