More Input Form

src/Drawing.js

@@ -1,5 +1,6 @@
 import './App.css';
 import {useEffect, useLayoutEffect, useRef, useState} from "react";
+import {Save} from "./Save";
 
 let mouseDownMenuBar = false
 let mouseDownCanvas = false
@@ -688,6 +689,19 @@ export default function Drawing(p) {
                                 pointerEvents: "auto"
                             }}
                                     onClick={() => {
+                                        let save = canvas.toDataURL("image/png")
+                                        let arrString = localStorage.getItem("save")
+                                        if(arrString !== null) {
+                                            let json = JSON.parse(arrString)
+                                            json.arr.push(new Save(save))
+                                            localStorage.setItem("save", JSON.stringify(json))
+                                        }
+                                        else {
+                                            let json = {
+                                                arr: [new Save(save)]
+                                            }
+                                            localStorage.setItem("save", JSON.stringify(json))
+                                        }
                                         window.location.reload()
                                     }}>
                                 Home

src/Save.js

@@ -0,0 +1,17 @@
+export class Save {
+    constructor(content) {
+        let localID = localStorage.getItem("id")
+        this.id = 0
+        let now = new Date()
+        this.name = now.getFullYear() + "." + (now.getMonth() + 1)+ "." + now.getDate() + "-" + now.getHours() + "h" + now.getMinutes() + "-" + now.getSeconds() + "s"
+        if(localID !== null) {
+            this.id = parseInt(localID) + 1
+            localStorage.setItem("id", this.id)
+        }
+        else {
+            localStorage.setItem("id", 0)
+        }
+
+        this.content = content
+    }
+}

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,
+                padding: 30,
-                height: 600,
                 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={{
+                            style={{
-                               boxShadow: "0 0 5px gray",
+                                boxShadow: "0 0 5px gray",
-                               borderWidth: 0,
+                                borderWidth: 0,
-                               borderRadius: 15,
+                                borderRadius: 15,
-                               padding: 10,
+                                padding: 10,
-                               background: "rgba(0, 0, 0, 0)"
+                                background: "rgba(0, 0, 0, 0)"
-                           }}>Create</button>
+                            }}>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>
     );