display error if cannot open direct url (#18)

* display error if cannot open direct url

* fix lint

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",

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": {

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",

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}</>;

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>
 								</>
 						}