Working on cattoland

diff --git a/public/cattoland/cattoland.js b/public/cattoland/cattoland.js
index 56c7bf09379918ee3d06b42d89156b6aba187153..a8af32092de2db39ce04ba60b17308c820197427 100644 (file)
--- a/public/cattoland/cattoland.js
+++ b/public/cattoland/cattoland.js
@@ -38,6 +38,10 @@ let anims = {
 let camera = camera_init();
 let images = new Map();
 let entities = [];
+let state;
+
+let socket;
+let socket_state;
 
 let player;
 
@@ -52,19 +56,21 @@ const image_load = (images, path) => {
     images.set(path, image);
 };
 
-const entity_init = (x, y, width, height, sheet_rect, image) => {
+const entity_init = () => {
     return {
-        x: x,
-        y: y,
-        width: width,
-        height: height,
-        sheet_rect: sheet_rect,
-        image: image,
+        x: 0,
+        y: 0,
+        width: 16 * 3,
+        height: 16 * 3,
+        anchor: "bottom",
+        sheet_rect: { x: 0, y: 0, width: 16, height: 16 },
+        image: undefined,
         speed: 3,
-        anim: "idle_right",
+        anim: undefined,
         anim_frame_size: 16,
         anim_frame: 0,
         anim_counter: 0,
+        shadow: true,
     };
 };
 
@@ -98,93 +104,129 @@ const entity_update_anim = (entity) => {
 };
 
 const catto_init = () => {
-    let image = images.get("cattoland/catto.png");
-    let entity = entity_init(0, 0, 48, 48, { x: 0, y: 0, width: 16, height: 16 }, image);
+    let entity = entity_init();
+    entity.sheet_rect = { x: 0, y: 0, width: 16, height: 16 };
+    entity.anim = "idle_right";
+    entity.image = "cattoland/catto.png";
 
     return entity;
 };
 
-const vec_length = (x, y) => {
-    return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+const scene_clear = () => {
+    entities = [];
 };
 
-const main = () => {
-    image_load(images, "cattoland/catto.png");
-    image_load(images, "cattoland/shadow.png");
+const request = (content) => {
+    let id = Math.floor(Math.random() * 1000000000);    
+    socket.send(`${id} ${content}`);
+};
 
-    player = catto_init();
-    entities.push(player);
+const socket_connect = () => {
+    socket = new WebSocket("ws://localhost:3000");
+    socket_state = "connecting";
 
-    let canvas = document.createElement("canvas")
+    socket.onerror = (event) => {
+        socket_state = "error";
+        init_error();
+    };
 
-    { // Add canvas to DOM.
-        canvas.width = canvas_width;
-        canvas.height = canvas_height;
+    socket.onopen = (event) => {
+        socket_state = "connected";
+        request("Gimme catto pleaz.");
+        init_game();
+    };
 
-        let script = document.getElementsByTagName("script")[0];
-        script.insertAdjacentElement("afterend", canvas);
-    }
+    socket.onmessage = (event) => {
+        console.log(event.data);
+    };
+};
 
-    context = canvas.getContext("2d");
+const init_game = () => {
+    scene_clear();
 
-    context.webkitImageSmoothingEnabled = false;
-    context.mozImageSmoothingEnabled = false;
-    context.imageSmoothingEnabled = false;
+    state = "game";
 
-    window.requestAnimationFrame(loop);
+    player = catto_init();
+    entities.push(player);
 };
 
-const loop = (delta) => {
-    { // Events.
-        let dir_x = event_strength("KeyD") - event_strength("KeyA");
-        let dir_y = event_strength("KeyS") - event_strength("KeyW");
+const init_error = () => {
+    scene_clear();
 
-        let dir_len = vec_length(dir_x, dir_y);
+    state = "error";
 
-        if (dir_len !== 0) {
-            let unit_x = dir_x / dir_len;
-            let unit_y = dir_y / dir_len;
+    let server_down = entity_init();
+    server_down.width = 26 * 3;
+    server_down.height = 49 * 3;
+    server_down.anchor = "center";
+    server_down.sheet_rect = { x: 0, y: 0, width: 26, height: 49 };
+    server_down.image = "cattoland/server-down.png";
+    server_down.shadow = false;
 
-            player.x += player.speed * unit_x;
-            player.y += player.speed * unit_y;
-        }
+    entities.push(server_down);
+};
 
-        if (dir_x < 0 && player.anim !== "move_left") {
-            entity_play_anim(player, "move_left");
-        }
+const loop = (delta) => {
+    { // Events.
+        if (player !== undefined) {
+            let dir_x = event_strength("KeyD") - event_strength("KeyA");
+            let dir_y = event_strength("KeyS") - event_strength("KeyW");
 
-        if (dir_x > 0 && player.anim !== "move_right") {
-            entity_play_anim(player, "move_right");
-        }
+            let dir_len = Math.sqrt(Math.pow(dir_x, 2) + Math.pow(dir_y, 2));
 
-        if (dir_x === 0 && dir_y === 0) {
-            if (player.anim === "move_right") {
-                entity_play_anim(player, "idle_right");
+            if (dir_len !== 0) {
+                let unit_x = dir_x / dir_len;
+                let unit_y = dir_y / dir_len;
+
+                player.x += player.speed * unit_x;
+                player.y += player.speed * unit_y;
             }
 
-            if (player.anim === "move_left") {
-                entity_play_anim(player, "idle_left");
+            if (dir_x < 0 && player.anim !== "move_left") {
+                entity_play_anim(player, "move_left");
             }
-        } else {
-            if (player.anim === "idle_right") {
+
+            if (dir_x > 0 && player.anim !== "move_right") {
                 entity_play_anim(player, "move_right");
             }
 
-            if (player.anim === "idle_left") {
-                entity_play_anim(player, "move_left");
+            if (dir_x === 0 && dir_y === 0) {
+                if (player.anim === "move_right") {
+                    entity_play_anim(player, "idle_right");
+                }
+
+                if (player.anim === "move_left") {
+                    entity_play_anim(player, "idle_left");
+                }
+            } else {
+                if (player.anim === "idle_right") {
+                    entity_play_anim(player, "move_right");
+                }
+
+                if (player.anim === "idle_left") {
+                    entity_play_anim(player, "move_left");
+                }
             }
-        }
 
-        for (let entity of entities) {
-            if (entity.anim === undefined) {
-                continue;
-            }
+            for (let entity of entities) {
+                if (entity.anim === undefined) {
+                    continue;
+                }
+
+                let anim = anims[entity.anim];
 
-            let anim = anims[entity.anim];
+                entity_update_anim(entity);
 
-            entity_update_anim(entity);
+                entity.sheet_rect.x = anim.from + entity.anim_frame_size * entity.anim_frame;
+            }
+        }
+    }
 
-            entity.sheet_rect.x = anim.from + entity.anim_frame_size * entity.anim_frame;
+    { // Update.
+        if (state === "error") {
+            if (socket_state === "error") {
+                socket_connect();
+            }
         }
     }
 
@@ -195,7 +237,12 @@ const loop = (delta) => {
         context.fillRect(0, 0, 600, 400);
 
         for (let entity of entities) {
-            { // Draw shadow.
+            if (entity.image === undefined) {
+                continue;
+            }
+
+             // Draw shadow.
+            if (entity.shadow) {
                 let width = 16 * 3;
                 let height = 3 * 3;
 
@@ -213,14 +260,24 @@ const loop = (delta) => {
             }
 
             { // Draw catto.
-                let anchor_x = entity.width / 2;
-                let anchor_y = entity.height;
+                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(
-                    entity.image,
+                    image,
                     entity.sheet_rect.x, entity.sheet_rect.y, entity.sheet_rect.width, entity.sheet_rect.height,
                     x, y, entity.width, entity.height,
                 );
@@ -241,6 +298,32 @@ const loop = (delta) => {
     window.requestAnimationFrame(loop);  
 };
 
+const main = () => {
+    image_load(images, "cattoland/catto.png");
+    image_load(images, "cattoland/server-down.png");
+    image_load(images, "cattoland/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);
 

diff --git a/public/cattoland/server-down.png b/public/cattoland/server-down.png
new file mode 100644 (file)
index 0000000..a03a17f
Binary files /dev/null and b/public/cattoland/server-down.png differ