React-pixi based architecture

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
   extends: [
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
     'prettier',
     'prettier/@typescript-eslint',
   ],
@@ -35,7 +36,7 @@ module.exports = {
       {
         groups: [
           // pixi.js first
-          ['^pixi.js'],
+          ['^react$', '^pixi.js', '^@inlet/react-pixi$'],
           // Side effect imports.
           ['^\\u0000'],
           // Packages.
@@ -61,5 +62,6 @@ module.exports = {
         ignoreRestSiblings: true,
       },
     ],
+    'react/prop-types': 'off',
   },
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ash-r1/vn.js",
-  "version": "0.0.17",
+  "version": "0.1.0-alpha.0",
   "repository": "git@github.com:ash-r1/VN.js.git",
   "author": "Ash <ash.suzuki.r1@gmail.com>",
   "license": "MPL-2.0",
@@ -29,6 +29,8 @@
     "types"
   ],
   "dependencies": {
+    "@inlet/react-pixi": "^6.0.6",
+    "@reduxjs/toolkit": "^1.5.0",
     "chalk": "^4.1.0",
     "change-case": "^4.1.1",
     "chokidar": "^3.4.2",
@@ -40,6 +42,11 @@
     "pixi-sound": "^3.0.5",
     "pixi.js": "^5.3.3",
     "raw-loader": "^4.0.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-redux": "^7.2.2",
+    "redux": "^4.0.5",
+    "redux-saga": "^1.1.3",
     "watch": "^1.0.2"
   },
   "devDependencies": {
@@ -54,12 +61,15 @@
     "@types/fontfaceobserver": "^0.0.6",
     "@types/jest": "^26.0.13",
     "@types/parsimmon": "^1.10.2",
+    "@types/react": "^17.0.0",
+    "@types/react-redux": "^7.1.12",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
     "babel-jest": "^26.3.0",
     "eslint": "^7.0.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-simple-import-sort": "^5.0.3",
     "jest": "^26.4.2",
     "prettier": "^2.0.5",

src/engine/BaseEngine.ts

@@ -0,0 +1,41 @@
+import * as PIXI from 'pixi.js';
+
+import Control from './modules/control';
+import Image from './modules/image';
+import Message from './modules/message';
+import { Scenarios } from './scenario';
+import ScenarioController from './scenario/ScenarioController';
+
+export default abstract class BaseEngine {
+  app?: PIXI.Application;
+  worldContainer?: PIXI.Container;
+  scenarioController: ScenarioController;
+  _: Control;
+  image: Image;
+  message: Message;
+
+  constructor(scenarios: Scenarios<BaseEngine>) {
+    this.scenarioController = new ScenarioController(scenarios);
+    this.image = new Image();
+    this.message = new Message('game/textbox.png', {
+      layout: {
+        y: 630,
+        height: 420,
+        width: 1920,
+        padding: {
+          left: 450,
+          top: 100,
+        },
+      },
+      style: {
+        fontFamily: 'Noto Serif JP',
+        fill: '#1e1e1e',
+        align: 'left',
+        fontSize: 36,
+        fontWeight: '500',
+        lineHeight: 50,
+      },
+    });
+    this._ = new Control();
+  }
+}

src/engine/GameLayer.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Container, Stage } from '@inlet/react-pixi';
+
+import { Provider } from 'react-redux';
+
+import { BaseStore } from '../redux';
+import BaseEngine from './BaseEngine';
+import World from './components/World';
+import { EngineProvider } from './provider';
+
+interface Props {
+  // TOOD: Config here?
+  width: number;
+  height: number;
+  components?: Record<string, React.ComponentType<any>>;
+}
+
+// TODO: 外から渡したパラメータを元にstoreをextend出来ること
+//       もしくはProviderで包むのはゲーム側の責務にする(事もできる)ようにすること？ 単にpropsでStore渡して、その型を型推論するようにしてもいいかもしれない。
+export const Game: React.FC<Props> = (props) => {
+  return (
+    <Container name="game">
+      <World {...props} />
+    </Container>
+  );
+};
+
+interface GameProps extends Props {
+  store: BaseStore;
+  engine: BaseEngine;
+}
+
+const GameLayer: React.FC<GameProps> = (props) => {
+  const { store, width, height, engine, ...others } = props;
+  return (
+    <Stage
+      width={width}
+      height={height}
+      options={{ antialias: true, autoDensity: true }}
+    >
+      <EngineProvider value={engine}>
+        <Provider store={store}>
+          <Game width={width} height={height} {...others} />
+        </Provider>
+      </EngineProvider>
+    </Stage>
+  );
+};
+
+export default GameLayer;