Put compare scripts side by side if they are not aligned

atlasacademy · Jun 16, 2024 · b68189c · b68189c
1 parent 82a8f3a
commit b68189c
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 20 deletions.
diff --git a/packages/db/src/App.css b/packages/db/src/App.css
@@ -18,6 +18,10 @@
     width: 25%;
 }
 
+.w-50pct {
+    width: 50%;
+}
+
 .w-1px {
     width: 1px;
 }

diff --git a/packages/db/src/Component/Script.tsx b/packages/db/src/Component/Script.tsx
@@ -1551,3 +1551,20 @@ export const countWord = (region: Region, components: ScriptComponent[]) => {
 
     return wordCount;
 };
+
+export const areComparableScripts = (mainScript: ScriptInfo, compareScript: ScriptInfo): boolean => {
+    for (let i = 0; i < mainScript.components.length; i++) {
+        const mainComponent = mainScript.components[i];
+        const compareComponent = compareScript.components[i];
+
+        if (
+            mainComponent === undefined ||
+            compareComponent === undefined ||
+            mainComponent.lineNumber !== compareComponent.lineNumber ||
+            mainComponent.content.type !== compareComponent.content.type
+        )
+            return false;
+    }
+
+    return true;
+};
diff --git a/packages/db/src/Component/ScriptTable.tsx b/packages/db/src/Component/ScriptTable.tsx
@@ -280,11 +280,14 @@ const SceneRow = (props: {
     effects?: string[];
     filters: { content: ScriptCharaFilter; lineNumber?: number }[];
     colSpan?: number;
+    halfWidth?: boolean;
 }) => {
-    const { lineNumber, cameraFilter, effects, wideScreen } = props,
+    const { lineNumber, cameraFilter, effects, wideScreen, halfWidth } = props,
         { t } = useTranslation(),
         resolution = wideScreen ? { height: 576, width: 1344 } : { height: 576, width: 1024 },
-        { height, width } = useImageSize(wideScreen),
+        imageSize = useImageSize(wideScreen),
+        height = halfWidth ? imageSize.height / 2 : imageSize.height,
+        width = halfWidth ? imageSize.width / 2 : imageSize.width,
         background = props.background ? { asset: props.background.backgroundAsset } : undefined;
 
     const showScriptLine = useContext(ShowScriptLineContext);
@@ -701,6 +704,7 @@ const ScriptTable = (props: {
     showScene?: boolean;
     refs: RowBgmRefMap;
     compareScript?: { region: Region; script: ScriptInfo };
+    halfWidth?: boolean;
 }) => {
     const scriptComponents = props.script.components,
         { t } = useTranslation(),
@@ -749,7 +753,7 @@ const ScriptTable = (props: {
     }
 
     return (
-        <Table hover responsive className="script-table">
+        <Table hover responsive className="script-table" style={props.halfWidth ? { fontSize: "10pt" } : {}}>
             <thead>
                 <tr>
                     <th className="text-center" style={{ width: "10%" }}>
@@ -782,6 +786,7 @@ const ScriptTable = (props: {
                                     lineNumber={lineNumber}
                                     effects={[...effects]}
                                     colSpan={colSpan}
+                                    halfWidth={props.halfWidth}
                                 />
                             );
                         };
@@ -961,6 +966,7 @@ const ScriptTable = (props: {
                         figure={figureComponent}
                         wideScreen={wideScreen}
                         effects={[...effects]}
+                        halfWidth={props.halfWidth}
                     />
                 ) : null}
             </tbody>

diff --git a/packages/db/src/Page/ScriptPage.tsx b/packages/db/src/Page/ScriptPage.tsx
@@ -15,6 +15,7 @@ import {
     ScriptComponent,
     ScriptComponentType,
     ScriptComponentWrapper,
+    areComparableScripts,
     countWord,
     parseScript,
 } from "../Component/Script";
@@ -247,6 +248,14 @@ const ScriptPage = ({ region, scriptId }: { region: Region; scriptId: string })
     );
     if (hasRayshiftScript) availableCompareRegions.push("rayshift");
 
+    const parsedCompareScript =
+        compareSource !== undefined && compareScript !== undefined
+            ? parseScript(compareSource === "rayshift" ? Region.NA : compareSource, compareScript)
+            : undefined;
+    const compareRegion = compareSource === "rayshift" ? Region.NA : compareSource;
+    const comparableScripts =
+        parsedCompareScript !== undefined && areComparableScripts(parsedScript, parsedCompareScript);
+
     return (
         <>
             <div id="scroll-bar" className={classes.scrollBarIndicator} style={{ width: 0 }}></div>
@@ -318,23 +327,40 @@ const ScriptPage = ({ region, scriptId }: { region: Region; scriptId: string })
                     </ButtonGroup>
                 </ButtonToolbar>
                 <ShowScriptLineContext.Provider value={showScriptLine}>
-                    <ScriptTable
-                        region={region}
-                        script={parsedScript}
-                        showScene={enableScene}
-                        refs={scrollRefs}
-                        compareScript={
-                            compareSource !== undefined && compareScript !== undefined
-                                ? {
-                                      region: compareSource === "rayshift" ? Region.NA : compareSource,
-                                      script: parseScript(
-                                          compareSource === "rayshift" ? Region.NA : compareSource,
-                                          compareScript
-                                      ),
-                                  }
-                                : undefined
-                        }
-                    />
+                    {parsedCompareScript !== undefined && compareRegion !== undefined && !comparableScripts ? (
+                        <div className="d-flex">
+                            <div className="w-50pct">
+                                <ScriptTable
+                                    halfWidth
+                                    region={region}
+                                    script={parsedScript}
+                                    showScene={enableScene}
+                                    refs={scrollRefs}
+                                />
+                            </div>
+                            <div className="w-50pct">
+                                <ScriptTable
+                                    halfWidth
+                                    region={compareRegion}
+                                    script={parsedCompareScript}
+                                    showScene={enableScene}
+                                    refs={scrollRefs}
+                                />
+                            </div>
+                        </div>
+                    ) : (
+                        <ScriptTable
+                            region={region}
+                            script={parsedScript}
+                            showScene={enableScene}
+                            refs={scrollRefs}
+                            compareScript={
+                                compareSource !== undefined && compareRegion !== undefined && comparableScripts
+                                    ? { region: compareRegion, script: parsedCompareScript }
+                                    : undefined
+                            }
+                        />
+                    )}
                 </ShowScriptLineContext.Provider>
             </ScriptMainData>
         </>