+++ /dev/null
-const canvas_width = 600;
-const canvas_height = 400;
-
-let context;
-
-let events = new Map();
-
-let camera = { x: 0, y: 0 };
-let images = new Map();
-let entities = [];
-let state;
-
-let socket;
-let socket_state;
-
-let player_id;
-let player;
-
-let requests_funcs = new Map();
-
-const image_load = (path) => {
- let image = new Image();
- image.src = path;
-
- images.set(path, image);
-};
-
-const entity_play_anim = (entity, anim) => {
- entity.anim = anim;
- entity.anim_frame = 0;
- entity.anim_counter = 0;
-};
-
-const scene_clear = () => {
- entities = [];
-};
-
-const request = (type, content, func) => {
- if (socket_state !== "connected") {
- return;
- }
-
- let id = Math.floor(Math.random() * 1000000000);
-
- while (requests_funcs.has(id)) {
- id = Math.floor(Math.random() * 1000000000);
- }
-
- requests_funcs.set(id, func);
-
- socket.send(`${id} |${type}| ${content}`);
-};
-
-const handle_message = (event) => {
- let data = event.data;
-
- let id_raw = data.split(' ')[0];
- let id = parseInt(id_raw, 10);
-
- let content = data.substring(id_raw.length + 1);
-
- let func = requests_funcs.get(id);
-
- if (func !== null) {
- func(content);
- }
-
- requests_funcs.delete(id);
-};
-
-const init_game = () => {
- scene_clear();
- state = "game";
-};
-
-const init_error = () => {
- scene_clear();
-
- state = "error";
-
- let server_down = {
- x: 0,
- y: 0,
- width: 26 * 3,
- height: 49 * 3,
- anchor: "center",
- sheet_rect: { x: 0, y: 0, width: 26, height: 49 },
- image: "server-down.png",
- shadow: false,
- };
-
- entities.push(server_down);
-};
-
-const socket_connect = () => {
- socket = new WebSocket("wss://jxnshi.xyz/cattoland-ws/");
- socket_state = "connecting";
-
- socket.onerror = (event) => {
- socket_state = "error";
- init_error();
- };
-
- socket.onopen = (event) => {
- socket_state = "connected";
-
- request("Gimme catto pleaz", "", (content) => {
- player_id = parseInt(content, 10);
- });
-
- init_game();
- };
-
- socket.onmessage = handle_message;
-};
-
-const loop = (delta) => {
- let events_obj = Object.fromEntries(events);
-
- request("Take me events", JSON.stringify(events_obj), null);
-
- { // Update.
- if (state === "error") {
- if (socket_state === "error") {
- socket_connect();
- }
- } else if (state === "game") {
- request("Update plz", "", (content) => {
- entities = JSON.parse(content);
- })
- }
- }
-
- { // Render.
- let shadow_image = images.get("shadow.png");
-
- context.fillStyle = "#FFFFFF";
- context.fillRect(0, 0, 600, 400);
-
- for (let entity of entities) {
- if (entity.image === undefined) {
- continue;
- }
-
- // Draw shadow.
- if (entity.shadow) {
- let width = 16 * 3;
- let height = 3 * 3;
-
- let anchor_x = width / 2;
- let anchor_y = height - 3;
-
- let x = entity.x + canvas_width / 2 + camera.x - anchor_x;
- let y = entity.y + canvas_height / 2 + camera.y - anchor_y;
-
- context.drawImage(
- shadow_image,
- 0, 0, 16, 3,
- x, y, width, height,
- );
- }
-
- { // Draw entity.
- let anchor_x;
- let anchor_y;
-
- if (entity.anchor === "bottom") {
- anchor_x = entity.width / 2;
- anchor_y = entity.height;
- } else if (entity.anchor === "center") {
- anchor_x = entity.width / 2;
- anchor_y = entity.height / 2;
- }
-
- let x = entity.x + canvas_width / 2 + camera.x - anchor_x;
- let y = entity.y + canvas_height / 2 + camera.y - anchor_y;
-
- let image = images.get(entity.image);
-
- context.drawImage(
- image,
- entity.sheet_rect.x, entity.sheet_rect.y, entity.sheet_rect.width, entity.sheet_rect.height,
- x, y, entity.width, entity.height,
- );
- }
- }
- }
-
- // Update events.
- for (let [event, state] of events) {
- if (state === "pressed") {
- events.set(event, "down");
- }
-
- if (state === "released") {
- events.set(event, undefined);
- }
- }
-
- setTimeout(() => {
- window.requestAnimationFrame(loop);
- }, 1000 / 60);
-};
-
-const main = () => {
- image_load("catto.png");
- image_load("server-down.png");
- image_load("shadow.png");
-
- socket_connect();
-
- let canvas = document.createElement("canvas")
-
- { // Add canvas to DOM.
- canvas.width = canvas_width;
- canvas.height = canvas_height;
-
- let script = document.getElementsByTagName("script")[0];
- script.insertAdjacentElement("afterend", canvas);
- }
-
- context = canvas.getContext("2d");
-
- context.webkitImageSmoothingEnabled = false;
- context.mozImageSmoothingEnabled = false;
- context.imageSmoothingEnabled = false;
-
- window.requestAnimationFrame(loop);
-};
-
-document.onkeydown = (event) => {
- let old_event = events.get(event.code);
-
- if (old_event === "pressed" || old_event === "down") {
- return;
- }
-
- events.set(event.code, "pressed");
-};
-
-document.onkeyup = (event) => {
- events.set(event.code, "released");
-};
-
-window.onload = main;