Wait for TexturePreloader before displaying board

ts/TexturePreloader.ts

@@ -7,6 +7,9 @@ class TexturePreloader extends Stream.Writable {
 	protected textureQueue = ['GAME_005'];
 	protected images = [];
 	private working = 0;
+	private assetCount = 0;
+	private textureCount = 0;
+	private heroPowerCount = 0;
 	protected assetQueue = ['cardback', 'hero_frame', 'hero_power', 'inhand_minion', 'inhand_spell', 'inhand_weapon',
 							'inhand_minion_legendary', 'mana_crystal', 'inplay_minion', 'effect_sleep',
 							'hero_power_exhausted', 'hero_armor', 'hero_attack', 'icon_deathrattle', 'icon_inspire',
@@ -55,18 +58,23 @@ class TexturePreloader extends Stream.Writable {
 			this.consume();
 		};
 
+		let isAsset = false;
+		let isHeroPower = false;
 		let file = this.assetQueue.shift();
 		if (!!this.assetDirectory && file) {
 			file = this.assetDirectory + 'images/' + file + '.png';
+			isAsset = true;
 		}
 		else {
 			let cardId = this.textureQueue.shift();
-			if (!this.cards.get(cardId)) {
+			let card = this.cards.get(cardId);
+			if (!card) {
 				console.warn('No texture for ' + cardId + ' to preload');
 				next();
 				return;
 			}
-			file = this.textureDirectory + this.cards.get(cardId).texture + '.jpg';
+			isHeroPower = card.type == 'HERO_POWER'
+			file = this.textureDirectory + card.texture + '.jpg';
 		}
 
 		if (this.fired[file]) {
@@ -76,9 +84,22 @@ class TexturePreloader extends Stream.Writable {
 
 		this.fired[file] = true;
 
+		let updateProgress = (asset: boolean, heroPower: boolean) => {
+			if (asset) {
+				this.assetCount++;
+			}
+			else {
+				this.textureCount++;
+				if (heroPower) {
+					this.heroPowerCount++;
+				}
+			}
+			next();
+		};
+
 		let image = new Image;
-		image.onload = next;
-		image.onerror = next;
+		image.onload =() => updateProgress(isAsset, isHeroPower);
+		image.onerror = () => updateProgress(isAsset, isHeroPower);
 		image.src = file;
 		this.images[this.images.length] = image;
 
@@ -89,6 +110,14 @@ class TexturePreloader extends Stream.Writable {
 	public canPreload(): boolean {
 		return !!this.assetDirectory || !!this.textureDirectory;
 	}
+
+	public texturesReady(): boolean {
+		return (this.textureCount > 20 || !this.working) && this.heroPowerCount > 1;
+	}
+
+	public assetsReady(): boolean {
+		return this.assetCount > 10 || !this.working;
+	}
 }
 
 export default TexturePreloader;

ts/components/GameWidget.tsx

@@ -125,6 +125,7 @@ class GameWidget extends React.Component<GameWidgetProps, GameWidgetState> {
 			assetDirectory={this.props.assetDirectory} textureDirectory={this.props.textureDirectory}
 			cards={this.state.cards} swapPlayers={this.state.swapPlayers}
 			cardOracle={this.state.isRevealingCards && this.state.cardOracle}
+			preloader={this.props.preloader}
 			/>);
 
 		if (this.props.scrubber) {

ts/components/GameWrapper.tsx

@@ -8,9 +8,11 @@ import Option from "../Option";
 import PlayerEntity from "../Player";
 import {InteractiveBackend, CardOracleProps, AssetDirectoryProps, TextureDirectoryProps} from "../interfaces";
 import {Zone} from "../enums";
+import TexturePreloader from "../TexturePreloader";
 
 interface GameWrapperProps extends CardDataProps, CardOracleProps, AssetDirectoryProps, TextureDirectoryProps, React.Props<any> {
 	state: GameState;
+	preloader?: TexturePreloader;
 	interaction?: InteractiveBackend;
 	swapPlayers?: boolean;
 }
@@ -51,6 +53,14 @@ class GameWrapper extends React.Component<GameWrapperProps, {}> {
 			return <p className="joust-message">Waiting for players&hellip; </p>;
 		}
 
+		if (this.props.preloader && !this.props.preloader.assetsReady()) {
+			return <p className="joust-message">Waiting for assets&hellip; </p>;
+		}
+
+		if (this.props.preloader && !this.props.preloader.texturesReady()) {
+			return <p className="joust-message">Waiting for textures&hellip; </p>;
+		}
+
 		// check if we need to swap the players
 		if (!this.hasCheckedForSwap) {
 			let player = players.first();

ts/interfaces.d.ts

@@ -9,6 +9,7 @@ import GameStateSink from "./state/GameStateSink";
 import GameStateScrubber from "./state/GameStateScrubber";
 import GameStateHistory from "./state/GameStateHistory";
 import Player from "./Player";
+import TexturePreloader from "./TexturePreloader";
 
 export interface DropTargetProps {
 	connectDropTarget?(jsx);
@@ -154,6 +155,7 @@ export interface GameWidgetProps extends AssetDirectoryProps, TextureDirectoryPr
 	getImageURL?: (cardId: string) => string;
 	exitGame?: () => void;
 	cardOracle: CardOracle;
+	preloader?: TexturePreloader;
 	width?: any;
 	height?: any;
 }

ts/run.tsx

@@ -98,6 +98,9 @@ class Viewer {
 		this.opts.sink = sink;
 		this.opts.scrubber = scrubber;
 		this.opts.cardOracle = decoder;
+		if (preloader.canPreload()) {
+			this.opts.preloader = preloader;
+		}
 
 		this.render();
 	}