WebViewer + Api

.gitignore

@@ -4,4 +4,5 @@ dist/dist-es6/*
 demo/dist/dist-es6/*
 demo/node_modules/
 *package-lock.json*
-docs
+docs
+dist-es6

demo/dist/metacar.min.js

@@ -95,7 +95,7 @@ window["metacar"] =
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"AssetManger\", function() { return AssetManger; });\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils */ \"./src/utils.ts\");\n/* harmony import */ var _global__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./global */ \"./src/global.ts\");\n/* harmony import */ var _car__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./car */ \"./src/car.ts\");\n/* harmony import */ var _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./basic_motion_engine */ \"./src/basic_motion_engine.ts\");\n/* harmony import */ var _control_motion_engine__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./control_motion_engine */ \"./src/control_motion_engine.ts\");\n/* harmony import */ var _bot_motion_engine__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./bot_motion_engine */ \"./src/bot_motion_engine.ts\");\n\n\n\n\n\n\n;\nvar AssetManger = (function () {\n    function AssetManger(level) {\n        this.assets = [];\n        this.agentMotionEngine = _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__[\"BasicMotionEngine\"];\n        this.agentMotionOptions = {};\n        this.agentLidarInfo = {};\n        this.level = level;\n        this.motion = {\n            \"BasicMotionEngine\": _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__[\"BasicMotionEngine\"],\n            \"ControlMotionEngine\": _control_motion_engine__WEBPACK_IMPORTED_MODULE_4__[\"ControlMotionEngine\"]\n        };\n    }\n    AssetManger.prototype.setAgentLidar = function (options) {\n        this.agentLidarInfo = options;\n    };\n    AssetManger.prototype.setAgentMotion = function (motion, options) {\n        this.agentMotionEngine = motion;\n        this.agentMotionOptions = options;\n    };\n    AssetManger.prototype.createRoadSide = function (info, textures) {\n        var x = (info.mx) * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"];\n        var y = (info.my) * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"];\n        var area = new _global__WEBPACK_IMPORTED_MODULE_1__[\"Graphics\"]();\n        area.beginFill(0xe8e8e8);\n        area.drawRoundedRect(0, 0, _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] + 30, _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] + 30, undefined);\n        area.x = x - 15;\n        area.y = y - 15;\n        area.endFill();\n        this.level.addChild(area);\n    };\n    AssetManger.prototype.createRoad = function (info, textures, arrow) {\n        var _this = this;\n        var road = new _global__WEBPACK_IMPORTED_MODULE_1__[\"Sprite\"](textures[_global__WEBPACK_IMPORTED_MODULE_1__[\"ASSETS\"].ROADS[info.type].image]);\n        road.arrow = arrow;\n        road.x = (info.mx) * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"];\n        road.y = (info.my) * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"];\n        road.obstacle = false;\n        road.mapId = _global__WEBPACK_IMPORTED_MODULE_1__[\"MAP\"].ROAD;\n        road.orientation = _global__WEBPACK_IMPORTED_MODULE_1__[\"ASSETS\"].ROADS[info.type].orientation;\n        road.setCarPosition = function (car, line, force) {\n            if (force === void 0) { force = false; }\n            return _this.setCarOnRoad(road, car, line, force);\n        };\n        road.cars = [];\n        road.mx = info.mx;\n        road.my = info.my;\n        this.level.addRoad(road);\n    };\n    AssetManger.prototype.setCarOnRoad = function (road, car, line, force) {\n        if (force === void 0) { force = false; }\n        if (line == undefined)\n            line = 0;\n        var carById = this.level.findCarById(road.cars[0]);\n        if (!force && road.cars.length >= 1 && carById && carById.core.line == line) {\n            line = line == 0 ? 1 : 0;\n        }\n        car.line = line;\n        car.x = road.x;\n        car.y = road.y;\n        car.x += _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] / 2;\n        car.y += _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] / 2;\n        var x_margin = 0;\n        var y_margin = (_global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] * 1 / 4);\n        road.orientation = (Math.floor(road.orientation / car.rotationStep) * car.rotationStep);\n        var th = -road.orientation * (Math.PI);\n        var x_m = (Math.cos(th) * x_margin) - (y_margin * Math.sin(th));\n        var y_m = (Math.cos(th) * y_margin) + (x_margin * Math.sin(th));\n        var line_side_factor = line == 0 ? 1 : -1;\n        var line_side_factor_t = line == 0 ? 0 : Math.PI;\n        car.x += line_side_factor * Math.round(x_m);\n        car.y += line_side_factor * Math.round(y_m);\n        car.mx = Math.floor(car.x / _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]);\n        car.my = Math.floor(car.y / _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]);\n        car.rotation = (th + line_side_factor_t);\n        car.checkAndsetNewRoad(rLine truncated
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"AssetManger\", function() { return AssetManger; });\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils */ \"./src/utils.ts\");\n/* harmony import */ var _global__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./global */ \"./src/global.ts\");\n/* harmony import */ var _car__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./car */ \"./src/car.ts\");\n/* harmony import */ var _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./basic_motion_engine */ \"./src/basic_motion_engine.ts\");\n/* harmony import */ var _control_motion_engine__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./control_motion_engine */ \"./src/control_motion_engine.ts\");\n/* harmony import */ var _bot_motion_engine__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./bot_motion_engine */ \"./src/bot_motion_engine.ts\");\n\n\n\n\n\n\n;\nvar AssetManger = (function () {\n    function AssetManger(level) {\n        this.assets = [];\n        this.agentMotionEngine = _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__[\"BasicMotionEngine\"];\n        this.agentMotionOptions = {};\n        this.agentLidarInfo = {};\n        this.level = level;\n        this.motion = {\n            \"BasicMotionEngine\": _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__[\"BasicMotionEngine\"],\n            \"ControlMotionEngine\": _control_motion_engine__WEBPACK_IMPORTED_MODULE_4__[\"ControlMotionEngine\"]\n        };\n    }\n    AssetManger.prototype.setAgentLidar = function (options) {\n        this.agentLidarInfo = options;\n    };\n    AssetManger.prototype.setAgentMotion = function (motion, options) {\n        this.agentMotionEngine = motion;\n        this.agentMotionOptions = options;\n    };\n    AssetManger.prototype.createRoadSide = function (info, textures) {\n        var x = (info.mx) * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"];\n        var y = (info.my) * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"];\n        var area = new _global__WEBPACK_IMPORTED_MODULE_1__[\"Graphics\"]();\n        area.beginFill(0xe8e8e8);\n        area.drawRoundedRect(0, 0, _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] + 30, _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] + 30, undefined);\n        area.x = x - 15;\n        area.y = y - 15;\n        area.endFill();\n        this.level.addChild(area);\n    };\n    AssetManger.prototype.createRoad = function (info, textures, arrow) {\n        var _this = this;\n        var road = new _global__WEBPACK_IMPORTED_MODULE_1__[\"Sprite\"](textures[_global__WEBPACK_IMPORTED_MODULE_1__[\"ASSETS\"].ROADS[info.type].image]);\n        road.arrow = arrow;\n        road.x = (info.mx) * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"];\n        road.y = (info.my) * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"];\n        road.obstacle = false;\n        road.mapId = _global__WEBPACK_IMPORTED_MODULE_1__[\"MAP\"].ROAD;\n        road.orientation = _global__WEBPACK_IMPORTED_MODULE_1__[\"ASSETS\"].ROADS[info.type].orientation;\n        road.setCarPosition = function (car, line, force) {\n            if (force === void 0) { force = false; }\n            return _this.setCarOnRoad(road, car, line, force);\n        };\n        road.cars = [];\n        road.mx = info.mx;\n        road.my = info.my;\n        this.level.addRoad(road);\n    };\n    AssetManger.prototype.setCarOnRoad = function (road, car, line, force) {\n        if (force === void 0) { force = false; }\n        if (line == undefined)\n            line = 0;\n        var carById = this.level.findCarById(road.cars[0]);\n        if (!force && road.cars.length >= 1 && carById && carById.core.line == line) {\n            line = line == 0 ? 1 : 0;\n        }\n        car.line = line;\n        car.x = road.x;\n        car.y = road.y;\n        car.x += _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] / 2;\n        car.y += _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] / 2;\n        var x_margin = 0;\n        var y_margin = (_global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] * 1 / 4);\n        road.orientation = (Math.floor(road.orientation / car.rotationStep) * car.rotationStep);\n        var th = -road.orientation * (Math.PI);\n        var x_m = (Math.cos(th) * x_margin) - (y_margin * Math.sin(th));\n        var y_m = (Math.cos(th) * y_margin) + (x_margin * Math.sin(th));\n        var line_side_factor = line == 0 ? 1 : -1;\n        var line_side_factor_t = line == 0 ? 0 : Math.PI;\n        car.x += line_side_factor * Math.round(x_m);\n        car.y += line_side_factor * Math.round(y_m);\n        car.mx = Math.floor(car.x / _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]);\n        car.my = Math.floor(car.y / _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]);\n        car.rotation = (th + line_side_factor_t);\n        car.checkAndsetNewRoad(rLine truncated
 
 /***/ }),
 
@@ -155,7 +155,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Editor\", function() { return Editor; });\n/* harmony import */ var _asset_manager__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./asset_manager */ \"./src/asset_manager.ts\");\n/* harmony import */ var _global__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./global */ \"./src/global.ts\");\n/* harmony import */ var _world__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./world */ \"./src/world.ts\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = Object.setPrototypeOf ||\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\n\n\n\nvar Editor = (function (_super) {\n    __extends(Editor, _super);\n    function Editor(levelContent, canvasId) {\n        var _this = _super.call(this, levelContent, canvasId) || this;\n        _this.selectedItems = null;\n        _this.am = new _asset_manager__WEBPACK_IMPORTED_MODULE_0__[\"AssetManger\"](_this);\n        return _this;\n    }\n    Editor.prototype._setEvents = function () {\n    };\n    Editor.prototype._setup = function (info) {\n        var _this = this;\n        this._setEvents();\n        var textures = _global__WEBPACK_IMPORTED_MODULE_1__[\"Loader\"].resources[_global__WEBPACK_IMPORTED_MODULE_1__[\"JSON_TEXTURES\"]].textures;\n        this.am.createMap(this.map, info, textures, false);\n        this.am.createCars(this.map, info, textures);\n        if (info.agent)\n            this.agent = this.am.createAgent(this.map, info, textures);\n        var that = this;\n        for (var i = 0; i < this.envs.length; i++) {\n            this.envs[i].interactive = true;\n            this.envs[i].on(\"rightclick\", function () { that.removeItem(this); });\n        }\n        for (var i = 0; i < this.am.assets.length; i++) {\n            this.am.assets[i].interactive = true;\n            this.am.assets[i].on(\"rightclick\", function () { that.removeItem(this); });\n        }\n        this.app.ticker.add(function (delta) { return _this.loop(delta); });\n    };\n    Editor.prototype.resize = function (width, height) {\n        this.app.renderer.resize(width * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"], height * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]);\n    };\n    Editor.prototype.getSelectedItems = function () {\n        return this.selectedItems;\n    };\n    Editor.prototype.selectedItem = function (item) {\n        if (this.selectedItems) {\n            this.app.stage.removeChild(this.selectedItems);\n        }\n        var textures = _global__WEBPACK_IMPORTED_MODULE_1__[\"Loader\"].resources[_global__WEBPACK_IMPORTED_MODULE_1__[\"JSON_TEXTURES\"]].textures;\n        this.selectedItems = new _global__WEBPACK_IMPORTED_MODULE_1__[\"Sprite\"](textures[item.image]);\n        this.selectedItems.type = item.type;\n        this.selectedItems.image = item.image;\n        this.selectedItems.data = item.data;\n        this.selectedItems.x = 0;\n        this.selectedItems.y = 0;\n        this.app.stage.addChild(this.selectedItems);\n    };\n    Editor.prototype.removeItem = function (item) {\n        if (item.lidar) {\n            this.app.stage.removeChild(item.lidar);\n        }\n        if (item.mapId == _global__WEBPACK_IMPORTED_MODULE_1__[\"MAP\"].CAR) {\n            if (item.road)\n                item.road.cars.splice(item.road.cars.indexOf(item.carId), 1);\n        }\n        if (item.agent)\n            this.agent = undefined;\n        this.app.stage.removeChild(item);\n        item.isremove = true;\n    };\n    Editor.prototype.exportMap = function (width, height, file_name, download) {\n        return this.am.exportMap(width, height, file_name, download);\n    };\n    Editor.prototype.setCurrentItem = function () {\n        this.am.addAsset(this.selectedItems);\n        var textures = _global__WEBPACK_IMPORTED_MODULE_1__[\"Loader\"].resources[_global__WEBPACK_IMPORTED_MODULE_1__[\"JSON_TEXTURES\"]].textures;\n        var that = this;\n        if (this.selectedItems.type == \"road\") {\n            this.am.createRoad({\n                mx: Math.floor(this.selectedItems.x / _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]),\n                my: Math.floor(this.selectedItems.y / _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]),\n                type: this.selectedItems.data\n            }, textures, this.selectedItems.data);\n            this.envs[this.envs.length - 1].interactive = true;\n            this.envs[this.envs.length - 1].on(\"rightclick\", function () { that.removeItem(this); });\n        }\n        else ifLine truncated
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Editor\", function() { return Editor; });\n/* harmony import */ var _asset_manager__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./asset_manager */ \"./src/asset_manager.ts\");\n/* harmony import */ var _global__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./global */ \"./src/global.ts\");\n/* harmony import */ var _world__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./world */ \"./src/world.ts\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = Object.setPrototypeOf ||\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\n\n\n\nvar Editor = (function (_super) {\n    __extends(Editor, _super);\n    function Editor(levelContent, canvasId) {\n        var _this = _super.call(this, levelContent, canvasId) || this;\n        _this.selectedItems = null;\n        _this.am = new _asset_manager__WEBPACK_IMPORTED_MODULE_0__[\"AssetManger\"](_this);\n        return _this;\n    }\n    Editor.prototype._setEvents = function () {\n    };\n    Editor.prototype._setup = function (info) {\n        var _this = this;\n        this._setEvents();\n        var textures = _global__WEBPACK_IMPORTED_MODULE_1__[\"Loader\"].resources[_global__WEBPACK_IMPORTED_MODULE_1__[\"JSON_TEXTURES\"]].textures;\n        this.am.createMap(this.map, info, textures, false);\n        this.am.createCars(this.map, info, textures);\n        if (info.agent)\n            this.agent = this.am.createAgent(this.map, info, textures, false);\n        var that = this;\n        for (var i = 0; i < this.envs.length; i++) {\n            this.envs[i].interactive = true;\n            this.envs[i].on(\"rightclick\", function () { that.removeItem(this); });\n        }\n        for (var i = 0; i < this.am.assets.length; i++) {\n            this.am.assets[i].interactive = true;\n            this.am.assets[i].on(\"rightclick\", function () { that.removeItem(this); });\n        }\n        this.app.ticker.add(function (delta) { return _this.loop(delta); });\n    };\n    Editor.prototype.resize = function (width, height) {\n        this.app.renderer.resize(width * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"], height * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]);\n    };\n    Editor.prototype.getSelectedItems = function () {\n        return this.selectedItems;\n    };\n    Editor.prototype.selectedItem = function (item) {\n        if (this.selectedItems) {\n            this.app.stage.removeChild(this.selectedItems);\n        }\n        var textures = _global__WEBPACK_IMPORTED_MODULE_1__[\"Loader\"].resources[_global__WEBPACK_IMPORTED_MODULE_1__[\"JSON_TEXTURES\"]].textures;\n        this.selectedItems = new _global__WEBPACK_IMPORTED_MODULE_1__[\"Sprite\"](textures[item.image]);\n        this.selectedItems.type = item.type;\n        this.selectedItems.image = item.image;\n        this.selectedItems.data = item.data;\n        this.selectedItems.x = 0;\n        this.selectedItems.y = 0;\n        this.app.stage.addChild(this.selectedItems);\n    };\n    Editor.prototype.removeItem = function (item) {\n        if (item.lidar) {\n            this.app.stage.removeChild(item.lidar);\n        }\n        if (item.mapId == _global__WEBPACK_IMPORTED_MODULE_1__[\"MAP\"].CAR) {\n            if (item.road)\n                item.road.cars.splice(item.road.cars.indexOf(item.carId), 1);\n        }\n        if (item.agent)\n            this.agent = undefined;\n        this.app.stage.removeChild(item);\n        item.isremove = true;\n    };\n    Editor.prototype.exportMap = function (width, height, file_name, download) {\n        return this.am.exportMap(width, height, file_name, download);\n    };\n    Editor.prototype.setCurrentItem = function () {\n        this.am.addAsset(this.selectedItems);\n        var textures = _global__WEBPACK_IMPORTED_MODULE_1__[\"Loader\"].resources[_global__WEBPACK_IMPORTED_MODULE_1__[\"JSON_TEXTURES\"]].textures;\n        var that = this;\n        if (this.selectedItems.type == \"road\") {\n            this.am.createRoad({\n                mx: Math.floor(this.selectedItems.x / _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]),\n                my: Math.floor(this.selectedItems.y / _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]),\n                type: this.selectedItems.data\n            }, textures, this.selectedItems.data);\n            this.envs[this.envs.length - 1].interactive = true;\n            this.envs[this.envs.length - 1].on(\"rightclick\", function () { that.removeItem(this); });\n        }\n        
Line truncated
 
 /***/ }),
 
