Add help page

webui/src/help/Help.css

@@ -0,0 +1,36 @@
+body {
+    background-color: #616161;
+}
+
+#home {
+  width: 90%;
+  margin: 50px auto;
+  background-color: #43A047;
+  border-radius: 10px;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  font-family: "Poppins", sans-serif;
+  padding: 20px 10px;
+}
+
+#logout {
+    border: none;
+    text-align: center;
+    text-decoration: underline;
+    display: inline-block;
+    font-size: 16px;
+    transition-duration: 0.4s;
+    float: right;
+    background-color: yellow;
+    border-radius: 30px;
+    padding: 5px 20px;
+    cursor: pointer;
+}
+
+#logout:hover {
+    background-color: red;
+}
+
+#error p {
+  color: orange;
+  grid-template-columns: auto auto auto;
+}

webui/src/help/Help.jsx

@@ -0,0 +1,82 @@
+import { useState, useParams, useEffect } from 'react'
+import './Help.css'
+import Request from '../Request.jsx'
+
+function Help() {
+    const [downloadUrl, setDownloadUrl] = useState(<div>Contact your server admin, asking for a patched apk. Examples can be found <a href="https://ethanthesleepy.one/public/lovelive/sif2/">here</a>.</div>);
+    const [downloadUrliOSGL, setDownloadUrliOSGL] = useState("https://ethanthesleepy.one/public/lovelive/sif2/sif2-gl.ipa");
+    const [downloadUrliOSJP, setDownloadUrliOSJP] = useState("https://ethanthesleepy.one/public/lovelive/sif2/sif2-jp.ipa");
+
+    const [assetUrl, setAssetUrl] = useState("http://sif2.sif.moe");
+    let init = false;
+    
+    useEffect(() => {
+        if (init) return;
+        init = true;
+        (async () => {
+            let resp = await Request("/api/webui/serverInfo");
+            if (resp.result !== "OK") {
+                return;
+            }
+            if (!resp.data.links) return;
+            if (resp.data.links.global && resp.data.links.japan) {
+                setDownloadUrl(
+                    <div>Your server admin has a link to download! Download <a href={resp.data.links.japan}>Japan</a> or <a href={resp.data.links.global}>Global</a></div>
+                );
+            } else if (resp.data.links.global) {
+                setDownloadUrl(
+                    <div>Your server admin has a link to download! Download <a href={resp.data.links.global}>Global</a></div>
+                );
+            } else if (resp.data.links.japan) {
+                setDownloadUrl(
+                    <div>Your server admin has a link to download! Download <a href={resp.data.links.japan}>Japan</a></div>
+                );
+            }
+            if (!resp.data.links.ios) return;
+            if (resp.data.links.ios.japan) {
+                setDownloadUrliOSJP(resp.data.links.ios.japan);
+            }
+            if (resp.data.links.ios.global) {
+                setDownloadUrliOSJP(resp.data.links.ios.global);
+            }
+
+        })();
+    });
+  
+    return (
+        <div id="home">
+            <h1>Help/About</h1>
+            <h2>What is "ew"? What is this server for?</h2>
+            <p>"ew" is a private server, written in Rust, for the short lived game "Love Live! School idol festival 2 MIRACLE LIVE!", a Love Live! themed mobile rhythm game.</p>
+
+            <h2>So I got the server running, how do I install the app? (Android)</h2>
+            <p>{downloadUrl}</p>
+
+            <h2>So I got the server running, how do I install the app? (iOS)</h2>
+            <p>Running on iOS is much simpler than Android, thanks to triangle on the discord. You first download an ipa file for <a href={downloadUrliOSGL}>global</a> or <a href={downloadUrliOSJP}>Japan</a>, and use <a href="https://sideloadly.io/">Sideloadly</a> (or your preferred application installer) to install the app. Then open settings, navigate to the app you just installed, and input the server url (Which is likely "{window.location.origin}", though this may not be the case). If you have any errors opening the app, make sure none of the urls in settings end with a slash (/).</p>
+
+            <h2>Help! I'm trying to open the app and it shows as "unavailable" (iOS)</h2>
+            <p>Do not delete it, Just re-sideload the app. This is an Apple "security" feature.</p>
+
+            <h2>How well does this work?</h2>
+            <p>Works well enough. The server itself takes up not even 20mb of storage, and it's written in rust. I personally think it's pretty well written.</p>
+
+            <h2>Could my computer/laptop run a server?</h2>
+            <p>Very very likely. If the platform is <a href="https://doc.rust-lang.org/nightly/rustc/platform-support.html">supported by rust</a>, then the answer is yes! It is recommended to manually compile the project until I get the time to setup GitHub actions. <a href="https://github.com/ethanaobrien/ew">ew github repo</a></p>
+
+            <h2>Is the server down right now? I can't connect</h2>
+            <p>Assuming you have just loaded this page on the server you use, then the answer is no, otherwise please contact your server admin.</p>
+
+            <h2>Do events work?</h2>
+            <p>No, sadly events are the only thing not implemented, and it's not entirely on my road map either. If you want it to happen, feel free to contribute.</p>
+
+            <h2>But then, how do I get event URs?</h2>
+            <p>There are serial codes for several things, one of which includes all the event URs. I don't remember what does what but it is recommended to look at the serial code file to get the latest codes.</p>
+
+            <h2>Why does the game crash when I do x?</h2>
+            <p>This likely means something on the server is broken. If you're self hosting, please open a GitHub issue. Otherwise, contact your server admin and ask them to report the issue.</p>
+        </div>
+    );
+}
+
+export default Help;

webui/src/login/Login.jsx

@@ -41,6 +41,11 @@ function Login() {
         window.location.href = "/import/";
     }
 
+    const help = (e) => {
+        e.preventDefault();
+        window.location.href = "/help/";
+    }
+
     const adminPanel = (e) => {
         e.preventDefault();
         window.location.href = "/admin/";
@@ -57,6 +62,7 @@ function Login() {
                 <input type="submit" value="Submit" onClick={handleSubmit}/>
                 <div id="sub_div">
                     <button onClick={import_user}>Import User</button><br/><br/>
+                    <button onClick={help}>Need help?</button><br/><br/>
                     <button hidden={!["127.0.0.1", "localhost"].includes(window.location.hostname)} onClick={adminPanel}>Admin panel</button>
                     { error[0] ? <p>Error: { error[0] } </p> : <p></p> }
                 </div>

webui/src/main.jsx

@@ -4,6 +4,7 @@ import Login from './login/Login.jsx'
 import Home from './home/Home.jsx'
 import Import from './import/Import.jsx'
 import Admin from './admin/Admin.jsx'
+import Help from './help/Help.jsx'
 
 let Elem;
 switch (window.location.pathname) {
@@ -19,6 +20,9 @@ switch (window.location.pathname) {
     case "/admin/":
       Elem = Admin;
       break;
+    case "/help/":
+      Elem = Help;
+      break;
     default:
         window.location.pathname = "/";
 }