<!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 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", "starfield"];
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 = "";
}
document.getElementById("canvas").style.backgroundImage = "url(" + get_texture("starfield") + ")";
// 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;
document.getElementById("canvas").width = window.innerWidth;
document.getElementById("canvas").height = window.innerHeight;
try {
render_frame(delta);
} catch (e) {
console.error("error in renderFrame: "+e);
return;
}
start = time;
//let earth_img = new Image();
//earth_img.src = get_texture("earth");
//document.getElementById("canvas").getContext("2d").drawImage(earth_img, 0, 0, 400, 400);
let canvas = document.getElementById("canvas");
let context = document.getElementById("canvas").getContext("2d");
//context.setTransform(1, 0, 0, 1, 0, 0);
//context.clearRect(0, 0, canvas.width, canvas.height);
//context.drawImage(document.getElementById("tex-earth"), -1000, -1000, 2000, 2000);
requestAnimationFrame(animateFrame);
}
requestAnimationFrame(animateFrame);
});
})
</script>
</body>
</html>