0.0.8

assets/ts/client/VitrineClient.ts

@@ -0,0 +1,146 @@
+import { ipcRenderer } from 'electron';
+
+import { GamesCollection } from '../models/GamesCollection';
+import { PotentialGame } from '../models/PotentialGame';
+import { PlayableGame } from '../models/PlayableGame';
+import { beforeCss } from './helpers';
+
+export class VitrineClient {
+	private potentialGames: GamesCollection<PotentialGame>;
+	private playableGames: GamesCollection<PlayableGame>;
+	private selectedGameId: string;
+
+	constructor() {
+		this.potentialGames = new GamesCollection();
+		this.playableGames = new GamesCollection();
+	}
+
+	public run() {
+		this.selectedGameId = '';
+		ipcRenderer.send('client.ready');
+	}
+
+	public launchEvents() {
+		ipcRenderer.on('server.send-game', (event, game) => {
+			$('#game-cover-container').css({
+				'display': 'block'
+			});
+			$('#game-title').html(game.name);
+			$('#game-desc').addClass('game-desc').html(game.summary);
+			$('#game-cover-image').css({
+				'background-image': 'url(' + game.cover + ')',
+				'background-repeat': 'no-repeat',
+				'background-size': '100% 100%',
+			});
+			if (game.screenshots.length) {
+				beforeCss('#game-background', {
+					'background-image': 'url(' + game.screenshots[0] + ')'
+				});
+			}
+		});
+
+		ipcRenderer.on('server.send-game-error', (event, error) => {
+			$('#game-title').html(error);
+			throw new Error(error);
+		});
+
+		ipcRenderer.on('server.add-potential-games', (event, games) => {
+			this.potentialGames.games = games;
+			this.renderPotentialGames();
+		});
+
+		ipcRenderer.on('server.add-playable-games', (event, games) => {
+			this.playableGames.games = games;
+			this.renderPlayableGames();
+		});
+
+		ipcRenderer.on('server.remove-potential-game', (event, gameId) => {
+			this.potentialGames.removeGame(gameId, (error, game: PotentialGame) => {
+				if (error)
+					throw new Error(error);
+				else if (game) {
+					this.renderPotentialGames();
+				}
+			})
+		});
+
+		ipcRenderer.on('server.add-playable-game', (event, playableGame) => {
+			this.playableGames.addGame(playableGame);
+			this.renderPlayableGames();
+		});
+	}
+
+	private renderPotentialGames() {
+		$('#potential-games-list').html('');
+
+		this.potentialGames.sort();
+
+		let counter: number = 0;
+		this.potentialGames.forEach((potentialGame: PotentialGame) => {
+			let html: string = '<li>' +
+				//'<a game-id="' + potentialGame.uuid + '">' + potentialGame.name + '</a>' +
+				'<button game-id="' + potentialGame.uuid + '" class="btn btn-success btn-sm add-game-btn">Add ' + potentialGame.name + '</button>' +
+				'</li>';
+			$('#potential-games-list').append(html);
+			counter++;
+			if (counter == this.potentialGames.games.length)
+				this.createGameClickEvents(false);
+		});
+	}
+
+	private renderPlayableGames() {
+		$('#playable-games-list').html('');
+
+		this.playableGames.sort();
+
+		let counter: number = 0;
+		this.playableGames.forEach((playableGame: PlayableGame) => {
+			let html: string = '<li><a class="play-game-link" game-id="' + playableGame.uuid + '">' + playableGame.name + '</a></li>';
+			$('#playable-games-list').append(html);
+			counter++;
+			if (counter == this.playableGames.games.length)
+				this.createGameClickEvents(true);
+		});
+	}
+
+	private createGameClickEvents(treatingPlayableGames: boolean) {
+		if (treatingPlayableGames) {
+			$('a.play-game-link[game-id]').each((index, value) => {
+				$(value).click(() => {
+					let gameId: string = $(value).attr('game-id');
+					this.playableGames.getGame(gameId, (error, game) => {
+						if (error)
+							throw new Error(error);
+						if (this.selectedGameId === gameId)
+							return;
+						let gameCover: string = 'url(' + game.details.cover.split('\\').join('\\\\') + ')';
+						let gameBgScreen: string = 'url(' + game.details.backgroundScreen.split('\\').join('\\\\') + ')';
+						$('#game-cover-container').css({
+							'display': 'block'
+						});
+						$('#game-title').html(game.name);
+						$('#game-desc').addClass('game-desc').html(game.details.summary);
+						$('#game-cover-image').css({
+							'background-image': gameCover,
+							'background-repeat': 'no-repeat',
+							'background-size': '100% 100%',
+						});
+						beforeCss('#game-background', {
+							'background-image': gameBgScreen
+						});
+						this.selectedGameId = gameId;
+					});
+					// ipcRenderer.send('client.launch-game', gameId);
+				});
+			});
+		}
+		else {
+			$('button.add-game-btn[game-id]').each((index, value) => {
+				$(value).click(() => {
+					let gameId: string = $(value).attr('game-id');
+					ipcRenderer.send('client.add-game', gameId);
+				});
+			});
+		}
+	}
+}

