Modernise

src/analytics.ts

@@ -11,10 +11,7 @@ const ANALYTICS_LOGGING = process.env.NODE_ENV !== 'production';
 
 let isInitialized = false;
 
-export const track = (
-  eventName: string,
-  options: PlausibleEventOptions = {}
-) => {
+export const track = (eventName: string, options: PlausibleEventOptions = {}) => {
   try {
     plausibleTrack(eventName, options);
   } catch (error) {

src/helper/circle.ts

@@ -1,7 +1,10 @@
 import { vec2 } from 'gl-matrix';
 
 export class Circle {
-  constructor(public center: vec2, public radius: number) {}
+  constructor(
+    public center: vec2,
+    public radius: number
+  ) {}
 
   public distance(target: vec2): number {
     return vec2.distance(this.center, target) - this.radius;

src/index.ts

@@ -30,7 +30,7 @@ initAnalytics();
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const logo = document.querySelector('#info') as HTMLElement;
 const canvasContainer = document.querySelector('#canvas-container') as HTMLCanvasElement;
-const errorText = document.querySelector('#error-text') as HTMLParamElement;
+const errorText = document.querySelector('#error-text') as HTMLParagraphElement;
 const errorsContainer = document.querySelector('#errors-container') as HTMLDivElement;
 const toggleButton = document.querySelector('#toggle-text') as HTMLElement;
 const minimizeButton = document.querySelector('#minimize') as HTMLElement;

src/scenes/metaball/metaball.ts

@@ -9,7 +9,10 @@ export class Metaball {
 
   private direction = Random.getRandom() > 0.5 ? 1 : -1;
   private speed = Random.getRandomInRange(0.5, 2);
-  constructor(private readonly center: vec2, private readonly size: vec2) {}
+  constructor(
+    private readonly center: vec2,
+    private readonly size: vec2
+  ) {}
 
   public animate(currentTime: DOMHighResTimeStamp, width: number, height: number) {
     vec2.set(

src/styles/index.scss

@@ -1,4 +1,4 @@
-@import './mixins';
+@use './mixins' as *;
 
 $breakpoint: 800px;