Showing score, map changer (WIP)

public/stages/stage-1.json

@@ -1,5 +1,5 @@
 {
-  "name": "1",
+  "name": 1,
   "map": [
     "X  X  X  X  X  X  X  X  X  X  X  X  X  ",
     "X  Bf X  Bf X  Bf X  Bf X  Bf X  Bf X  ",

public/stages/stage-2.json

@@ -1,5 +1,5 @@
 {
-    "name": "2",
+    "name": 2,
     "map": [
         "X  X  X  Tf X  X  X  Tf X  X  X  X  X  ",
         "X  B3 X  Tf X  X  X  Bf X  Bf X  Bf X  ",

public/stages/stage-3.json

@@ -1,5 +1,5 @@
 {
-    "name": "3",
+    "name": 3,
     "map": [
         "X  X  X  X  BF X  X  X  BF X  X  X  X  ",
         "X  Ff Ff Ff BF X  X  X  X  X  TC TC TC ",

public/stages/stage-4.json

@@ -1,5 +1,5 @@
 {
-    "name": "4",
+    "name": 4,
     "map": [
         "X  Ff Ff X  X  X  X  X  X  X  X  Ff X  ",
         "Ff Ff X  X  Bc Bf Bf Bc Bc X  X  X  Ff ",

src/GameLogic/gameField.js

@@ -11,9 +11,17 @@ import { SoundEnum, SoundManager } from "./soundManager";
 import $ from 'jquery';
 
 export class GameField {
+
+    /**
+     * 
+     * @param {number} width 
+     * @param {number} height 
+     * @param {CanvasRenderingContext2D} ctx 
+     * @param {HTMLCanvasElement} canvas 
+     */
     constructor(width = 512, height = 512, ctx, canvas) {
         this.height = height;
-        this.width = width;
+        this.width = width + 100;
         this.ctx = ctx;
         this.canvas = canvas;
         this.tileset = null;
@@ -79,8 +87,15 @@ export class GameField {
     }
 
     async play(level) {
-        if (!this.tileset || !this.map) {
+        this.ctx.clearRect(0,0, this.width, this.height);
+        if (!this.tileset || !this.map || this.map.mapLevel != level) {
+            $(".loading").show();
+            $(".text-loading").show();
+            $(".start-level-button").hide();
             await this.prepareGame(level);
+            if (this.map == null) {
+                this.prepareGame(1);
+            }
             $(".text-loading").hide();
             $(".start-level-button").show();
 
@@ -100,8 +115,7 @@ export class GameField {
 
     win() {
         
-
-        requestAnimationFrame(() => this.drawFieldRecursive())
+        this.play(this.map.mapLevel + 1);
     }
 
 
@@ -158,6 +172,18 @@ export class GameField {
             el.element.draw(this.ctx, el.x * Constants.TILE_SIZE.getValue(), el.y * Constants.TILE_SIZE.getValue());
         }
 
+        this.drawPanel();
+
+    }
+
+    drawPanel() {
+        this.ctx.fillStyle = "black";
+        this.ctx.fillRect(this.width - 90, 0, 90, 100);
+
+        this.ctx.font = "20px VT323, sans-serif";
+        this.ctx.fillStyle = "white";
+        this.ctx.fillText("Level: " + this.map.mapLevel, this.width - 90, 20);
+        this.ctx.fillText("Tanks: " + this.aiTanks._count, this.width - 90, 50);
     }
 
 }

src/Graphics/Map/map.js

@@ -1,10 +1,11 @@
 export class Map {
-    constructor(width, height, enemiesCount) {
+    constructor(width, height, enemiesCount, level) {
         this.width = width;
         this.height = height;
         this._map = [];
         this._enemiesCount = enemiesCount;
         
+        this.mapLevel = level;
         this._eagle = null;
     }
 

src/Graphics/Map/mapParser.js

@@ -9,9 +9,12 @@ export class MapParser {
     }
 
     async getMap(levelNumber, tileset) {
-        let mapObject = await (await fetch(`./stages/stage-${levelNumber}.json`)).json();
+        let fetchResult = await fetch(`./stages/stage-${levelNumber}.json`);
+        if (!fetchResult.ok)
+            return null;
+        let mapObject = await fetchResult.json();
 
-        var map = new Map(mapObject.size.width, mapObject.size.height, mapObject.bots);
+        var map = new Map(mapObject.size.width, mapObject.size.height, mapObject.bots, mapObject.name);
 
         for (let i = 0; i < mapObject.map.length; i++) {
             let row = mapObject.map[i].match(/.{1,3}/g);