@@ -215,7 +215,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Application\", function() { return Application; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Loader\", function() { return Loader; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Resources\", function() { return Resources; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Sprite\", function() { return Sprite; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Graphics\", function() { return Graphics; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Container\", function() { return Container; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"URL\", function() { return URL; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"JSON_TEXTURES\", function() { return JSON_TEXTURES; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"JSON_IMAGE\", function() { return JSON_IMAGE; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"IMAGE_FOLDER\", function() { return IMAGE_FOLDER; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ROADSIZE\", function() { return ROADSIZE; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"CAR_IMG\", function() { return CAR_IMG; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"MAP\", function() { return MAP; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ASSETS\", function() { return ASSETS; });\n/* harmony import */ var pixi_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! pixi.js */ \"pixi.js\");\n/* harmony import */ var pixi_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(pixi_js__WEBPACK_IMPORTED_MODULE_0__);\n\nvar Application = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"Application\"];\nvar Loader = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"loader\"];\nvar Resources = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"loader\"].resources;\nvar Sprite = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"Sprite\"];\nvar Graphics = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"Graphics\"];\nvar Container = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"Container\"];\nvar URL = \"http://localhost:3000/\";\nvar JSON_TEXTURES = URL + \"public/textures/textures.json\";\nvar JSON_IMAGE = URL + \"public/textures/textures.png\";\nvar IMAGE_FOLDER = URL + \"public/images/\";\nvar ROADSIZE = 60;\nvar CAR_IMG = {\n    DEFAULT: \"car.png\",\n    AGENT: \"car_agent.png\"\n};\nvar MAP = {\n    ROAD: -1,\n    DEFAULT: 0,\n    CAR: 1,\n    AGENT: 1,\n};\nvar ASSETS = {\n    ROADS: {\n        \"↕\": {\n            \"image\": \"road_u.png\",\n            \"orientation\": 1.5\n        },\n        \"↔\": {\n            \"image\": \"road_r.png\",\n            \"orientation\": 0.\n        },\n        \"↱\": {\n            \"image\": \"road_rotate_ld.png\",\n            \"orientation\": 1.25\n        },\n        \"↰\": {\n            \"image\": \"road_rotate_ul.png\",\n            \"orientation\": 0.75\n        },\n        \"↲\": {\n            \"image\": \"road_rotate_rl.png\",\n            \"orientation\": 0.25\n        },\n        \"↳\": {\n            \"image\": \"road_rotate_dl.png\",\n            \"orientation\": 1.75\n        },\n        \"↟\": {\n            \"image\": \"road_up.png\",\n            \"orientation\": 1.5\n        },\n        \"↠\": {\n            \"image\": \"road_rp.png\",\n            \"orientation\": 0.\n        },\n        \"↤\": {\n            \"image\": \"road_r2.png\",\n            \"orientation\": 0.\n        },\n        \"↦\": {\n            \"image\": \"road_l2.png\",\n            \"orientation\": 1.\n        },\n        \"↥\": {\n            \"image\": \"road_d2.png\",\n            \"orientation\": 0.5\n        },\n        \"↧\": {\n            \"image\": \"road_u2.png\",\n            \"orientation\": 1.5\n        },\n    },\n    \"house\": {\n        \"image\": \"house.png\"\n    },\n    \"house2\": {\n        \"image\": \"house2.png\"\n    },\n    \"house3\": {\n        \"image\": \"house3.png\"\n    },\n    \"bench\": {\n        \"image\": \"bench.png\"\n    },\n    \"tree\": {\n        \"image\": \"tree.png\"\n    }\n};\n\n\n//# sourceURL=webpack://metacar/./src/global.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Application\", function() { return Application; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Loader\", function() { return Loader; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Resources\", function() { return Resources; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Sprite\", function() { return Sprite; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Graphics\", function() { return Graphics; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Container\", function() { return Container; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"URL\", function() { return URL; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"JSON_TEXTURES\", function() { return JSON_TEXTURES; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"JSON_IMAGE\", function() { return JSON_IMAGE; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"IMAGE_FOLDER\", function() { return IMAGE_FOLDER; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ROADSIZE\", function() { return ROADSIZE; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"CAR_IMG\", function() { return CAR_IMG; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"MAP\", function() { return MAP; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ASSETS\", function() { return ASSETS; });\n/* harmony import */ var pixi_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! pixi.js */ \"pixi.js\");\n/* harmony import */ var pixi_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(pixi_js__WEBPACK_IMPORTED_MODULE_0__);\n\nvar Application = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"Application\"];\nvar Loader = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"loader\"];\nvar Resources = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"loader\"].resources;\nvar Sprite = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"Sprite\"];\nvar Graphics = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"Graphics\"];\nvar Container = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"Container\"];\nvar URL = window.location.href.indexOf(\"localhost\") == -1 ? \"https://metacar-project.com/\" : \"http://localhost:3000/\";\nvar JSON_TEXTURES = URL + \"public/textures/textures.json\";\nvar JSON_IMAGE = URL + \"public/textures/textures.png\";\nvar IMAGE_FOLDER = URL + \"public/images/\";\nvar ROADSIZE = 60;\nvar CAR_IMG = {\n    DEFAULT: \"car.png\",\n    AGENT: \"car_agent.png\"\n};\nvar MAP = {\n    ROAD: -1,\n    DEFAULT: 0,\n    CAR: 1,\n    AGENT: 1,\n};\nvar ASSETS = {\n    ROADS: {\n        \"↕\": {\n            \"image\": \"road_u.png\",\n            \"orientation\": 1.5\n        },\n        \"↔\": {\n            \"image\": \"road_r.png\",\n            \"orientation\": 0.\n        },\n        \"↱\": {\n            \"image\": \"road_rotate_ld.png\",\n            \"orientation\": 1.25\n        },\n        \"↰\": {\n            \"image\": \"road_rotate_ul.png\",\n            \"orientation\": 0.75\n        },\n        \"↲\": {\n            \"image\": \"road_rotate_rl.png\",\n            \"orientation\": 0.25\n        },\n        \"↳\": {\n            \"image\": \"road_rotate_dl.png\",\n            \"orientation\": 1.75\n        },\n        \"↟\": {\n            \"image\": \"road_up.png\",\n            \"orientation\": 1.5\n        },\n        \"↠\": {\n            \"image\": \"road_rp.png\",\n            \"orientation\": 0.\n        },\n        \"↤\": {\n            \"image\": \"road_r2.png\",\n            \"orientation\": 0.\n        },\n        \"↦\": {\n            \"image\": \"road_l2.png\",\n            \"orientation\": 1.\n        },\n        \"↥\": {\n            \"image\": \"road_d2.png\",\n            \"orientation\": 0.5\n        },\n        \"↧\": {\n            \"image\": \"road_u2.png\",\n            \"orientation\": 1.5\n        },\n    },\n    \"house\": {\n        \"image\": \"house.png\"\n    },\n    \"house2\": {\n        \"image\": \"house2.png\"\n    },\n    \"house3\": {\n        \"image\": \"house3.png\"\n    },\n    \"bench\": {\n        \"image\": \"bench.png\"\n    },\n    \"tree\": {\n        \"image\": \"tree.png\"\n    }\n};\n\n\n//# sourceURL=webpack://metacar/./src/global.ts?");
 
 /***/ }),
 
@@ -239,7 +239,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _met
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Level\", function() { return Level; });\n/* harmony import */ var _global__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./global */ \"./src/global.ts\");\n/* harmony import */ var _asset_manager__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./asset_manager */ \"./src/asset_manager.ts\");\n/* harmony import */ var _world__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./world */ \"./src/world.ts\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = Object.setPrototypeOf ||\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\n\n\n\nvar Level = (function (_super) {\n    __extends(Level, _super);\n    function Level(levelContent, canvasId) {\n        var _this = _super.call(this, levelContent, canvasId) || this;\n        _this.isCarsMoving = true;\n        _this.map = _this.info.map;\n        _this.am = new _asset_manager__WEBPACK_IMPORTED_MODULE_1__[\"AssetManger\"](_this);\n        return _this;\n    }\n    Level.prototype.carsMoving = function (moving) {\n        this.isCarsMoving = moving;\n    };\n    Level.prototype.setAgentMotion = function (motion, options) {\n        this.am.setAgentMotion(motion, options);\n    };\n    Level.prototype.setAgentLidar = function (options) {\n        this.am.setAgentLidar(options);\n    };\n    Level.prototype._setup = function (info) {\n        var _this = this;\n        var textures = _global__WEBPACK_IMPORTED_MODULE_0__[\"Loader\"].resources[_global__WEBPACK_IMPORTED_MODULE_0__[\"JSON_TEXTURES\"]].textures;\n        this.am.createMap(this.map, info, textures);\n        this.am.createCars(this.map, info, textures);\n        if (info.agent)\n            this.agent = this.am.createAgent(this.map, info, textures);\n        this.app.ticker.add(function (delta) { return _this.loop(delta); });\n    };\n    Level.prototype.reset = function () {\n        this.agent.reset();\n        for (var c = 0; c < this.cars.length; c++) {\n            this.cars[c].reset();\n        }\n    };\n    Level.prototype.setReward = function (agent_col, on_road, action) {\n        var reward = -0.1;\n        if (action == 0 || this.agent.core.v == 1)\n            reward += 0.5;\n        if (agent_col.length > 0) {\n            console.log(\"collision!\");\n            reward = -10;\n        }\n        else if (!on_road) {\n            console.log(\"out\");\n            reward = -10;\n        }\n        return reward;\n    };\n    Level.prototype.step = function (delta, action) {\n        if (action === void 0) { action = null; }\n        for (var c = 0; c < this.cars.length; c++) {\n            if (this.cars[c].lidar && !this.cars[c].core.agent)\n                this.cars[c].step(delta);\n        }\n        if (this.agent) {\n            var _a = this.agent.step(delta, action), agentCollisions = _a.agentCollisions, onRoad = _a.onRoad;\n            var reward = this.setReward(agentCollisions, onRoad, action);\n            return reward;\n        }\n        return 0;\n    };\n    Level.prototype.stopRender = function () {\n        this.app.ticker.stop();\n    };\n    return Level;\n}(_world__WEBPACK_IMPORTED_MODULE_2__[\"World\"]));\n\n\n\n//# sourceURL=webpack://metacar/./src/level.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Level\", function() { return Level; });\n/* harmony import */ var _global__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./global */ \"./src/global.ts\");\n/* harmony import */ var _asset_manager__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./asset_manager */ \"./src/asset_manager.ts\");\n/* harmony import */ var _world__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./world */ \"./src/world.ts\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = Object.setPrototypeOf ||\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\n\n\n\nvar Level = (function (_super) {\n    __extends(Level, _super);\n    function Level(levelContent, canvasId) {\n        var _this = _super.call(this, levelContent, canvasId) || this;\n        _this.isCarsMoving = true;\n        _this.lastReward = 0;\n        _this.map = _this.info.map;\n        _this.am = new _asset_manager__WEBPACK_IMPORTED_MODULE_1__[\"AssetManger\"](_this);\n        return _this;\n    }\n    Level.prototype.carsMoving = function (moving) {\n        this.isCarsMoving = moving;\n    };\n    Level.prototype.setAgentMotion = function (motion, options) {\n        this.am.setAgentMotion(motion, options);\n    };\n    Level.prototype.setAgentLidar = function (options) {\n        this.am.setAgentLidar(options);\n    };\n    Level.prototype._setup = function (info) {\n        var _this = this;\n        var textures = _global__WEBPACK_IMPORTED_MODULE_0__[\"Loader\"].resources[_global__WEBPACK_IMPORTED_MODULE_0__[\"JSON_TEXTURES\"]].textures;\n        this.am.createMap(this.map, info, textures);\n        this.am.createCars(this.map, info, textures);\n        if (info.agent)\n            this.agent = this.am.createAgent(this.map, info, textures);\n        this.app.ticker.add(function (delta) { return _this.loop(delta); });\n    };\n    Level.prototype.reset = function () {\n        this.agent.reset();\n        for (var c = 0; c < this.cars.length; c++) {\n            this.cars[c].reset();\n        }\n    };\n    Level.prototype.setReward = function (agent_col, on_road, action) {\n        var reward = -0.1;\n        if (action == 0 || this.agent.core.v == 1)\n            reward += 0.5;\n        if (agent_col.length > 0) {\n            reward = -10;\n        }\n        else if (!on_road) {\n            reward = -10;\n        }\n        this.lastReward = reward;\n        return reward;\n    };\n    Level.prototype.getLastReward = function () {\n        return this.lastReward;\n    };\n    Level.prototype.step = function (delta, action) {\n        if (action === void 0) { action = null; }\n        for (var c = 0; c < this.cars.length; c++) {\n            if (this.cars[c].lidar && !this.cars[c].core.agent)\n                this.cars[c].step(delta);\n        }\n        if (this.agent) {\n            var _a = this.agent.step(delta, action), agentCollisions = _a.agentCollisions, onRoad = _a.onRoad;\n            var reward = this.setReward(agentCollisions, onRoad, action);\n            return reward;\n        }\n        return 0;\n    };\n    Level.prototype.stopRender = function () {\n        this.app.ticker.stop();\n    };\n    return Level;\n}(_world__WEBPACK_IMPORTED_MODULE_2__[\"World\"]));\n\n\n\n//# sourceURL=webpack://metacar/./src/level.ts?");
 
 /***/ }),
 
