From bf04153877b3d5cca9514f3a1e5eed9224283331 Mon Sep 17 00:00:00 2001
From: Michael <44533763+iTNTPiston@users.noreply.github.com>
Date: Mon, 3 Oct 2022 22:44:55 -0700
Subject: [PATCH 1/2] Direct Load URL (#17)

* direct load url

* lint fix
---
 config/webpack.config.js                |  11 ++-
 package-lock.json                       | 108 ++++++++++++++++++++++--
 package.json                            |   5 +-
 public/index.html                       |   2 +-
 src/App.css                             |   8 ++
 src/components/LoadingScreen.tsx        |   8 +-
 src/core/Slots/Slots.add.test.ts        |   2 +-
 src/core/Slots/Slots.remove.test.ts     |   2 +-
 src/core/Slots/Slots.updateLife.test.ts |   2 +-
 src/data/serialize.test.ts              |  33 ++++++++
 src/data/serialize.ts                   |  40 +++++++++
 src/index.tsx                           |  11 +--
 src/surfaces/DirectLoadPage.tsx         |  51 +++++++++++
 src/surfaces/OptionPage.tsx             |  85 ++++++++++++++-----
 14 files changed, 326 insertions(+), 42 deletions(-)
 create mode 100644 src/data/serialize.test.ts
 create mode 100644 src/data/serialize.ts
 create mode 100644 src/surfaces/DirectLoadPage.tsx

diff --git a/config/webpack.config.js b/config/webpack.config.js
index eb9395a..d46b080 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -297,9 +297,9 @@ module.exports = function (webpackEnv) {
       ],
     },
     resolve: {
-      // fallback: {
-      //   buffer: require.resolve("buffer/")
-      // },
+      fallback: {
+        buffer: require.resolve("buffer/")
+      },
       // This allows you to set a fallback for where webpack should look for modules.
       // We placed these paths second because we want `node_modules` to "win"
       // if there are any conflicts. This matches Node resolution mechanism.
@@ -579,6 +579,11 @@ module.exports = function (webpackEnv) {
       ].filter(Boolean),
     },
     plugins: [
+      // Work around for Buffer is undefined:
+      // https://github.com/webpack/changelog-v5/issues/10
+      new webpack.ProvidePlugin({
+        Buffer: ['buffer', 'Buffer'],
+      }),
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin(
         Object.assign(
diff --git a/package-lock.json b/package-lock.json
index f9f4115..2822a3f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "botw-hundo-dupl",
-  "version": "1.0.0",
+  "version": "2.1.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "botw-hundo-dupl",
-      "version": "1.0.0",
+      "version": "2.1.4",
       "dependencies": {
         "@babel/core": "^7.16.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
@@ -43,12 +43,14 @@
         "jest-resolve": "^27.4.2",
         "jest-watch-typeahead": "^1.0.0",
         "mini-css-extract-plugin": "^2.4.5",
+        "pako": "^2.0.4",
         "postcss": "^8.4.4",
         "postcss-flexbugs-fixes": "^5.0.2",
         "postcss-loader": "^6.2.1",
         "postcss-normalize": "^10.0.1",
         "postcss-preset-env": "^7.0.1",
         "prompts": "^2.4.2",
+        "query-string": "^7.1.1",
         "react": "^18.2.0",
         "react-app-polyfill": "^3.0.0",
         "react-dev-utils": "^12.0.1",
@@ -72,6 +74,7 @@
         "yaml-loader": "^0.8.0"
       },
       "devDependencies": {
+        "@types/pako": "^2.0.0",
         "webpack-bundle-analyzer": "^4.5.0"
       }
     },
@@ -3827,6 +3830,12 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.41.tgz",
       "integrity": "sha512-mqoYK2TnVjdkGk8qXAVGc/x9nSaTpSrFaGFm43BUH3IdoBV0nta6hYaGmdOvIMlbHJbUEVen3gvwpwovAZKNdQ=="
     },
+    "node_modules/@types/pako": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.0.tgz",
+      "integrity": "sha512-10+iaz93qR5WYxTo+PMifD5TSxiOtdRaxBf7INGGXMQgTCu8Z/7GYWYFUOS3q/G0nE5boj1r4FEB+WSy7s5gbA==",
+      "dev": true
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -7652,6 +7661,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/finalhandler": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
@@ -11962,6 +11979,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg=="
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -13455,6 +13477,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/query-string": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.1.tgz",
+      "integrity": "sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w==",
+      "dependencies": {
+        "decode-uri-component": "^0.2.0",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -14580,6 +14619,14 @@
         "wbuf": "^1.7.3"
       }
     },
