More Input Form

src/StartForm.js

@@ -1,14 +1,22 @@
-import {useEffect} from "react";
+import {useEffect, useState} from "react";
 
 let inputWidth, inputHeight
 
 export default function StartForm(p) {
 
+    const [saves, setSaves] = useState([])
+
     useEffect(() => {
-        if(p.show !== "none") {
+        if (p.show !== "none") {
             inputWidth = document.getElementById("inputWidth")
             inputHeight = document.getElementById("inputHeight")
         }
+
+        let saveString = localStorage.getItem("save")
+
+        if (saveString !== null) {
+            setSaves(JSON.parse(saveString).arr)
+        }
     }, [])
 
     useEffect(() => {
@@ -22,21 +30,21 @@ export default function StartForm(p) {
             width: "100vw",
             height: "100vh",
             justifyContent: "center",
-            alignItems: "center"
+            alignItems: "center",
         }}>
             <div style={{
-                width: 800,
-                height: 600,
+                padding: 30,
                 borderRadius: 15,
                 boxShadow: "0 0 5px gray",
                 display: "flex",
                 flexDirection: "column",
                 justifyContent: "space-around",
-                alignItems: "center"
+                alignItems: "center",
+                gap: 20
             }}>
-                <h2>Welcome To ReDraw</h2>
+                <h2 style={{userSelect: "none"}}>Welcome To ReDraw</h2>
 
-                <h3>Specify your drawing canvas width and height</h3>
+                <h3 style={{userSelect: "none"}}>Specify your drawing canvas width and height</h3>
 
                 <div style={{
                     display: "flex",
@@ -61,16 +69,39 @@ export default function StartForm(p) {
                             p.onCreateCanvas(inputWidth, inputHeight)
                         }
                     }}
-                           style={{
-                               boxShadow: "0 0 5px gray",
-                               borderWidth: 0,
-                               borderRadius: 15,
-                               padding: 10,
-                               background: "rgba(0, 0, 0, 0)"
-                           }}>Create</button>
+                            style={{
+                                boxShadow: "0 0 5px gray",
+                                borderWidth: 0,
+                                borderRadius: 15,
+                                padding: 10,
+                                background: "rgba(0, 0, 0, 0)"
+                            }}>Create
+                    </button>
                 </div>
 
-                <h4>Please note that ReDraw is still in beta and will not guarantee correctness</h4>
+                <h3 style={{userSelect: "none"}}>Recent:</h3>
+                <div style={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    alignContent: "center",
+                    justifyItems: "center",
+                    gap: 5
+                }}>
+                    {saves.map(e => (
+                        <div style={{
+                            padding: 10,
+                            borderRadius: 15,
+                            boxShadow: "0 0 5px gray",
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            textAlign: "center"
+                        }} onClick={() => {
+                            console.log("test")
+                        }}><p style={{userSelect: "none", pointerEvents: "none"}}>{e.name}</p></div>
+                    ))}
+                </div>
             </div>
         </div>
     );