Export as HTML, JSON, Import JSON, all but better

src/components/builderPage/builderPage.css

@@ -46,14 +46,15 @@
                             width: 100%;
                             height: 100%;
                         }
+
                         .addItem {
                             flex: 1 0 auto;
                         }
                     }
 
-
 
-
+
+
                 }
             }
 
@@ -72,7 +73,7 @@
         }
 
         #create {
-            overflow-y: scroll;
+            overflow-y: auto;
             height: 96.8vh;
 
             .drop {
@@ -82,64 +83,6 @@
                 margin-bottom: 20px;
                 background: white;
                 color: black;
-
-                .react-grid-layout {}
-
-                .react-grid-item {
-                    position: relative;
-                    display: grid;
-                    place-items: center;
-                    background-color: white;
-                    box-sizing: border-box;
-
-                    .deleteItem {
-                        background: unset;
-                        border: unset;
-                        color: white;
-                        font-weight: 900;
-                        filter: drop-shadow(1px 1px 2px black);
-                        position: absolute;
-                        top: 0;
-                        right: 0;
-                        visibility: hidden;
-                    }
-
-                    .react-resizable-handle {
-                        visibility: hidden;
-                    }
-
-
-
-                    &:is(:hover, :focus, :focus-within) {
-                        border: 1px dotted gray;
-                        .deleteItem, .react-resizable-handle {
-                            visibility: visible;
-                        }
-                    }
-
-                    input[type="text"] {
-                        width: 90%;
-                        margin-left: 5%;
-                    }
-
-                    input[type="number"] {
-                        width: 5ch;
-                    }
-
-                    textarea {
-                        resize: none;
-                        width: 100% !important;
-                        height: 100% !important;
-                        border: none;
-                    }
-                    &.react-draggable-dragging {
-                        box-shadow: 0 5px 15px gray;
-                    }
-
-                    &.react-grid-placeholder {
-                        background-color: #CCC
-                    }
-                }
             }
         }
 
@@ -148,6 +91,7 @@
             background: lightgrey;
             height: 96.8vh;
             color: black;
+            z-index: 2;
 
             .formGroup {
                 display: grid;
@@ -168,8 +112,6 @@
 
 
 
-
-
 @media print {
     *:not(:has(.drop), .drop, .drop *) {
         display: none;

src/components/builderPage/builderPage.jsx

@@ -1,42 +1,43 @@
-import React, { Component } from "react";
-import GridLayout from "react-grid-layout";
+import React, { Component } from 'react';
+import GridLayout from 'react-grid-layout';
 
 //STYLES
-import "./builderPage.css";
-import "../../../node_modules/react-grid-layout/css/styles.css";
-import "../../../node_modules/react-resizable/css/styles.css";
+import './builderPage.css';
+import '../../../node_modules/react-grid-layout/css/styles.css';
+import '../../../node_modules/react-resizable/css/styles.css';
+import './sheet.css';
 
 //CS BLOCKS
-import LabelInput from "../draggables/labelInput";
-import TextArea from "../draggables/textarea";
-import StatInput from "../draggables/statInput";
-import EmptySpace from "../draggables/emptySpace";
+import LabelInput from '../draggables/labelInput';
+import TextArea from '../draggables/textarea';
+import StatInput from '../draggables/statInput';
+import EmptySpace from '../draggables/emptySpace';
 
 //OTHER COMPONENTS
-import Nav from "../nav/navBar";
-import Settings from "../sheetSettings.jsx";
+import Nav from '../nav/navBar';
+import Settings from '../sheetSettings.jsx';
 
-const buildingBlocks = [ 
+const buildingBlocks = [
     {
-        name: "LabelInput",
+        name: 'LabelInput',
         width: 4,
-        height: 2
+        height: 2,
     },
     {
-        name: "TextArea",
+        name: 'TextArea',
         width: 6,
-        height: 6
+        height: 6,
     },
     {
-        name: "StatInput",
+        name: 'StatInput',
         width: 2,
-        height: 2
+        height: 2,
     },
     {
-        name: "EmptySpace",
+        name: 'EmptySpace',
         width: 2,
-        height: 2
-    }
+        height: 2,
+    },
 ];
 
 class Builder extends Component {
@@ -45,22 +46,22 @@ class Builder extends Component {
         this.state = {
             layout: [],
             settings: {
-                name: "Character sheet",
+                name: 'Character sheet',
                 columns: 12,
                 rowHeight: 40,
-                size: "Letter",
+                size: 'letter',
                 height: null,
                 width: null,
             },
         };
     }
 
     componentDidMount() {
-        const savedLayout = localStorage.getItem("BuilderLayout");
+        const savedLayout = localStorage.getItem('axeBuilderLayout');
         if (savedLayout) {
             this.setState({ layout: JSON.parse(savedLayout) });
         }
-        const savedSettings = localStorage.getItem("sheetSettings");
+        const savedSettings = localStorage.getItem('axeSheetSettings');
         if (savedSettings) {
             console.table(JSON.parse(savedSettings));
             this.setState({ settings: JSON.parse(savedSettings) });
@@ -100,40 +101,48 @@ class Builder extends Component {
             i: `item-${index}`, // Reassigning IDs based on index
         }));
 
-        localStorage.setItem("BuilderLayout", JSON.stringify(updatedLayout));
+        localStorage.setItem('axeBuilderLayout', JSON.stringify(updatedLayout));
 
         //console.log("Updated Layout:", updatedLayout);
         this.setState({ layout: updatedLayout });
     };
 
     renderComponent = (name, key) => {
         const components = {
-            LabelInput: <LabelInput key={key}/>,
-            TextArea: <TextArea key={key}/>,
-            StatInput: <StatInput key={key}/>,
-            EmptySpace: <EmptySpace key={key}/>
+            LabelInput: <LabelInput key={key} />,
+            TextArea: <TextArea key={key} />,
+            StatInput: <StatInput key={key} />,
+            EmptySpace: <EmptySpace key={key} />,
         };
-        
+
         return components[name] || null;
     };
 
     renderPicker = () => {
         return (
             <div className="picker">
                 {buildingBlocks.map((block, index) => {
-                        return <div className="item" key={index}>
-                            <div className='label'>{block.name}</div>
+                    return (
+                        <div className="item" key={index}>
+                            <div className="label">{block.name}</div>
                             <div className="component">
                                 {this.renderComponent(block.name, index)}
                             </div>
                             <button
                                 className="addItem"
-                                onClick={() => this.addNewItem(block.name, block.width, block.height)}
+                                onClick={() =>
+                                    this.addNewItem(
+                                        block.name,
+                                        block.width,
+                                        block.height
+                                    )
+                                }
                             >
-                            Add
-                        </button>
-                        </div>                        
-                    })}
+                                Add
+                            </button>
+                        </div>
+                    );
+                })}
             </div>
         );
     };
