Upgrade Dojo 2 to 0.1.0

package.json

@@ -9,17 +9,19 @@
     "watch": "dojo build -w"
   },
   "dependencies": {
-    "@dojo/core": "next",
-    "@dojo/has": "next",
-    "@dojo/i18n": "next",
-    "@dojo/routing": "next",
-    "@dojo/shim": "next",
-    "@dojo/widget-core": "next",
+    "@dojo/core": "^0.1.0",
+    "@dojo/has": "^0.1.0",
+    "@dojo/i18n": "^0.1.0",
+    "@dojo/routing": "^0.1.0",
+    "@dojo/shim": "^0.1.0",
+    "@dojo/widget-core": "^0.1.0",
     "@types/aframe": "^0.5.0",
     "@webcomponents/custom-elements": "^1.0.2",
     "@webcomponents/html-imports": "^1.0.1",
     "aframe": "^0.7.0",
     "aframe-environment-component": "^1.0.0",
+    "aframe-physics-system": "^2.1.0",
+    "cannon": "^0.6.2",
     "maquette": "devpaul/maquette#custom-elements-dist"
   },
   "devDependencies": {

src/App.ts

@@ -1,33 +1,16 @@
 import { v, w } from '@dojo/widget-core/d';
 import { DNode, WidgetProperties } from '@dojo/widget-core/interfaces';
 import { WidgetBase } from '@dojo/widget-core/WidgetBase';
-import Outside from './stages/Outside';
-import Assets from './framework/Assets';
-import { MonsterName, monsters } from './definitions/characters';
-import { Container } from '@dojo/widget-core/Container';
-import Controls from './framework/Controls';
-import genericMapper from './framework/util/genericMapper';
+import Controls from './widgets/Controls';
+import AssetContainer from './containers/AssetContainer';
+import OutsideContainer from './containers/OutsideContainer';
 
 export default class App extends WidgetBase<WidgetProperties> {
-	private static selectMonster(): MonsterName {
-		const num = Math.floor(Math.random() * monsters.length);
-		return monsters[num];
-	}
-
-	monster = App.selectMonster();
-
-	distance = Math.random() * 8 + 2;
-
 	protected render(): DNode {
-		const AssetEntity = Container(Assets, 'assets', genericMapper());
-
 		return v('a-scene', [
-			w(AssetEntity, { }),
+			w(AssetContainer, {}),
 			w(Controls, {}),
-			w(Outside, {
-				monster: this.monster,
-				monsterDistance: this.distance
-			}),
+			w(OutsideContainer, {}),
 		]);
 	}
 }

src/components/pokeControl.ts

@@ -0,0 +1,42 @@
+import { Handle } from '@dojo/interfaces/core';
+import { createHandle } from '@dojo/core/lang';
+import { EventHandler } from '@dojo/widget-core/interfaces';
+const AFrame = require('aframe');
+
+export const componentName = 'poke-control';
+
+export default function register() {
+	AFrame.registerComponent(componentName, {
+		eventHandles: [] as Handle[],
+
+		init() {
+		},
+
+		play() {
+			const el = this.el;
+			const events: { [key: string ]: EventHandler } = {
+				'trackpadup': (event: Event) => {
+					this.onButtonUp(event);
+				},
+				'trackpaddown': (event: Event) => {
+					this.onButtonDown(event);
+				}
+			};
+
+			for (let eventName in events) {
+				const handler = events[eventName];
+				el.addEventListener(eventName, handler);
+				this.eventHandles.push(createHandle(() => {
+					el.removeEventListener(eventName, handler);
+				}));
+			}
+		},
+
+		pause() {
+			while (this.eventHandles.length) {
+				const handle = this.eventHandles.pop();
+				handle.destroy();
+			}
+		}
+	});
+}

src/configuration/monsters.ts

@@ -0,0 +1,33 @@
+import { Environment, MonsterDefinition } from '../context/OutsideContext';
+import { ObjModelAsset } from '../interfaces';
+import { assign } from '@dojo/shim/object';
+
+declare type MonsterConfigurationItem = MonsterDefinition & ObjModelAsset;
+
+export const enum MonsterName {
+	CharDerp = 'charderp',
+	Robot = 'robot'
+}
+
+const assetFolder = 'assets/characters/';
+
+function createMonster(name: string): { name: string } & ObjModelAsset {
+	return {
+		name,
+		mtl: `${ assetFolder }${ name }.mtl`,
+		obj: `${ assetFolder }${ name }.obj`
+	};
+}
+
+const monsters: Array<MonsterConfigurationItem> = [
+	assign(createMonster(MonsterName.CharDerp), {
+		environment: Environment.Forest,
+		heights: { min: 1.5, max: 2 }
+	}),
+	assign(createMonster(MonsterName.Robot), {
+		environment: Environment.Forest,
+		heights: { min: 1.5, max: 2 }
+	})
+];
+
+export default monsters;

src/containers/AssetContainer.ts

@@ -0,0 +1,13 @@
+import Container from '../framework/Container';
+import Assets from '../widgets/Assets';
+import AppContext from '../context/AppContext';
+
+const AssetContainer = Container(Assets, 'app-state', {
+	getProperties(context: AppContext) {
+		return {
+			assets: context.assets
+		}
+	}
+});
+
+export default AssetContainer;

src/containers/OutsideContainer.ts

@@ -0,0 +1,34 @@
+import Outside, { OutsideProperties } from '../widgets/Outside';
+import Container from '../framework/Container';
+import { throws } from '../util/properties';
+import OutsideContext from '../context/OutsideContext';
+import AppContext from '../context/AppContext';
+
+const OutsideContainer = Container(Outside, [ 'outside', 'app-state' ], {
+	getProperties(payload: [OutsideContext, AppContext]): OutsideProperties {
+		const [
+			outside = throws(),
+			appContext = throws()
+		] = payload;
+		let monster: OutsideProperties['monster'];
+		const monsterInfo = outside.monster;
+		if (monsterInfo) {
+			const assets = appContext.getObjMtlAssets(monsterInfo.name);
+			if (assets && assets.obj && assets.mtl) {
+				monster = {
+					distance: monsterInfo.distance,
+					height: monsterInfo.height,
+					mtl: `#${ assets.mtl.id }`,
+					name: monsterInfo.name,
+					obj: `#${ assets.obj.id }`
+				}
+			}
+		}
+		return {
+			environment: outside.environment,
+			monster
+		}
+	}
+});
+
+export default OutsideContainer;

src/context/AppContext.ts

@@ -0,0 +1,48 @@
+import { InjectorBase } from '../framework/InjectorBase';
+
+/**
+ * Application Asset used for loading models, video, and images by A-Frame's <a-asset>
+ */
+export interface Asset {
+	id: string;
+	src: string;
+}
+
+export default class AppContext extends InjectorBase {
+	private _assets: Map<string, Asset> = new Map();
+
+	/**
+	 * @return a list of all active assets
+	 */
+	get assets(): Asset[] {
+		return Array.from(this._assets.values());
+	}
+
+	/**
+	 * Adds an asset
+	 */
+	addAsset(id: string, src: string) {
+		if (!this._assets.has(id)) {
+			this._assets.set(id, {
+				id,
+				src
+			});
+			this.emitInvalidate();
+		}
+	}
+
+	/**
+	 * Adds an Obj model asset
+	 */
+	addObjMtlAssets(name: string, objSrc: string, mtlSrc?: string) {
+		this.addAsset(`${ name }-obj`, objSrc);
+		mtlSrc && this.addAsset(`${ name }-mtl`, mtlSrc);
+	}
+
+	getObjMtlAssets(name: string): { mtl?: Asset, obj?: Asset } {
+		return {
+			mtl: this._assets.get(`${ name }-mtl`),
+			obj: this._assets.get(`${ name }-obj`)
+		}
+	}
+}

src/context/OutsideContext.ts

@@ -0,0 +1,83 @@
+import { InjectorBase } from '../framework/InjectorBase';
+import { ObjModelAsset } from '../interfaces';
+
+interface Monster {
+	distance: number;
+	height: number;
+	name: string;
+}
+
+export const enum Environment {
+	Checkerboard = 'checkerboard',
+	Desert = 'egypt',
+	Forest = 'forest'
+}
+
+/**
+ * Defines a monster's traits
+ */
+export interface MonsterDefinition {
+	/** environment where the monster appears */
+	environment: Environment;
+	/** the range of heights for this monster */
+	heights: {
+		min: number,
+		max: number
+	};
+	/** The name of the monster */
+	name: string;
+}
+
+export default class OutsideContext extends InjectorBase {
+	private _environment: Environment = Environment.Forest;
+	private _monster?: Monster;
+	private _monsterDefinitions: Map<string, MonsterDefinition> = new Map();
+
+	get environment(): Environment {
+		return this._environment;
+	}
+
+	get monster(): Monster | undefined {
+		return this._monster;
+	}
+
+	addMonster(definitions: MonsterDefinition) {
+		this._monsterDefinitions.set(definitions.name, definitions);
+	}
+
+	randomizeEncounter() {
+		const {
+			heights,
+			name,
+		} = this.randomMonster();
+		const distance = Math.random() * 8 + 2;
+		const height = Math.random() * (heights.max - heights.min) + heights.min;
+
+		this.setMonster({
+			name,
+			height,
+			distance
+		});
+	}
+
+	setEnvironment(name: Environment) {
+		if (this._environment !== name) {
+			this._environment = name;
+			this.emitInvalidate();
+		}
+	}
+
+	setMonster(monster: Monster | undefined) {
+		if (this._monster !== monster) {
+			this._monster = monster;
+			this.emitInvalidate();
+		}
+	}
+
+	private randomMonster() {
+		const max = this._monsterDefinitions.size;
+		const num = Math.floor(Math.random() * max);
+		const definitions = Array.from(this._monsterDefinitions.values());
+		return definitions[num];
+	}
+}