@@ -251,7 +251,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"MetaCar\", function() { return MetaCar; });\n/* harmony import */ var _level__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./level */ \"./src/level.ts\");\n/* harmony import */ var _ui_event__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ui_event */ \"./src/ui_event.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/utils.ts\");\n/* harmony import */ var _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./basic_motion_engine */ \"./src/basic_motion_engine.ts\");\n\n\n\n\nvar MetaCar = (function () {\n    function MetaCar(canvasId, levelToLoad) {\n        this.eventList = [\"train\", \"play\", \"stop\", \"reset_env\", \"load\"];\n        this.agentMotionEngine = _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__[\"BasicMotionEngine\"];\n        this.agentMotionOptions = {};\n        this.isCarsMoving = true;\n        if (!canvasId || !levelToLoad) {\n            console.error(\"You must specify the canvasId and the levelToLoad\");\n        }\n        this.canvasId = canvasId;\n        this.levelToLoad = levelToLoad;\n    }\n    MetaCar.prototype.load = function () {\n        var _this = this;\n        return new Promise(function (resolve, reject) {\n            if (typeof _this.levelToLoad == \"string\") {\n                _utils__WEBPACK_IMPORTED_MODULE_2__[\"loadCustomURL\"](_this.levelToLoad, function (content) {\n                    _this.level = new _level__WEBPACK_IMPORTED_MODULE_0__[\"Level\"](content, _this.canvasId);\n                    _this.level.setAgentMotion(_this.agentMotionEngine, _this.agentMotionOptions);\n                    _this.level.setAgentLidar(_this.agentLidarInfo);\n                    _this.level.carsMoving(_this.isCarsMoving);\n                    _this._setEvents();\n                    _this.level.load(function (delta) { return _this._loop(delta); });\n                    resolve();\n                });\n            }\n            else {\n                _this.level = new _level__WEBPACK_IMPORTED_MODULE_0__[\"Level\"](_this.levelToLoad, _this.canvasId);\n                _this.level.setAgentMotion(_this.agentMotionEngine, _this.agentMotionOptions);\n                _this.level.setAgentLidar(_this.agentLidarInfo);\n                _this.level.carsMoving(_this.isCarsMoving);\n                _this._setEvents();\n                _this.level.load(function (delta) { return _this._loop(delta); });\n                resolve();\n            }\n        });\n    };\n    MetaCar.prototype.carsMoving = function (moving) {\n        this.isCarsMoving = moving;\n    };\n    MetaCar.prototype.setAgentLidar = function (options) {\n        this.agentLidarInfo = options;\n    };\n    MetaCar.prototype.setAgentMotion = function (motion, options) {\n        this.agentMotionEngine = motion;\n        this.agentMotionOptions = options;\n    };\n    MetaCar.prototype.addEvent = function (eventName, fc, options) {\n        var index = this.eventList.indexOf(eventName);\n        if (index == -1) {\n            this.event.onCustomEvent(eventName, fc);\n            return;\n        }\n        var event = this.eventList[index];\n        if (event != \"load\") {\n            this.eventCallback[index](fc);\n        }\n        else {\n            this.eventCallback[index](fc, options);\n        }\n    };\n    MetaCar.prototype.render = function (val) {\n        this.level.render(val);\n    };\n    MetaCar.prototype.save = function (content, file_name) {\n        _utils__WEBPACK_IMPORTED_MODULE_2__[\"saveAs\"](content, file_name);\n    };\n    MetaCar.prototype.actionSpace = function () {\n        return this.level.agent.motion.actionSpace();\n    };\n    MetaCar.prototype.getState = function (linear) {\n        if (linear === void 0) { linear = false; }\n        return this.level.agent.getState(linear);\n    };\n    MetaCar.prototype.step = function (action) {\n        return this.level.step(1, action);\n    };\n    MetaCar.prototype.reset = function () {\n        this.level.reset();\n    };\n    MetaCar.prototype.randomRoadPosition = function () {\n        var roads = this.level.getRoads();\n        var keys = Object.keys(roads);\n        keys.sort(function () { return Math.random() - 0.5; });\n        for (var k in keys) {\n            var road = roads[keys[k]];\n            if (road.cars.length == 0) {\n                road.setCarPosition(this.level.agent.core);\n                break;\n            }\n        }\n    };\n    MetaCar.prototype._loop = function (delta) {\n        if (this.event.isPlaying()) {\n            this.event.playCallback();\n        }\n        else {\n            this.level.step(delta);\n        }\n    };\n    MetaCar.prototype._setEvents = function () {\n        var _this = this;\n        this.event = new _ui_event__WEBPACK_IMPORTED_MODULE_1__[\"UIEvent\"Line truncated
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"MetaCar\", function() { return MetaCar; });\n/* harmony import */ var _level__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./level */ \"./src/level.ts\");\n/* harmony import */ var _ui_event__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ui_event */ \"./src/ui_event.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/utils.ts\");\n/* harmony import */ var _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./basic_motion_engine */ \"./src/basic_motion_engine.ts\");\n\n\n\n\nvar MetaCar = (function () {\n    function MetaCar(canvasId, levelToLoad) {\n        this.eventList = [\"train\", \"play\", \"stop\", \"reset_env\", \"load\"];\n        this.agentMotionEngine = _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__[\"BasicMotionEngine\"];\n        this.agentMotionOptions = {};\n        this.isCarsMoving = true;\n        this.loopCallback = undefined;\n        if (!canvasId || !levelToLoad) {\n            console.error(\"You must specify the canvasId and the levelToLoad\");\n        }\n        this.canvasId = canvasId;\n        this.levelToLoad = levelToLoad;\n    }\n    MetaCar.prototype.load = function () {\n        var _this = this;\n        return new Promise(function (resolve, reject) {\n            if (typeof _this.levelToLoad == \"string\") {\n                _utils__WEBPACK_IMPORTED_MODULE_2__[\"loadCustomURL\"](_this.levelToLoad, function (content) {\n                    _this.level = new _level__WEBPACK_IMPORTED_MODULE_0__[\"Level\"](content, _this.canvasId);\n                    _this.level.setAgentMotion(_this.agentMotionEngine, _this.agentMotionOptions);\n                    _this.level.setAgentLidar(_this.agentLidarInfo);\n                    _this.level.carsMoving(_this.isCarsMoving);\n                    _this._setEvents();\n                    _this.level.load(function (delta) { return _this._loop(delta); });\n                    resolve();\n                });\n            }\n            else {\n                _this.level = new _level__WEBPACK_IMPORTED_MODULE_0__[\"Level\"](_this.levelToLoad, _this.canvasId);\n                _this.level.setAgentMotion(_this.agentMotionEngine, _this.agentMotionOptions);\n                _this.level.setAgentLidar(_this.agentLidarInfo);\n                _this.level.carsMoving(_this.isCarsMoving);\n                _this._setEvents();\n                _this.level.load(function (delta) { return _this._loop(delta); });\n                resolve();\n            }\n        });\n    };\n    MetaCar.prototype.carsMoving = function (moving) {\n        this.isCarsMoving = moving;\n    };\n    MetaCar.prototype.getLastReward = function () {\n        return this.level.getLastReward();\n    };\n    MetaCar.prototype.setAgentLidar = function (options) {\n        this.agentLidarInfo = options;\n    };\n    MetaCar.prototype.setAgentMotion = function (motion, options) {\n        this.agentMotionEngine = motion;\n        this.agentMotionOptions = options;\n    };\n    MetaCar.prototype.addEvent = function (eventName, fc, options) {\n        var index = this.eventList.indexOf(eventName);\n        if (index == -1) {\n            this.event.onCustomEvent(eventName, fc);\n            return;\n        }\n        var event = this.eventList[index];\n        if (event != \"load\") {\n            this.eventCallback[index](fc);\n        }\n        else {\n            this.eventCallback[index](fc, options);\n        }\n    };\n    MetaCar.prototype.render = function (val) {\n        this.level.render(val);\n    };\n    MetaCar.prototype.save = function (content, file_name) {\n        _utils__WEBPACK_IMPORTED_MODULE_2__[\"saveAs\"](content, file_name);\n    };\n    MetaCar.prototype.actionSpace = function () {\n        return this.level.agent.motion.actionSpace();\n    };\n    MetaCar.prototype.getState = function (linear) {\n        if (linear === void 0) { linear = false; }\n        return this.level.agent.getState(linear);\n    };\n    MetaCar.prototype.step = function (action) {\n        return this.level.step(1, action);\n    };\n    MetaCar.prototype.reset = function () {\n        this.level.reset();\n    };\n    MetaCar.prototype.randomRoadPosition = function () {\n        var roads = this.level.getRoads();\n        var keys = Object.keys(roads);\n        keys.sort(function () { return Math.random() - 0.5; });\n        for (var k in keys) {\n            var road = roads[keys[k]];\n            if (road.cars.length == 0) {\n                road.setCarPosition(this.level.agent.core);\n                break;\n            }\n        }\n    };\n    MetaCar.prototype.loop = function (fc) {\n        this.loopCallback = fc;\n    };\n    MetaCar.prototype._loop = function (delta) {\n        if (this.event.isPlaying()) {\n            this.event.playCallback();\n   
Line truncated
 
 /***/ }),
 
