Add different build options

miku-gg · Oct 5, 2023 · 4556bfd · 4556bfd
1 parent 856ac58
commit 4556bfd
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 111 deletions.
diff --git a/apps/bot-builder/src/bot-creation-form/Modal.tsx b/apps/bot-builder/src/bot-creation-form/Modal.tsx
diff --git a/apps/bot-builder/src/bot-creation-form/index.tsx b/apps/bot-builder/src/bot-creation-form/index.tsx
@@ -5,13 +5,12 @@ import {
   useCharacterCreationForm,
 } from "./CharacterCreationFormContext";
 
-import { Button, TextHeading, Tooltip } from "@mikugg/ui-kit";
+import { Button, Dropdown, TextHeading, Tooltip, Modal } from "@mikugg/ui-kit";
 import { MikuCard } from "@mikugg/bot-utils";
 
 import { validateStep } from "./libs/CharacterData";
 import { downloadBlob } from "./libs/file-download";
 
-import Modal from "./Modal";
 import TopBar from "./TopBar";
 
 import Step1Description from "./Step1Description";
@@ -29,10 +28,10 @@ import BotImport from "./Components/BotImport";
 
 const DocIcon = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M3 2.75A2.75 2.75 0 0 1 5.75 0h14.5a.75.75 0 0 1 .75.75v20.5a.75.75 0 0 1-.75.75h-6a.75.75 0 0 1 0-1.5h5.25v-4H6A1.5 1.5 0 0 0 4.5 18v.75c0 .716.43 1.334 1.05 1.605a.75.75 0 0 1-.6 1.374A3.251 3.251 0 0 1 3 18.75ZM19.5 1.5H5.75c-.69 0-1.25.56-1.25 1.25v12.651A2.989 2.989 0 0 1 6 15h13.5Z"></path><path d="M7 18.25a.25.25 0 0 1 .25-.25h5a.25.25 0 0 1 .25.25v5.01a.25.25 0 0 1-.397.201l-2.206-1.604a.25.25 0 0 0-.294 0L7.397 23.46a.25.25 0 0 1-.397-.2v-5.01Z"></path></svg>;
 
