~starkingdoms/starkingdoms

ref: 93ae3b08ea2b7927ff7e0e83580bc93c46f0a7e0 starkingdoms/web/play.html -rw-r--r-- 4.4 KiB
93ae3b08 — c0repwn3r rendering work 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
120
121
122
123
124

<!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" style="display: none;">

    </div>
</div>

<canvas style="width: 100%; height: 100%; background-color: forestgreen;" 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,
        send_ping_pong
    } from "./dist/starkingdoms_client.js";

    init().then(() => {
        const urlSearchParams = new URLSearchParams(window.location.search);

        if (!(urlSearchParams.has("server") || urlSearchParams.has("username") || urlSearchParams.has("textures"))) {
            window.location.href = "/index.html";
        }

        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;
            let interval_id2;

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

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

            let start;

            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);
                img_elem.id = "tex-" + texture;

                fieldset_elem.appendChild(legend_elem);
                fieldset_elem.appendChild(img_elem);
                document.getElementById("textures").appendChild(fieldset_elem);
            }
            if (urlSearchParams.has("showTextures")) {
                document.getElementById("textures").style = "";
            }

            // Textures must be fully loaded (above) before rendering can start
            // They are all put on the DOM, in a hidden element, so they arent visible to the user unless showTextures=1
            // but they need to have been loaded for the canvas to render them

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

                try {
                    render_frame(delta);
                } catch (e) {
                    console.error("error in renderFrame: "+e);
                    return;
                }
                start = time;

                document.getElementById("canvas").getContext("2d").drawImage(document.getElementById("tex-earth"), 0, 0, 150 -2025, 2000, 2000);

                requestAnimationFrame(animateFrame);
            }

            requestAnimationFrame(animateFrame);
        });
    })
</script>
</body>
</html>