develop to master v0.3.5 (#6)

* Update README.md

add wiki link

* Update README.md

* Update README.md

* update README, lots of new info

* cleaning up main and adding comments, setting up library components

* more README updates

* add import path aliases, minor tweaks

* v0.3.5

* fix serializejs vulnerability

* more package maintenance

Author: jrod-disco

README.md

@@ -1,10 +1,64 @@
 ### Bootstrapped with DCollage (Digital Collage Boilerplate w/ PIXIJS)
 
-The goal of DCollage is to facilitate the creation of multi-layered, interactive, collages similar to those I created back in the days of Flash. Surprise it works for simple games too!
+DCollage is a lightly opinionated PIXIJS based digital collage boilerplate with game dev aspirations and a component driven paradigm written in TypeScript.
 
-# Project Title
+The goal of DCollage is to facilitate the creation of multi-layered, interactive, collages similar to those I created back in the days of Flash. Surprise it works for simple games too! [See the repo WIKI for additional information.](https://github.com/jrod-disco/dcollage-pixijs-boilerplate/wiki)
 
-Project description may appear here.
+The section of the README below can be used to bootstrap your project readme or removed when you use this template.
+
+# Your Project Title
+
+Your project description may appear here.
+
+# Getting Started
+
+DCollage is meant to get you up and running with a PIXI app in minutes. While there are a lot of nuances that can be tweaked and you are not forced to follow the patterns this boilerplate includes it should be a matter of clone, install, run.
+
+## Clone or Template
+
+- Clone or spin up a new repo using the github template `https://github.com/jrod-disco/dcollage-pixijs-boilerplate.git`
+
+## Install and Run
+
+- Run `yarn install` at the project root to install all of the `node_modules`
+- Run `yarn start` to begin developing locally `http://localhost:10001/`
+
+## Have Fun!
+
+- Edit `main.ts` to add or remove components from the main container there will be a handful of `_prebuilt` example components included to help you get started
+- Put your assets in `./src/assets` and add anything you want to preload to the `preloader` at the bottom of `main.ts`
+- Use any of the `_prebuilt` components, or make your own
+
+## DCollage Prebuilt Components
+
+- Components should be barreled up into a single `COMP` import, in addition "prebuilt componenents" that come with the boilerplate are double-barreled (shame on me) and available via `COMP.LIB`
+- if you follow this pattern you can create a new component by:
+
+  `const newComponent = COMP.LIB.prebuiltComponentName({prebuiltComponentPropsObject})`
+
+  or for a component you've created outside of the library:
+
+  `const myNewComponent = COMP.myComponentName({myComponentPropsObject})`
+
+- The component function will return a module object which will include a `container` for components that have a visual aspect
+- Add this container to the existing `mainContainer` or any container you create like so:
+
+  `mainContainer.addChild(newComponent.container);`
+
+- This allows for components to have a discreet "rendered" container as well as any logic and exposed functions the returned module object has available
+- It is key to note that components are functional modules rather than classes but this doesn't mean you couldn't use classes if you wanted to. See for more info: [The Revealing Module Pattern in Javascript](https://gist.github.com/zcaceres/bb0eec99c02dda6aac0e041d0d4d7bf2)
+
+## Eventing and Application Access
+
+- Currently events are all handled via callbacks; this has been sufficient for basic projects but a more robust pub-sub/eventBus is on the roadmap
+- At times you may want/need to access the PIXI Application instance; in this case you can tweak the bootstrapping function to `window.APP = bootstrapApp({ spriteSheets, sounds });` exposing the `APP` in the global space via window; this is helpful in the event that you want to freeze the app, say for a game PAUSE or something `window.APP.stop();` from within a nested component
+
+# Build Scripts
+
+- `yarn start` to go into development mode with live reload
+- `yarn clean` to clean the `/dist` directory
+- `yarn build` to create a distributable bundle in `/dist`
+- `yarn docs` to generate markdown documentation in `/docs`
 
 ## Concept and Mechanics
 
@@ -27,9 +81,10 @@ Nothing yet
 
 ## Libraries Used
 
+- DCollage Boilerplate [https://github.com/jrod-disco/dcollage-pixijs-boilerplate](https://github.com/jrod-disco/dcollage-pixijs-boilerplate)
 - PIXIJS - WebGL renderer with Canvas fallback and so much more [https://github.com/pixijs/pixi.js](https://github.com/pixijs/pixi.js)
-- pixi-filters - Collection of community-authored custom display filters for PixiJS [https://github.com/pixijs/pixi-filters](https://github.com/pixijs/pixi-filters) Currently yarn linked to a local version of the repo in order to use the as of yet un-merged changes to the godray filter which add alpha functionality.
 - GSAP - tween animation library [https://greensock.com/docs/v2/Plugins/PixiPlugin](https://greensock.com/docs/v2/Plugins/PixiPlugin)
+- pixi-filters - Collection of community-authored custom display filters for PixiJS [https://github.com/pixijs/pixi-filters](https://github.com/pixijs/pixi-filters) Currently yarn linked to a local version of the repo in order to use the as of yet un-merged changes to the godray filter which add alpha functionality.
 
 ## Tools Used
 
@@ -39,13 +94,6 @@ Nothing yet
 - Audacity
 - Reason
 
-# Build Scripts
-
-- `yarn start` to go into development mode with live reload
-- `yarn clean` to clean the `/dist` directory
-- `yarn build` to create a distributable bundle in `/dist`
-- `yarn docs` to generate markdown documentation in `/docs`
-
 # The Stack
 
 - Pixi.JS

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dcollage",
-  "version": "0.2.0",
+  "version": "0.3.5",
   "description": "A digital collage boilerplate.",
   "main": "main.js",
   "repository": "https://github.com/jrod-disco/dcollage",
@@ -10,32 +10,33 @@
   "devDependencies": {
     "@microsoft/tsdoc": "^0.12.19",
     "@pixi/filter-shockwave": "^3.1.1",
-    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-commonjs": "^15.0.0",
     "@rollup/plugin-node-resolve": "^7.1.1",
     "@rollup/plugin-replace": "^2.3.3",
     "@typescript-eslint/eslint-plugin": "2.34.0",
     "@typescript-eslint/parser": "2.34.0",
+    "@zerollup/ts-transform-paths": "^1.7.18",
     "eslint": "^6.8.0",
-    "gsap": "^3.2.5",
+    "gsap": "^3.5.0",
     "pixi-particles": "^4.2.1",
     "pixi-sound": "^3.0.4",
     "pixi.js": "5.2.0",
-    "prettier": "^2.0.1",
+    "prettier": "^2.0.5",
     "rimraf": "^3.0.2",
-    "rollup": "^2.1.0",
-    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup": "^2.26.4",
     "rollup-plugin-copy": "^3.3.0",
-    "rollup-plugin-html2": "^1.0.0",
+    "rollup-plugin-html2": "^2.0.0",
     "rollup-plugin-livereload": "^1.1.0",
     "rollup-plugin-scss": "^2.1.0",
-    "rollup-plugin-serve": "^1.0.1",
-    "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-typescript2": "^0.26.0",
+    "rollup-plugin-serve": "^1.0.3",
+    "rollup-plugin-terser": "^7.0.0",
+    "rollup-plugin-typescript2": "^0.27.2",
     "sass": "^1.26.3",
-    "tslib": "^2.0.0",
+    "tslib": "^2.0.1",
+    "ttypescript": "^1.5.10",
     "typedoc": "^0.17.6",
     "typedoc-plugin-markdown": "^2.2.17",
-    "typescript": "3.9.7"
+    "typescript": "4.0.2"
   },
   "dependencies": {},
   "scripts": {

rollup.config.js

@@ -3,12 +3,12 @@ import scss from 'rollup-plugin-scss';
 import serve from 'rollup-plugin-serve';
 import livereload from 'rollup-plugin-livereload';
 import typescript from 'rollup-plugin-typescript2';
-import commonjs from 'rollup-plugin-commonjs';
-import json from '@rollup/plugin-json';
+import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
 import copy from 'rollup-plugin-copy';
 import { terser } from 'rollup-plugin-terser';
+import ttypescript from 'ttypescript';
 
 import pkg from './package.json';
 
@@ -27,18 +27,15 @@ export default [
         },
       },
     ],
-
     plugins: [
       resolve({ base: 'src', browser: true, preferBuiltins: false }),
       replace({
         __VERSION__: JSON.stringify(pkg.version),
       }),
-      typescript({}),
-      commonjs({
-        namedExports: {
-          'node_modules/pixi.js/lib/pixi.es.js': ['sound'],
-        },
+      typescript({
+        typescript: ttypescript,
       }),
+      commonjs({}),
       scss(),
       html({ template: './src/index.html', inject: false }),
       isProd && terser(),

src/assets/example/example.mp3

@@ -17,21 +17,30 @@ interface ComponentProps {
  *
  * @returns Interface object containing methods that can be called on this module
  */
-export const component = (props: ComponentProps): Component => {
+export const exampleComponent = (props: ComponentProps): Component => {
   const pos = props.pos ?? { x: 0, y: 0 };
   const container = new PIXI.Container();
   container.x = pos.x;
   container.y = pos.y;
 
-  container.name = 'component name';
+  container.name = 'exampleComponent';
 
   let state = {};
   const initialState = { ...state };
 
-  //   const texture = PIXI.Texture.from('./assets/coin.png');
-  //   const sprite = new PIXI.Sprite(texture);
-  //   sprite.anchor.set(0.5);
-  //   container.addChild(sprite);
+  // Text
+  const textStyle = new PIXI.TextStyle({
+    fontFamily: 'Impact, Charcoal, sans-serif',
+    fontSize: 21,
+    fontWeight: 'bold',
+    fill: ['#fff'],
+    align: 'center',
+  });
+
+  const sampleText = new PIXI.Text('DCollage', textStyle);
+  sampleText.anchor.set(0.5, 0);
+
+  container.addChild(sampleText);
 
   // Reset called by play again and also on init
   const reset = (): void => {

src/assets/sprites.json renamed to src/assets/example/sprites.json

@@ -1,9 +1,9 @@
 /**
- * Barrel file for all component modules
+ * Barrel up our components for easy access
  */
-export { audio } from './audio';
-export { btnSample } from './buttons';
-export { runtime } from './runtime';
-export { bestScoreDisplay } from './bestScoreDisplay';
 
-// TODO Extract components such that they can be added/removed separate from the dCollage Boilerplate itself
+// Prebuilt Components Library
+export * as LIB from './library';
+
+// Your Components
+export { exampleComponent } from './exampleComponent';