[MIK-248] Build modal for novel builder (#127)

* Add modal with export options for Miku.gg and local use * refactor export method, update styles * Fix project building modal * Fix download filename --------- Co-authored-by: mikudev <[email protected]>
miku-gg · Jul 3, 2024 · 2ff61d6 · 2ff61d6
1 parent 35120b5
commit 2ff61d6
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 6 deletions.
diff --git a/apps/novel-builder/src/libs/utils.ts b/apps/novel-builder/src/libs/utils.ts
@@ -52,7 +52,11 @@ export const downloadNovelState = async (
 ) => {
   const filename =
     _novel.title.replace(/ /g, "_") +
-    (asBuild ? ".novel.json" : ".novel.miku-temp.json");
+    (asBuild
+      ? getAssetUrl
+        ? ".novel.json"
+        : ".novel.miku-light.json"
+      : ".novel.miku-temp.json");
   onUpdate("Extracting assets...");
   const { assets, novel } = await extractNovelAssets(_novel);
 

diff --git a/apps/novel-builder/src/panels/preview/PreviewPanel.scss b/apps/novel-builder/src/panels/preview/PreviewPanel.scss
@@ -1,3 +1,5 @@
+@import '../../styles/variables';
+
 .PreviewPanel {
   &__iframe-container {
     height: 60vh;
@@ -10,6 +12,42 @@
     margin-bottom: 1rem;
   }
 
+  &__modal-content {
+    font-size: 1em;
+    line-height: 1rem;
+    font-weight: 400;
+  }
+
+  &__modal-title {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    color: $text-1;
+  }
+
+  &__options {
+    list-style: none;
+    padding: 0 1rem;
+    margin-top: 25px;
+  }
+
+  &__option-description {
+    font-style: italic;
+    font-size: 0.9rem;
+    color: $text-2;
+  }
+
+  &__buttons-group {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+
+    & > button {
+      width: 200px;
+    }
+  }
+
   &__build {
     svg {
       width: 20px;

diff --git a/apps/novel-builder/src/panels/preview/PreviewPanel.tsx b/apps/novel-builder/src/panels/preview/PreviewPanel.tsx
@@ -1,4 +1,4 @@
-import { Button, Loader } from "@mikugg/ui-kit";
+import { Button, Loader, Modal } from "@mikugg/ui-kit";
 import config, { STAGE } from "../../config";
 import { useEffect, useMemo, useRef, useState } from "react";
 import base64 from "base-64";
@@ -58,6 +58,7 @@ export function generateAlphaLink({
 
 export default function PreviewPanel() {
   const [loadingIframe, setLoadingIframe] = useState<boolean>(true);
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const novel = useAppSelector((state) => state.novel);
   const dispatch = useAppDispatch();
@@ -71,11 +72,20 @@ export default function PreviewPanel() {
     []
   );
 
-  const handleBuild = async () => {
+  const handlExport = async (exportFor: "miku" | "local") => {
     try {
+      setIsModalOpen(false);
+      dispatch(
+        openModal({
+          modalType: "loading",
+          text: `Building project for ${
+            exportFor === "miku" ? "Miku.gg" : "local"
+          }...`,
+        })
+      );
       await downloadNovelState(
         cloneDeep(novel),
-        config.genAssetLink,
+        exportFor === "local" ? config.genAssetLink : false,
         (text: string) => {
           dispatch(
             openModal({
@@ -88,9 +98,10 @@ export default function PreviewPanel() {
       );
     } catch (e) {
       console.error(e);
-      toast.error("Failed to build novel");
+      toast.error(`Failed to ${exportFor === "miku" ? "build" : "save"} novel`);
     }
     dispatch(closeModal({ modalType: "loading" }));
+    setIsModalOpen(false);
   };
 
   useEffect(() => {
@@ -142,8 +153,39 @@ export default function PreviewPanel() {
     <div className="PreviewPanel">
       <div className="PreviewPanel__header">
         <h1 className="PreviewPanel__title">Preview</h1>
+        <Modal opened={isModalOpen} onCloseModal={() => setIsModalOpen(false)}>
+          <div className="PreviewPanel__modal-content">
+            <h2 className="PreviewPanel__modal-title">Build project</h2>
+            <ul className="PreviewPanel__options">
+              <li className="PreviewPanel__option">
+                <p className="PreviewPanel__option-title">Export for Miku.gg</p>
+                <p className="PreviewPanel__option-description">
+                  Saves your project as a .json file without assets. Ideal for
+                  sharing or uploading to Miku.gg.
+                </p>
+              </li>
+              <li className="PreviewPanel__option">
+                <p className="PreviewPanel__option-title">
+                  Export for Local Use
+                </p>
+                <p className="PreviewPanel__option-description">
+                  Saves your project as a .json file with all associated assets
+                  included. Perfect for offline use or complete backups.
+                </p>
+              </li>
+            </ul>
+            <div className="PreviewPanel__buttons-group">
+              <Button theme="gradient" onClick={() => handlExport("miku")}>
+                Export for Miku.gg
+              </Button>
+              <Button theme="transparent" onClick={() => handlExport("local")}>
+                Export for Local Use
+              </Button>
+            </div>
+          </div>
+        </Modal>
         <div className="PreviewPanel__build">
-          <Button theme="gradient" onClick={handleBuild}>
+          <Button theme="gradient" onClick={() => setIsModalOpen(true)}>
             <PiHammerBold />
             Build
           </Button>