MInor updates

package.json

@@ -1,6 +1,5 @@
 {
   "name": "sdf-2d-demo",
-  "version": "0.0.0",
   "description": "Some simple demos to showcase the possibilities of this library.",
   "private": true,
   "main": "index.html",
@@ -45,7 +44,7 @@
     "resolve-url-loader": "^3.1.1",
     "sass": "^1.26.3",
     "sass-loader": "^9.0.3",
-    "sdf-2d": "^0.6.0",
+    "sdf-2d": "^0.6.2",
     "source-map-loader": "^1.1.0",
     "svg-url-loader": "^6.0.0",
     "terser-webpack-plugin": "^2.3.8",

src/index.html

@@ -35,7 +35,7 @@
 
     <a id="info" href="https://github.com/schmelczerandras/sdf-2d" target="_BLANK">
       <p>SDF-2D</p>
-      <img width="64" height="64" src="static/logo-white.svg" alt="logo" />
+      <img width="64" height="64" src="logo-white.svg" alt="logo" />
     </a>
     <code id="overlay"></code>
     <button id="toggle-text">Loading…</button>

src/scenes/blob/blob-scene.ts

@@ -51,11 +51,12 @@ export class BlobScene implements Scene {
   private drawNextFrame(
     renderer: Renderer,
     currentTime: DOMHighResTimeStamp,
-    deltaTime: DOMHighResTimeStamp
+    _: DOMHighResTimeStamp
   ): boolean {
     this.insights = renderer.insights;
 
-    const { width, height } = this.canvas.getBoundingClientRect();
+    const width = renderer.canvasSize.x;
+    const height = renderer.canvasSize.y;
     renderer.setViewArea([0, height], [width, height]);
 
     this.overlay.innerText = prettyPrint(renderer.insights);

src/scenes/metaball/metaball-scene.ts

@@ -9,12 +9,10 @@ import { Metaball, MetaCircle } from './metaball';
 export class MetaballScene implements Scene {
   private circles: Array<Metaball> = [];
 
-  private canvas: HTMLCanvasElement;
   private overlay: HTMLDivElement;
   public insights?: any;
 
   public async run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void> {
-    this.canvas = canvas;
     this.overlay = overlay;
 
     for (let i = 0; i < 16; i++) {
@@ -56,11 +54,13 @@ export class MetaballScene implements Scene {
   private drawNextFrame(
     renderer: Renderer,
     currentTime: DOMHighResTimeStamp,
-    deltaTime: DOMHighResTimeStamp
+    _: DOMHighResTimeStamp
   ): boolean {
     this.insights = renderer.insights;
 
-    const { width, height } = this.canvas.getBoundingClientRect();
+    const width = renderer.canvasSize.x;
+    const height = renderer.canvasSize.y;
+
     const viewAreaWidth = width / Math.max(width, height);
     const viewAreaHeight = height / Math.max(width, height);
     renderer.setViewArea(

src/scenes/rain/rain-scene.ts

@@ -10,12 +10,10 @@ export class RainScene implements Scene {
   private light1: CircleLight = new CircleLight(vec2.create(), rgb255(184, 41, 255), 2);
   private light2: CircleLight = new CircleLight(vec2.create(), rgb255(255, 31, 109), 2);
 
-  private canvas: HTMLCanvasElement;
   private overlay: HTMLDivElement;
   public insights?: any;
 
   public async run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void> {
-    this.canvas = canvas;
     this.overlay = overlay;
     for (let i = 0; i < (canvas.getBoundingClientRect().width / 800) * 20; i++) {
       this.droplets.push(new DropletWrapper());
@@ -45,11 +43,13 @@ export class RainScene implements Scene {
   private drawNextFrame(
     renderer: Renderer,
     currentTime: DOMHighResTimeStamp,
-    deltaTime: DOMHighResTimeStamp
+    _: DOMHighResTimeStamp
   ): boolean {
     this.insights = renderer.insights;
 
-    const { width, height } = this.canvas.getBoundingClientRect();
+    const width = renderer.canvasSize.x;
+    const height = renderer.canvasSize.y;
+
     renderer.setViewArea(vec2.fromValues(0, height), vec2.fromValues(width, height));
     this.overlay.innerText = prettyPrint(renderer.insights);
 

src/scenes/tunnel-scene.ts

@@ -119,7 +119,9 @@ export class TunnelScene implements Scene {
   ): boolean {
     this.insights = renderer.insights;
 
-    const { width, height } = this.canvas.getBoundingClientRect();
+    const width = renderer.canvasSize.x;
+    const height = renderer.canvasSize.y;
+
     this.deltaSinceStart += deltaTime;
     const startX = this.deltaSinceStart / 3;
     const endX = startX + width;

webpack.config.js

@@ -115,7 +115,7 @@ module.exports = {
         use: {
           loader: 'file-loader',
           query: {
-            outputPath: '/static',
+            outputPath: '/',
             name: '[name].[ext]',
           },
         },