@@ -299,7 +299,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"loadJSON\", function() { return loadJSON; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"loadEmbeddedURL\", function() { return loadEmbeddedURL; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"loadLocalStorageURL\", function() { return loadLocalStorageURL; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"loadCustomURL\", function() { return loadCustomURL; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"mod\", function() { return mod; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"argMax\", function() { return argMax; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"mean\", function() { return mean; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"saveAs\", function() { return saveAs; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"readDump\", function() { return readDump; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"shuffleArray\", function() { return shuffleArray; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"keyboard\", function() { return keyboard; });\n/* harmony import */ var _embedded__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./embedded */ \"./src/embedded.ts\");\n\nfunction loadJSON(url, callback) {\n    var xobj = new XMLHttpRequest();\n    xobj.overrideMimeType(\"application/json\");\n    xobj.open('GET', url, true);\n    xobj.onreadystatechange = function () {\n        if (xobj.readyState == 4 && xobj.status == 200) {\n            callback(xobj.responseText);\n        }\n    };\n    xobj.send(null);\n}\nfunction loadEmbeddedURL(url, callback) {\n    var split = url.split(\"//\");\n    split = split[1].split(\"/\");\n    callback(_embedded__WEBPACK_IMPORTED_MODULE_0__[\"embeddedContent\"][split[0]][split[1]]);\n}\nfunction loadLocalStorageURL(url, callback) {\n}\nfunction loadCustomURL(url, callback) {\n    var customCall = {\n        \"embedded:\": loadEmbeddedURL,\n        \"http://\": loadJSON,\n        \"https://\": loadJSON,\n        \"localstorage://\": loadLocalStorageURL\n    };\n    var split = url.split(\"//\");\n    customCall[split[0]](url, callback);\n}\nfunction mod(n, m) {\n    return ((n % m) + m) % m;\n}\nfunction argMax(array) {\n    if (array.every(function (v) { return v == -Infinity; })) {\n        return Math.floor(Math.random() * array.length);\n    }\n    return array.map(function (x, i) { return [x, i]; }).reduce(function (r, a) { return (a[0] > r[0] ? a : r); })[1];\n}\nfunction mean(array) {\n    if (array.length == 0)\n        return null;\n    var sum = array.reduce(function (a, b) { return a + b; });\n    var avg = sum / array.length;\n    return avg;\n}\nfunction saveAs(content, name) {\n    var a = document.createElement(\"a\");\n    document.body.appendChild(a);\n    var blob = new Blob([content], { type: 'application/octet-binary' }), tmpURL = window.URL.createObjectURL(blob);\n    a.href = tmpURL;\n    a.download = name;\n    a.click();\n    window.URL.revokeObjectURL(tmpURL);\n    a.href = \"\";\n}\nfunction readDump(dump, callback) {\n    var input = dump.target;\n    var file = input.files[0];\n    var reader = new FileReader();\n    reader.readAsText(file, \"UTF-8\");\n    reader.onload = function (evt) {\n        callback(evt.target.result);\n    };\n}\nfunction shuffleArray(array) {\n    for (var i = array.length - 1; i > 0; i--) {\n        var j = Math.floor(Math.random() * (i + 1));\n        var temp = array[i];\n        array[i] = array[j];\n        array[j] = temp;\n    }\n    return array;\n}\nfunction keyboard(keyCode) {\n    var key = {};\n    key.code = keyCode;\n    key.isDown = false;\n    key.isUp = true;\n    key.press = undefined;\n    key.release = undefined;\n    key.downHandler = function (event) {\n        if (event.keyCode === key.code) {\n            if (key.isUp && key.press)\n                key.press();\n            key.isDown = true;\n            key.isUp = false;\n        }\n    };\n    key.upHandler = function (event) {\n        if (event.keyCode === key.code) {\n            if (key.isDown && key.release)\n                key.release();\n            key.isDown = false;\n            key.isUp = true;\n        }\n    };\n    window.addEventListener(\"keydown\", key.downHandler.bind(key), false);\n    window.addEventListener(\"keyup\", key.upHandler.bind(key), false);\n    return key;\n}\n\n\n//# sourceURL=webpack://metacar/./src/utils.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"loadJSON\", function() { return loadJSON; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"loadEmbeddedURL\", function() { return loadEmbeddedURL; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"loadLocalStorageURL\", function() { return loadLocalStorageURL; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"loadCustomURL\", function() { return loadCustomURL; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"mod\", function() { return mod; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"argMax\", function() { return argMax; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"mean\", function() { return mean; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"saveAs\", function() { return saveAs; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"readDump\", function() { return readDump; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"shuffleArray\", function() { return shuffleArray; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"keyboard\", function() { return keyboard; });\n/* harmony import */ var _embedded__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./embedded */ \"./src/embedded.ts\");\n\nfunction loadJSON(url, callback) {\n    var xobj = new XMLHttpRequest();\n    xobj.overrideMimeType(\"application/json\");\n    xobj.open('GET', url, true);\n    xobj.onreadystatechange = function () {\n        if (xobj.readyState == 4 && xobj.status == 200) {\n            callback(xobj.responseText);\n        }\n    };\n    xobj.send(null);\n}\nfunction loadEmbeddedURL(url, callback) {\n    var split = url.split(\"//\");\n    split = split[1].split(\"/\");\n    callback(_embedded__WEBPACK_IMPORTED_MODULE_0__[\"embeddedContent\"][split[0]][split[1]]);\n}\nfunction loadLocalStorageURL(url, callback) {\n}\nfunction loadCustomURL(url, callback) {\n    var customCall = {\n        \"embedded:\": loadEmbeddedURL,\n        \"http://\": loadJSON,\n        \"https://\": loadJSON,\n        \"localstorage://\": loadLocalStorageURL\n    };\n    var split = url.split(\"//\");\n    customCall[split[0]](url, callback);\n}\nfunction mod(n, m) {\n    return ((n % m) + m) % m;\n}\nfunction argMax(array) {\n    if (array.every(function (v) { return v == -Infinity; })) {\n        return Math.floor(Math.random() * array.length);\n    }\n    return array.map(function (x, i) { return [x, i]; }).reduce(function (r, a) { return (a[0] > r[0] ? a : r); })[1];\n}\nfunction mean(array) {\n    if (array.length == 0)\n        return null;\n    var sum = array.reduce(function (a, b) { return a + b; });\n    var avg = sum / array.length;\n    return avg;\n}\nfunction saveAs(content, name) {\n    var a = document.createElement(\"a\");\n    document.body.appendChild(a);\n    var blob = new Blob([content], { type: 'application/octet-binary' }), tmpURL = window.URL.createObjectURL(blob);\n    a.href = tmpURL;\n    a.download = name;\n    a.click();\n    window.URL.revokeObjectURL(tmpURL);\n    a.href = \"\";\n}\nfunction readDump(dump, callback) {\n    var input = dump.target;\n    var file = input.files[0];\n    var reader = new FileReader();\n    reader.readAsText(file, \"UTF-8\");\n    reader.onload = function (evt) {\n        callback(evt.target.result);\n    };\n}\nfunction shuffleArray(array) {\n    for (var i = array.length - 1; i > 0; i--) {\n        var j = Math.floor(Math.random() * (i + 1));\n        var temp = array[i];\n        array[i] = array[j];\n        array[j] = temp;\n    }\n    return array;\n}\nfunction keyboard(keyCode) {\n    var key = {};\n    key.code = keyCode;\n    key.isDown = false;\n    key.isUp = true;\n    key.press = undefined;\n    key.release = undefined;\n    key.downHandler = function (event) {\n        if (event.keyCode === key.code) {\n            if (key.isUp && key.press)\n                key.press();\n            key.isDown = true;\n            key.isUp = false;\n        }\n        event.preventDefault();\n    };\n    key.upHandler = function (event) {\n        if (event.keyCode === key.code) {\n            if (key.isDown && key.release)\n                key.release();\n            key.isDown = false;\n            key.isUp = true;\n        }\n        event.preventDefault();\n    };\n    window.addEventListener(\"keydown\", key.downHandler.bind(key), false);\n    window.addEventListener(\"keyup\", key.upHandler.bind(key), false);\n    return key;\n}\n\n\n//# sourceURL=webpack://metacar/./src/utils.ts?");
 
 /***/ }),
 

demo/webapp/level0.html

@@ -23,11 +23,25 @@
         <div class="canvas" id="canvas"></div>
       </div>
 
+      <div class="body_container">
+          <h3>Current state (Lidar points)</h3><br>
+          <div id="realtime_viewer" style="float: left"></div>
+          <p>
+              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+          </p>
+      </div>
+
+      <div class="body_container">
+        <h3>Q-table</h3><br>
+        <div id="q_table"></div>
+      </div>
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.11.6"> </script>
     <script src="/dist/metacar.min.js"></script>
 
     <script type="text/javascript" src="/public/js/utils.js"></script>
+    <script type="text/javascript" src="/public/js/viewer.js"></script>
     <script type="text/javascript" src="/public/js/q_table_agent.js"></script>
     <script type="text/javascript" src="/public/js/level0.js"></script>
 

demo/webapp/level1.html

@@ -22,12 +22,21 @@
         <div class="canvas" id="canvas"></div>
     </div>
 
+    <div class="body_container">
+        <h3>Current state (Lidar points)</h3><br>
+        <div id="realtime_viewer" style="float: left"></div>
+        <p>
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+        </p>
+    </div>
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.11.6"> </script>
     <script src="/dist/metacar.min.js"></script>
 
     <script type="text/javascript" src="/public/js/utils.js"></script>
     <script type="text/javascript" src="/public/js/policy_agent.js"></script>
+    <script type="text/javascript" src="/public/js/viewer.js"></script>
     <script type="text/javascript" src="/public/js/level1.js"></script>
 
 </body>

demo/webapp/public/js/level0.js

@@ -7,9 +7,18 @@ console.log(env);
 
 env.setAgentMotion(metacar.motion.BasicMotion, {rotationStep: 0.1});
 env.setAgentLidar({pts: 2, width: 1, height: 1, pos: 1});
+env.carsMoving(false);
 
 // Create the Policy agent
-var agent = new QTableAgent(env);
+var agent = new QTableAgent(env, 2);
+
+env.loop(() => {
+    let state = env.getState();
+    displayState("realtime_viewer", state, 200, 200);
+    let scores = agent.getStateValues(state);
+    let reward = env.getLastReward();
+    //displayScores("realtime_viewer", scores, reward, ["Top", "Left", "Right"]);
+})
 
 env.load().then(() => {
     // The level is loaded. Add listernes
@@ -20,5 +29,10 @@ env.load().then(() => {
         console.log("On reset env!");
     });
     env.addEvent("save", () => agent.save());
-    env.addEvent("load", (content) => agent.restore(content), {local: true});
+    env.addEvent("load", (content) => {
+        agent.restore(content);
+        displayQTable("q_table", agent.stateList, agent, ["Top", "Left", "Right"]);
+    } , {local: true});
+    env.addEvent("custom", () => {
+    });
 });

demo/webapp/public/js/level1.js

@@ -6,6 +6,14 @@ var env = new metacar.env("canvas", levelUrl);
 // Create the Policy agent
 var agent = new PolicyAgent(env);
 
