~starkingdoms/starkingdoms

ref: f73656c66fcec95e0957a7500c291926e0dcab2e starkingdoms/client/index.html -rw-r--r-- 4.4 KiB
f73656c6 — core the server currently does much nothing 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>StarKingdoms</title>
    </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 type="module">
            let api_server = "http://localhost:8080";

            let servers = [];

            function server_url_to_ping_url(server) {
                if(server.endsWith('/')) {
                    return server + "ping"
                } else {
                    return server + "/ping"
                }
            }

            function server_url_to_gateway_url(server) {
                let url = new URL(server);
                if (url.protocol === "https:") {
                    return "wss://" + url.host + "/ws";
                } else {
                    return "ws://" + url.host + "/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);
                    })
                })
            }

            // load servers from the api
            fetch(`${api_server}/server-list`).then(response => {
                response.json().then(response => {
                    servers = response["servers"];

                    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>

    <style>
        .joingamebox {
            width: min-content;
            padding: 10px;
        }

        .m-5px {
            margin: 5px;
        }

        .w-full {
            width: 100%;
        }

    </style>
</html>