better way of importing/exporting save state

README.md

@@ -33,17 +33,13 @@ Building locally is currently not possible. This is because the repository lacks
 
   - **/extract/** - WIP extraction script to automate the local building process of the game.
 
-## Importing/exporting game progress from within the browser
-
-Once you've saved the game manually (going into pause => selecting Save), look inside the `localStorage` of your browser and copy the value of the key `lainSaveState`. Changing that value and calling Load Game from the main menu will load that save state. Keep in mind manually modifying the JSON and loading it might lead to some funny bugs since the dependency graph of the game progress is not linear.
-
 ## TODO
 
 - **Finish writing the extraction script**
 - **Improve/complete the translation**
 - **Implement an interface for changing languages**
 - **Allow the player to modify the keybindings**
-- **Implement a better way of exporting/importing save files**
+- **Add controller support**
 
 ## Screenshots
 

src/dom-components/Game.tsx

@@ -48,8 +48,19 @@ const Game = () => {
   const [width, setWidth] = useState((window.screen.height / 1.8) * 1.3);
   const [height, setHeight] = useState(window.screen.height / 1.8);
 
-  const handleGameResize = useCallback((event) => {
+  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);
@@ -61,12 +72,12 @@ const Game = () => {
   }, []);
 
   useEffect(() => {
-    window.addEventListener("keydown", handleGameResize);
+    window.addEventListener("keydown", handleWindowKeypress);
 
     return () => {
-      window.removeEventListener("keydown", handleGameResize);
+      window.removeEventListener("keydown", handleWindowKeypress);
     };
-  }, [handleGameResize]);
+  }, [handleWindowKeypress]);
 
   useEffect(() => {
     document.body.style.overflowY = "hidden";

src/dom-components/Notes.tsx

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