fix: attempt to fix room rendering, its not correct but kinda works

Webbanditten · Jul 30, 2024 · 4774ac5 · 4774ac5
1 parent 7445811
commit 4774ac5
Show file tree

Hide file tree

Showing 3 changed files with 169 additions and 76 deletions.
diff --git a/src/components/LayoutParser/LayoutParser.ts b/src/components/LayoutParser/LayoutParser.ts
@@ -39,6 +39,7 @@ const getDocumentRect = (document: string) => {
   let rect = getDocumentTagValue(document, 'rect');
   if (rect === null) rect = '[0,0,0,0]';
   const rectArray = rect.replace('[', '').replace(']', '').split(',');
+
   return {
     left: parseInt(rectArray[0]),
     top: parseInt(rectArray[1]),

diff --git a/src/components/RoomRender/RoomRender.tsx b/src/components/RoomRender/RoomRender.tsx
@@ -1,25 +1,25 @@
-import React, { CSSProperties, useEffect, useState } from "react";
-import LayoutDocument from "../../types/LayoutDocument";
-import LayoutElement from "../../types/LayoutElement";
+import { CSSProperties, useEffect, useState } from 'react';
+import LayoutDocument, { Rect } from '../../types/LayoutDocument';
+import LayoutElement from '../../types/LayoutElement';
 import {
   getBackground,
   getBackgroundSize,
   getTransform,
-} from "../../utils/styles";
+} from '../../utils/styles';
 
 interface LayoutRenderProps {
   document: LayoutDocument;
   externalTexts: string;
   background: string;
 }
 function parseText(text: string): Record<string, string> {
-  let lines = text.split("\r\n");
+  let lines = text.split('\r\n');
   if (lines.length < 10) {
-    lines = text.split("\n");
+    lines = text.split('\n');
   }
   const result: Record<string, string> = {};
   for (let i = 0; i < lines.length; i++) {
-    const parts = lines[i].split("=");
+    const parts = lines[i].split('=');
     const key = parts[0];
     const value = parts[1];
     if (value) {
@@ -29,71 +29,154 @@ function parseText(text: string): Record<string, string> {
   return result;
 }
 
+const adjustRect = (tOffX: number, tOffY: number, rect: Rect): Rect => {
+  return {
+    left: rect.left - tOffX,
+    top: rect.top - tOffY,
+    right: rect.right - tOffX,
+    bottom: rect.bottom - tOffY,
+  };
+};
 const fetchExternalTexts = (externalTextsUrl: string) => {
   return fetch(externalTextsUrl).then((response) => response.text());
 };
 
+const getLeft = (document: LayoutDocument) => {
+  const actualRect = adjustRect(
+    document.roomdata.offsetx,
+    document.roomdata.offsety,
+    document.rect
+  );
+  // Shockwave lingo rect is an array of 4 values, left, top, right, bottom
+  const left = 0;
+  return left;
+};
+
+const getTop = (document: LayoutDocument) => {
+  const actualRect = adjustRect(
+    document.roomdata.offsetx,
+    document.roomdata.offsety,
+    document.rect
+  );
+  const top = 0;
+  return top;
+};
+
+const getBottom = (document: LayoutDocument) => {
+  const actualRect = adjustRect(
+    document.roomdata.offsetx,
+    document.roomdata.offsety,
+    document.rect
+  );
+  const bottom = 0;
+  return bottom;
+};
+
+const getRight = (document: LayoutDocument) => {
+  const actualRect = adjustRect(
+    document.roomdata.offsetx,
+    document.roomdata.offsety,
+    document.rect
+  );
+  const right = 0;
+  return right;
+};
+
 const getStyleLeft = (document: LayoutDocument, element: LayoutElement) => {
-  if (element.id === "floor") {
-    return element.locH;
+  let left = 0;
+  const actualRect = adjustRect(
+    document.roomdata.offsetx,
+    document.roomdata.offsety,
+    document.rect
+  );
+  if (element.member === 'leftdoor_open') {
+    left = 6 - document.roomdata.factory / 2;
   }
 
-  if (element.member.includes("floor")) {
-    return element.locH;
+  if (element.member === 'left_wallmask_0_a_0_0_0') {
+    left = -element.width / 2 + 2 - document.roomdata.factory / 2;
   }
-  if (element.member.includes("left")) {
-    if (element.member.includes("wallend")) {
-      return element.locH - element.width + document.roomdata.factorh;
-    }
-    if (element.member.includes("wall")) {
-      return element.locH - element.width + document.roomdata.factorx;
-    }
+
+  if (element.member === 'left_wallpart_0_a_0_0_0') {
+    left = -element.width / 2 - document.roomdata.factory / 2;
   }
 
-  if (element.member.includes("right")) {
-    if (element.member.includes("wallend")) {
-      return element.locH;
-    }
-    if (element.member.includes("wall")) {
-      return element.locH - element.width + document.roomdata.factorh;
-    }
+  if (element.member === 'right_wallpart_0_a_0_2_0') {
+    left = element.width / 2 - document.roomdata.factory / 2;
+  }
+
+  if (element.member === 'flat_floor_0_a_0_0_0') {
+    left = 0;
+  }
+
+  if (element.member === 'left_wallend_0_b_0_0_0') {
+    left = -element.width - document.roomdata.factory / 2 - 2;
+  }
+
+  if (element.member === 'right_wallend_0_b_0_2_0') {
+    left = element.width - document.roomdata.factory - 7;
   }
 
-  return 0;
+  return -left;
 };
 
 const getStyleTop = (document: LayoutDocument, element: LayoutElement) => {
-  if (element.id === "floor") {
-    return element.locV;
+  let top = 0;
+  const actualRect = adjustRect(
+    document.roomdata.offsetx,
+    document.roomdata.offsety,
+    document.rect
+  );
+
+  if (element.member === 'leftdoor_open') {
+    top = element.height - 4 - document.roomdata.factory / 2;
   }
 
-  if (element.member.includes("floor")) {
-    return element.locV;
+  if (element.member === 'left_wallmask_0_a_0_0_0') {
+    top = element.height - document.roomdata.factory / 2;
   }
-  if (element.member.includes("left")) {
-    if (element.member.includes("wallend")) {
-      return (
-        element.locV -
-        element.height / 2 -
-        document.roomdata.offsety -
-        document.roomdata.factory
-      );
-    }
-    if (element.member.includes("wall")) {
-      return element.locV - document.roomdata.offsety;
-    }
+
+  if (element.member === 'left_wallpart_0_a_0_0_0') {
+    top = element.height - document.roomdata.factory / 2;
   }
 
-  if (element.member.includes("right")) {
-    if (element.member.includes("wallend")) {
-      return element.locV;
-    }
-    if (element.member.includes("wall")) {
-      return element.locV + document.roomdata.factory / 2 - element.height;
-    }
+  if (element.member === 'right_wallpart_0_a_0_2_0') {
+    top = element.height - document.roomdata.factory / 2;
+  }
+
+  if (element.member === 'flat_floor_0_a_0_0_0') {
+    top = 1;
+  }
+
+  if (element.member === 'left_wallend_0_b_0_0_0') {
+    top = element.height - 22;
   }
 
-  return 0;
+  if (element.member === 'right_wallend_0_b_0_2_0') {
+    top = element.height - 21;
+  }
+
+  return -top;
+};
+
+const getStyleBottom = (document: LayoutDocument, element: LayoutElement) => {
+  const actualRect = adjustRect(
+    document.roomdata.offsetx,
+    document.roomdata.offsety,
+    document.rect
+  );
+  const bottom = 0;
+  return bottom;
+};
+
+const getStyleRight = (document: LayoutDocument, element: LayoutElement) => {
+  const actualRect = adjustRect(
+    document.roomdata.offsetx,
+    document.roomdata.offsety,
+    document.rect
+  );
+  const right = 0;
+  return -right;
 };
 
 const RoomRender = ({
@@ -115,67 +198,71 @@ const RoomRender = ({
     <>
       <div
         style={{
-          position: "relative",
-          display: "block",
+          position: 'relative',
+          display: 'block',
           top: 0,
           left: 0,
           width: 720,
           height: 540,
-          border: "1px dashed black",
+          border: '1px dashed black',
           fontSize: 10,
           background: background,
+          overflow: 'hidden',
         }}
       >
         <div
           style={{
-            position: "absolute",
-            overflow: "hidden",
-            top: document.rect.top,
-            left: document.rect.left,
-            right: document.rect.right,
-            bottom: document.rect.bottom,
-            height: "100%",
-            width: "100%",
+            position: 'absolute',
+            height: '100%', //document.rect.bottom + 'px',
+            width: '100%', //document.rect.right + 'px',
+            left: getLeft(document),
+            top: getTop(document),
+            right: getRight(document),
+            bottom: getBottom(document),
           }}
         >
           {document.elements?.map((element, index) => {
             let styles: CSSProperties = {
               opacity: element.blend > 100 ? 1 : element.blend / 100,
-              position: "absolute",
+              position: 'absolute',
               cursor:
-                element.cursor === "cursor.finger" ? "pointer" : "default",
+                element.cursor === 'cursor.finger' ? 'pointer' : 'default',
               background: getBackground(document, element),
               width: element.width,
               height: element.height,
               //zIndex: element.locZ,
               backgroundSize: getBackgroundSize(element),
               backgroundColor:
-                element.member === "shadow.pixel"
-                  ? element.type === "button"
-                    ? ""
-                    : "purple"
-                  : element.bgColor !== "null"
+                element.member === 'shadow.pixel'
+                  ? element.type === 'button'
+                    ? ''
+                    : 'purple'
+                  : element.bgColor !== 'null'
                   ? element.bgColor
-                  : "white",
-              left: getStyleLeft(document, element),
-              top: getStyleTop(document, element),
-              backgroundRepeat: "no-repeat",
+                  : 'white',
+              left: element.locH,
+              top: element.locV,
+              marginLeft: getStyleLeft(document, element),
+              marginTop: getStyleTop(document, element),
+              marginRight: getStyleRight(document, element),
+              marginBottom: getStyleBottom(document, element),
+              backgroundRepeat: 'no-repeat',
 
               transform: getTransform(element),
             };
 
             return (
               <div
                 aria-label={element.id}
-                key={document.name + "_" + index}
+                key={document.name + '_' + index}
                 style={styles}
               ></div>
             );
           })}
         </div>
       </div>
-      <code style={{ background: "#ccc" }}>
-        <pre style={{ width: "100%", textAlign: "left" }}>
+      <code style={{ background: '#ccc', display: 'none' }}>
+        <pre style={{ width: '100%', textAlign: 'left' }}>
           {JSON.stringify(document, null, 2)}
         </pre>
       </code>

diff --git a/src/types/LayoutDocument.ts b/src/types/LayoutDocument.ts
@@ -1,5 +1,10 @@
 import LayoutElement from './LayoutElement';
-
+export interface Rect {
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+}
 interface LayoutDocument {
   name: string | null;
   date: string | null;