+env.loop(() => {
+    let state = env.getState();
+    displayState("realtime_viewer", state, 200, 200);
+    let scores = agent.getStateValues(state);
+    let reward = env.getLastReward();
+    displayScores("realtime_viewer", scores, reward, ["Top", "Left", "Right"]);
+});
+
 env.load().then(() => {
     // The level is loaded. Add listernes
     env.addEvent("train", () => agent.train());

demo/webapp/public/js/policy_agent.js

@@ -9,8 +9,8 @@ class PolicyAgent {
         this.lidarPts = 5;
         this.ttLidarPts = 5*5;
         this.actionsNb = 3;
-
-        this.env = env
+        this.lastPrediction = [0., 0., 0.];
+        this.env = env;
 
         // Build the policy model and the value model
         this.buildValueFc();
@@ -120,6 +120,10 @@ class PolicyAgent {
         });
     }
 
+    getStateValues(){
+        return this.lastPrediction;
+    }
+
     trainPolicy(states, actions, advantages, batch_size, mini_batch_size){
         /*
             Train the policy model
@@ -171,8 +175,14 @@ class PolicyAgent {
         /*
             Restore the weights of the network
         */
-       this.valueModel = await tf.loadModel('http://localhost:3000/public/models/policy/value-model-policy-agent.json');
-       this.policyModel = await tf.loadModel("http://localhost:3000/public/models/policy/policy-model-policy-agent.json");
+       if (window.location.href.indexOf("localhost") == -1){
+            this.valueModel = await tf.loadModel('https://metacar-project.com/public/models/policy/value-model-policy-agent.json');
+            this.policyModel = await tf.loadModel("https://metacar-project.com/public/models/policy/policy-model-policy-agent.json");
+       }
+       else{
+        this.valueModel = await tf.loadModel('http://localhost:3000/public/models/policy/value-model-policy-agent.json');
+        this.policyModel = await tf.loadModel("http://localhost:3000/public/models/policy/policy-model-policy-agent.json");
+       }
     }
 
     play(){
@@ -181,11 +191,10 @@ class PolicyAgent {
             const st = tf.tensor2d(this.env.getState(), [this.lidarPts, this.lidarPts]).reshape([1, this.ttLidarPts]);
             // Predict the policy
             const softmax = this.policyModel.predict(st);
-            softmax.print();
             // Get the action
+            this.lastPrediction = softmax.buffer().values;
             const argmax = softmax.argMax(1);
-            const a = argmax.buffer().values[0];
-
+            const a = argmax.buffer().values;
             argmax.dispose();
             st.dispose();
             softmax.dispose();

demo/webapp/public/js/q_table_agent.js

@@ -4,7 +4,9 @@ class QTableAgent {
         Monte Carlo Agent
     */
 
-    constructor(env) {
+    constructor(env, pts) {
+        this.stateList = [];
+        this.pts = pts;
         this.env = env;
         this.Q = {};
         this.m = 0;
@@ -17,26 +19,49 @@ class QTableAgent {
         console.log("Q table saved");
     }
 
+    stringStateToState(state){
+        state = state.split(",");
+        var nState = [];
+        var lineCt = 0;
+        var line = [];
+        for (let l = 0; l < state.length; l++){
+            line.push(parseInt(state[l]));
+            if ((l+1) % this.pts == 0){
+                nState.push(line);
+                line = [];
+            }
+        }
+        return nState;
+    }
+
     restore(content){
         this.Q = {};
+        this.stateList = [];
         content = JSON.parse(content);
         for (const key in content){
-            this.Q[key] = [];
-            for (var i = 0; i < content[key].length; i++) {
-                if (content[key][i] != null){
-                    this.Q[key].push(content[key][i]);
+            var nStateToPush = this.stringStateToState(key);
+            var st = key.toString();
+            if (nStateToPush.length == this.pts)
+                this.stateList.push(nStateToPush);
+            this.Q[st] = [];
+            for (var i = 0; i < content[st].length; i++) {
+                if (content[st][i] != null){
+                    this.Q[st].push(content[st][i]);
                 }
                 else{
-                    this.Q[key].push(-Infinity);
+                    this.Q[st].push(-Infinity);
                 }
             }
         }
+        console.log(this.Q);
+        console.log(this.stateList);
         console.log("Q table loaded");
     }
 
     play(){
         // Get the current state
-        let state = this.env.getState().toString();
+        let state = this.env.getState();
+        state = state.toString();
         // In this state in not in the Q(s, a) function
         if (!(state in this.Q)){
             let action_space = this.env.actionSpace();
@@ -54,10 +79,17 @@ class QTableAgent {
         if (!(st in this.Q)){
             let action_space = this.env.actionSpace();
             action_space.range = [0, 1, 3];
+            this.stateList.push(st);
             this.Q[st] = Array.apply(null, Array(action_space.range.length)).map(Number.prototype.valueOf, 0);
         }
     }
 
+    getStateValues(state){
+        state = state.toString();
+        this.createStateIfNotExist(state);
+        return this.Q[state];
+    }
+
     pickAction(st, eps){
         this.createStateIfNotExist(st);
         let act;
@@ -88,7 +120,7 @@ class QTableAgent {
             let st2;
             let act2;
             for (var t = 0; t < 800; t++) {
-                act = this.pickAction(this.env, st, eps);
+                act = this.pickAction(st, eps);
                 let reward = this.env.step(act);
                 mean_reward.push(reward);
                 st2 = this.env.getState().toString();
@@ -102,6 +134,5 @@ class QTableAgent {
             this.env.randomRoadPosition();
         }
         this.env.render(true);
-        console.log(this.Q);
     }
 }

demo/webapp/public/js/viewer.js

@@ -0,0 +1,116 @@
+/**
+ * Display a list of state with the associated score
+ */
+function displayQTable(id, states, agent, labels){
+    var scores = [];
+
+    var container = document.getElementById(id);
+    container.innerHTML = "";
+
+    for (let s=0; s < states.length; s++){
+        scores.push(agent.Q[states[s].toString()]);
+        let nContainer = document.getElementById(id + "_" + s);
+        if (!nContainer){
+            nContainer = document.createElement("div");
+            nContainer.id = id + "_" + s;
+            container.appendChild(nContainer);
+        }
+    }
+
+    for (let s=0; s < states.length; s++){
+        let _id = id + "_" + s;
+        displayState(_id, states[s], 100, 100);
+        displayScores(_id, scores[s], undefined, ["Top", "Left", "Right"]);
+    }
+
+}
+
+/**
+ * @id: div container to use
+ * @score
+ */
+function displayScores(id, score, reward, labels){
+    var container = document.getElementById(id);
+    container.style.position = "relative";
+
+    var textContainer = document.getElementById(id + "_text");
+    if (!textContainer){
+        textContainer = document.createElement("div");
+        textContainer.style.position = "absolute";
+        textContainer.style.top = "0px";
+        textContainer.id = id + "_text"
+        textContainer.style.right = "0px";
+        container.appendChild(textContainer);
+    }
+
+    console.log(score);
+    var text = "";
+    for (let c = 0; c < score.length; c++){
+        text += labels[c] + ": <b>" + Number((parseFloat(score[c])).toFixed(2)) + "</b><br>";
+    }
+
+    if (reward){
+        if (reward < 0)
+            text += "<br><p style='color: #ee4c32'>Reward: <b>" +Number((parseFloat(reward)).toFixed(2)) + "</b></p>"
+        else
+            text += "<br><p style='color: #80bf3e'>Reward: <b>" +Number((parseFloat(reward)).toFixed(2)) + "</b></p>"
+    }
+
+    textContainer.innerHTML = text;
+    textContainer.style.right = - textContainer.offsetWidth-10 + "px";
+    container.style.marginRight = textContainer.offsetWidth+30 + "px";
+}
+
+
+/**
+ * @id: div container to use
+ * @state of the map
+ * @width and @height desired width and height
+ */
+function displayState(id, state, width, height){
+    var xSize = width / state[0].length;
+    var ySize = height / state.length;
+    var exist = false;
+    var container = document.getElementById(id);
+    
+    if (container.innerHTML.length != 0){
+        exist = true;
+    }
+
+    container.style.display = "inline-block";
+    container.style.width = width+"px";
+    container.style.height = height+"px";
+    container.style.background = "red";
+
+    let yPos = 0;
+    for (let y = 0; y < state.length; y++){
+        let xPos = 0;
+        for (let x = 0; x < state[0].length; x++){
+            let nDiv;
+            if (!exist){
+                nDiv = document.createElement('div');
+                nDiv.id = id + "_" + y + "_" + x;
+                nDiv.style.display = "block";
+                nDiv.style.width = xSize+"px";
+                nDiv.style.height = ySize+"px";
+                nDiv.style.float = "left";
+                container.appendChild(nDiv);
+            }
+            else{
+                nDiv = document.getElementById(id + "_" + y + "_" + x);
+            }
+            if (state[y][x] == -1){ // road
+                nDiv.style.background = "#484848";
+            }
+            else if (state[y][x] == 0){ // Default
+                nDiv.style.background = "#80bf3e";
+            }
+            else{
+                nDiv.style.background = "#fdf9f5";
+            }
+            xPos += xSize;
+        }
+        yPos += ySize;
+    }
+
+}

dist/metacar.min.js

@@ -95,7 +95,7 @@ window["metacar"] =
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"AssetManger\", function() { return AssetManger; });\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils */ \"./src/utils.ts\");\n/* harmony import */ var _global__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./global */ \"./src/global.ts\");\n/* harmony import */ var _car__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./car */ \"./src/car.ts\");\n/* harmony import */ var _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./basic_motion_engine */ \"./src/basic_motion_engine.ts\");\n/* harmony import */ var _control_motion_engine__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./control_motion_engine */ \"./src/control_motion_engine.ts\");\n/* harmony import */ var _bot_motion_engine__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./bot_motion_engine */ \"./src/bot_motion_engine.ts\");\n\n\n\n\n\n\n;\nvar AssetManger = (function () {\n    function AssetManger(level) {\n        this.assets = [];\n        this.agentMotionEngine = _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__[\"BasicMotionEngine\"];\n        this.agentMotionOptions = {};\n        this.agentLidarInfo = {};\n        this.level = level;\n        this.motion = {\n            \"BasicMotionEngine\": _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__[\"BasicMotionEngine\"],\n            \"ControlMotionEngine\": _control_motion_engine__WEBPACK_IMPORTED_MODULE_4__[\"ControlMotionEngine\"]\n        };\n    }\n    AssetManger.prototype.setAgentLidar = function (options) {\n        this.agentLidarInfo = options;\n    };\n    AssetManger.prototype.setAgentMotion = function (motion, options) {\n        this.agentMotionEngine = motion;\n        this.agentMotionOptions = options;\n    };\n    AssetManger.prototype.createRoadSide = function (info, textures) {\n        var x = (info.mx) * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"];\n        var y = (info.my) * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"];\n        var area = new _global__WEBPACK_IMPORTED_MODULE_1__[\"Graphics\"]();\n        area.beginFill(0xe8e8e8);\n        area.drawRoundedRect(0, 0, _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] + 30, _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] + 30, undefined);\n        area.x = x - 15;\n        area.y = y - 15;\n        area.endFill();\n        this.level.addChild(area);\n    };\n    AssetManger.prototype.createRoad = function (info, textures, arrow) {\n        var _this = this;\n        var road = new _global__WEBPACK_IMPORTED_MODULE_1__[\"Sprite\"](textures[_global__WEBPACK_IMPORTED_MODULE_1__[\"ASSETS\"].ROADS[info.type].image]);\n        road.arrow = arrow;\n        road.x = (info.mx) * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"];\n        road.y = (info.my) * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"];\n        road.obstacle = false;\n        road.mapId = _global__WEBPACK_IMPORTED_MODULE_1__[\"MAP\"].ROAD;\n        road.orientation = _global__WEBPACK_IMPORTED_MODULE_1__[\"ASSETS\"].ROADS[info.type].orientation;\n        road.setCarPosition = function (car, line, force) {\n            if (force === void 0) { force = false; }\n            return _this.setCarOnRoad(road, car, line, force);\n        };\n        road.cars = [];\n        road.mx = info.mx;\n        road.my = info.my;\n        this.level.addRoad(road);\n    };\n    AssetManger.prototype.setCarOnRoad = function (road, car, line, force) {\n        if (force === void 0) { force = false; }\n        if (line == undefined)\n            line = 0;\n        var carById = this.level.findCarById(road.cars[0]);\n        if (!force && road.cars.length >= 1 && carById && carById.core.line == line) {\n            line = line == 0 ? 1 : 0;\n        }\n        car.line = line;\n        car.x = road.x;\n        car.y = road.y;\n        car.x += _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] / 2;\n        car.y += _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] / 2;\n        var x_margin = 0;\n        var y_margin = (_global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] * 1 / 4);\n        road.orientation = (Math.floor(road.orientation / car.rotationStep) * car.rotationStep);\n        var th = -road.orientation * (Math.PI);\n        var x_m = (Math.cos(th) * x_margin) - (y_margin * Math.sin(th));\n        var y_m = (Math.cos(th) * y_margin) + (x_margin * Math.sin(th));\n        var line_side_factor = line == 0 ? 1 : -1;\n        var line_side_factor_t = line == 0 ? 0 : Math.PI;\n        car.x += line_side_factor * Math.round(x_m);\n        car.y += line_side_factor * Math.round(y_m);\n        car.mx = Math.floor(car.x / _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]);\n        car.my = Math.floor(car.y / _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]);\n        car.rotation = (th + line_side_factor_t);\n        car.checkAndsetNewRoad(rLine truncated
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"AssetManger\", function() { return AssetManger; });\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils */ \"./src/utils.ts\");\n/* harmony import */ var _global__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./global */ \"./src/global.ts\");\n/* harmony import */ var _car__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./car */ \"./src/car.ts\");\n/* harmony import */ var _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./basic_motion_engine */ \"./src/basic_motion_engine.ts\");\n/* harmony import */ var _control_motion_engine__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./control_motion_engine */ \"./src/control_motion_engine.ts\");\n/* harmony import */ var _bot_motion_engine__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./bot_motion_engine */ \"./src/bot_motion_engine.ts\");\n\n\n\n\n\n\n;\nvar AssetManger = (function () {\n    function AssetManger(level) {\n        this.assets = [];\n        this.agentMotionEngine = _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__[\"BasicMotionEngine\"];\n        this.agentMotionOptions = {};\n        this.agentLidarInfo = {};\n        this.level = level;\n        this.motion = {\n            \"BasicMotionEngine\": _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__[\"BasicMotionEngine\"],\n            \"ControlMotionEngine\": _control_motion_engine__WEBPACK_IMPORTED_MODULE_4__[\"ControlMotionEngine\"]\n        };\n    }\n    AssetManger.prototype.setAgentLidar = function (options) {\n        this.agentLidarInfo = options;\n    };\n    AssetManger.prototype.setAgentMotion = function (motion, options) {\n        this.agentMotionEngine = motion;\n        this.agentMotionOptions = options;\n    };\n    AssetManger.prototype.createRoadSide = function (info, textures) {\n        var x = (info.mx) * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"];\n        var y = (info.my) * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"];\n        var area = new _global__WEBPACK_IMPORTED_MODULE_1__[\"Graphics\"]();\n        area.beginFill(0xe8e8e8);\n        area.drawRoundedRect(0, 0, _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] + 30, _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] + 30, undefined);\n        area.x = x - 15;\n        area.y = y - 15;\n        area.endFill();\n        this.level.addChild(area);\n    };\n    AssetManger.prototype.createRoad = function (info, textures, arrow) {\n        var _this = this;\n        var road = new _global__WEBPACK_IMPORTED_MODULE_1__[\"Sprite\"](textures[_global__WEBPACK_IMPORTED_MODULE_1__[\"ASSETS\"].ROADS[info.type].image]);\n        road.arrow = arrow;\n        road.x = (info.mx) * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"];\n        road.y = (info.my) * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"];\n        road.obstacle = false;\n        road.mapId = _global__WEBPACK_IMPORTED_MODULE_1__[\"MAP\"].ROAD;\n        road.orientation = _global__WEBPACK_IMPORTED_MODULE_1__[\"ASSETS\"].ROADS[info.type].orientation;\n        road.setCarPosition = function (car, line, force) {\n            if (force === void 0) { force = false; }\n            return _this.setCarOnRoad(road, car, line, force);\n        };\n        road.cars = [];\n        road.mx = info.mx;\n        road.my = info.my;\n        this.level.addRoad(road);\n    };\n    AssetManger.prototype.setCarOnRoad = function (road, car, line, force) {\n        if (force === void 0) { force = false; }\n        if (line == undefined)\n            line = 0;\n        var carById = this.level.findCarById(road.cars[0]);\n        if (!force && road.cars.length >= 1 && carById && carById.core.line == line) {\n            line = line == 0 ? 1 : 0;\n        }\n        car.line = line;\n        car.x = road.x;\n        car.y = road.y;\n        car.x += _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] / 2;\n        car.y += _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] / 2;\n        var x_margin = 0;\n        var y_margin = (_global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"] * 1 / 4);\n        road.orientation = (Math.floor(road.orientation / car.rotationStep) * car.rotationStep);\n        var th = -road.orientation * (Math.PI);\n        var x_m = (Math.cos(th) * x_margin) - (y_margin * Math.sin(th));\n        var y_m = (Math.cos(th) * y_margin) + (x_margin * Math.sin(th));\n        var line_side_factor = line == 0 ? 1 : -1;\n        var line_side_factor_t = line == 0 ? 0 : Math.PI;\n        car.x += line_side_factor * Math.round(x_m);\n        car.y += line_side_factor * Math.round(y_m);\n        car.mx = Math.floor(car.x / _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]);\n        car.my = Math.floor(car.y / _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]);\n        car.rotation = (th + line_side_factor_t);\n        car.checkAndsetNewRoad(rLine truncated
 
 /***/ }),
 
@@ -155,7 +155,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Editor\", function() { return Editor; });\n/* harmony import */ var _asset_manager__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./asset_manager */ \"./src/asset_manager.ts\");\n/* harmony import */ var _global__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./global */ \"./src/global.ts\");\n/* harmony import */ var _world__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./world */ \"./src/world.ts\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = Object.setPrototypeOf ||\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\n\n\n\nvar Editor = (function (_super) {\n    __extends(Editor, _super);\n    function Editor(levelContent, canvasId) {\n        var _this = _super.call(this, levelContent, canvasId) || this;\n        _this.selectedItems = null;\n        _this.am = new _asset_manager__WEBPACK_IMPORTED_MODULE_0__[\"AssetManger\"](_this);\n        return _this;\n    }\n    Editor.prototype._setEvents = function () {\n    };\n    Editor.prototype._setup = function (info) {\n        var _this = this;\n        this._setEvents();\n        var textures = _global__WEBPACK_IMPORTED_MODULE_1__[\"Loader\"].resources[_global__WEBPACK_IMPORTED_MODULE_1__[\"JSON_TEXTURES\"]].textures;\n        this.am.createMap(this.map, info, textures, false);\n        this.am.createCars(this.map, info, textures);\n        if (info.agent)\n            this.agent = this.am.createAgent(this.map, info, textures);\n        var that = this;\n        for (var i = 0; i < this.envs.length; i++) {\n            this.envs[i].interactive = true;\n            this.envs[i].on(\"rightclick\", function () { that.removeItem(this); });\n        }\n        for (var i = 0; i < this.am.assets.length; i++) {\n            this.am.assets[i].interactive = true;\n            this.am.assets[i].on(\"rightclick\", function () { that.removeItem(this); });\n        }\n        this.app.ticker.add(function (delta) { return _this.loop(delta); });\n    };\n    Editor.prototype.resize = function (width, height) {\n        this.app.renderer.resize(width * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"], height * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]);\n    };\n    Editor.prototype.getSelectedItems = function () {\n        return this.selectedItems;\n    };\n    Editor.prototype.selectedItem = function (item) {\n        if (this.selectedItems) {\n            this.app.stage.removeChild(this.selectedItems);\n        }\n        var textures = _global__WEBPACK_IMPORTED_MODULE_1__[\"Loader\"].resources[_global__WEBPACK_IMPORTED_MODULE_1__[\"JSON_TEXTURES\"]].textures;\n        this.selectedItems = new _global__WEBPACK_IMPORTED_MODULE_1__[\"Sprite\"](textures[item.image]);\n        this.selectedItems.type = item.type;\n        this.selectedItems.image = item.image;\n        this.selectedItems.data = item.data;\n        this.selectedItems.x = 0;\n        this.selectedItems.y = 0;\n        this.app.stage.addChild(this.selectedItems);\n    };\n    Editor.prototype.removeItem = function (item) {\n        if (item.lidar) {\n            this.app.stage.removeChild(item.lidar);\n        }\n        if (item.mapId == _global__WEBPACK_IMPORTED_MODULE_1__[\"MAP\"].CAR) {\n            if (item.road)\n                item.road.cars.splice(item.road.cars.indexOf(item.carId), 1);\n        }\n        if (item.agent)\n            this.agent = undefined;\n        this.app.stage.removeChild(item);\n        item.isremove = true;\n    };\n    Editor.prototype.exportMap = function (width, height, file_name, download) {\n        return this.am.exportMap(width, height, file_name, download);\n    };\n    Editor.prototype.setCurrentItem = function () {\n        this.am.addAsset(this.selectedItems);\n        var textures = _global__WEBPACK_IMPORTED_MODULE_1__[\"Loader\"].resources[_global__WEBPACK_IMPORTED_MODULE_1__[\"JSON_TEXTURES\"]].textures;\n        var that = this;\n        if (this.selectedItems.type == \"road\") {\n            this.am.createRoad({\n                mx: Math.floor(this.selectedItems.x / _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]),\n                my: Math.floor(this.selectedItems.y / _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]),\n                type: this.selectedItems.data\n            }, textures, this.selectedItems.data);\n            this.envs[this.envs.length - 1].interactive = true;\n            this.envs[this.envs.length - 1].on(\"rightclick\", function () { that.removeItem(this); });\n        }\n        else ifLine truncated
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Editor\", function() { return Editor; });\n/* harmony import */ var _asset_manager__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./asset_manager */ \"./src/asset_manager.ts\");\n/* harmony import */ var _global__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./global */ \"./src/global.ts\");\n/* harmony import */ var _world__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./world */ \"./src/world.ts\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = Object.setPrototypeOf ||\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\n\n\n\nvar Editor = (function (_super) {\n    __extends(Editor, _super);\n    function Editor(levelContent, canvasId) {\n        var _this = _super.call(this, levelContent, canvasId) || this;\n        _this.selectedItems = null;\n        _this.am = new _asset_manager__WEBPACK_IMPORTED_MODULE_0__[\"AssetManger\"](_this);\n        return _this;\n    }\n    Editor.prototype._setEvents = function () {\n    };\n    Editor.prototype._setup = function (info) {\n        var _this = this;\n        this._setEvents();\n        var textures = _global__WEBPACK_IMPORTED_MODULE_1__[\"Loader\"].resources[_global__WEBPACK_IMPORTED_MODULE_1__[\"JSON_TEXTURES\"]].textures;\n        this.am.createMap(this.map, info, textures, false);\n        this.am.createCars(this.map, info, textures);\n        if (info.agent)\n            this.agent = this.am.createAgent(this.map, info, textures, false);\n        var that = this;\n        for (var i = 0; i < this.envs.length; i++) {\n            this.envs[i].interactive = true;\n            this.envs[i].on(\"rightclick\", function () { that.removeItem(this); });\n        }\n        for (var i = 0; i < this.am.assets.length; i++) {\n            this.am.assets[i].interactive = true;\n            this.am.assets[i].on(\"rightclick\", function () { that.removeItem(this); });\n        }\n        this.app.ticker.add(function (delta) { return _this.loop(delta); });\n    };\n    Editor.prototype.resize = function (width, height) {\n        this.app.renderer.resize(width * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"], height * _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]);\n    };\n    Editor.prototype.getSelectedItems = function () {\n        return this.selectedItems;\n    };\n    Editor.prototype.selectedItem = function (item) {\n        if (this.selectedItems) {\n            this.app.stage.removeChild(this.selectedItems);\n        }\n        var textures = _global__WEBPACK_IMPORTED_MODULE_1__[\"Loader\"].resources[_global__WEBPACK_IMPORTED_MODULE_1__[\"JSON_TEXTURES\"]].textures;\n        this.selectedItems = new _global__WEBPACK_IMPORTED_MODULE_1__[\"Sprite\"](textures[item.image]);\n        this.selectedItems.type = item.type;\n        this.selectedItems.image = item.image;\n        this.selectedItems.data = item.data;\n        this.selectedItems.x = 0;\n        this.selectedItems.y = 0;\n        this.app.stage.addChild(this.selectedItems);\n    };\n    Editor.prototype.removeItem = function (item) {\n        if (item.lidar) {\n            this.app.stage.removeChild(item.lidar);\n        }\n        if (item.mapId == _global__WEBPACK_IMPORTED_MODULE_1__[\"MAP\"].CAR) {\n            if (item.road)\n                item.road.cars.splice(item.road.cars.indexOf(item.carId), 1);\n        }\n        if (item.agent)\n            this.agent = undefined;\n        this.app.stage.removeChild(item);\n        item.isremove = true;\n    };\n    Editor.prototype.exportMap = function (width, height, file_name, download) {\n        return this.am.exportMap(width, height, file_name, download);\n    };\n    Editor.prototype.setCurrentItem = function () {\n        this.am.addAsset(this.selectedItems);\n        var textures = _global__WEBPACK_IMPORTED_MODULE_1__[\"Loader\"].resources[_global__WEBPACK_IMPORTED_MODULE_1__[\"JSON_TEXTURES\"]].textures;\n        var that = this;\n        if (this.selectedItems.type == \"road\") {\n            this.am.createRoad({\n                mx: Math.floor(this.selectedItems.x / _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]),\n                my: Math.floor(this.selectedItems.y / _global__WEBPACK_IMPORTED_MODULE_1__[\"ROADSIZE\"]),\n                type: this.selectedItems.data\n            }, textures, this.selectedItems.data);\n            this.envs[this.envs.length - 1].interactive = true;\n            this.envs[this.envs.length - 1].on(\"rightclick\", function () { that.removeItem(this); });\n        }\n        
Line truncated
 
 /***/ }),
 
