~starkingdoms/starkingdoms

ref: 97966ecd2b2f0a6c9d76b30e070d899dc951d5a0 starkingdoms/client/index.html -rw-r--r-- 3.0 KiB
97966ecd — c0repwn3r beamin and beamout 2 years ago 
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8" />
    <title>StarKingdoms.TK</title>
    <link rel="stylesheet" href="./static/index.css"/>
</head>

<body>
<h1>StarKingdoms</h1>
<fieldset class="joingamebox">
    <legend>Join Game</legend>
    <form action="/play.html" method="GET">
        <label for="server">Choose server</label>
        <select class="joingamecontent" name="server" id="server">
            <!-- Dynamically filled by the JS later in this file -->
        </select>
        <br>
        <label for="textures">Texture quality</label>
        <select class="joingamecontent" name="textures" id="textures">
            <option value="full">Full quality (May impact loading times)</option>
            <option selected value="375">Medium quality (Recommended)</option>
            <option value="125">Low quality</option>
        </select>
        <br>
        <label for="username">Username</label>
        <br>
        <input class="m-5px" type="text" name="username" id="username" required />
        <br>
        <button class="m-5px w-full">Launch!</button>
        <br>
        <p id="loginstatus">You are not logged in.</p>
        <button style="display: none;" id="logout">Log out</button>
        <a href="http://localhost:8080/select-realm" id="login">Click here to log in or change accounts.</a>
    </form>
</fieldset>

<script>
    let api_server = "http://localhost:8080";
    let servers = ["localhost:3000"];

    function server_url_to_ping_url(server) { return "http://" + server + "/ping" }
    function server_url_to_gateway_url(server) { return "ws://" + server + "/ws" }

    function load_server(server) {
        // ping the server to get server information
        fetch(server_url_to_ping_url(server)).then(response => {
            response.json().then(response => {
                let elem = document.createElement("option");
                elem.value = server_url_to_gateway_url(server);
                elem.text = `${response.description} - ${response.version.name} - ${response.players} online`;
                document.getElementById("server").appendChild(elem);
            })
        })
    }

    for (let i = 0; i < servers.length; i++) {
        load_server(servers[i]);
    }

    let query = new URLSearchParams(window.location.search);

    if (query.has("token") && query.has("user")) {
        window.localStorage.setItem("token", query.get("token"));
        window.localStorage.setItem("user", query.get("user"));
    }

    if (window.localStorage.getItem("token") !== null && window.localStorage.getItem("user") !== null) {
        document.getElementById("logout").style.setProperty("display", "block");
        document.getElementById("logout").addEventListener("click", () => {
            window.localStorage.clear();
            window.location.reload();
        })
        document.getElementById("loginstatus").innerText = `Logged in! (you are ${window.localStorage.getItem("user")})`;
    }

    document.getElementById("login").href = `${api_server}/select-realm`;
</script>
</body>
</html>