-const save = (card: MikuCard) => {
+const save = (card: MikuCard, jsonName?: string) => {
   const cardJSON = JSON.stringify(card, null, 2);
   const blob = new Blob([cardJSON], { type: "application/json" });
-  downloadBlob(blob, `${card.data.name}.miku-temp.json`);
+  downloadBlob(blob, jsonName ? jsonName : `${card.data.name}.miku-temp.json`);
 };
 
 const _CharacterCreationForm: React.FC = () => {
@@ -41,6 +40,7 @@ const _CharacterCreationForm: React.FC = () => {
   const [buildingStep, setBuildingStep] = useState<BUILDING_STEPS>(
     BUILDING_STEPS.STEP_0_NOT_BUILDING
   );
+  const [buildModalOpened, setBuildModalOpened] = useState(false);
 
   const handleNext = () => {
     const stepErrors = validateStep(currentStep, card);
@@ -64,13 +64,17 @@ const _CharacterCreationForm: React.FC = () => {
     save(card);
   };
 
-  const handleBuildBot = async () => {
+  const handelBuildBotAsPNG = async () => {
     await downloadPng(
       JSON.stringify(card),
       card.data.extensions.mikugg.profile_pic,
       card.data.name,
       setBuildingStep
     );
+  }
+
+  const handleBuildBot = async () => {
+    await save(card, `${card.data.name}.miku.json`)
   };
 
   return (
@@ -125,7 +129,7 @@ const _CharacterCreationForm: React.FC = () => {
             </Button>
           )}
           {currentStep === 4 ? (
-            <Button theme="gradient" onClick={handleBuildBot}>
+            <Button theme="gradient" onClick={() => setBuildModalOpened(true)}>
               Build character
             </Button>
           ) : (
@@ -140,34 +144,72 @@ const _CharacterCreationForm: React.FC = () => {
           )}
         </div>
       </div>
-      {buildingStep > BUILDING_STEPS.STEP_0_NOT_BUILDING && (
-        <Modal
-          overlayClose={buildingStep === BUILDING_STEPS.STEP_5_DONE}
-          onClose={() => setBuildingStep(BUILDING_STEPS.STEP_0_NOT_BUILDING)}
-        >
-          {buildingStep !== BUILDING_STEPS.STEP_5_DONE && (
-            <div className="loading"></div>
-          )}
-          <div className="loading-text">
-            {(function () {
-              switch (buildingStep) {
-                case BUILDING_STEPS.STEP_1_COMBINE_IMAGE:
-                  return "Generating png image...";
-                case BUILDING_STEPS.STEP_2_GENERATING_CHUNKS:
-                  return "Generating chunks...";
-                case BUILDING_STEPS.STEP_3_ENCODING_CHUNKS:
-                  return "Encoding chunks in png...";
-                case BUILDING_STEPS.STEP_4_BUILDING_DOWNLOAD_FILE:
-                  return "Downloading png file...";
-                case BUILDING_STEPS.STEP_5_DONE:
-                  return "Bot builded successfully";
-                default:
-                  return "Building bot...";
-              }
-            })()}
-          </div>
-        </Modal>
-      )}
+      <Modal opened={buildModalOpened} onCloseModal={() => {
+        if (buildingStep === BUILDING_STEPS.STEP_5_DONE || buildingStep === BUILDING_STEPS.STEP_0_NOT_BUILDING) {
+          setBuildModalOpened(false);
+          setBuildingStep(BUILDING_STEPS.STEP_0_NOT_BUILDING)  
+        }
+      }}>
+        <TextHeading size="h2">
+          Build character as package.
+        </TextHeading>
+        {
+          buildingStep > BUILDING_STEPS.STEP_0_NOT_BUILDING ? (
+            <div>
+              {buildingStep !== BUILDING_STEPS.STEP_5_DONE && (
+                <div className="loading"></div>
+              )}
+              <div className="loading-text">
+                {(function () {
+                  switch (buildingStep) {
+                    case BUILDING_STEPS.STEP_1_COMBINE_IMAGE:
+                      return "Generating png image...";
+                    case BUILDING_STEPS.STEP_2_GENERATING_CHUNKS:
+                      return "Generating chunks...";
+                    case BUILDING_STEPS.STEP_3_ENCODING_CHUNKS:
+                      return "Encoding chunks in png...";
+                    case BUILDING_STEPS.STEP_4_BUILDING_DOWNLOAD_FILE:
+                      return "Downloading png file...";
+                    case BUILDING_STEPS.STEP_5_DONE:
+                      return "Bot builded successfully";
+                    default:
+                      return "Building bot...";
+                  }
+                })()}
+              </div>
+            </div>
+          ) : (
+            <>
+              <div className="step4Preview__build-options">
+                <div
+                    id="BotImport__button"
+                    data-tooltip-id={`bot-build-png-button`}
+                    data-tooltip-html="For compatibility: bots.miku.gg and local"
+                    data-tooltip-varaint="dark"
+                  >
+                  <Button theme="transparent" onClick={handelBuildBotAsPNG}>Build as .png</Button>
+                </div>
+                <div
+                    id="BotImport__button"
+                    data-tooltip-id={`bot-build-json-button`}
+                    data-tooltip-html="For miku.gg"
+                    data-tooltip-varaint="dark"
+                  >
+                  <Button theme="gradient" onClick={handleBuildBot}>Build as .json</Button>
+                </div>
+              </div>
+              <Tooltip
+                id="bot-build-png-button"
+                place="top"
+              />
+              <Tooltip
+                id="bot-build-json-button"
+                place="top"
+              />
+            </>
+          )
+        }
+      </Modal>
     </div>
   );
 };

diff --git a/apps/bot-builder/src/bot-creation-form/styles/_modal.scss b/apps/bot-builder/src/bot-creation-form/styles/_modal.scss
diff --git a/apps/bot-builder/src/bot-creation-form/styles/_step4-preview.scss b/apps/bot-builder/src/bot-creation-form/styles/_step4-preview.scss
@@ -85,4 +85,15 @@
     margin: 0 auto;
     width: 70%;
   }
+
+  &__build-options {
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+    margin-top: 2rem;
+
+    .Button {
+      width: 150px;
+    }
+  }
 }
diff --git a/apps/bot-builder/src/bot-creation-form/styles/main.scss b/apps/bot-builder/src/bot-creation-form/styles/main.scss
@@ -1,7 +1,6 @@
 @import "variables";
 @import "buttons";
 @import "topbar";
-@import "modal";
 @import "step1-description";
 @import "step2-assets";
 @import "step3-scenarios";