@@ -215,7 +215,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Application\", function() { return Application; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Loader\", function() { return Loader; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Resources\", function() { return Resources; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Sprite\", function() { return Sprite; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Graphics\", function() { return Graphics; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Container\", function() { return Container; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"URL\", function() { return URL; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"JSON_TEXTURES\", function() { return JSON_TEXTURES; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"JSON_IMAGE\", function() { return JSON_IMAGE; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"IMAGE_FOLDER\", function() { return IMAGE_FOLDER; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ROADSIZE\", function() { return ROADSIZE; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"CAR_IMG\", function() { return CAR_IMG; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"MAP\", function() { return MAP; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ASSETS\", function() { return ASSETS; });\n/* harmony import */ var pixi_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! pixi.js */ \"pixi.js\");\n/* harmony import */ var pixi_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(pixi_js__WEBPACK_IMPORTED_MODULE_0__);\n\nvar Application = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"Application\"];\nvar Loader = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"loader\"];\nvar Resources = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"loader\"].resources;\nvar Sprite = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"Sprite\"];\nvar Graphics = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"Graphics\"];\nvar Container = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"Container\"];\nvar URL = \"http://localhost:3000/\";\nvar JSON_TEXTURES = URL + \"public/textures/textures.json\";\nvar JSON_IMAGE = URL + \"public/textures/textures.png\";\nvar IMAGE_FOLDER = URL + \"public/images/\";\nvar ROADSIZE = 60;\nvar CAR_IMG = {\n    DEFAULT: \"car.png\",\n    AGENT: \"car_agent.png\"\n};\nvar MAP = {\n    ROAD: -1,\n    DEFAULT: 0,\n    CAR: 1,\n    AGENT: 1,\n};\nvar ASSETS = {\n    ROADS: {\n        \"↕\": {\n            \"image\": \"road_u.png\",\n            \"orientation\": 1.5\n        },\n        \"↔\": {\n            \"image\": \"road_r.png\",\n            \"orientation\": 0.\n        },\n        \"↱\": {\n            \"image\": \"road_rotate_ld.png\",\n            \"orientation\": 1.25\n        },\n        \"↰\": {\n            \"image\": \"road_rotate_ul.png\",\n            \"orientation\": 0.75\n        },\n        \"↲\": {\n            \"image\": \"road_rotate_rl.png\",\n            \"orientation\": 0.25\n        },\n        \"↳\": {\n            \"image\": \"road_rotate_dl.png\",\n            \"orientation\": 1.75\n        },\n        \"↟\": {\n            \"image\": \"road_up.png\",\n            \"orientation\": 1.5\n        },\n        \"↠\": {\n            \"image\": \"road_rp.png\",\n            \"orientation\": 0.\n        },\n        \"↤\": {\n            \"image\": \"road_r2.png\",\n            \"orientation\": 0.\n        },\n        \"↦\": {\n            \"image\": \"road_l2.png\",\n            \"orientation\": 1.\n        },\n        \"↥\": {\n            \"image\": \"road_d2.png\",\n            \"orientation\": 0.5\n        },\n        \"↧\": {\n            \"image\": \"road_u2.png\",\n            \"orientation\": 1.5\n        },\n    },\n    \"house\": {\n        \"image\": \"house.png\"\n    },\n    \"house2\": {\n        \"image\": \"house2.png\"\n    },\n    \"house3\": {\n        \"image\": \"house3.png\"\n    },\n    \"bench\": {\n        \"image\": \"bench.png\"\n    },\n    \"tree\": {\n        \"image\": \"tree.png\"\n    }\n};\n\n\n//# sourceURL=webpack://metacar/./src/global.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Application\", function() { return Application; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Loader\", function() { return Loader; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Resources\", function() { return Resources; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Sprite\", function() { return Sprite; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Graphics\", function() { return Graphics; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Container\", function() { return Container; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"URL\", function() { return URL; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"JSON_TEXTURES\", function() { return JSON_TEXTURES; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"JSON_IMAGE\", function() { return JSON_IMAGE; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"IMAGE_FOLDER\", function() { return IMAGE_FOLDER; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ROADSIZE\", function() { return ROADSIZE; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"CAR_IMG\", function() { return CAR_IMG; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"MAP\", function() { return MAP; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ASSETS\", function() { return ASSETS; });\n/* harmony import */ var pixi_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! pixi.js */ \"pixi.js\");\n/* harmony import */ var pixi_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(pixi_js__WEBPACK_IMPORTED_MODULE_0__);\n\nvar Application = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"Application\"];\nvar Loader = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"loader\"];\nvar Resources = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"loader\"].resources;\nvar Sprite = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"Sprite\"];\nvar Graphics = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"Graphics\"];\nvar Container = pixi_js__WEBPACK_IMPORTED_MODULE_0__[\"Container\"];\nvar URL = window.location.href.indexOf(\"localhost\") == -1 ? \"https://metacar-project.com/\" : \"http://localhost:3000/\";\nvar JSON_TEXTURES = URL + \"public/textures/textures.json\";\nvar JSON_IMAGE = URL + \"public/textures/textures.png\";\nvar IMAGE_FOLDER = URL + \"public/images/\";\nvar ROADSIZE = 60;\nvar CAR_IMG = {\n    DEFAULT: \"car.png\",\n    AGENT: \"car_agent.png\"\n};\nvar MAP = {\n    ROAD: -1,\n    DEFAULT: 0,\n    CAR: 1,\n    AGENT: 1,\n};\nvar ASSETS = {\n    ROADS: {\n        \"↕\": {\n            \"image\": \"road_u.png\",\n            \"orientation\": 1.5\n        },\n        \"↔\": {\n            \"image\": \"road_r.png\",\n            \"orientation\": 0.\n        },\n        \"↱\": {\n            \"image\": \"road_rotate_ld.png\",\n            \"orientation\": 1.25\n        },\n        \"↰\": {\n            \"image\": \"road_rotate_ul.png\",\n            \"orientation\": 0.75\n        },\n        \"↲\": {\n            \"image\": \"road_rotate_rl.png\",\n            \"orientation\": 0.25\n        },\n        \"↳\": {\n            \"image\": \"road_rotate_dl.png\",\n            \"orientation\": 1.75\n        },\n        \"↟\": {\n            \"image\": \"road_up.png\",\n            \"orientation\": 1.5\n        },\n        \"↠\": {\n            \"image\": \"road_rp.png\",\n            \"orientation\": 0.\n        },\n        \"↤\": {\n            \"image\": \"road_r2.png\",\n            \"orientation\": 0.\n        },\n        \"↦\": {\n            \"image\": \"road_l2.png\",\n            \"orientation\": 1.\n        },\n        \"↥\": {\n            \"image\": \"road_d2.png\",\n            \"orientation\": 0.5\n        },\n        \"↧\": {\n            \"image\": \"road_u2.png\",\n            \"orientation\": 1.5\n        },\n    },\n    \"house\": {\n        \"image\": \"house.png\"\n    },\n    \"house2\": {\n        \"image\": \"house2.png\"\n    },\n    \"house3\": {\n        \"image\": \"house3.png\"\n    },\n    \"bench\": {\n        \"image\": \"bench.png\"\n    },\n    \"tree\": {\n        \"image\": \"tree.png\"\n    }\n};\n\n\n//# sourceURL=webpack://metacar/./src/global.ts?");
 
 /***/ }),
 
