update the page

This commit is contained in:
lelenium 2021-08-19 00:03:37 +02:00
parent 85bcbdc6d4
commit ecc367d56d
4 changed files with 56 additions and 110 deletions

View file

@ -69,9 +69,10 @@ const Keybinding = () => {
return (
<>
<p className="keybinding-note">
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
take effect, you must refresh the game page.
To change a keybinding, just click on it and press the button you wish
to bind it to after.
<br />
In order for this to take effect, you must refresh the game page.
</p>
<br />
<div className="keybinding">

View file

@ -17,27 +17,23 @@ const MainPage = () => {
This is a web reimplementation of the Serial Experiments Lain PSX game
with the aim to provide multi-language support.
<br />
Please make sure to read the <Link to="/notes">notes</Link> before you
start playing.
<h3><b>Please make sure to read the <Link to="/notes">notes</Link> before you
start playing.</b></h3>
<br />
<br />
</p>
<p className="faq">
FAQ:
<br /> <br />
<QA
question={"I'm confused about the game."}
answer={"Amazing! That means the game is working properly."}
/>
<QA
question={
"I'm extremely confused about the game and I'm not sure what I'm doing."
}
answer={`Read the <a href="/#/guide">guide</a>. Keep in mind though that this is only my interpretation of the game and what I pieced together while developing it, it could be wrong.`}
answer={`The game is meant to be confusing, if you feel like you can't enjoy it the way it is, check out the <a href="/#/guide">guide</a>. Keep in mind though that this is only my interpretation of the game and what I pieced together while developing it, it could be wrong.`}
/>
<QA
question={"Source code?"}
answer={`<a href="https://github.com/ad044/lainTSX">On my github.</a>`}
answer={`<a href="https://github.com/ad044/lainTSX">On my github</a>.`}
/>
<QA
question={"I found an issue/have a suggestion/etc."}
@ -74,7 +70,7 @@ const MainPage = () => {
<Credit name={"Popcorn"} credit={"Programming help."} />
<Credit
name={"lelenium"}
credit={"Helped with literally everything."}
credit={"Managing subtitles/translation, sprites."}
/>
<Credit name={"BimBuns"} credit={"Fonts, help with Japanese."} />
<Credit name={"Phenomenal"} credit={"Help with 3D stuff, fonts."} />
@ -109,6 +105,12 @@ const MainPage = () => {
}
credit={"Subtitle timing team."}
/>{" "}
<Credit
name={
"Cyle, Chair Broken, aeon, Mainu, karuhaku, pb29"
}
credit={"Korean translation."}
/>{" "}
<Credit
name={"psx.lain.pl team"}
credit={"Providing the base translation."}

View file

@ -19,19 +19,14 @@ const Notes = () => {
</td>
<td>
<p>
The game performs best on chromium-based browsers - Chromium,
Chrome, Edge, Brave, Opera, Iridium, Vivaldi, etc. It's highly
recommended that you use one of those for an optimal experience.
This is especially true if you're using a bad setup, and even
more true if you're using Linux on a bad setup, since Firefox's
WebGL implementation on it has had issues for a while now.
Your setup must support WebGL2 in order to play this game. The game still runs on a setup with WebGL1, but some textures will look extremely low-quality. You can check this directly by going to{" "}
<a href={"https://get.webgl.org/webgl2/"} className="notes-a">
this website
</a>.
If it's not supported, this is most likely due to your browser. Try another one, the game performs best on chromium-based browsers - Chromium, Chrome, Edge, Brave, Opera, Iridium, etc. It's highly recommended that you use one of those for an optimal experience. This is especially true if you're using a bad setup, Linux or Firefox.
<br />
<br />
If it's your first time playing the game, the first time loading
it might take a while depending on the factors mentioned above.
If you're seeing a black screen for a bit, just wait it out.
Subsequent website visits will be much faster once the browser
caches all the assets.
If it's your first time playing the game, loading it might take a while. If you're seeing a black screen for a bit, just wait it out. Subsequent website visits will be much faster once the browser caches all the assets. Be aware that gameplay already starts at the "Authorize User/Load data" screen, it's not a loading screen.
</p>
</td>
</tr>
@ -41,37 +36,9 @@ const Notes = () => {
</td>
<td>
<p>
Browsers require user permission to autoplay audio. If you're
not hearing any sound effects, just click somewhere around the
page.
Browsers require user permission to autoplay audio. If you're not hearing any sound effects, just click somewhere around the page.
<br /> <br />
We've also had an issue where the player left the game idle for
30~ mins, and the browser's autoplay permissions reset. Again,
if this happens to you, just click around the page and it'll get
fixed.
</p>
</td>
</tr>
<tr>
<td>
<p>WebGL2</p>
</td>
<td>
<p>
Your setup must support WebGL2 in order to play this game. You
can check this directly by going to{" "}
<a href={"https://get.webgl.org/webgl2/"} className="notes-a">
this website
</a>
. If it's not supported, this is most likely due to your
browser. Try another one, preferably chromium/firefox-based,
keeping in mind the notes written inside Performance. This could
also be caused by your drivers being outdated. <br />
<br />
The game still runs on a setup with WebGL1, but some textures
will look extremely low-quality. This is because WebGL1 can't
generate mipmaps with non-POT (power of two) textures, so it has
to downscale each texture to be POT.
We've also had an issue where the player left the game idle for 30~ mins, and the browser's autoplay permissions reset. Again, if this happens to you, just click around the page and it'll get fixed.
</p>
</td>
</tr>
@ -80,132 +47,115 @@ const Notes = () => {
<p>Browser Settings</p>
</td>
<td>
<span className="text-center">Firefox</span>
<span className="text-center">Firefox specific settings</span>
<p className="browser-notes">
privacy.resistFingerprinting should be set to false (it should
be by default). Otherwise, it limits the maximum WebGL texture
size to 2048, resulting in poor sprite quality.
privacy.resistFingerprinting should be set to false (normally is by default). Otherwise, it limits the maximum WebGL texture size to 2048, resulting in poor sprite quality.
<br />
<br />
Picture-In-Picture functionality should not be used (you most
likely have it disabled already). Just having it enabled won't
break anything, but actually using it might lead to some funny
visual bugs with media files.
Picture-In-Picture functionality should not be used (you most likely have it disabled already). Just having it enabled won't break anything, but actually using it might lead to some funny visual bugs with media files.
</p>
</td>
</tr>
<tr>
<td>
<p>Changing Language</p>
</td>
<td>
<p>
To change the language of subtitles, go to{" "}
<Link to={"/options"} className="notes-a">
options
</Link>.
</p>
</td>
</tr>
<tr>
<td>
<p>Keyboard Controls</p>
<p>Keybinds</p>
</td>
<td>
<table className="control-table">
<tbody>
<tr>
<td>ArrowDown</td>
<td></td>
<td>&darr;</td>
<td>Go down</td>
</tr>
<tr>
<td>ArrowLeft</td>
<td></td>
<td>&larr;</td>
<td>Go left</td>
</tr>
<tr>
<td>ArrowUp</td>
<td></td>
<td>&uarr;</td>
<td>Go up</td>
</tr>
<tr>
<td>ArrowRight</td>
<td></td>
<td>&rarr;</td>
<td>Go right</td>
</tr>
<tr>
<td>x</td>
<td></td>
<td>Confirm</td>
</tr>
<tr>
<td>z</td>
<td></td>
<td>Back</td>
</tr>
<tr>
<td>s</td>
<td></td>
<td>Display node information</td>
</tr>
<tr>
<td>d</td>
<td></td>
<td>Menu</td>
</tr>
<tr>
<td>r</td>
<td>R1</td>
<td>Rotate right</td>
</tr>
<tr>
<td>t</td>
<td>R2</td>
<td>Look Up/Down</td>
</tr>
<tr>
<td>w</td>
<td>L1</td>
<td>Rotate left</td>
</tr>
<tr>
<td>e</td>
<td>L2</td>
<td>Fast jump to level</td>
</tr>
<tr>
<td>v</td>
<td>START</td>
<td>Start/Proceed</td>
</tr>
<tr>
<td>c</td>
<td>SELECT</td>
<td>Menu</td>
</tr>
<tr>
<td>k</td>
<td>Upscale Game Window</td>
<td></td>
<td>Upscale game window</td>
</tr>
<tr>
<td>j</td>
<td>Downscale Game Window</td>
<td></td>
<td>Downscale game window</td>
</tr>
</tbody>
</table>
<br />
<span className="text-center">
If you'd like to change the keybindings, go{" "}
<Link to={"/options"} className="notes-a">
here
</Link>
.
</span>
</td>
</tr>
<tr>
<td>
<p>Saving Progress</p>
<p>Options</p>
</td>
<td>
<p>
There is no auto-save feature just like the original game, so
progress must be saved manually. This can be done by navigating
to "Save" inside the pause menu in-game, which can be accessed
by pressing (d key on keyboard).
<br />
The state is stored in a minimized JSON format as a string
inside localStorage with the key "lainSaveState".
You can change the language of the subtitles, rebind the keys, and export/import the save file over at the <Link to={"/options"} className="notes-a">options</Link> page.
<br/><br/>
There is no auto-save feature just like the original game, so progress must be saved manually. This can be done by navigating to "Save" inside the pause menu in-game, which can be accessed by pressing (d key on keyboard).
</p>
</td>
</tr>

View file

@ -38,22 +38,15 @@
margin: 0 auto;
border: 1px solid white;
padding: 1em;
}
.control-table tr td {
text-align: left;
}
.control-table tr td:first-child {
width: 50%;
text-align: center;
vertical-align: middle;
}
.control-table tr td:nth-child(3) {
text-align: right;
}
.control-table tr td:nth-child(2) {
padding-left: 1em;
text-align: center;
vertical-align: middle;
}
.notes-a {