~starkingdoms/starkingdoms

afa769b6c98ccff2f4c19467577fc064dd07f645 — c0repwn3r 2 years ago 088123a
update frontend
4 files changed, 58 insertions(+), 10 deletions(-)

M server/src/main.rs
M web/index.html
A web/static/css/index.css
D web/static/css/stylemain.css
M server/src/main.rs => server/src/main.rs +1 -1
@@ 98,7 98,7 @@ async fn handle_request(mut request: Request<Body>, remote_addr: SocketAddr, mgr
            Ok(Response::builder().status(400).body(Body::from("Connection-Upgrade header missing")).unwrap())
        },
        ("/ping", false) => {
            Ok(Response::builder().status(200).body(Body::from(
            Ok(Response::builder().status(200).header("Access-Control-Allow-Origin", "*").body(Body::from(
                serde_json::to_string(&ServerPingResponse {
                    version: ServerPingResponseVersion {
                        name: env!("STK_VERSION_NAME").to_string(), // Set by build.rs

M web/index.html => web/index.html +41 -9
@@ 3,17 3,49 @@
    <head>
        <meta charset="utf-8" />
        <title>wasm testing</title>
        <link rel="stylesheet" href="/static/css/index.css"/>
    </head>

    <body>
        <form action="/play.html" method="GET">
            <label for="server">Gateway server</label>
            <input type="text" name="server" id="server" value="ws://localhost:3000/ws" required />
            <br>
            <label for="username">Username</label>
            <input type="text" name="username" id="username" required />
            <br>
            <button>Launch!</button>
        </form>
        <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="username">Username</label>
                <br>
                <input class="m-5px" type="text" name="username" id="username" required />
                <br>
                <button class="m-5px w-full">Launch!</button>
            </form>
        </fieldset>

        <script>

            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]);
            }
        </script>
    </body>
</html>
\ No newline at end of file

A web/static/css/index.css => web/static/css/index.css +16 -0
@@ 0,0 1,16 @@
.joingamebox {
    width: min-content;
    padding: 10px;
}

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

.w-full {
    width: 100%;
}

.w-90 {
    width: 90%;
}
\ No newline at end of file

D web/static/css/stylemain.css => web/static/css/stylemain.css +0 -0