@@ -239,7 +239,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _met
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Level\", function() { return Level; });\n/* harmony import */ var _global__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./global */ \"./src/global.ts\");\n/* harmony import */ var _asset_manager__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./asset_manager */ \"./src/asset_manager.ts\");\n/* harmony import */ var _world__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./world */ \"./src/world.ts\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = Object.setPrototypeOf ||\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\n\n\n\nvar Level = (function (_super) {\n    __extends(Level, _super);\n    function Level(levelContent, canvasId) {\n        var _this = _super.call(this, levelContent, canvasId) || this;\n        _this.isCarsMoving = true;\n        _this.map = _this.info.map;\n        _this.am = new _asset_manager__WEBPACK_IMPORTED_MODULE_1__[\"AssetManger\"](_this);\n        return _this;\n    }\n    Level.prototype.carsMoving = function (moving) {\n        this.isCarsMoving = moving;\n    };\n    Level.prototype.setAgentMotion = function (motion, options) {\n        this.am.setAgentMotion(motion, options);\n    };\n    Level.prototype.setAgentLidar = function (options) {\n        this.am.setAgentLidar(options);\n    };\n    Level.prototype._setup = function (info) {\n        var _this = this;\n        var textures = _global__WEBPACK_IMPORTED_MODULE_0__[\"Loader\"].resources[_global__WEBPACK_IMPORTED_MODULE_0__[\"JSON_TEXTURES\"]].textures;\n        this.am.createMap(this.map, info, textures);\n        this.am.createCars(this.map, info, textures);\n        if (info.agent)\n            this.agent = this.am.createAgent(this.map, info, textures);\n        this.app.ticker.add(function (delta) { return _this.loop(delta); });\n    };\n    Level.prototype.reset = function () {\n        this.agent.reset();\n        for (var c = 0; c < this.cars.length; c++) {\n            this.cars[c].reset();\n        }\n    };\n    Level.prototype.setReward = function (agent_col, on_road, action) {\n        var reward = -0.1;\n        if (action == 0 || this.agent.core.v == 1)\n            reward += 0.5;\n        if (agent_col.length > 0) {\n            console.log(\"collision!\");\n            reward = -10;\n        }\n        else if (!on_road) {\n            console.log(\"out\");\n            reward = -10;\n        }\n        return reward;\n    };\n    Level.prototype.step = function (delta, action) {\n        if (action === void 0) { action = null; }\n        for (var c = 0; c < this.cars.length; c++) {\n            if (this.cars[c].lidar && !this.cars[c].core.agent)\n                this.cars[c].step(delta);\n        }\n        if (this.agent) {\n            var _a = this.agent.step(delta, action), agentCollisions = _a.agentCollisions, onRoad = _a.onRoad;\n            var reward = this.setReward(agentCollisions, onRoad, action);\n            return reward;\n        }\n        return 0;\n    };\n    Level.prototype.stopRender = function () {\n        this.app.ticker.stop();\n    };\n    return Level;\n}(_world__WEBPACK_IMPORTED_MODULE_2__[\"World\"]));\n\n\n\n//# sourceURL=webpack://metacar/./src/level.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Level\", function() { return Level; });\n/* harmony import */ var _global__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./global */ \"./src/global.ts\");\n/* harmony import */ var _asset_manager__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./asset_manager */ \"./src/asset_manager.ts\");\n/* harmony import */ var _world__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./world */ \"./src/world.ts\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = Object.setPrototypeOf ||\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\n\n\n\nvar Level = (function (_super) {\n    __extends(Level, _super);\n    function Level(levelContent, canvasId) {\n        var _this = _super.call(this, levelContent, canvasId) || this;\n        _this.isCarsMoving = true;\n        _this.lastReward = 0;\n        _this.map = _this.info.map;\n        _this.am = new _asset_manager__WEBPACK_IMPORTED_MODULE_1__[\"AssetManger\"](_this);\n        return _this;\n    }\n    Level.prototype.carsMoving = function (moving) {\n        this.isCarsMoving = moving;\n    };\n    Level.prototype.setAgentMotion = function (motion, options) {\n        this.am.setAgentMotion(motion, options);\n    };\n    Level.prototype.setAgentLidar = function (options) {\n        this.am.setAgentLidar(options);\n    };\n    Level.prototype._setup = function (info) {\n        var _this = this;\n        var textures = _global__WEBPACK_IMPORTED_MODULE_0__[\"Loader\"].resources[_global__WEBPACK_IMPORTED_MODULE_0__[\"JSON_TEXTURES\"]].textures;\n        this.am.createMap(this.map, info, textures);\n        this.am.createCars(this.map, info, textures);\n        if (info.agent)\n            this.agent = this.am.createAgent(this.map, info, textures);\n        this.app.ticker.add(function (delta) { return _this.loop(delta); });\n    };\n    Level.prototype.reset = function () {\n        this.agent.reset();\n        for (var c = 0; c < this.cars.length; c++) {\n            this.cars[c].reset();\n        }\n    };\n    Level.prototype.setReward = function (agent_col, on_road, action) {\n        var reward = -0.1;\n        if (action == 0 || this.agent.core.v == 1)\n            reward += 0.5;\n        if (agent_col.length > 0) {\n            reward = -10;\n        }\n        else if (!on_road) {\n            reward = -10;\n        }\n        this.lastReward = reward;\n        return reward;\n    };\n    Level.prototype.getLastReward = function () {\n        return this.lastReward;\n    };\n    Level.prototype.step = function (delta, action) {\n        if (action === void 0) { action = null; }\n        for (var c = 0; c < this.cars.length; c++) {\n            if (this.cars[c].lidar && !this.cars[c].core.agent)\n                this.cars[c].step(delta);\n        }\n        if (this.agent) {\n            var _a = this.agent.step(delta, action), agentCollisions = _a.agentCollisions, onRoad = _a.onRoad;\n            var reward = this.setReward(agentCollisions, onRoad, action);\n            return reward;\n        }\n        return 0;\n    };\n    Level.prototype.stopRender = function () {\n        this.app.ticker.stop();\n    };\n    return Level;\n}(_world__WEBPACK_IMPORTED_MODULE_2__[\"World\"]));\n\n\n\n//# sourceURL=webpack://metacar/./src/level.ts?");
 
 /***/ }),
 
@@ -251,7 +251,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"MetaCar\", function() { return MetaCar; });\n/* harmony import */ var _level__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./level */ \"./src/level.ts\");\n/* harmony import */ var _ui_event__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ui_event */ \"./src/ui_event.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/utils.ts\");\n/* harmony import */ var _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./basic_motion_engine */ \"./src/basic_motion_engine.ts\");\n\n\n\n\nvar MetaCar = (function () {\n    function MetaCar(canvasId, levelToLoad) {\n        this.eventList = [\"train\", \"play\", \"stop\", \"reset_env\", \"load\"];\n        this.agentMotionEngine = _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__[\"BasicMotionEngine\"];\n        this.agentMotionOptions = {};\n        this.isCarsMoving = true;\n        if (!canvasId || !levelToLoad) {\n            console.error(\"You must specify the canvasId and the levelToLoad\");\n        }\n        this.canvasId = canvasId;\n        this.levelToLoad = levelToLoad;\n    }\n    MetaCar.prototype.load = function () {\n        var _this = this;\n        return new Promise(function (resolve, reject) {\n            if (typeof _this.levelToLoad == \"string\") {\n                _utils__WEBPACK_IMPORTED_MODULE_2__[\"loadCustomURL\"](_this.levelToLoad, function (content) {\n                    _this.level = new _level__WEBPACK_IMPORTED_MODULE_0__[\"Level\"](content, _this.canvasId);\n                    _this.level.setAgentMotion(_this.agentMotionEngine, _this.agentMotionOptions);\n                    _this.level.setAgentLidar(_this.agentLidarInfo);\n                    _this.level.carsMoving(_this.isCarsMoving);\n                    _this._setEvents();\n                    _this.level.load(function (delta) { return _this._loop(delta); });\n                    resolve();\n                });\n            }\n            else {\n                _this.level = new _level__WEBPACK_IMPORTED_MODULE_0__[\"Level\"](_this.levelToLoad, _this.canvasId);\n                _this.level.setAgentMotion(_this.agentMotionEngine, _this.agentMotionOptions);\n                _this.level.setAgentLidar(_this.agentLidarInfo);\n                _this.level.carsMoving(_this.isCarsMoving);\n                _this._setEvents();\n                _this.level.load(function (delta) { return _this._loop(delta); });\n                resolve();\n            }\n        });\n    };\n    MetaCar.prototype.carsMoving = function (moving) {\n        this.isCarsMoving = moving;\n    };\n    MetaCar.prototype.setAgentLidar = function (options) {\n        this.agentLidarInfo = options;\n    };\n    MetaCar.prototype.setAgentMotion = function (motion, options) {\n        this.agentMotionEngine = motion;\n        this.agentMotionOptions = options;\n    };\n    MetaCar.prototype.addEvent = function (eventName, fc, options) {\n        var index = this.eventList.indexOf(eventName);\n        if (index == -1) {\n            this.event.onCustomEvent(eventName, fc);\n            return;\n        }\n        var event = this.eventList[index];\n        if (event != \"load\") {\n            this.eventCallback[index](fc);\n        }\n        else {\n            this.eventCallback[index](fc, options);\n        }\n    };\n    MetaCar.prototype.render = function (val) {\n        this.level.render(val);\n    };\n    MetaCar.prototype.save = function (content, file_name) {\n        _utils__WEBPACK_IMPORTED_MODULE_2__[\"saveAs\"](content, file_name);\n    };\n    MetaCar.prototype.actionSpace = function () {\n        return this.level.agent.motion.actionSpace();\n    };\n    MetaCar.prototype.getState = function (linear) {\n        if (linear === void 0) { linear = false; }\n        return this.level.agent.getState(linear);\n    };\n    MetaCar.prototype.step = function (action) {\n        return this.level.step(1, action);\n    };\n    MetaCar.prototype.reset = function () {\n        this.level.reset();\n    };\n    MetaCar.prototype.randomRoadPosition = function () {\n        var roads = this.level.getRoads();\n        var keys = Object.keys(roads);\n        keys.sort(function () { return Math.random() - 0.5; });\n        for (var k in keys) {\n            var road = roads[keys[k]];\n            if (road.cars.length == 0) {\n                road.setCarPosition(this.level.agent.core);\n                break;\n            }\n        }\n    };\n    MetaCar.prototype._loop = function (delta) {\n        if (this.event.isPlaying()) {\n            this.event.playCallback();\n        }\n        else {\n            this.level.step(delta);\n        }\n    };\n    MetaCar.prototype._setEvents = function () {\n        var _this = this;\n        this.event = new _ui_event__WEBPACK_IMPORTED_MODULE_1__[\"UIEvent\"Line truncated
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"MetaCar\", function() { return MetaCar; });\n/* harmony import */ var _level__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./level */ \"./src/level.ts\");\n/* harmony import */ var _ui_event__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ui_event */ \"./src/ui_event.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/utils.ts\");\n/* harmony import */ var _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./basic_motion_engine */ \"./src/basic_motion_engine.ts\");\n\n\n\n\nvar MetaCar = (function () {\n    function MetaCar(canvasId, levelToLoad) {\n        this.eventList = [\"train\", \"play\", \"stop\", \"reset_env\", \"load\"];\n        this.agentMotionEngine = _basic_motion_engine__WEBPACK_IMPORTED_MODULE_3__[\"BasicMotionEngine\"];\n        this.agentMotionOptions = {};\n        this.isCarsMoving = true;\n        this.loopCallback = undefined;\n        if (!canvasId || !levelToLoad) {\n            console.error(\"You must specify the canvasId and the levelToLoad\");\n        }\n        this.canvasId = canvasId;\n        this.levelToLoad = levelToLoad;\n    }\n    MetaCar.prototype.load = function () {\n        var _this = this;\n        return new Promise(function (resolve, reject) {\n            if (typeof _this.levelToLoad == \"string\") {\n                _utils__WEBPACK_IMPORTED_MODULE_2__[\"loadCustomURL\"](_this.levelToLoad, function (content) {\n                    _this.level = new _level__WEBPACK_IMPORTED_MODULE_0__[\"Level\"](content, _this.canvasId);\n                    _this.level.setAgentMotion(_this.agentMotionEngine, _this.agentMotionOptions);\n                    _this.level.setAgentLidar(_this.agentLidarInfo);\n                    _this.level.carsMoving(_this.isCarsMoving);\n                    _this._setEvents();\n                    _this.level.load(function (delta) { return _this._loop(delta); });\n                    resolve();\n                });\n            }\n            else {\n                _this.level = new _level__WEBPACK_IMPORTED_MODULE_0__[\"Level\"](_this.levelToLoad, _this.canvasId);\n                _this.level.setAgentMotion(_this.agentMotionEngine, _this.agentMotionOptions);\n                _this.level.setAgentLidar(_this.agentLidarInfo);\n                _this.level.carsMoving(_this.isCarsMoving);\n                _this._setEvents();\n                _this.level.load(function (delta) { return _this._loop(delta); });\n                resolve();\n            }\n        });\n    };\n    MetaCar.prototype.carsMoving = function (moving) {\n        this.isCarsMoving = moving;\n    };\n    MetaCar.prototype.getLastReward = function () {\n        return this.level.getLastReward();\n    };\n    MetaCar.prototype.setAgentLidar = function (options) {\n        this.agentLidarInfo = options;\n    };\n    MetaCar.prototype.setAgentMotion = function (motion, options) {\n        this.agentMotionEngine = motion;\n        this.agentMotionOptions = options;\n    };\n    MetaCar.prototype.addEvent = function (eventName, fc, options) {\n        var index = this.eventList.indexOf(eventName);\n        if (index == -1) {\n            this.event.onCustomEvent(eventName, fc);\n            return;\n        }\n        var event = this.eventList[index];\n        if (event != \"load\") {\n            this.eventCallback[index](fc);\n        }\n        else {\n            this.eventCallback[index](fc, options);\n        }\n    };\n    MetaCar.prototype.render = function (val) {\n        this.level.render(val);\n    };\n    MetaCar.prototype.save = function (content, file_name) {\n        _utils__WEBPACK_IMPORTED_MODULE_2__[\"saveAs\"](content, file_name);\n    };\n    MetaCar.prototype.actionSpace = function () {\n        return this.level.agent.motion.actionSpace();\n    };\n    MetaCar.prototype.getState = function (linear) {\n        if (linear === void 0) { linear = false; }\n        return this.level.agent.getState(linear);\n    };\n    MetaCar.prototype.step = function (action) {\n        return this.level.step(1, action);\n    };\n    MetaCar.prototype.reset = function () {\n        this.level.reset();\n    };\n    MetaCar.prototype.randomRoadPosition = function () {\n        var roads = this.level.getRoads();\n        var keys = Object.keys(roads);\n        keys.sort(function () { return Math.random() - 0.5; });\n        for (var k in keys) {\n            var road = roads[keys[k]];\n            if (road.cars.length == 0) {\n                road.setCarPosition(this.level.agent.core);\n                break;\n            }\n        }\n    };\n    MetaCar.prototype.loop = function (fc) {\n        this.loopCallback = fc;\n    };\n    MetaCar.prototype._loop = function (delta) {\n        if (this.event.isPlaying()) {\n            this.event.playCallback();\n   
Line truncated
 
 /***/ }),
 