+    "node_modules/split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -14622,6 +14669,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -15023,9 +15078,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.14.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.1.tgz",
-      "integrity": "sha512-+ahUAE+iheqBTDxXhTisdA8hgvbEG1hHOQ9xmNjeUJSoi6DU/gMrKNcfZjHkyY6Alnuyc+ikYJaxxfHkT3+WuQ==",
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.15.0.tgz",
+      "integrity": "sha512-L1BJiXVmheAQQy+as0oF3Pwtlo4s3Wi1X2zNZ2NxOB4wx9bdS9Vk67XQENLFdLYGCK/Z2di53mTj/hBafR+dTA==",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
@@ -19048,6 +19103,12 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.41.tgz",
       "integrity": "sha512-mqoYK2TnVjdkGk8qXAVGc/x9nSaTpSrFaGFm43BUH3IdoBV0nta6hYaGmdOvIMlbHJbUEVen3gvwpwovAZKNdQ=="
     },
+    "@types/pako": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.0.tgz",
+      "integrity": "sha512-10+iaz93qR5WYxTo+PMifD5TSxiOtdRaxBf7INGGXMQgTCu8Z/7GYWYFUOS3q/G0nE5boj1r4FEB+WSy7s5gbA==",
+      "dev": true
+    },
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -21850,6 +21911,11 @@
         "to-regex-range": "^5.0.1"
       }
     },
+    "filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ=="
+    },
     "finalhandler": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
@@ -24929,6 +24995,11 @@
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
     },
+    "pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg=="
+    },
     "param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -25847,6 +25918,17 @@
         "side-channel": "^1.0.4"
       }
     },
+    "query-string": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.1.tgz",
+      "integrity": "sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w==",
+      "requires": {
+        "decode-uri-component": "^0.2.0",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      }
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -26679,6 +26761,11 @@
         "wbuf": "^1.7.3"
       }
     },
+    "split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
+    },
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -26714,6 +26801,11 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
     },
+    "strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ=="
+    },
     "string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -26998,9 +27090,9 @@
       }
     },
     "terser": {
-      "version": "5.14.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.1.tgz",
-      "integrity": "sha512-+ahUAE+iheqBTDxXhTisdA8hgvbEG1hHOQ9xmNjeUJSoi6DU/gMrKNcfZjHkyY6Alnuyc+ikYJaxxfHkT3+WuQ==",
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.15.0.tgz",
+      "integrity": "sha512-L1BJiXVmheAQQy+as0oF3Pwtlo4s3Wi1X2zNZ2NxOB4wx9bdS9Vk67XQENLFdLYGCK/Z2di53mTj/hBafR+dTA==",
       "requires": {
         "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
diff --git a/package.json b/package.json
index 2f2f4e9..a847d1c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "botw-hundo-dupl",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "homepage": "https://dupl.itntpiston.app/",
   "private": true,
   "dependencies": {
@@ -39,12 +39,14 @@
     "jest-resolve": "^27.4.2",
     "jest-watch-typeahead": "^1.0.0",
     "mini-css-extract-plugin": "^2.4.5",
+    "pako": "^2.0.4",
     "postcss": "^8.4.4",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-loader": "^6.2.1",
     "postcss-normalize": "^10.0.1",
     "postcss-preset-env": "^7.0.1",
     "prompts": "^2.4.2",
+    "query-string": "^7.1.1",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.1",
@@ -152,6 +154,7 @@
     ]
   },
   "devDependencies": {
+    "@types/pako": "^2.0.0",
     "webpack-bundle-analyzer": "^4.5.0"
   }
 }
diff --git a/public/index.html b/public/index.html
index 40fefab..c3f3543 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,7 +14,7 @@
     <meta property="og:url" content="https://dupl.itntpiston.app/#/">
     <meta property="og:description" content="for Breath of the Wild">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>IST Sim</title>
