Merge pull request #1 from MatsMaker/develop

Develop

README.md

@@ -1,10 +1,28 @@
-# Example using webpack and pixijsv5 and pixi-inspector extension tools
+# Description
 
+Example use **redux** with **pixijs**
+
+# How use
+
+### Run dev mode
 ```
 npm start
 ```
+Then go to http://localhost:8080
 
+### Make build
 ```
 npm run build
 ```
 
+# Description game
+
+Card size 3*2 fields + filed for bonus
+Classic scratcher game where User needs to find 3 symbols to win coins/cash.
+Also User has a bonus filed which will contain some guaranteed prize
+ User scratches the field to check the symbols, in case 3 symbols are the same – User gets a payout.
+
+## Screenshots
+
+![Alt text](screenshots/screen_1.png)
+![Alt text](screenshots/screen_2.png)

package.json

@@ -1,26 +1,32 @@
 {
     "name": "getting_started_with_webpack_and_es6_modules",
-    "version": "0.1.0",
+    "version": "1.0.0",
     "description": "Getting started with webpack and ES6 modules",
     "scripts": {
         "start": "cross-env NODE_ENV=development webpack-dev-server --open",
         "watch": "webpack --watch",
-        "build": "webpack"
+        "build": "cross-env NODE_ENV=production webpack"
     },
     "license": "MIT",
     "dependencies": {
+        "@types/gsap": "^1.20.2",
         "@types/lodash": "^4.14.140",
         "es6-promisify": "^6.0.2",
+        "gsap": "^2.1.3",
         "inversify": "^5.0.1",
+        "ismobilejs": "^1.0.3",
         "lodash": "^4.17.15",
         "path": "^0.12.7",
+        "pixi-spine": "^2.1.3",
         "pixi.js": "^5.1.5",
         "redux": "^4.0.4",
         "reflect-metadata": "^0.1.13",
-        "three-orbitcontrols": "^2.108.1"
+        "three-orbitcontrols": "^2.108.1",
+        "webfontloader": "^1.6.28"
     },
     "devDependencies": {
         "@types/node": "^12.7.8",
+        "@types/webfontloader": "^1.6.29",
         "clean-webpack-plugin": "^3.0.0",
         "copy-webpack-plugin": "^5.0.4",
         "cross-env": "^6.0.0",

src/containers/AContainer/ABaseContainer.ts

@@ -0,0 +1,62 @@
+import { Container } from 'pixi.js';
+import { injectable } from 'inversify';
+import Config from '../../core/config/Config';
+import AssetsLoader from '../../core/assetsLoader/AssetsLoader';
+import { StoreType } from 'store';
+import { onEvent } from '../../utils/store.subscribe';
+import ViewPort from '../../core/viewPort/ViewPort';
+
+@injectable()
+abstract class ABaseContainer {
+
+	protected store: StoreType
+	protected config: Config
+	protected assetsLoader: AssetsLoader
+	protected viewPort: ViewPort
+	protected container: Container
+	protected name: string = 'AContainer'
+	protected zIndex: number = 0
+
+	constructor(
+	) {
+	}
+
+	get view(): Container {
+		return this.container;
+	}
+
+	protected init(): void {
+		this.initContainer()
+		this.initListeners()
+	}
+
+	protected initContainer(): void {
+		this.container = new Container();
+		this.container.visible = false;
+		this.container.zIndex = this.zIndex;
+		this.container.name = this.name;
+	}
+
+	protected initListeners(): void {
+		const { subscribe } = this.store
+		subscribe(onEvent(`@CONTAINER/${this.name}/render`,
+			() => this.viewPort.addTickOnce(this.render)))
+		subscribe(onEvent(`@CONTAINER/${this.name}/re_render`,
+			() => this.viewPort.addTickOnce(this.reRender)))
+	}
+
+	protected render = () => {
+		this.renderContent();
+		this.reRender();
+		this.container.visible = true;
+	}
+
+	protected renderContent = () => {
+	}
+
+	protected reRender = () => {
+	}
+
+}
+
+export default ABaseContainer;

src/containers/background/Background.container.ts

@@ -1,55 +1,79 @@
-import { Application, Container, Sprite } from 'pixi.js';
+import { Container, Sprite } from 'pixi.js';
 import { injectable, inject } from 'inversify';
-import TYPES from '../../types';
-import Config from '../../core/Config';
-import AssetsLoader from '../../core/AssetsLoader';
+import TYPES from '../../types/MainConfig';
+import Config from '../../core/config/Config';
+import AssetsLoader from '../../core/assetsLoader/AssetsLoader';
 import { StoreType } from 'store';
 import { onEvent } from '../../utils/store.subscribe';
-import { RENDER_BACKGROUND } from './types';
+import { RENDER_BACKGROUND, RE_RENDER_BACKGROUND } from './types';
+import ViewPort from '../../core/viewPort/ViewPort';
 
 @injectable()
 class BackgroundContainer {
 
 	protected store: StoreType;
-	protected app: Application;
 	protected config: Config;
 	protected assetsLoader: AssetsLoader;
+	protected viewPort: ViewPort;
 	protected container: Container;
 	protected baseSprite: Sprite;
 
 	constructor(
 		@inject(TYPES.Store) store: StoreType,
 		@inject(TYPES.Config) config: Config,
-		@inject(TYPES.Application) app: Application,
 		@inject(TYPES.AssetsLoader) assetsLoader: AssetsLoader,
+		@inject(TYPES.ViewPort) viewPort: ViewPort
 	) {
 		this.store = store;
 		this.config = config;
-		this.app = app;
 		this.assetsLoader = assetsLoader;
+		this.viewPort = viewPort;
 		this.init();
 	}
 
-	protected init() {
+	get view(): Container {
+		return this.container;
+	}
+
+	protected init = (): void => {
+		this.initContainer();
 		this.initListeners();
+	}
 
+	protected initContainer = () => {
 		this.container = new Container();
+		this.container.visible = false;
 		this.container.name = 'background';
 	}
 
-	protected initListeners(): void {
-		this.store.subscribe(onEvent(RENDER_BACKGROUND, this.render))
+	protected initListeners = (): void => {
+		const { subscribe } = this.store
+		subscribe(onEvent(RENDER_BACKGROUND, this.render.bind(this)))
+		subscribe(onEvent(RE_RENDER_BACKGROUND, this.reRender.bind(this)))
 	}
 
-	protected renderContainer = () => {
-		const bgAsset = this.assetsLoader.getResource('magic_forest_bg.jpg');
+	protected renderContent = () => {
+		const bgAsset = this.assetsLoader.getResource('img/magic_forest_bg');
 		this.baseSprite = new Sprite(bgAsset.texture);
 		this.container.addChild(this.baseSprite);
+		this.reRender();
+	}
+
+	protected render(): void {
+		this.viewPort.addTickOnce(() => {
+			this.renderContent();
+			this.container.visible = true;
+		})
 	}
 
-	protected render = () => {
-		this.renderContainer();
-		this.app.stage.addChild(this.container);
+	protected reRender(): void {
+		this.viewPort.addTickOnce(() => {
+			const { viewPort } = this.store.getState();
+			this.baseSprite.position.set(
+				...this.viewPort.convertPointToSaveArea([0, 0]),
+			);
+			this.baseSprite.scale.set(viewPort.saveRatio)
+		})
 	}
 
 }

src/containers/background/action.ts

@@ -1,7 +1,13 @@
-import { RENDER_BACKGROUND, ActionTypes } from './types'
+import { RENDER_BACKGROUND, ActionTypes, RE_RENDER_BACKGROUND } from './types'
 
-export function renderBackground(): ActionTypes {
+export function renderBackgroundAction(): ActionTypes {
 	return {
 		type: RENDER_BACKGROUND,
 	}
+}
+
+export function  reRenderBackgroundAction(): ActionTypes {
+	return {
+		type: RE_RENDER_BACKGROUND,
+	}
 }

src/containers/background/types.ts

@@ -1,8 +1,8 @@
-export const RENDER_BACKGROUND = '@Background/renderBackground';
-
+export const RENDER_BACKGROUND = '@CONTAINER/Background/render_background';
+export const RE_RENDER_BACKGROUND = '@CONTAINER/Background/re_render_background';
 
 interface InitBackground {
-	type: typeof RENDER_BACKGROUND,
+	type: typeof RENDER_BACKGROUND | typeof RE_RENDER_BACKGROUND
 }