update the page

src/dom-components/Keybinding.tsx

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

src/dom-components/MainPage.tsx

@@ -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
+        <h3><b>Please make sure to read the <Link to="/notes">notes</Link> before you
-        start playing.
+        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."}

src/dom-components/Notes.tsx

@@ -19,19 +19,14 @@ const Notes = () => {
             </td>
             <td>
               <p>
-                The game performs best on chromium-based browsers - Chromium,
+                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{" "}
-                Chrome, Edge, Brave, Opera, Iridium, Vivaldi, etc. It's highly
+                <a href={"https://get.webgl.org/webgl2/"} className="notes-a">
-                recommended that you use one of those for an optimal experience.
+                  this website
-                This is especially true if you're using a bad setup, and even
+                </a>.
-                more true if you're using Linux on a bad setup, since Firefox's
+                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.
-                WebGL implementation on it has had issues for a while now.
                 <br />
                 <br />
-                If it's your first time playing the game, the first time loading
+                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.
-                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.
               </p>
             </td>
           </tr>
@@ -41,37 +36,9 @@ const Notes = () => {
             </td>
             <td>
               <p>
-                Browsers require user permission to autoplay audio. If you're
+                Browsers require user permission to autoplay audio. If you're not hearing any sound effects, just click somewhere around the page.
-                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
+                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.
-                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.
               </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
+                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.
-                be 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
+                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.
-                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>
+              <p>Keybinds</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>
             </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
+                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.
-                progress must be saved manually. This can be done by navigating
+                <br/><br/>
-                to "Save" inside the pause menu in-game, which can be accessed
+                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).
-                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".
               </p>
             </td>
           </tr>

src/static/css/notes.css

@@ -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 {