@@ -299,7 +299,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"loadJSON\", function() { return loadJSON; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"loadEmbeddedURL\", function() { return loadEmbeddedURL; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"loadLocalStorageURL\", function() { return loadLocalStorageURL; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"loadCustomURL\", function() { return loadCustomURL; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"mod\", function() { return mod; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"argMax\", function() { return argMax; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"mean\", function() { return mean; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"saveAs\", function() { return saveAs; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"readDump\", function() { return readDump; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"shuffleArray\", function() { return shuffleArray; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"keyboard\", function() { return keyboard; });\n/* harmony import */ var _embedded__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./embedded */ \"./src/embedded.ts\");\n\nfunction loadJSON(url, callback) {\n    var xobj = new XMLHttpRequest();\n    xobj.overrideMimeType(\"application/json\");\n    xobj.open('GET', url, true);\n    xobj.onreadystatechange = function () {\n        if (xobj.readyState == 4 && xobj.status == 200) {\n            callback(xobj.responseText);\n        }\n    };\n    xobj.send(null);\n}\nfunction loadEmbeddedURL(url, callback) {\n    var split = url.split(\"//\");\n    split = split[1].split(\"/\");\n    callback(_embedded__WEBPACK_IMPORTED_MODULE_0__[\"embeddedContent\"][split[0]][split[1]]);\n}\nfunction loadLocalStorageURL(url, callback) {\n}\nfunction loadCustomURL(url, callback) {\n    var customCall = {\n        \"embedded:\": loadEmbeddedURL,\n        \"http://\": loadJSON,\n        \"https://\": loadJSON,\n        \"localstorage://\": loadLocalStorageURL\n    };\n    var split = url.split(\"//\");\n    customCall[split[0]](url, callback);\n}\nfunction mod(n, m) {\n    return ((n % m) + m) % m;\n}\nfunction argMax(array) {\n    if (array.every(function (v) { return v == -Infinity; })) {\n        return Math.floor(Math.random() * array.length);\n    }\n    return array.map(function (x, i) { return [x, i]; }).reduce(function (r, a) { return (a[0] > r[0] ? a : r); })[1];\n}\nfunction mean(array) {\n    if (array.length == 0)\n        return null;\n    var sum = array.reduce(function (a, b) { return a + b; });\n    var avg = sum / array.length;\n    return avg;\n}\nfunction saveAs(content, name) {\n    var a = document.createElement(\"a\");\n    document.body.appendChild(a);\n    var blob = new Blob([content], { type: 'application/octet-binary' }), tmpURL = window.URL.createObjectURL(blob);\n    a.href = tmpURL;\n    a.download = name;\n    a.click();\n    window.URL.revokeObjectURL(tmpURL);\n    a.href = \"\";\n}\nfunction readDump(dump, callback) {\n    var input = dump.target;\n    var file = input.files[0];\n    var reader = new FileReader();\n    reader.readAsText(file, \"UTF-8\");\n    reader.onload = function (evt) {\n        callback(evt.target.result);\n    };\n}\nfunction shuffleArray(array) {\n    for (var i = array.length - 1; i > 0; i--) {\n        var j = Math.floor(Math.random() * (i + 1));\n        var temp = array[i];\n        array[i] = array[j];\n        array[j] = temp;\n    }\n    return array;\n}\nfunction keyboard(keyCode) {\n    var key = {};\n    key.code = keyCode;\n    key.isDown = false;\n    key.isUp = true;\n    key.press = undefined;\n    key.release = undefined;\n    key.downHandler = function (event) {\n        if (event.keyCode === key.code) {\n            if (key.isUp && key.press)\n                key.press();\n            key.isDown = true;\n            key.isUp = false;\n        }\n    };\n    key.upHandler = function (event) {\n        if (event.keyCode === key.code) {\n            if (key.isDown && key.release)\n                key.release();\n            key.isDown = false;\n            key.isUp = true;\n        }\n    };\n    window.addEventListener(\"keydown\", key.downHandler.bind(key), false);\n    window.addEventListener(\"keyup\", key.upHandler.bind(key), false);\n    return key;\n}\n\n\n//# sourceURL=webpack://metacar/./src/utils.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"loadJSON\", function() { return loadJSON; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"loadEmbeddedURL\", function() { return loadEmbeddedURL; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"loadLocalStorageURL\", function() { return loadLocalStorageURL; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"loadCustomURL\", function() { return loadCustomURL; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"mod\", function() { return mod; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"argMax\", function() { return argMax; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"mean\", function() { return mean; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"saveAs\", function() { return saveAs; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"readDump\", function() { return readDump; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"shuffleArray\", function() { return shuffleArray; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"keyboard\", function() { return keyboard; });\n/* harmony import */ var _embedded__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./embedded */ \"./src/embedded.ts\");\n\nfunction loadJSON(url, callback) {\n    var xobj = new XMLHttpRequest();\n    xobj.overrideMimeType(\"application/json\");\n    xobj.open('GET', url, true);\n    xobj.onreadystatechange = function () {\n        if (xobj.readyState == 4 && xobj.status == 200) {\n            callback(xobj.responseText);\n        }\n    };\n    xobj.send(null);\n}\nfunction loadEmbeddedURL(url, callback) {\n    var split = url.split(\"//\");\n    split = split[1].split(\"/\");\n    callback(_embedded__WEBPACK_IMPORTED_MODULE_0__[\"embeddedContent\"][split[0]][split[1]]);\n}\nfunction loadLocalStorageURL(url, callback) {\n}\nfunction loadCustomURL(url, callback) {\n    var customCall = {\n        \"embedded:\": loadEmbeddedURL,\n        \"http://\": loadJSON,\n        \"https://\": loadJSON,\n        \"localstorage://\": loadLocalStorageURL\n    };\n    var split = url.split(\"//\");\n    customCall[split[0]](url, callback);\n}\nfunction mod(n, m) {\n    return ((n % m) + m) % m;\n}\nfunction argMax(array) {\n    if (array.every(function (v) { return v == -Infinity; })) {\n        return Math.floor(Math.random() * array.length);\n    }\n    return array.map(function (x, i) { return [x, i]; }).reduce(function (r, a) { return (a[0] > r[0] ? a : r); })[1];\n}\nfunction mean(array) {\n    if (array.length == 0)\n        return null;\n    var sum = array.reduce(function (a, b) { return a + b; });\n    var avg = sum / array.length;\n    return avg;\n}\nfunction saveAs(content, name) {\n    var a = document.createElement(\"a\");\n    document.body.appendChild(a);\n    var blob = new Blob([content], { type: 'application/octet-binary' }), tmpURL = window.URL.createObjectURL(blob);\n    a.href = tmpURL;\n    a.download = name;\n    a.click();\n    window.URL.revokeObjectURL(tmpURL);\n    a.href = \"\";\n}\nfunction readDump(dump, callback) {\n    var input = dump.target;\n    var file = input.files[0];\n    var reader = new FileReader();\n    reader.readAsText(file, \"UTF-8\");\n    reader.onload = function (evt) {\n        callback(evt.target.result);\n    };\n}\nfunction shuffleArray(array) {\n    for (var i = array.length - 1; i > 0; i--) {\n        var j = Math.floor(Math.random() * (i + 1));\n        var temp = array[i];\n        array[i] = array[j];\n        array[j] = temp;\n    }\n    return array;\n}\nfunction keyboard(keyCode) {\n    var key = {};\n    key.code = keyCode;\n    key.isDown = false;\n    key.isUp = true;\n    key.press = undefined;\n    key.release = undefined;\n    key.downHandler = function (event) {\n        if (event.keyCode === key.code) {\n            if (key.isUp && key.press)\n                key.press();\n            key.isDown = true;\n            key.isUp = false;\n        }\n        event.preventDefault();\n    };\n    key.upHandler = function (event) {\n        if (event.keyCode === key.code) {\n            if (key.isDown && key.release)\n                key.release();\n            key.isDown = false;\n            key.isUp = true;\n        }\n        event.preventDefault();\n    };\n    window.addEventListener(\"keydown\", key.downHandler.bind(key), false);\n    window.addEventListener(\"keyup\", key.upHandler.bind(key), false);\n    return key;\n}\n\n\n//# sourceURL=webpack://metacar/./src/utils.ts?");
 
 /***/ }),
 

src/asset_manager.ts

@@ -250,7 +250,7 @@ export class AssetManger {
         }
     }
 
-    createAgent(map: (string|number)[][], info: any, textures: (PIXI.Texture|PIXI.loaders.TextureDictionary)){
+    createAgent(map: (string|number)[][], info: any, textures: (PIXI.Texture|PIXI.loaders.TextureDictionary), displayLidar:boolean=true){
         /*
             Method used to create the agent's car.
             @map (2dim Array)
@@ -263,8 +263,9 @@ export class AssetManger {
             lidarInfo: this.agentLidarInfo,
             motionEngine: new this.agentMotionEngine(<Level>this.level, this.agentMotionOptions)
         });
-
-        this.level.addChild(agent.lidar);
+        if (displayLidar){
+            this.level.addChild(agent.lidar);
+        }
         this.level.addCar(agent);
         agent.core.agent = true;
 

src/editor.ts

@@ -42,7 +42,7 @@ export class Editor extends World {
         this.am.createMap(this.map, info, textures, false);
         this.am.createCars(this.map, info, textures);
         if (info.agent)
-            this.agent = this.am.createAgent(this.map, info, textures);
+            this.agent = this.am.createAgent(this.map, info, textures, false);
 
         var that = this;
         for (var i = 0; i < this.envs.length; i++) {

src/global.ts

@@ -13,7 +13,7 @@ export const Graphics      = PIXI.Graphics;
 export const Container     = PIXI.Container;
 
 // Main server
-export const URL = "http://localhost:3000/";
+export const URL = window.location.href.indexOf("localhost") == -1 ? "https://metacar-project.com/" : "http://localhost:3000/";
 
 // Textures files
 export const JSON_TEXTURES = URL + "public/textures/textures.json";
@@ -27,7 +27,7 @@ export const ROADSIZE = 60;
 
 export interface CARIMGI{
     DEFAULT: string;
-    AGENT: string;    
+    AGENT: string;
 }
 
 export const CAR_IMG: CARIMGI = {

src/level.ts

@@ -27,6 +27,7 @@ export interface Roads {
 export class Level extends World {
 
     public isCarsMoving: boolean = true;
+    private lastReward: number = 0;
 
     constructor(levelContent: LevelInfo, canvasId: string) {
         /*
@@ -104,16 +105,23 @@ export class Level extends World {
         if (action == 0 || this.agent.core.v == 1)
             reward += 0.5;
         if (agent_col.length > 0){
-            console.log("collision!");
             reward = -10;
         }
         else if (!on_road){
-            console.log("out");
             reward = -10;
         }
+        this.lastReward = reward;
         return reward;
     }
 
+    /**
+     * Return the last reward given by the environement
+     */
+    public getLastReward(): number{
+        return this.lastReward;
+    }
+
+
     step(delta: number, action:number|number[]=null){
         /*
             Process one step into the environement

src/metacar.ts

@@ -31,6 +31,7 @@ export class MetaCar {
     private agentMotionOptions: BasicMotionOptions = {}
     private agentLidarInfo: LidarInfoI;
     private isCarsMoving: boolean = true;
+    private loopCallback: any = undefined;
 
     /**
      * Class used to create a new environement.
@@ -84,6 +85,13 @@ export class MetaCar {
         this.isCarsMoving = moving;
     }
 
+    /**
+     * Return the last reward given by the environement
+     */
+    public getLastReward(): number{
+        return this.level.getLastReward();
+    }
+
     /**
      * options Options to change the lidar options of the agent.
      * This method should be called before to called 'load'.
@@ -209,6 +217,15 @@ export class MetaCar {
         }
     }
 
+    /**
+     * Using thid method you can call your own method
+     * at each loop update.
+     * @fc method to call at each loop update
+     */
+    public loop(fc: any){
+        this.loopCallback = fc;
+    }
+
     /**
      * @delta Time since the last update
      */
@@ -219,6 +236,9 @@ export class MetaCar {
         else {
             this.level.step(delta);
         }
+        if (this.loopCallback){
+            this.loopCallback();
+        }
     }
 
     /**

src/utils.ts

@@ -172,7 +172,7 @@ export function keyboard(keyCode: any ) {
         key.isDown = true;
         key.isUp = false;
       }
-      //event.preventDefault();
+      event.preventDefault();
     };
   
     key.upHandler = (event: any) => {
@@ -181,7 +181,7 @@ export function keyboard(keyCode: any ) {
         key.isDown = false;
         key.isUp = true;
       }
-      //event.preventDefault();
+      event.preventDefault();
     };
 
     //Attach event listeners