fixed issue: images not loading in time when starting the server and …

…rendering on the canvas

src/index.css

@@ -24,18 +24,20 @@
     justify-content: space-between;
     align-items: center;
     font-family: Trattatello, cursive;
-    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
+    font-size: 2.5vh;
+    text-shadow: 0.2em 0.2em 0.5em rgba(0, 0, 0, 0.6);
 }
 
 #key-count {
-    user-select: none;
     position: absolute;
+    user-select: none;
     left: 0;
     right: 0;
     text-align: center;
 }
 
 #time-count {
+    position: absolute;
     user-select: none;
     margin-left: 1%;
     text-align: left;

src/ts/game/game mode/Game0.ts

@@ -57,15 +57,11 @@ export class Game0 {
         const img = new Image(size.width, size.height);
         img.src = `src/img/cat.jpg`;
 
-        const onloadListener = () => {
+        img.onload = () => {
             ctx.drawImage(img, 0, 0, size.width, size.height);
             panelInfo.keyPanel.textContent = isAttackerWin ? 'The attacker wins' : 'The defender wins';
             panelInfo.timePanel.remove();
-
-            img.removeEventListener('load', onloadListener);
         };
-
-        img.addEventListener('load', onloadListener);
     }
     private static createMaze(ctx: CanvasRenderingContext2D, size: Size, backgroundMaterial: number, wallMaterial: number,
                               attacker: TankInfo, defender: TankInfo, panelInfo: PanelInfo, createMaze: CreateMaze,

src/ts/game/processors/ICanvas.ts

@@ -43,7 +43,7 @@ export class Canvas implements ICanvas {
         for (let i = this._sprites.length; i <= zIndex; i++)
             this._sprites.push(new Map<number, ISprite>());
 
-        this._sprites[zIndex].set(sprite.id, sprite);
+        sprite.sprite.onload = () => { this._sprites[zIndex].set(sprite.id, sprite) };
     }
     public remove(sprite: ISprite) {
         this.removeById(sprite);