Working on cattoland

diff --git a/public/catto.png b/public/catto.png
deleted file mode 100644 (file)
index 071a356..0000000
Binary files a/public/catto.png and /dev/null differ

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

diff --git a/public/cattoland/cattoland.js b/public/cattoland/cattoland.js
new file mode 100644 (file)
index 0000000..c8cb6a6
--- /dev/null
+++ b/public/cattoland/cattoland.js
@@ -0,0 +1,114 @@
+const canvas_width = 600;
+const canvas_height = 400;
+
+const tile_size = 48;
+
+const camera_init = () => {
+    return {
+        x: 0,
+        y: 0,
+    };
+};
+
+let context;
+
+let camera = camera_init();
+let images = new Map();
+let entities = [];
+
+const image_load = (images, path) => {
+    let image = new Image();
+    image.src = path;
+
+    images.set(path, image);
+};
+
+const entity_init = () => {
+    return {
+        x: 0,
+        y: 0,
+        sheet_x: 0,
+        sheet_y: 0,
+        image: undefined,
+    };
+};
+
+const entity_draw = () => {
+    
+};
+
+const catto_init = () => {
+    let entity = entity_init();
+    entity = images.get("cattoland/catto.png");
+
+    return entity;
+};
+
+const main = () => {
+    image_load(images, "cattoland/catto.png");
+
+    entities.push(catto_init());
+
+    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);
+};
+
+const loop = (delta) => {
+    context.fillStyle = "#FFFFFF";
+    context.fillRect(0, 0, 600, 400);
+
+    for (let entity of entities) {
+        { // Draw shadow.
+            let anchor_x = tile_size / 2;
+            let anchor_y = tile_size - 3;
+
+            let x = entity.x + canvas_width / 2 + camera.x - anchor_x;
+            let y = entity.y + canvas_height / 2 + camera.y - anchor_y;
+
+            let sheet_x = 0 * sheet_tile_size;
+            let sheet_y = 0 * sheet_tile_size;
+
+            context.drawImage(
+                catto_image,
+                sheet_x, sheet_y, sheet_tile_size, sheet_tile_size,
+                x, y, tile_size, tile_size,
+            );
+        }
+
+        { // Draw catto.
+            let anchor_x = tile_size / 2;
+            let anchor_y = tile_size;
+
+            let x = catto.x + canvas_width / 2 + camera.x - anchor_x;
+            let y = catto.y + canvas_height / 2 + camera.y - anchor_y;
+
+            let sheet_x = catto.sheet_x * sheet_tile_size;
+            let sheet_y = catto.sheet_y * sheet_tile_size;
+
+            context.drawImage(
+                catto_image,
+                sheet_x, sheet_y, sheet_tile_size, sheet_tile_size,
+                x, y, tile_size, tile_size,
+            );
+        }
+    }
+
+    window.requestAnimationFrame(loop);  
+};
+
+window.onload = main;

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

diff --git a/src/app/views/cattoland.zig b/src/app/views/cattoland.zig
new file mode 100644 (file)
index 0000000..84c5f44
--- /dev/null
+++ b/src/app/views/cattoland.zig
@@ -0,0 +1,8 @@
+const std = @import("std");
+const jetzig = @import("jetzig");
+
+pub const layout = "main";
+
+pub fn index(request: *jetzig.Request, _: *jetzig.Data) !jetzig.View {
+    return request.render(.ok);
+}

diff --git a/src/app/views/cattoland/index.zmpl b/src/app/views/cattoland/index.zmpl
new file mode 100644 (file)
index 0000000..491064c
--- /dev/null
+++ b/src/app/views/cattoland/index.zmpl
@@ -0,0 +1,4 @@
+<noscript>
+       <p>Pas de JavaScript, pas de cattoland.</p>
+</noscript>
+<script defer src="/cattoland/cattoland.js"></script>

diff --git a/src/app/views/layouts/main.zmpl b/src/app/views/layouts/main.zmpl
index bd28d394b87324cb153beede4ee567288fa2d626..dac9e15f7dd1b564f2011744d64327b2f6ba94e4 100644 (file)
--- a/src/app/views/layouts/main.zmpl
+++ b/src/app/views/layouts/main.zmpl
@@ -14,6 +14,7 @@
                     <h2 id="projects-title">Projets</h2>
                     <ul>
                         <li><a href="/books">livres</a></li>
+                        <li><a href="/cattoland">cattoland</a></li>
                     </ul>
                 </div>
             </div>