@@ -142,41 +151,32 @@ class Builder extends Component {
         const layout = this.state.layout;
         const { columns, rowHeight, size, width, height } = this.state.settings;
 
-        const getSize = (side) => {
-            switch (side) {
-                case "height":
-                    switch (size) {
-                        case "letter": return 1100;
-                        case "A4": return 1169;
-                        case "A5": return 827;
-                        default: return height !== null ? height : 1056;
-                    }
-                case "width":
-                    switch (size) {
-                        case "letter": return 816;
-                        case "A4": return 827;
-                        case "A5": return 583;
-                        default: return width !== null ? width : 816;
-                    }
-                default: return side === "height" ? 1100 : 816;
-            }
+        const size_map = {
+            'A4': { width: 827, height: 1169 },
+            'A5': { width: 583, height: 827 },
+            'letter': { width: 816, height: 1100 },
+            'custom': { width: width, height: height },
         };
-
+
+        const defaultHeight = 1169,
+            defaultWidth = 827;
+        const pageHeight = size_map[size]?.height || defaultHeight;
+        const pageWidth = size_map[size]?.width || defaultWidth;
 
         return (
             <div>
                 <GridLayout
-                    className="layout"
+                    className="layout sheet"
                     layout={layout}
                     cols={columns}
                     rowHeight={rowHeight}
-                    width={getSize("width")}
+                    width={pageWidth}
                     onLayoutChange={this.saveLayout}
                     compactType={null}
                     preventCollision={true}
                     style={{
-                        width: getSize("width"),
-                        height: getSize("height"),
+                        width: pageWidth,
+                        height: pageHeight,
                     }}
                 >
                     {layout.map((item) => (
@@ -198,7 +198,7 @@ class Builder extends Component {
 
     handleSettingsSave = (newSettings) => {
         // Update parent component state with new settings
-        this.setState({ settings: newSettings});
+        this.setState({ settings: newSettings });
     };
 
     render() {

src/components/builderPage/sheet.css

@@ -0,0 +1,67 @@
+/*Imported in html download*/
+/*Do NOT remove that first comment*/
+
+.layout.sheet {
+    position: relative;
+    background: white;
+    color: black;
+
+    .react-grid-item {
+        display: grid;
+        place-items: center;
+        background-color: white;
+        box-sizing: border-box;
+
+        .deleteItem {
+            background: unset;
+            border: unset;
+            color: white;
+            font-weight: 900;
+            filter: drop-shadow(1px 1px 2px black);
+            position: absolute;
+            top: 0;
+            right: 0;
+            visibility: hidden;
+        }
+
+        .react-resizable-handle {
+            visibility: hidden;
+        }
+
+        input[type="text"] {
+            width: 90%;
+            margin-left: 5%;
+        }
+
+        input[type="number"] {
+            width: 5ch;
+        }
+
+        textarea {
+            resize: none;
+            width: 100% !important;
+            height: 100% !important;
+            border: none;
+        }
+
+        &.react-draggable-dragging {
+            box-shadow: 0 5px 15px gray;
+        }
+
+        &.react-grid-placeholder {
+            background-color: #CCC
+        }
+    }
+}
+
+/*place in this rule all CSS you don't want to work when exported into HTML, such as interactable stuff*/
+#create {
+
+    .react-grid-item:is(:hover, :focus, :focus-within) {
+        border: 1px dotted gray;
+
+        .deleteItem, .react-resizable-handle {
+            visibility: visible;
+        }
+    }
+}