react-simple-game-engine 0.0.1

package/README.md

@@ -0,0 +1,46 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

package/lib/classes/animations/animation.js

@@ -0,0 +1,35 @@
+var AnimationSprite = /** @class */ (function () {
+    function AnimationSprite() {
+        this.currentFrame = 0;
+        this._isRunning = true;
+        this.timeCounter = 0;
+        this.delatime = 1 / 30;
+    }
+    Object.defineProperty(AnimationSprite.prototype, "isRunning", {
+        set: function (_isRunning) {
+            this._isRunning = _isRunning;
+            if (!_isRunning) {
+                // stop
+                this.timeCounter = 0;
+                this.currentFrame = 0;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    AnimationSprite.prototype.draw = function () {
+        if (this.checkFrameMax()) {
+            this.currentFrame = 0;
+        }
+        this.onDraw();
+        if (this.timeCounter / 1000 >= this.delatime) {
+            this.timeCounter = 0;
+            if (this._isRunning) {
+                this.currentFrame++;
+            }
+        }
+        this.timeCounter += Renderer.deltaTime;
+    };
+    return AnimationSprite;
+}());
+export { AnimationSprite };

package/lib/classes/animations/avatar.animation.js

@@ -0,0 +1,63 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { AnimationSprite } from "./animation";
+var AvatarAnimationSprite = /** @class */ (function (_super) {
+    __extends(AvatarAnimationSprite, _super);
+    function AvatarAnimationSprite() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    AvatarAnimationSprite.prototype.initial = function (_a) {
+        var _b = _a.offsetX, offsetX = _b === void 0 ? 0 : _b, _c = _a.offsetY, offsetY = _c === void 0 ? 0 : _c, options = __rest(_a, ["offsetX", "offsetY"]);
+        this.options = __assign({ offsetX: offsetX, offsetY: offsetY }, options);
+    };
+    AvatarAnimationSprite.prototype.checkFrameMax = function () {
+        var _a = this.options, offsetWidth = _a.offsetWidth, offsetX = _a.offsetX;
+        return (this.currentFrame * offsetWidth + offsetX >= this.source.sprite.width);
+    };
+    AvatarAnimationSprite.prototype.onDraw = function () {
+        var source = this.source;
+        var _a = this.options, offsetWidth = _a.offsetWidth, offsetHeight = _a.offsetHeight, offsetX = _a.offsetX, offsetY = _a.offsetY;
+        Renderer.image(source.sprite, 
+        // position on canvas
+        0, 0, source.width, source.height, 
+        //crop on source image
+        this.currentFrame * offsetWidth + offsetX, offsetY, offsetWidth, offsetHeight);
+    };
+    return AvatarAnimationSprite;
+}(AnimationSprite));
+export { AvatarAnimationSprite };

package/lib/classes/animations/color.animation.js

@@ -0,0 +1,33 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { AnimationSprite } from "./animation";
+var ColorAnimationSprite = /** @class */ (function (_super) {
+    __extends(ColorAnimationSprite, _super);
+    function ColorAnimationSprite() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ColorAnimationSprite.prototype.initial = function (colors) {
+        this.colors = colors;
+    };
+    ColorAnimationSprite.prototype.checkFrameMax = function () {
+        return this.currentFrame >= this.colors.length;
+    };
+    ColorAnimationSprite.prototype.onDraw = function () {
+        Renderer.fill.apply(Renderer, this.colors[this.currentFrame]);
+    };
+    return ColorAnimationSprite;
+}(AnimationSprite));
+export { ColorAnimationSprite };

package/lib/classes/camera.js

@@ -0,0 +1,34 @@
+var Camera = /** @class */ (function () {
+    function Camera(_width, _height) {
+        this._width = _width;
+        this._height = _height;
+        this.x = 0;
+        this.y = 0;
+        this.scaleX = 1;
+        this.scaleY = 1;
+    }
+    Object.defineProperty(Camera.prototype, "width", {
+        get: function () {
+            return this._width;
+        },
+        set: function (width) {
+            this._width = width;
+            Renderer.resizeCanvas(this._width, this._height);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Camera.prototype, "height", {
+        get: function () {
+            return this._height;
+        },
+        set: function (height) {
+            this._height = height;
+            Renderer.resizeCanvas(this._width, this._height);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return Camera;
+}());
+export { Camera };

package/lib/classes/entities/circle.entity.js

@@ -0,0 +1,42 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { Bodies } from "matter-js";
+import { Entity } from "./entity";
+var CircleEntity = /** @class */ (function (_super) {
+    __extends(CircleEntity, _super);
+    function CircleEntity() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CircleEntity.prototype.onSpriteWidthHeightBinding = function () {
+        return {
+            width: this.radius * 2,
+            height: this.radius * 2,
+        };
+    };
+    CircleEntity.prototype.onInitial = function () {
+        return {
+            transform: {
+                radius: 5,
+            },
+        };
+    };
+    CircleEntity.prototype.onCreateBody = function (transform, options) {
+        this.radius = transform.radius;
+        return Bodies.circle(transform.x, transform.y, transform.radius, options);
+    };
+    return CircleEntity;
+}(Entity));
+export { CircleEntity };

package/lib/classes/entities/entity.js

@@ -0,0 +1,90 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { ColorSprite } from "../sprites/color.sprite";
+var Entity = /** @class */ (function () {
+    function Entity() {
+        this.id = "".concat(Math.random(), "-").concat(new Date().getTime());
+        this.tag = this.constructor.tag;
+    }
+    Object.defineProperty(Entity.prototype, "sprite", {
+        get: function () {
+            return this._sprite;
+        },
+        set: function (sprite) {
+            this._sprite = sprite;
+            this._sprite.entity = this;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Entity.prototype, "position", {
+        get: function () {
+            return this._body.position;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Entity.prototype, "body", {
+        get: function () {
+            return this._body;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Entity.prototype.active = function (worldManagement) {
+        console.log("Initted ".concat(this.tag, " entity (id : ").concat(this.id, ")"));
+        this.worldManagement = worldManagement;
+        this.onActive();
+    };
+    Entity.prototype.onActive = function () { };
+    Entity.prototype.createBody = function (transform, options) {
+        this._body = this.onCreateBody(transform, options);
+        this._body.entity = this;
+        return this._body;
+    };
+    Entity.prototype.initial = function (_a) {
+        var sound = _a.sound, _b = _a.transform, transform = _b === void 0 ? {} : _b, spriteComponent = _a.sprite, _c = _a.bodyOptions, bodyOptions = _c === void 0 ? {} : _c;
+        var _d = this.onInitial(), _e = _d.transform, _f = _e === void 0 ? {} : _e, _g = _f.x, x = _g === void 0 ? 0 : _g, _h = _f.y, y = _h === void 0 ? 0 : _h, dfTransform = __rest(_f, ["x", "y"]), dfBodyOptions = _d.bodyOptions, dfSpriteComponent = _d.sprite;
+        var _j = this.onPrepare(), transformAlt = _j.transform, bodyOptionsAlt = _j.bodyOptions, spriteComponentAlt = _j.sprite;
+        this.createBody(__assign(__assign(__assign({ x: x, y: y }, dfTransform), transform), transformAlt), __assign(__assign(__assign({}, dfBodyOptions), bodyOptions), bodyOptionsAlt));
+        this.sound = sound;
+        this.sprite =
+            (dfSpriteComponent === null || dfSpriteComponent === void 0 ? void 0 : dfSpriteComponent.output()) ||
+                (spriteComponent === null || spriteComponent === void 0 ? void 0 : spriteComponent.output()) ||
+                (spriteComponentAlt === null || spriteComponentAlt === void 0 ? void 0 : spriteComponentAlt.output()) ||
+                new ColorSprite();
+    };
+    Entity.prototype.onPrepare = function () {
+        return {};
+    };
+    Entity.prototype.update = function () {
+        this.onUpdate();
+    };
+    Entity.prototype.onUpdate = function () { };
+    Entity.prototype.draw = function () {
+        this.sprite.draw();
+    };
+    Entity.prototype.onCollision = function (target) { };
+    return Entity;
+}());
+export { Entity };

package/lib/classes/entities/rect.entity.js

@@ -0,0 +1,44 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { Bodies } from "matter-js";
+import { Entity } from "./entity";
+var RectEntity = /** @class */ (function (_super) {
+    __extends(RectEntity, _super);
+    function RectEntity() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    RectEntity.prototype.onSpriteWidthHeightBinding = function () {
+        return {
+            width: this.width,
+            height: this.height,
+        };
+    };
+    RectEntity.prototype.onInitial = function () {
+        return {
+            transform: {
+                width: 10,
+                height: 10,
+            },
+        };
+    };
+    RectEntity.prototype.onCreateBody = function (transform, options) {
+        this.width = transform.width;
+        this.height = transform.height;
+        return Bodies.rectangle(transform.x, transform.y, transform.width, transform.height, options);
+    };
+    return RectEntity;
+}(Entity));
+export { RectEntity };

package/lib/classes/logic-component.js

@@ -0,0 +1,13 @@
+var LogicComponent = /** @class */ (function () {
+    function LogicComponent(configale) {
+        var _a = Array.isArray(configale) ? configale : [configale], Class = _a[0], params = _a[1];
+        var c = new Class();
+        c.initial(params);
+        this.instance = c;
+    }
+    LogicComponent.prototype.output = function () {
+        return this.instance;
+    };
+    return LogicComponent;
+}());
+export { LogicComponent };

package/lib/classes/scene-management.js

@@ -0,0 +1,38 @@
+var SceneManagement = /** @class */ (function () {
+    function SceneManagement(Scenes) {
+        this.Scenes = Scenes;
+        this._currentScene = new Scenes[0]();
+        this._currentScene.manager = this;
+    }
+    SceneManagement.getTag = function (Scene) {
+        return Scene.tag;
+    };
+    Object.defineProperty(SceneManagement.prototype, "currentScene", {
+        get: function () {
+            return this._currentScene;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SceneManagement.prototype.onChangeScene = function (func) {
+        this.changeSceneListener = func;
+    };
+    SceneManagement.prototype.gotoScene = function (tag) {
+        var _a;
+        for (var _i = 0, _b = this.Scenes; _i < _b.length; _i++) {
+            var Scene_1 = _b[_i];
+            var _tag = SceneManagement.getTag(Scene_1);
+            if (_tag === tag) {
+                if (this._currentScene) {
+                    this._currentScene.destructor();
+                }
+                this._currentScene = new Scene_1();
+                this._currentScene.manager = this;
+                (_a = this.changeSceneListener) === null || _a === void 0 ? void 0 : _a.call(this, this._currentScene);
+                break;
+            }
+        }
+    };
+    return SceneManagement;
+}());
+export { SceneManagement };

package/lib/classes/scene.js

@@ -0,0 +1,122 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { WorldManagement } from "./world-management";
+var Scene = /** @class */ (function () {
+    function Scene() {
+        this.sessionId = "".concat(Math.random(), "-").concat(new Date().getTime());
+        this.tag = this.constructor.tag;
+        this.ui = this.constructor.ui;
+        this._loadedAssets = false;
+    }
+    Object.defineProperty(Scene.prototype, "UI", {
+        get: function () {
+            var Ui = this.ui || (function () { return null; });
+            return Ui;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Scene.prototype, "UIProps", {
+        get: function () {
+            return this.getUIProps();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Scene.prototype.getUIProps = function () {
+        return {};
+    };
+    Object.defineProperty(Scene.prototype, "loadedAssets", {
+        get: function () {
+            return this._loadedAssets;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Scene.prototype.onLoadAssetNotify = function (func) {
+        this.loadAssetsListener = func;
+    };
+    Scene.prototype.destructor = function () {
+        this.worldManagement.destructor();
+    };
+    Scene.prototype.setLoadAssetStatus = function (loadedAssets) {
+        var _a;
+        this._loadedAssets = loadedAssets;
+        (_a = this.loadAssetsListener) === null || _a === void 0 ? void 0 : _a.call(this, loadedAssets);
+    };
+    Scene.prototype.switchToScene = function (tag) {
+        this.manager.gotoScene(tag);
+    };
+    Scene.prototype.loadAssets = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        this.setLoadAssetStatus(false);
+                        return [4 /*yield*/, this.onLoadAssets().catch(function (err) {
+                                console.warn("Load assets fail", err.toString());
+                            })];
+                    case 1:
+                        _a.sent();
+                        this.setLoadAssetStatus(true);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    Scene.prototype.onLoadAssets = function () {
+        return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) {
+            return [2 /*return*/];
+        }); });
+    };
+    Scene.prototype.bootstrap = function (camera) {
+        this.worldManagement = new WorldManagement();
+        var components = this.getComponents();
+        for (var _i = 0, components_1 = components; _i < components_1.length; _i++) {
+            var component = components_1[_i];
+            var entity = component.output();
+            entity.camera = camera;
+            this.worldManagement.addEntity(entity);
+        }
+    };
+    Scene.prototype.action = function () {
+        this.worldManagement.update();
+        this.worldManagement.draw();
+    };
+    return Scene;
+}());
+export { Scene };

package/lib/classes/sprites/avatar.sprite.js

@@ -0,0 +1,38 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { Sprite } from "./sprite";
+var AvatarSprite = /** @class */ (function (_super) {
+    __extends(AvatarSprite, _super);
+    function AvatarSprite() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    AvatarSprite.prototype.onDraw = function () {
+        if (this.sprite) {
+            if (this.animation) {
+                this.animation.draw();
+            }
+            else {
+                Renderer.image(this.sprite, 
+                // position on canvas
+                0, 0, this.width, this.height, 
+                //crop on source image
+                0, 0, this.sprite.width, this.sprite.height);
+            }
+        }
+    };
+    return AvatarSprite;
+}(Sprite));
+export { AvatarSprite };

package/lib/classes/sprites/color.sprite.js

@@ -0,0 +1,40 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { Sprite } from "./sprite";
+var ColorSprite = /** @class */ (function (_super) {
+    __extends(ColorSprite, _super);
+    function ColorSprite() {
+        var _this = _super.call(this) || this;
+        _this.sprite = [255, 255, 255];
+        return _this;
+    }
+    ColorSprite.prototype.onDraw = function () {
+        if (this.animation) {
+            this.animation.draw();
+        }
+        else {
+            Renderer.fill.apply(Renderer, this.sprite);
+        }
+        if (this.entity.width != null) {
+            Renderer.rect(0, 0, this.width, this.height);
+        }
+        else {
+            Renderer.circle(0, 0, this.width);
+        }
+    };
+    return ColorSprite;
+}(Sprite));
+export { ColorSprite };

package/lib/classes/sprites/sprite.js

@@ -0,0 +1,70 @@
+import { LogicComponent } from "../logic-component";
+var Sprite = /** @class */ (function () {
+    function Sprite() {
+    }
+    Object.defineProperty(Sprite.prototype, "animation", {
+        get: function () {
+            return this._animation;
+        },
+        set: function (ani) {
+            this._animation = ani;
+            this._animation.source = this;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Sprite.prototype, "entity", {
+        get: function () {
+            return this._entity;
+        },
+        set: function (entity) {
+            this._entity = entity;
+            var _a = this._entity.onSpriteWidthHeightBinding(), width = _a.width, height = _a.height;
+            this._width = width;
+            this._height = height;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Sprite.prototype, "width", {
+        get: function () {
+            return this._width;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Sprite.prototype, "height", {
+        get: function () {
+            return this._height;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Sprite.prototype.draw = function () {
+        var _a = this.entity, body = _a.body, position = _a.position, camera = _a.camera;
+        Renderer.push();
+        Renderer.noStroke();
+        Renderer.translate(position.x - camera.x, position.y - camera.y);
+        Renderer.rotate(body.angle);
+        this.onDraw();
+        Renderer.pop();
+    };
+    Sprite.prototype.initial = function (params) {
+        if (params) {
+            for (var key in params) {
+                // @ts-ignore
+                var P = params[key];
+                if (P instanceof LogicComponent) {
+                    // @ts-ignore
+                    this[key] = P.output();
+                }
+                else {
+                    // @ts-ignore
+                    this[key] = P;
+                }
+            }
+        }
+    };
+    return Sprite;
+}());
+export { Sprite };

package/lib/classes/world-management.js

@@ -0,0 +1,45 @@
+import { Engine, World, Events } from "matter-js";
+var WorldManagement = /** @class */ (function () {
+    function WorldManagement() {
+        this.entities = [];
+        this.engine = Engine.create();
+        Events.on(this.engine, "collisionStart", function (event) {
+            var pairs = event.pairs;
+            for (var _i = 0, pairs_1 = pairs; _i < pairs_1.length; _i++) {
+                var pair = pairs_1[_i];
+                var _a = pair, bodyA = _a.bodyA, bodyB = _a.bodyB;
+                bodyA.entity.onCollision(bodyB.entity);
+                bodyB.entity.onCollision(bodyA.entity);
+            }
+        });
+    }
+    WorldManagement.prototype.destructor = function () {
+        World.clear(this.engine.world, false);
+        Engine.clear(this.engine);
+    };
+    WorldManagement.prototype.addEntity = function (entity) {
+        this.entities.push(entity);
+        World.add(this.engine.world, entity.body);
+        entity.active(this);
+    };
+    WorldManagement.prototype.removeEntity = function (entity) {
+        World.remove(this.engine.world, entity.body);
+        this.entities.splice(this.entities.indexOf(entity), 1);
+    };
+    WorldManagement.prototype.update = function () {
+        Engine.update(this.engine);
+        for (var _i = 0, _a = this.entities; _i < _a.length; _i++) {
+            var entity = _a[_i];
+            entity.update();
+        }
+    };
+    WorldManagement.prototype.draw = function () {
+        Renderer.background(41, 41, 41);
+        for (var _i = 0, _a = this.entities; _i < _a.length; _i++) {
+            var entity = _a[_i];
+            entity.draw();
+        }
+    };
+    return WorldManagement;
+}());
+export { WorldManagement };

package/lib/decorators/entity-tag.decor.js

@@ -0,0 +1,5 @@
+export function EntityTag(tag) {
+    return function (target) {
+        target.tag = tag;
+    };
+}

package/lib/decorators/scene-tag.decor.js

@@ -0,0 +1,5 @@
+export function SceneTag(tag) {
+    return function (target) {
+        target.tag = tag;
+    };
+}

package/lib/decorators/scene-ui.decor.js

@@ -0,0 +1,5 @@
+export function SceneUI(ui) {
+    return function (target) {
+        target.ui = ui;
+    };
+}

package/lib/export-types.js

@@ -0,0 +1 @@
+export {};

package/lib/index.js

@@ -0,0 +1,15 @@
+export { createAssetImage, createAssetSound } from "./utils";
+export { AvatarAnimationSprite } from "./classes/animations/avatar.animation";
+export { ColorAnimationSprite } from "./classes/animations/color.animation";
+export { CircleEntity } from "./classes/entities/circle.entity";
+export { RectEntity } from "./classes/entities/rect.entity";
+export { LogicComponent } from "./classes/logic-component";
+export { AvatarSprite } from "./classes/sprites/avatar.sprite";
+export { ColorSprite } from "./classes/sprites/color.sprite";
+export { Scene } from "./classes/scene";
+export { EntityTag } from "./decorators/entity-tag.decor";
+export { SceneTag } from "./decorators/scene-tag.decor";
+export { SceneUI } from "./decorators/scene-ui.decor";
+export { ScenesProcess } from "./ui-components/ScenesProcess";
+export * from "./export-types";
+export var Renderer = window.Renderer;

package/lib/ui-components/SceneRunner.js

@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { Sketch } from "./Sketch";
+export function SceneRunner(_a) {
+    var current = _a.current, width = _a.width, height = _a.height;
+    useEffect(function () {
+        current.loadAssets();
+    }, [current]);
+    var setup = function (camera) {
+        current.bootstrap(camera);
+    };
+    var draw = function () {
+        current.action();
+    };
+    return current.loadedAssets ? (_jsxs("div", __assign({ style: { width: width, height: height, position: "relative" } }, { children: [_jsx(Sketch, { width: width, height: height, onSetup: setup, onDraw: draw }), _jsx("div", __assign({ style: {
+                    position: "absolute",
+                    top: 0,
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    userSelect: "none",
+                    zIndex: 2,
+                } }, { children: _jsx(current.UI, __assign({}, current.UIProps)) }))] }))) : (_jsx("div", { children: "Assets loading..." }));
+}

package/lib/ui-components/ScenesProcess.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { SceneManagement } from "../classes/scene-management";
+import { SceneRunner } from "./SceneRunner";
+export function ScenesProcess(_a) {
+    var list = _a.list, width = _a.width, height = _a.height;
+    var sceneManagement = useMemo(function () {
+        return new SceneManagement(list);
+    }, [list]);
+    var _b = useState(sceneManagement.currentScene), currentScene = _b[0], setCurrentScene = _b[1];
+    var _c = useState(currentScene.loadedAssets), setLoadedAssets = _c[1];
+    useEffect(function () {
+        sceneManagement.onChangeScene(function (scene) {
+            setCurrentScene(scene);
+            setLoadedAssets(scene.loadedAssets);
+        });
+    }, [sceneManagement]);
+    useEffect(function () {
+        currentScene.onLoadAssetNotify(function (isLoaded) {
+            setLoadedAssets(isLoaded);
+        });
+    }, [currentScene]);
+    return (_jsx(SceneRunner, { current: currentScene, width: width, height: height }, currentScene.sessionId));
+}

package/lib/ui-components/Sketch.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import p5 from "p5";
+import { useEffect, useRef } from "react";
+import { Camera } from "../classes/camera";
+export function Sketch(_a) {
+    var onSetup = _a.onSetup, onDraw = _a.onDraw, onPreload = _a.onPreload, width = _a.width, height = _a.height;
+    var refContainer = useRef(null);
+    useEffect(function () {
+        var sketch = function (s) {
+            window.Renderer = s;
+            var camera;
+            s.preload = function () {
+                return onPreload === null || onPreload === void 0 ? void 0 : onPreload();
+            };
+            s.setup = function () {
+                camera = new Camera(width, height);
+                s.createCanvas(width, height).parent(refContainer.current);
+                onSetup(camera);
+                //@ts-ignore
+                window.camera = camera;
+            };
+            s.draw = function () {
+                s.scale(camera.scaleX, camera.scaleY);
+                s.background(0);
+                s.imageMode(s.CENTER);
+                s.rectMode(s.CENTER);
+                onDraw();
+                // if (s.keyIsDown(s.DOWN_ARROW)) {
+                //   camera.y += 2;
+                // }
+                // if (s.keyIsDown(s.UP_ARROW)) {
+                //   camera.y -= 2;
+                // }
+                // if (s.keyIsDown(s.LEFT_ARROW)) {
+                //   camera.x -= 2;
+                // }
+                // if (s.keyIsDown(s.RIGHT_ARROW)) {
+                //   camera.x += 2;
+                // }
+            };
+        };
+        new p5(sketch);
+        // eslint-disable-next-line
+    }, []);
+    return _jsx("div", { style: { backgroundColor: "#000" }, ref: refContainer });
+}

package/lib/utils.js

@@ -0,0 +1,75 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import OutofScopeP5 from "p5";
+var outofScopeP5;
+document.addEventListener("DOMContentLoaded", function () {
+    var noop = document.createElement("div");
+    noop.style.position = "absolute";
+    noop.style.zIndex = "-1";
+    noop.style.top = "-100%";
+    noop.style.left = "-100%";
+    document.body.appendChild(noop);
+    setTimeout(function () {
+        outofScopeP5 = new OutofScopeP5(function (skt) { }, noop);
+    }, 0);
+});
+export function createAssetImage(src) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/, new Promise(function (res, rej) {
+                    outofScopeP5.loadImage(src, res, rej);
+                })];
+        });
+    });
+}
+export function createAssetSound(src) {
+    return __awaiter(this, void 0, void 0, function () {
+        var media;
+        return __generator(this, function (_a) {
+            media = new Audio();
+            return [2 /*return*/, new Promise(function (res, rej) {
+                    media.onloadedmetadata = function () {
+                        res(media);
+                    };
+                    media.onerror = function (error) {
+                        rej(error);
+                    };
+                    media.src = src;
+                })];
+        });
+    });
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "react-simple-game-engine",
+  "version": "0.0.1",
+  "description": "",
+  "main": "lib/index.js",
+  "types": "lib",
+  "repository": "https://github.com/phucsang0spt/react-simple-game-engine",
+  "dependencies": {
+    "matter-js": "^0.18.0",
+    "p5": "^1.4.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "scripts": {
+    "build": "rm -rf lib && tsc -p .",
+    "publish": "npm publish"
+  },
+  "files": [
+    "/lib"
+  ],
+  "keywords": [
+    "game engine",
+    "matter.js game",
+    "p5.js game",
+    "matter js game",
+    "p5 js game",
+    "js game",
+    "canvas game",
+    "react game",
+    "react game engine",
+    "react simple game engine",
+    "reactjs game",
+    "reactjs game engine",
+    "reactjs simple game engine"
+  ],
+  "devDependencies": {
+    "typescript": "^4.4.2",
+    "@types/matter-js": "^0.17.7",
+    "@types/node": "^16.7.13",
+    "@types/p5": "^1.4.2",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0"
+  }
+}