canvas rendering restored

client/svelte-client/src/App.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { FieldWrapper } from "wasm-app";
+	import Canvas from "./Canvas.svelte";
 	const field = FieldWrapper.new();
 	console.log({field})
 	export let name: string;
 </script>
 
 <main>
-	<h1>Hello {name}!</h1>
-	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+	<Canvas></Canvas>
 </main>
 
 <style>

client/svelte-client/src/Canvas.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+    import { FieldWrapper } from "wasm-app";
+    import {onMount} from "svelte";
+    const field = FieldWrapper.new();
+    let canvas: any;
+    let ctx: any;
+
+    const GRID_COLOR = "#CCCCCC";
+    const width = field.width();
+    const height = field.height();
+    const pixelRatio = window.devicePixelRatio;
+
+    let debug = false;
+    let fps = 0;
+
+    onMount(() => {
+        ctx = canvas.getContext('2d');
+        requestAnimationFrame(renderLoop);
+    })
+
+    function renderLoop(dt) {
+        tick();
+        requestAnimationFrame(renderLoop);
+    }
+
+    function tick() {
+        field.tick([], 0.01);
+        let objects = JSON.parse(field.objects());
+        render(objects);
+    }
+
+    function render(objects) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        drawObjects(objects);
+    }
+
+    const drawObjects = objects => {
+        objects.forEach(obj => {
+            ctx.beginPath();
+            ctx.strokeStyle = GRID_COLOR;
+
+            const obj_y = height - obj.y;
+            const orientation_y = obj.orientation_y * -1;
+            const vel_y = obj.vel_y * -1;
+
+            // rect
+            if (obj.shape_param_2) {
+                ctx.moveTo(obj.x, obj_y)
+                ctx.arc(obj.x, obj_y, 10, 0, 2 * Math.PI);
+                ctx.rect(obj.x - obj.shape_param_1 / 2, obj_y - obj.shape_param_2 / 2, obj.shape_param_1, obj.shape_param_2);
+            }
+            // circle
+            else {
+                ctx.moveTo(obj.x, obj_y);
+                ctx.arc(obj.x, obj_y, obj.shape_param_1, 0, 2 * Math.PI);
+            }
+            ctx.stroke();
+
+            if (debug) {
+                // velocity
+                drawLine(ctx, obj.x, obj_y, obj.x + obj.vel_x * 20, obj_y + vel_y * 20, 'red')
+                // orientation
+                drawLine(ctx, obj.x, obj_y, obj.x + obj.orientation_x * 20, obj_y + orientation_y * 20, 'blue')
+                ctx.fillText(`[x: ${obj.x}, y: ${obj_y}]`, obj.x + 10, obj_y)
+            }
+        })
+        if (debug) {
+            const fpsPosX = width - 50;
+            const fpsPosY = 20;
+            ctx.rect(fpsPosX, fpsPosY, 100, 20)
+            ctx.fillText(`fps: ${fps}`, fpsPosX, fpsPosY)
+        }
+    }
+
+    function drawLine(ctx, from_x, from_y, to_x, to_y, color) {
+        ctx.beginPath();
+        ctx.moveTo(from_x, from_y);
+        ctx.strokeStyle = color;
+        ctx.lineTo(to_x, to_y);
+        ctx.stroke();
+    }
+</script>
+
+<canvas
+        bind:this={canvas}
+        width={width * pixelRatio}
+        height={height * pixelRatio}
+        style="width: {width}px; height: {height}px;"
+></canvas>
+
+<style>
+
+</style>

client/svelte-client/tsconfig.json

@@ -1,5 +1,5 @@
 {
 		"extends": "@tsconfig/svelte/tsconfig.json",
 		"include": ["src/**/*", "src/node_modules/**/*"],
-		"exclude": ["node_modules/*", "__sapper__/*", "static/*"]
-	}
+		"exclude": ["node_modules/*", "__sapper__/*", "static/*"],
+}