mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
refactored save file management system
This commit is contained in:
parent
42e22e3613
commit
71b0775a6d
7 changed files with 65 additions and 16 deletions
|
@ -7,6 +7,7 @@ import MainPage from "./dom-components/MainPage";
|
||||||
import Guide from "./dom-components/Guide";
|
import Guide from "./dom-components/Guide";
|
||||||
import Keybinding from "./dom-components/Keybinding";
|
import Keybinding from "./dom-components/Keybinding";
|
||||||
import { useStore } from "./store";
|
import { useStore } from "./store";
|
||||||
|
import Savefile from "./dom-components/Savefile";
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const setKeybindings = useStore((state) => state.setKeybindings);
|
const setKeybindings = useStore((state) => state.setKeybindings);
|
||||||
|
@ -24,6 +25,7 @@ const App = () => {
|
||||||
<Route path={"/game"} exact component={Game} />
|
<Route path={"/game"} exact component={Game} />
|
||||||
<Route path={"/guide"} exact component={Guide} />
|
<Route path={"/guide"} exact component={Guide} />
|
||||||
<Route path={"/keybinding"} exact component={Keybinding} />
|
<Route path={"/keybinding"} exact component={Keybinding} />
|
||||||
|
<Route path={"/savefile"} exact component={Savefile} />
|
||||||
</Switch>
|
</Switch>
|
||||||
</HashRouter>
|
</HashRouter>
|
||||||
);
|
);
|
||||||
|
|
|
@ -50,17 +50,6 @@ const Game = () => {
|
||||||
|
|
||||||
const handleWindowKeypress = useCallback((event) => {
|
const handleWindowKeypress = useCallback((event) => {
|
||||||
switch (event.key) {
|
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":
|
case "k":
|
||||||
setWidth((prevWidth) => prevWidth * 1.1);
|
setWidth((prevWidth) => prevWidth * 1.1);
|
||||||
setHeight((prevHeight) => prevHeight * 1.1);
|
setHeight((prevHeight) => prevHeight * 1.1);
|
||||||
|
|
|
@ -11,6 +11,7 @@ const Header = () => {
|
||||||
<Link to="/guide">guide</Link>
|
<Link to="/guide">guide</Link>
|
||||||
<a href="https://discord.com/invite/W22Ga2R">discord</a>
|
<a href="https://discord.com/invite/W22Ga2R">discord</a>
|
||||||
<Link to="/keybinding">keybinding</Link>
|
<Link to="/keybinding">keybinding</Link>
|
||||||
|
<Link to="/savefile">savefile</Link>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -165,10 +165,6 @@ const Notes = () => {
|
||||||
<td>j</td>
|
<td>j</td>
|
||||||
<td>Downscale Game Window</td>
|
<td>Downscale Game Window</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
|
||||||
<td>l</td>
|
|
||||||
<td>Save Manager</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<br />
|
<br />
|
||||||
|
|
49
src/dom-components/Savefile.tsx
Normal file
49
src/dom-components/Savefile.tsx
Normal file
|
@ -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;
|
13
src/static/css/savefile.css
Normal file
13
src/static/css/savefile.css
Normal file
|
@ -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;
|
||||||
|
}
|
|
@ -3,7 +3,6 @@ import { useStore } from "../store";
|
||||||
const getKeyPress = (key: string) => {
|
const getKeyPress = (key: string) => {
|
||||||
const keybindings = useStore.getState().keybindings;
|
const keybindings = useStore.getState().keybindings;
|
||||||
|
|
||||||
console.log(keybindings);
|
|
||||||
// make the keybinds work with caps lock on aswell
|
// make the keybinds work with caps lock on aswell
|
||||||
if (key.length === 1) key = key.toLowerCase();
|
if (key.length === 1) key = key.toLowerCase();
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue