refactored save file management system

src/App.tsx

@@ -7,6 +7,7 @@ import MainPage from "./dom-components/MainPage";
 import Guide from "./dom-components/Guide";
 import Keybinding from "./dom-components/Keybinding";
 import { useStore } from "./store";
+import Savefile from "./dom-components/Savefile";
 
 const App = () => {
   const setKeybindings = useStore((state) => state.setKeybindings);
@@ -24,6 +25,7 @@ const App = () => {
         <Route path={"/game"} exact component={Game} />
         <Route path={"/guide"} exact component={Guide} />
         <Route path={"/keybinding"} exact component={Keybinding} />
+        <Route path={"/savefile"} exact component={Savefile} />
       </Switch>
     </HashRouter>
   );

src/dom-components/Game.tsx

@@ -50,17 +50,6 @@ const Game = () => {
 
   const handleWindowKeypress = useCallback((event) => {
     switch (event.key) {
-      case "l":
-        const saveState = prompt(
-          `This is your current save state. It's empty if you haven't saved the game yet. To export it, just copy this value and save it somewhere, to import another one, simply replace it and click ok. 
-          \n If you wish to reset your progress, simply delete it and click ok.
-          \n Keep in mind replacing this with something other than a save state/manually modifying it without being careful will result in a crash upon trying to load it.`,
-          localStorage.getItem("lainSaveState") || undefined
-        );
-
-        localStorage.setItem("lainSaveState", saveState || "");
-
-        break;
       case "k":
         setWidth((prevWidth) => prevWidth * 1.1);
         setHeight((prevHeight) => prevHeight * 1.1);

src/dom-components/Header.tsx

@@ -11,6 +11,7 @@ const Header = () => {
       <Link to="/guide">guide</Link>
       <a href="https://discord.com/invite/W22Ga2R">discord</a>
       <Link to="/keybinding">keybinding</Link>
+      <Link to="/savefile">savefile</Link>
     </div>
   );
 };

src/dom-components/Notes.tsx

@@ -165,10 +165,6 @@ const Notes = () => {
                     <td>j</td>
                     <td>Downscale Game Window</td>
                   </tr>
-                  <tr>
-                    <td>l</td>
-                    <td>Save Manager</td>
-                  </tr>
                 </tbody>
               </table>
               <br />

src/dom-components/Savefile.tsx

@@ -0,0 +1,49 @@
+import React, { useCallback, useEffect, useState } from "react";
+import "../static/css/savefile.css";
+import Header from "./Header";
+
+const Savefile = () => {
+  const [textAreaValue, setTextAreaValue] = useState("");
+
+  useEffect(() => {
+    setTextAreaValue(localStorage.getItem("lainSaveState") || "");
+  }, []);
+
+  const saveState = useCallback(() => {
+    if (textAreaValue) localStorage.setItem("lainSaveState", textAreaValue);
+    else localStorage.setItem("lainSaveState", "");
+  }, [textAreaValue]);
+
+  const handleTextValueChange = useCallback((e) => {
+    setTextAreaValue(e.target.value);
+  }, []);
+
+  return (
+    <>
+      <Header />
+      <div className="savefile-wrapper">
+        <p className="savefile-note">
+          If you've saved the game during the playthrough, the text provided in
+          the box below is your "save file". To export it for future use, just
+          copy everything inside it and paste it inside a file somewhere
+          locally. To re-import it later, take the contents of the file, paste
+          them here, and press "Save state". After that, reload the website.
+          <br />
+          <br />
+          If you're here simply to reset your progress, just delete everything
+          inside the textbox below and press "Save state".
+          <br />
+          <br />
+          Keep in mind, manually modifying the contents without being
+          careful/setting it to something random will result in a crash while
+          trying to load the state in-game.
+        </p>
+        <textarea value={textAreaValue} onChange={handleTextValueChange} />
+        <br />
+        <button onClick={saveState}>Save state</button>
+      </div>
+    </>
+  );
+};
+
+export default Savefile;

src/static/css/savefile.css

@@ -0,0 +1,13 @@
+.savefile-wrapper {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.savefile-note {
+  text-align: center;
+  font-size: 1.7rem;
+  color: white;
+  padding-left: 5em;
+  padding-right: 5em;
+}

src/utils/getKeyPress.ts

@@ -3,7 +3,6 @@ import { useStore } from "../store";
 const getKeyPress = (key: string) => {
   const keybindings = useStore.getState().keybindings;
 
-  console.log(keybindings);
   // make the keybinds work with caps lock on aswell
   if (key.length === 1) key = key.toLowerCase();