mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
merged keybindings and savefile into options, css
This commit is contained in:
parent
629511f9d7
commit
bfa815aba0
6 changed files with 33 additions and 19 deletions
|
@ -5,9 +5,9 @@ import { HashRouter, Route, Switch } from "react-router-dom";
|
||||||
import Notes from "./dom-components/Notes";
|
import Notes from "./dom-components/Notes";
|
||||||
import MainPage from "./dom-components/MainPage";
|
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 Options from "./dom-components/Options";
|
||||||
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,8 +24,7 @@ const App = () => {
|
||||||
<Route path={"/notes"} exact component={Notes} />
|
<Route path={"/notes"} exact component={Notes} />
|
||||||
<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={"/options"} exact component={Options} />
|
||||||
<Route path={"/savefile"} exact component={Savefile} />
|
|
||||||
</Switch>
|
</Switch>
|
||||||
</HashRouter>
|
</HashRouter>
|
||||||
);
|
);
|
||||||
|
|
|
@ -10,8 +10,7 @@ const Header = () => {
|
||||||
<Link to="/game">start</Link>
|
<Link to="/game">start</Link>
|
||||||
<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="/options">options</Link>
|
||||||
<Link to="/savefile">savefile</Link>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -2,7 +2,6 @@ import React, { useCallback, useEffect } from "react";
|
||||||
import { formatKey } from "../helpers/keybinding-helpers";
|
import { formatKey } from "../helpers/keybinding-helpers";
|
||||||
import "../static/css/keybinding.css";
|
import "../static/css/keybinding.css";
|
||||||
import { useStore } from "../store";
|
import { useStore } from "../store";
|
||||||
import Header from "./Header";
|
|
||||||
|
|
||||||
const Keybinding = () => {
|
const Keybinding = () => {
|
||||||
const setKeybindings = useStore((state) => state.setKeybindings);
|
const setKeybindings = useStore((state) => state.setKeybindings);
|
||||||
|
@ -73,8 +72,6 @@ const Keybinding = () => {
|
||||||
}, [setKeybindings]);
|
}, [setKeybindings]);
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header />
|
|
||||||
<br />
|
|
||||||
<p className="keybinding-note">
|
<p className="keybinding-note">
|
||||||
This is the keybindings page. To change a keybinding, just click on it
|
This is the keybindings page. To change a keybinding, just click on it
|
||||||
and press the button you wish to bind it to after. In order for this to
|
and press the button you wish to bind it to after. In order for this to
|
||||||
|
|
17
src/dom-components/Options.tsx
Normal file
17
src/dom-components/Options.tsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import React from "react";
|
||||||
|
import Header from "./Header";
|
||||||
|
import Keybinding from "./Keybinding";
|
||||||
|
import Savefile from "./Savefile";
|
||||||
|
|
||||||
|
const Options = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header />
|
||||||
|
<Keybinding />
|
||||||
|
<hr />
|
||||||
|
<Savefile />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Options;
|
|
@ -1,6 +1,5 @@
|
||||||
import React, { useCallback, useEffect, useState } from "react";
|
import React, { useCallback, useEffect, useState } from "react";
|
||||||
import "../static/css/savefile.css";
|
import "../static/css/savefile.css";
|
||||||
import Header from "./Header";
|
|
||||||
|
|
||||||
const Savefile = () => {
|
const Savefile = () => {
|
||||||
const [textAreaValue, setTextAreaValue] = useState("");
|
const [textAreaValue, setTextAreaValue] = useState("");
|
||||||
|
@ -20,7 +19,6 @@ const Savefile = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header />
|
|
||||||
<div className="savefile-wrapper">
|
<div className="savefile-wrapper">
|
||||||
<p className="savefile-note">
|
<p className="savefile-note">
|
||||||
If you've saved the game during the playthrough, the text provided in
|
If you've saved the game during the playthrough, the text provided in
|
||||||
|
|
|
@ -1,13 +1,17 @@
|
||||||
.savefile-wrapper {
|
.savefile-wrapper {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
padding-left: 5em;
|
||||||
|
padding-right: 5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.savefile-note {
|
.savefile-note {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.7rem;
|
font-size: 1.7rem;
|
||||||
color: white;
|
color: white;
|
||||||
padding-left: 5em;
|
}
|
||||||
padding-right: 5em;
|
|
||||||
|
textarea {
|
||||||
|
width:70%;
|
||||||
}
|
}
|
Loading…
Reference in a new issue