~starkingdoms/starkingdoms

ref: 74985008325607550cf7d30d9c19c6c287c5771a starkingdoms/web/play.html -rw-r--r-- 3.5 KiB
74985008 — ghostlyzsh adding player is pain 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

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

    <body>
        <div class="chatbox">
            <div id="chats">

            </div>
            <input id="chat-value" type="text" placeholder="chat text goes here" />
            <button id="chat-submit">submit</button>
            <p id="status">Loading WASM module...</p>

            <div id="textures">

            </div>
        </div>

        <canvas style="width: 100%; height: 100%" id="canvas"></canvas>

        <script type="module">
            // If you're getting build errors here | you need to run `just build_client_bundle` first, to compile client code
            //                                     v
            import init, { rust_init, send_chat, update_socket, set_status, get_texture, render_frame } from "./dist/starkingdoms_client.js";
            init().then(() => {
                const urlSearchParams = new URLSearchParams(window.location.search);

                rust_init(urlSearchParams.get("server"), urlSearchParams.get("username"), urlSearchParams.get("textures")).then(() => {
                    document.getElementById("chat-submit").addEventListener("click", e => {
                        send_chat(document.getElementById("chat-value").value);
                    });

                    let interval_id;
                    interval_id = setInterval(() => {
                        update_socket().catch((e) => {
                            clearInterval(interval_id);
                            set_status("There was an error. Reload the page to reconnect.")
                            throw e;
                        });
                    }, 5);

                    let start;
                    function animateFrame(time) {
                        if (start === undefined) {
                            start = time;
                        }
                        let delta = time - start;

                        render_frame(delta);
                        start = time;
                        requestAnimationFrame(animateFrame)
                    }

                    requestAnimationFrame(animateFrame);

                    if (urlSearchParams.has("showTextures")) {
                        let textures = ["autoplr_cfg", "autoplr_error", "autoplr_on", "cargo_off", "cargo_on", "earth", "ecothruster_on", "hearty", "hub_off", "hub_on", "landingleg", "landingthruster_off", "landingthruster_on", "powerhub_off", "powerhub_on", "superthruster_off", "superthruster_on", "thruster_off", "thruster_on"];

                        for (let i = 0; i < textures.length; i++) {
                            let texture = textures[i];

                            let fieldset_elem = document.createElement("fieldset");
                            fieldset_elem.style = "width: min-content;";
                            fieldset_elem.classList.add("texturebox")
                            let legend_elem = document.createElement("legend");
                            legend_elem.innerText = texture;

                            let img_elem = document.createElement("img");
                            img_elem.src = get_texture(texture);

                            fieldset_elem.appendChild(legend_elem);
                            fieldset_elem.appendChild(img_elem);
                            document.body.appendChild(fieldset_elem);
                        }
                    }
                });
            })
        </script>
    </body>
</html>