+    <title>IST Simulator</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/App.css b/src/App.css
index deb2626..bb43afe 100644
--- a/src/App.css
+++ b/src/App.css
@@ -176,6 +176,13 @@ button.MainButton:active {
   background-color: #888888;
 }
 
+button.MainButton:disabled{
+  color: #888888;
+  background-color: #333333;
+  border-color: #888888;
+  box-shadow: none;
+}
+
 .FullWidth {
   width: 100% !important;
 }
@@ -188,6 +195,7 @@ div.OtherPage {
 
 div.OtherPageContent{
   padding: 10px;
+  overflow-wrap: break-word;
 }
 
 .MainInput {
diff --git a/src/components/LoadingScreen.tsx b/src/components/LoadingScreen.tsx
index e2a87e9..26aaa42 100644
--- a/src/components/LoadingScreen.tsx
+++ b/src/components/LoadingScreen.tsx
@@ -1,7 +1,11 @@
 import { PropsWithChildren } from "react";
 
+type Props = {
+	multiLine?: boolean, 
+}
+
 // an over-engineered loading screen
-export const LoadingScreen: React.FC<PropsWithChildren> = ({children})=>{
+export const LoadingScreen: React.FC<PropsWithChildren<Props>> = ({multiLine, children})=>{
 	return (
 		<div style={{
 			textAlign: "center",
@@ -15,7 +19,7 @@ export const LoadingScreen: React.FC<PropsWithChildren> = ({children})=>{
 			<span style={{
 				color: "#00ffcc",
                 
-				lineHeight: "100vh",
+				lineHeight: multiLine?"default":"100vh",
 				height: "100vh",
 			}}>
 				{children}
diff --git a/src/core/Slots/Slots.add.test.ts b/src/core/Slots/Slots.add.test.ts
index ba81f32..0740dd5 100644
--- a/src/core/Slots/Slots.add.test.ts
+++ b/src/core/Slots/Slots.add.test.ts
@@ -2,7 +2,7 @@ import { ItemStack, ItemType, createMaterialStack, createEquipmentStack } from "
 import { Slots } from "./Slots";
 import { createArrowMockItem, createEquipmentMockItem, createFoodMockItem, createKeyMockItem, createMaterialMockItem, equalsExceptEquip } from "./SlotsTestHelpers";
 
-describe("Slots.add", ()=>{
+describe("core/Slots.add", ()=>{
 	describe("sorted", ()=>{
 		describe("reloading = true", ()=>{
 			it("should add new stack when empty", ()=>{
diff --git a/src/core/Slots/Slots.remove.test.ts b/src/core/Slots/Slots.remove.test.ts
index 08d4a8e..df885a3 100644
--- a/src/core/Slots/Slots.remove.test.ts
+++ b/src/core/Slots/Slots.remove.test.ts
@@ -2,7 +2,7 @@ import { createEquipmentStack, createMaterialStack, ItemStack, ItemType } from "
 import { Slots } from "./Slots";
 import { createEquipmentMockItem, createMaterialMockItem } from "./SlotsTestHelpers";
 
-describe("Slots.remove", ()=>{
+describe("core/Slots.remove", ()=>{
 	it("Does nothing if item doesn't exist", ()=>{
 		const mockItem1 = createMaterialMockItem("MaterialA");
 		const stackToRemove = createMaterialStack(mockItem1, 1);
diff --git a/src/core/Slots/Slots.updateLife.test.ts b/src/core/Slots/Slots.updateLife.test.ts
index ace36ae..fa100dd 100644
--- a/src/core/Slots/Slots.updateLife.test.ts
+++ b/src/core/Slots/Slots.updateLife.test.ts
@@ -2,7 +2,7 @@ import { createEquipmentStack, createMaterialStack, ItemStack, ItemType } from "
 import { Slots } from "./Slots";
 import { createArrowMockItem, createEquipmentMockItem, createFoodMockItem, createKeyMockItemStackable, createMaterialMockItem } from "./SlotsTestHelpers";
 
-describe.only("Slots.updateLife", ()=>{
+describe.only("core/Slots.updateLife", ()=>{
 	it("should update life", ()=>{
 		const mockItem1 = createMaterialMockItem("MaterialA");
 		const slot = createMaterialStack(mockItem1, 1);
diff --git a/src/data/serialize.test.ts b/src/data/serialize.test.ts
new file mode 100644
index 0000000..e96030a
--- /dev/null
+++ b/src/data/serialize.test.ts
@@ -0,0 +1,33 @@
+import { compressString, decompressString } from "./serialize";
+
+const runCompressDecompressTest = (input: string) => {
+	const compressed = compressString(input);
+	expect(compressed).not.toEqual(input);
+	expect(decompressString(compressed)).toEqual(input);
+};
+
+describe.only("data/serialize.compress", ()=>{
+	it("Should compress and decompress empty string", ()=>{
+		runCompressDecompressTest("");
+	});
+	it("Should compress and decompress one character", ()=>{
+		runCompressDecompressTest("a");
+	});
+	it("Should compress and decompress single command", ()=>{
+		const input = "Break 5 Slots";
+		runCompressDecompressTest(input);
+	});
+	it("Should compress and decompress large command", ()=>{
+		const input = "Initialize 1 Tree Branch[equip] 1 Hammer 1 Travel Bow[Equip] 3 NormalArrow[Equip] 1 potlid 1 potlid[equip] 1 Fairy 1 SpeedFood 3 EnduraFood 1 Slate 9 SpiritOrb 1 Glider";
+		runCompressDecompressTest(input);
+	});
+	it("Should compress and decompress multiple commands", ()=>{
+		const inputArray = [
+			"Break 5 Slots",
+			"Save",
+			"Eat 3 EnduraFood",
+			"Eat SpeedFood"
+		];
+		runCompressDecompressTest(inputArray.join("\n"));
+	});
+});
diff --git a/src/data/serialize.ts b/src/data/serialize.ts
new file mode 100644
index 0000000..eeae1b6
--- /dev/null
+++ b/src/data/serialize.ts
@@ -0,0 +1,40 @@
+import { gzip, ungzip } from "pako";
+
+const ZLIB_OPTIONS = {
+	level: 9
+} as const;
+
+type SerializedCommands = { r: string } | { c: string }; // r for raw and c for compressed
+
+export const serialize = (commandsString: string): SerializedCommands => {
+	const compressed = compressString(commandsString);
+	if (commandsString.length < compressed.length){
+		return { r: commandsString };
+	}
+	return { c: compressed };
+};
+
+export const deserialize = (serializedCommands: Partial<SerializedCommands>): string | null => {
+	if ( "r" in serializedCommands && serializedCommands.r){
+		return serializedCommands.r;
+	}
+	if ( "c" in serializedCommands && serializedCommands.c){
+		return decompressString(serializedCommands.c);
+	}
+	return null;
+};
+
+export const compressString = (uncompressedString: string): string => {
+	const uncompressedBytes = Buffer.from(uncompressedString, "utf8");
+	const compressedBytes = gzip(uncompressedBytes, ZLIB_OPTIONS);
+	return Buffer.from(compressedBytes).toString("base64");
+};
+
+export const decompressString = (decompressedString: string): string => {
+	const compressedBytes = Buffer.from(decompressedString, "base64");
+	const uncompressedBytes = ungzip(compressedBytes, {
+		to: "string",
+		...ZLIB_OPTIONS
+	});
+	return Buffer.from(uncompressedBytes).toString("utf8");
+};
diff --git a/src/index.tsx b/src/index.tsx
index 75a00d7..ceeaa71 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,6 +5,7 @@ import {App} from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { LanguageProvider } from "data/i18n";
 import { ItemProvider } from "data/item";
+import { DirectLoadPage } from "surfaces/DirectLoadPage";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
@@ -12,12 +13,12 @@ const root = ReactDOM.createRoot(
 root.render(
 	<React.StrictMode>
 		<LanguageProvider>
-			<ItemProvider>
-				<App />
-			</ItemProvider>
-			
+			<DirectLoadPage>
+				<ItemProvider>
+					<App />
+				</ItemProvider>
+			</DirectLoadPage>
 		</LanguageProvider>
-		
 	</React.StrictMode>
 );
 
diff --git a/src/surfaces/DirectLoadPage.tsx b/src/surfaces/DirectLoadPage.tsx
new file mode 100644
index 0000000..30db616
--- /dev/null
+++ b/src/surfaces/DirectLoadPage.tsx
@@ -0,0 +1,51 @@
+import { PropsWithChildren } from "react";
+import { parse } from "query-string";
+import { deserialize } from "data/serialize";
+import { LoadingScreen } from "components/LoadingScreen";
+import { BodyText, Header, SubHeader } from "components/Text";
+
+const redirectToMainApp = ()=>{
+	window.location.href = window.location.origin;
+};
+
+export const DirectLoadPage: React.FC<PropsWithChildren> = ({children}) => {
+	const query = parse(window.location.search);
+	const commandTextToLoad = deserialize(query);
+
+	if (!commandTextToLoad){
+		return <>{children}</>;
+	}
+
+	if (!localStorage.getItem("HDS.CurrentCommandsText")){
+		// If no data is in simulator (i.e. first time use), load data without warning
+		localStorage.setItem("HDS.CurrentCommandsText", commandTextToLoad);
+		redirectToMainApp();
+	}
+
+	return <LoadingScreen multiLine>
+		<div className="OtherPageContent">
+			<Header>Open Direct URL?</Header>
+			<SubHeader>You are trying to open a direct URL. This will automatically load data into the simulator.</SubHeader>
+			<BodyText emphasized>This will override existing data and cannot be reversed</BodyText>
+			<button className="MainButton" onClick={()=>{
+				localStorage.setItem("HDS.CurrentCommandsText", commandTextToLoad);
+				redirectToMainApp();
+			}}>Yes</button>
+			<button className="MainButton" onClick={()=>{
+                
+				redirectToMainApp();
+			}}>No</button>
+            
+			<div style={{marginTop: "50px", marginLeft: "10%", marginRight: "10%"}}>
+				<BodyText>(Below is what the incoming data looks like)</BodyText>
+				<textarea 
+					className="MainInput"
+					spellCheck={false} 
+					value={commandTextToLoad}
+				/>
+			</div>
+            
+		</div>
+        
+	</LoadingScreen>;
+};
diff --git a/src/surfaces/OptionPage.tsx b/src/surfaces/OptionPage.tsx
index 622e1ad..ad14137 100644
--- a/src/surfaces/OptionPage.tsx
+++ b/src/surfaces/OptionPage.tsx
@@ -1,6 +1,8 @@
+import { BodyText, SubHeader, SubTitle } from "components/Text";
 import { TitledList } from "components/TitledList";
 import { saveAs } from "data/FileSaver";
-import { useRef, useState } from "react";
+import { serialize } from "data/serialize";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 type OptionPageProps = {
 	interlaceInventory: boolean,
@@ -21,8 +23,21 @@ export const OptionPage: React.FC<OptionPageProps> = ({
 }) => {
 	const [currentText, setCurrentText] = useState<string>(commandText);
 	const [fileName, setFileName] = useState<string>("");
+	const [showDirectUrl, setShowDirectUrl] = useState<boolean>(false);
+	const [showCopiedMessage, setShowCopiedMessage] = useState<boolean>(false);
+	
 	const uploadRef = useRef<HTMLInputElement>(null);
 
+	const directUrl = useMemo(()=>{
+		const serializedCommands = serialize(commandText);
+		const query = new URLSearchParams(serializedCommands).toString();
+		return `${window.location.origin}/?${query}`;
+	}, [commandText]);
+
+	useEffect(()=>{
+		setShowCopiedMessage(false);
+	}, [currentText]);
+
 	return (
 		<div className="OtherPage">
 
@@ -41,36 +56,29 @@ export const OptionPage: React.FC<OptionPageProps> = ({
 
 			<TitledList title="Options">
 				<div className="OtherPageContent">
- 
-					<h3 className="Reference">
+					<SubHeader>
 						Interlace Inventory with GameData 
 						<button className="MainButton" onClick={()=>{
 							setInterlaceInventory(!interlaceInventory);
 						}}>
 							{interlaceInventory ? "ON" : "OFF"}
 						</button>
-					</h3>
-					<h4 className="Reference">
-						Toggle whether Visible Inventory should be displayed separetely from Game Data or interlaced.
-					</h4>
+					</SubHeader>
+					<SubTitle>Toggle whether Visible Inventory should be displayed separetely from Game Data or interlaced.</SubTitle>
 
-					<h3 className="Reference">
+					<SubHeader>
 						Enable Animated Item Icons
 						<button className="MainButton" onClick={()=>{
 							setIsIconAnimated(!isIconAnimated);
 						}}>
 							{isIconAnimated ? "ON" : "OFF"}
 						</button>
-					</h3>
-					<h4 className="Reference">
-						Toggle whether items such as the champion abilities or Travel Medallion use animated or still icons.
-					</h4>
+					</SubHeader>
+					<SubTitle>Toggle whether items such as the champion abilities or Travel Medallion use animated or still icons.</SubTitle>
 
-					<h3 className="Reference">Import / Export</h3>
-					<h4 className="Reference">
-						You can also directly copy, paste, or edit the commands here
-					</h4>
-					<p className="Reference">
+					<SubHeader>Text Import / Export</SubHeader>
+					<SubTitle>You can also directly copy, paste, or edit the commands here</SubTitle>
+					<BodyText>
 						<button className="MainButton" onClick={()=>{
 							if(uploadRef.current){
 								uploadRef.current.click();
@@ -112,9 +120,48 @@ export const OptionPage: React.FC<OptionPageProps> = ({
 								<span className="Example">Don't forget to save changes</span>
 							</>
 						}
-						
-					</p>
+					</BodyText>
 
+					<SubHeader>Direct URL</SubHeader>
+					<SubTitle>Use this to open the simulator with the steps automatically loaded.</SubTitle>
+					<div>
+						{
+							currentText !== commandText ?
+								<BodyText emphasized>
+									You must save the changes above to access the updated URL
+								</BodyText>
+								:
+								<>
+									<p className="Reference" style={{
+										fontSize: "10pt",
+										color: "#aaaaaa",
+									
+										...!showDirectUrl && {
+											textOverflow: "ellipsis",
+											overflowX: "hidden",
+											whiteSpace: "nowrap",
+										}
+									}}>
+										{directUrl}
+									</p>
+									<BodyText>
+										<button className="MainButton" onClick={()=>{
+											setShowDirectUrl(!showDirectUrl);
+										}}>{showDirectUrl ? "Hide" : "Expand"}</button>
+										<button className="MainButton" disabled={currentText !== commandText} onClick={()=>{
+											window.navigator.clipboard.writeText(directUrl);
+											setShowCopiedMessage(true);
+										}}>
+										Copy
+										</button>
+										{
+											showCopiedMessage && <span className="Example">Link copied!</span>
+										}
+						
+									</BodyText>
+								</>
+						}
+					</div>
 				</div>
 			</TitledList>
 		</div>

From 8f1c1176d009c16a37f0808fec9ea6ef610d6e5e Mon Sep 17 00:00:00 2001
From: Michael <44533763+iTNTPiston@users.noreply.github.com>
Date: Sun, 9 Oct 2022 13:17:49 -0700
Subject: [PATCH 2/2] display error if cannot open direct url (#18)

* display error if cannot open direct url

* fix lint
---
 package-lock.json                |  4 ++--
 package.json                     |  2 +-
 src/components/LoadingScreen.tsx |  5 +++--
 src/surfaces/DirectLoadPage.tsx  | 25 +++++++++++++++++++++++--
 src/surfaces/OptionPage.tsx      | 12 +++++++++++-
 5 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2822a3f..c5fd790 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "botw-hundo-dupl",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "botw-hundo-dupl",
-      "version": "2.1.4",
+      "version": "2.1.5",
       "dependencies": {
         "@babel/core": "^7.16.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
diff --git a/package.json b/package.json
index a847d1c..7eebf29 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "botw-hundo-dupl",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "homepage": "https://dupl.itntpiston.app/",
   "private": true,
   "dependencies": {
diff --git a/src/components/LoadingScreen.tsx b/src/components/LoadingScreen.tsx
index 26aaa42..70c6931 100644
--- a/src/components/LoadingScreen.tsx
+++ b/src/components/LoadingScreen.tsx
@@ -2,10 +2,11 @@ import { PropsWithChildren } from "react";
 
 type Props = {
 	multiLine?: boolean, 
+	hasError?: boolean,
 }
 
 // an over-engineered loading screen
-export const LoadingScreen: React.FC<PropsWithChildren<Props>> = ({multiLine, children})=>{
+export const LoadingScreen: React.FC<PropsWithChildren<Props>> = ({multiLine, hasError, children})=>{
 	return (
 		<div style={{
 			textAlign: "center",
@@ -17,7 +18,7 @@ export const LoadingScreen: React.FC<PropsWithChildren<Props>> = ({multiLine, ch
 			backgroundColor: "#262626"
 		}}>
 			<span style={{
-				color: "#00ffcc",
+				color: hasError? "#ee7777":"#00ffcc",
                 
 				lineHeight: multiLine?"default":"100vh",
 				height: "100vh",
diff --git a/src/surfaces/DirectLoadPage.tsx b/src/surfaces/DirectLoadPage.tsx
index 30db616..21a4ec9 100644
--- a/src/surfaces/DirectLoadPage.tsx
+++ b/src/surfaces/DirectLoadPage.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, useMemo } from "react";
 import { parse } from "query-string";
 import { deserialize } from "data/serialize";
 import { LoadingScreen } from "components/LoadingScreen";
@@ -10,7 +10,28 @@ const redirectToMainApp = ()=>{
 
 export const DirectLoadPage: React.FC<PropsWithChildren> = ({children}) => {
 	const query = parse(window.location.search);
-	const commandTextToLoad = deserialize(query);
+	const [commandTextToLoad, errorText] = useMemo(()=>{
+		try {
+			return [deserialize(query), false];
+		} catch (e) {
+			console.error(e);
+			return [null, "Fail to deserialize. The URL may be corrupted."];
+		}
+	}, [query]);
+
+	if(errorText){
+		return (
+			<LoadingScreen hasError multiLine>
+				<Header>Error loading direct URL</Header>
+				<SubHeader>{errorText}</SubHeader>
+				<BodyText>The browser console may have useful information for debugging</BodyText>
+				<BodyText emphasized>Press Continue to load existing data in the simulator instead</BodyText>
+				<button className="MainButton" onClick={()=>{
+					redirectToMainApp();
+				}}>Continue</button>
+			</LoadingScreen>
+		);
+	}
 
 	if (!commandTextToLoad){
 		return <>{children}</>;
diff --git a/src/surfaces/OptionPage.tsx b/src/surfaces/OptionPage.tsx
index ad14137..43315ed 100644
--- a/src/surfaces/OptionPage.tsx
+++ b/src/surfaces/OptionPage.tsx
@@ -4,6 +4,8 @@ import { saveAs } from "data/FileSaver";
 import { serialize } from "data/serialize";
 import { useEffect, useMemo, useRef, useState } from "react";
 
+const URL_MAX = 2048;
+
 type OptionPageProps = {
 	interlaceInventory: boolean,
 	setInterlaceInventory: (value: boolean)=>void,
@@ -34,6 +36,8 @@ export const OptionPage: React.FC<OptionPageProps> = ({
 		return `${window.location.origin}/?${query}`;
 	}, [commandText]);
 
+	const directUrlLength = directUrl.length;
+
 	useEffect(()=>{
 		setShowCopiedMessage(false);
 	}, [currentText]);
@@ -132,6 +136,11 @@ export const OptionPage: React.FC<OptionPageProps> = ({
 								</BodyText>
 								:
 								<>
+									{
+										directUrlLength > URL_MAX && <BodyText emphasized>
+											Warning: The URL is too long ({directUrlLength} characters) and may not work in certain browsers. Export as file instead if you encounter any problems.
+										</BodyText>
+									}
 									<p className="Reference" style={{
 										fontSize: "10pt",
 										color: "#aaaaaa",
@@ -144,6 +153,7 @@ export const OptionPage: React.FC<OptionPageProps> = ({
 									}}>
 										{directUrl}
 									</p>
+									
 									<BodyText>
 										<button className="MainButton" onClick={()=>{
 											setShowDirectUrl(!showDirectUrl);
@@ -157,7 +167,7 @@ export const OptionPage: React.FC<OptionPageProps> = ({
 										{
 											showCopiedMessage && <span className="Example">Link copied!</span>
 										}
-						
+										
 									</BodyText>
 								</>
 						}