assets/ts/client/dom.ts

@@ -1,14 +1,14 @@
 import { ipcRenderer } from 'electron';
 import * as formToObject from 'form-to-object';
-import './helpers';
+
+import { extendJQuery } from './helpers';
 
 function clickGameCover() {
 	(<any>$('#game-cover-component')).animateCss('pulse', 120);
 }
 
 export function launchDom() {
-	/* TODO: Remove this */
-	// ipcRenderer.send('client.get-game', 'The Witcher');
+	extendJQuery();
 
 	$(document.body).on('submit', '#game-name-form', function(event) {
 		event.preventDefault();

assets/ts/client/helpers.ts

@@ -1,24 +1,23 @@
-$.fn.extend({
-	animateCss(animationName: string, animationDuration?: number) {
-		let animationEnd: string = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
-		if (animationDuration !== undefined)
-			this.css('animation-duration', animationDuration + 'ms');
-		this.addClass('animated ' + animationName).one(animationEnd, function() {
-			$(this).removeClass('animated ' + animationName);
-		});
-		return this;
-	}
-});
+export function extendJQuery() {
+	$.fn.extend({
+		animateCss(animationName: string, animationDuration?: number) {
+			if (animationDuration !== undefined)
+				this.css('animation-duration', animationDuration + 'ms');
+
+			let animationEnd: string = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
+			this.addClass('animated ' + animationName).one(animationEnd, function() {
+				$(this).removeClass('animated ' + animationName);
+			});
+			return this;
+		}
+	});
+}
 
 export function beforeCss(selector: any, styling: object) {
+	$('head style').remove();
 	let rawStyling: string = '';
 	Object.keys(styling).forEach((key) => {
 		rawStyling += key + ': ' + styling[key] + ';';
 	});
-
 	$('head').append('<style>' + selector + ':before{' + rawStyling + '}</style>');
 }
-
-export function alphabeticSort(nodeA: any, nodeB: any) {
-	return nodeA.name > nodeB.name;
-}

assets/ts/client/main.ts

@@ -3,12 +3,13 @@ import * as jQuery from 'jquery';
 import 'bootstrap-sass';
 
 import { clientBootstrap, loadTitleBar } from './bootstrap';
-import { launchEvents, setClientReady } from './events';
+import { VitrineClient } from './VitrineClient';
 import { launchDom } from './dom';
 
 clientBootstrap(() => {
 	// loadTitleBar();
-	launchEvents();
+	let vitrineClient: VitrineClient = new VitrineClient();
+	vitrineClient.launchEvents();
 	launchDom();
-	setClientReady();
+	vitrineClient.run();
 });