From c7bd49a978af470e485289504d49ce4f7d035af7 Mon Sep 17 00:00:00 2001
From: Reinder Nijhoff <reinder@infi.nl>
Date: Mon, 5 Aug 2024 16:32:56 +0200
Subject: [PATCH] Fix some typos

---
 src/lib/FastImageSequence.ts | 14 +++++++-------
 src/lib/LogToScreen.ts       | 23 ++++++++++++-----------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/lib/FastImageSequence.ts b/src/lib/FastImageSequence.ts
index beaf5f5..281a8ce 100644
--- a/src/lib/FastImageSequence.ts
+++ b/src/lib/FastImageSequence.ts
@@ -71,12 +71,12 @@ export class FastImageSequence {
   public sources: ImageSource[] = [];
 
   private context: CanvasRenderingContext2D;
-  private tickFuncs: ((dt: number) => void) [] = [];
+  private tickFunctions: ((dt: number) => void) [] = [];
   private startTime: number = -1;
   private animationRequestId: number = 0;
   private container: HTMLElement;
   private resizeObserver: ResizeObserver;
-  private mutationOberver: MutationObserver;
+  private mutationObserver: MutationObserver;
   private clearCanvas: boolean = true;
   private speed: number = 0;
   private prevFrame: number = 0;
@@ -130,13 +130,13 @@ export class FastImageSequence {
     });
     this.resizeObserver.observe(this.canvas);
 
-    this.mutationOberver = new MutationObserver(() => {
+    this.mutationObserver = new MutationObserver(() => {
       if (!this.container.isConnected) {
         console.error('FastImageSequence: container is not connected to the DOM, fast image sequence will be destroyed');
         this.destruct();
       }
     });
-    this.mutationOberver.observe(container, {childList: true});
+    this.mutationObserver.observe(container, {childList: true});
 
     // init all frames
     this.frames = Array.from({length: this.options.frames}, (_, index) => new Frame(index));
@@ -243,7 +243,7 @@ export class FastImageSequence {
    * @param func - The function to be called.
    */
   public tick(func: (dt: number) => void) {
-    this.tickFuncs.push(func);
+    this.tickFunctions.push(func);
   }
 
   /**
@@ -310,7 +310,7 @@ export class FastImageSequence {
     }
 
     this.resizeObserver.disconnect();
-    this.mutationOberver.disconnect();
+    this.mutationObserver.disconnect();
 
     this.container.removeChild(this.canvas);
     if (this.logElement) {
@@ -428,7 +428,7 @@ export class FastImageSequence {
 
     this.process();
 
-    this.tickFuncs.forEach(func => func(dt));
+    this.tickFunctions.forEach(func => func(dt));
 
     this.prevFrame = this.frame;
     this.animationRequestId = requestAnimationFrame(time => this.drawingLoop(time));
diff --git a/src/lib/LogToScreen.ts b/src/lib/LogToScreen.ts
index 6b52548..92832b0 100644
--- a/src/lib/LogToScreen.ts
+++ b/src/lib/LogToScreen.ts
@@ -1,20 +1,21 @@
 export function createLogElement() {
-  const logElement = document.createElement('div');
+  const logElement = document.createElement('pre');
   Object.assign(logElement.style, {
-    position: 'absolute',
-    top: '0',
-    left: '0',
+    position:        'absolute',
+    top:             '0',
+    left:            '0',
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    color: 'white',
-    padding: '8px',
-    fontSize: '12px',
-    zIndex: '1000',
-    lineHeight: '20px'
+    color:           'white',
+    padding:         '8px',
+    fontSize:        '12px',
+    zIndex:          '1000',
+    lineHeight:      '20px',
+    margin:          0,
+    maxWidth:        'calc(100% - 16px)',
   });
-
   return logElement;
 }
 
 export function logToScreen(logElement: HTMLElement, log: string) {
-  logElement.innerHTML = `<pre>${log}</pre>`;
+  logElement.innerText = `${log}`;
 }
\ No newline at end of file