From a2a4e47cd92888d0f4c9993f866b9bd8678a3647 Mon Sep 17 00:00:00 2001 From: Paul Roman Date: Sat, 29 Jul 2017 15:43:05 +0200 Subject: [PATCH 1/9] Add games on UI --- assets/ts/client/events.ts | 34 ++++++------ assets/ts/server/events.ts | 2 +- assets/ts/server/games/GamesCollection.ts | 66 +++++++++++++++++++++++ assets/ts/server/games/PlayableGame.ts | 8 ++- assets/ts/server/games/PotentialGame.ts | 11 +++- 5 files changed, 101 insertions(+), 20 deletions(-) create mode 100644 assets/ts/server/games/GamesCollection.ts diff --git a/assets/ts/client/events.ts b/assets/ts/client/events.ts index 4d4c9e26..69f81f8a 100644 --- a/assets/ts/client/events.ts +++ b/assets/ts/client/events.ts @@ -3,9 +3,10 @@ import { ipcRenderer } from 'electron'; import { PotentialGame } from '../server/games/PotentialGame'; import { PlayableGame } from '../server/games/PlayableGame'; import { beforeCss, alphabeticSort } from './helpers'; +import { GamesCollection } from '../server/games/GamesCollection'; -let potentialGames: PotentialGame[]; -let playableGames: PlayableGame[]; +let potentialGames: GamesCollection; +let playableGames: GamesCollection; function createGameClickEvents(treatingPlayableGames: boolean) { if (treatingPlayableGames) { @@ -29,8 +30,7 @@ function createGameClickEvents(treatingPlayableGames: boolean) { function renderPotentialGames() { $('#potential-games-list').html(''); - if (potentialGames.length) - (potentialGames).sort(alphabeticSort); + potentialGames.sort(); let counter: number = 0; potentialGames.forEach((potentialGame: PotentialGame) => { @@ -40,7 +40,7 @@ function renderPotentialGames() { ''; $('#potential-games-list').append(html); counter++; - if (counter == potentialGames.length) + if (counter == potentialGames.games.length) createGameClickEvents(false); }); } @@ -48,26 +48,26 @@ function renderPotentialGames() { function renderPlayableGames() { $('#playable-games-list').html(''); - if (playableGames.length) - (playableGames).sort(alphabeticSort); + playableGames.sort(); let counter: number = 0; playableGames.forEach((playableGame: PlayableGame) => { let html: string = '
  • ' + playableGame.name + '
    • '; $('#playable-games-list').append(html); counter++; - if (counter == playableGames.length) + if (counter == playableGames.games.length) createGameClickEvents(true); }); } export function setClientReady() { + potentialGames = new GamesCollection(); + playableGames = new GamesCollection(); ipcRenderer.send('client.ready'); } export function launchEvents() { ipcRenderer.on('server.send-game', (event, game) => { - console.log(game); $('#game-cover-container').css({ 'display': 'block' }); @@ -91,22 +91,24 @@ export function launchEvents() { }); ipcRenderer.on('server.add-potential-games', (event, games) => { - potentialGames = games; + potentialGames.games = games; renderPotentialGames(); }); ipcRenderer.on('server.add-playable-games', (event, games) => { - playableGames = games; + playableGames.games = games; renderPlayableGames(); }); ipcRenderer.on('server.remove-potential-game', (event, gameId) => { - potentialGames.forEach((potentialGame: PotentialGame) => { - if (potentialGame.uuid == gameId) { - let index: number = potentialGames.indexOf(potentialGame); - potentialGames.splice(index, 1); + potentialGames.removeGame(gameId, (error, game: PotentialGame) => { + if (error) + throw new Error(error); + else if (game) { + playableGames.addGame(PlayableGame.toPlayableGame(game)); renderPotentialGames(); + renderPlayableGames(); } - }); + }) }); } diff --git a/assets/ts/server/events.ts b/assets/ts/server/events.ts index 51f2aab7..9805cfa6 100644 --- a/assets/ts/server/events.ts +++ b/assets/ts/server/events.ts @@ -80,7 +80,7 @@ export const events = { return; fs.mkdirSync(gameDirectory); - let addedGame: any = potentialSteamGame; + let addedGame: any = PlayableGame.toPlayableGame(potentialSteamGame); let screenPath = path.join(gameDirectory, 'background.jpg'); let coverPath = path.join(gameDirectory, 'cover.jpg'); diff --git a/assets/ts/server/games/GamesCollection.ts b/assets/ts/server/games/GamesCollection.ts new file mode 100644 index 00000000..2697be86 --- /dev/null +++ b/assets/ts/server/games/GamesCollection.ts @@ -0,0 +1,66 @@ +import { alphabeticSort } from '../../client/helpers'; + +export class GamesCollection { + private _games: T[]; + + constructor() { + this._games = []; + } + + get games(): T[] { + return this._games; + } + + set games(games: T[]) { + this._games = games; + } + + public getGame(gameId: string, callback) { + let counter: number = 0; + let found: boolean = false; + + this._games.forEach((game: any) => { + if (game.uuid == gameId) { + found = true; + callback(null, game); + } + counter++; + if (counter == this._games.length && !found) + callback('Game not found.', null); + + }); + } + + public addGame(game: T) { + this._games.push(game); + } + + public removeGame(gameId: string, callback) { + let counter: number = 0; + let found: boolean = false; + + this._games.forEach((game: any) => { + if (game.uuid == gameId) { + found = true; + let index: number = this._games.indexOf(game); + this._games.splice(index, 1); + callback(null, game); + } + counter++; + if (counter == this._games.length && !found) + callback('Game not found.', null); + + }); + } + + public sort() { + if (this._games.length) + (this._games).sort(alphabeticSort); + } + + public forEach(callback) { + this._games.forEach(function(game: any) { + callback(game); + }) + } +} diff --git a/assets/ts/server/games/PlayableGame.ts b/assets/ts/server/games/PlayableGame.ts index 7259b130..1d0dad9b 100644 --- a/assets/ts/server/games/PlayableGame.ts +++ b/assets/ts/server/games/PlayableGame.ts @@ -2,4 +2,10 @@ import { PotentialGame } from './PotentialGame'; export class PlayableGame extends PotentialGame { public timePlayed: number; -} \ No newline at end of file + + public static toPlayableGame(game: PotentialGame) { + let playableGame: PlayableGame = game; + playableGame.timePlayed = 0; + return playableGame; + } +} diff --git a/assets/ts/server/games/PotentialGame.ts b/assets/ts/server/games/PotentialGame.ts index 536240f2..50df788e 100644 --- a/assets/ts/server/games/PotentialGame.ts +++ b/assets/ts/server/games/PotentialGame.ts @@ -1,8 +1,15 @@ +import { PlayableGame } from './PlayableGame'; + export class PotentialGame { public commandLine: string[]; public uuid: string; - constructor(public name: string, public details?: any) { - } + constructor(public name: string, public details?: any) {} +/* + public toPlayableGame() { + let playableGame: any = this; + playableGame.timePlayed = 0; + return playableGame; + }*/ } From d64b3e24342a47daa0fba95e51960fa6600df8cd Mon Sep 17 00:00:00 2001 From: Paul Roman Date: Sat, 29 Jul 2017 15:43:19 +0200 Subject: [PATCH 2/9] Version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a8b9eb0c..a967aa75 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vitrine", - "version": "0.0.7", + "version": "0.0.8", "description": "A modern game library using Electron, NodeJS and IGDB.", "main": "main.js", "author": "Paul Roman", From a48eac018a35892f39699ab5cbbd68fb4fe9fed6 Mon Sep 17 00:00:00 2001 From: Paul Roman Date: Sat, 29 Jul 2017 15:46:03 +0200 Subject: [PATCH 3/9] Models used on client and server moved --- assets/ts/client/events.ts | 8 ++++---- .../{server/games => models}/GamesCollection.ts | 2 +- .../ts/{server/games => models}/PlayableGame.ts | 0 assets/ts/models/PotentialGame.ts | 6 ++++++ assets/ts/server/events.ts | 4 ++-- assets/ts/server/games/PlayableGamesCrawler.ts | 2 +- assets/ts/server/games/PotentialGame.ts | 15 --------------- assets/ts/server/games/SteamGamesCrawler.ts | 2 +- 8 files changed, 15 insertions(+), 24 deletions(-) rename assets/ts/{server/games => models}/GamesCollection.ts (95%) rename assets/ts/{server/games => models}/PlayableGame.ts (100%) create mode 100644 assets/ts/models/PotentialGame.ts delete mode 100644 assets/ts/server/games/PotentialGame.ts diff --git a/assets/ts/client/events.ts b/assets/ts/client/events.ts index 69f81f8a..374c655d 100644 --- a/assets/ts/client/events.ts +++ b/assets/ts/client/events.ts @@ -1,9 +1,9 @@ import { ipcRenderer } from 'electron'; -import { PotentialGame } from '../server/games/PotentialGame'; -import { PlayableGame } from '../server/games/PlayableGame'; -import { beforeCss, alphabeticSort } from './helpers'; -import { GamesCollection } from '../server/games/GamesCollection'; +import { PotentialGame } from '../models/PotentialGame'; +import { PlayableGame } from '../models/PlayableGame'; +import { beforeCss } from './helpers'; +import { GamesCollection } from '../models/GamesCollection'; let potentialGames: GamesCollection; let playableGames: GamesCollection; diff --git a/assets/ts/server/games/GamesCollection.ts b/assets/ts/models/GamesCollection.ts similarity index 95% rename from assets/ts/server/games/GamesCollection.ts rename to assets/ts/models/GamesCollection.ts index 2697be86..0db8b6b3 100644 --- a/assets/ts/server/games/GamesCollection.ts +++ b/assets/ts/models/GamesCollection.ts @@ -1,4 +1,4 @@ -import { alphabeticSort } from '../../client/helpers'; +import { alphabeticSort } from '../client/helpers'; export class GamesCollection { private _games: T[]; diff --git a/assets/ts/server/games/PlayableGame.ts b/assets/ts/models/PlayableGame.ts similarity index 100% rename from assets/ts/server/games/PlayableGame.ts rename to assets/ts/models/PlayableGame.ts diff --git a/assets/ts/models/PotentialGame.ts b/assets/ts/models/PotentialGame.ts new file mode 100644 index 00000000..8be28525 --- /dev/null +++ b/assets/ts/models/PotentialGame.ts @@ -0,0 +1,6 @@ +export class PotentialGame { + public commandLine: string[]; + public uuid: string; + + constructor(public name: string, public details?: any) {} +} diff --git a/assets/ts/server/events.ts b/assets/ts/server/events.ts index 9805cfa6..b397f88b 100644 --- a/assets/ts/server/events.ts +++ b/assets/ts/server/events.ts @@ -4,8 +4,8 @@ import { execFile } from 'child_process'; import { IgdbWrapper } from './api/IgdbWrapper'; import { getSteamCrawlerPromise } from './games/SteamGamesCrawler'; -import { PotentialGame } from './games/PotentialGame'; -import { PlayableGame } from './games/PlayableGame'; +import { PotentialGame } from '../models/PotentialGame'; +import { PlayableGame } from '../models/PlayableGame'; import { uuidV5, downloadFile } from './helpers'; import { getPlayableGamesCrawlerPromise } from './games/PlayableGamesCrawler'; diff --git a/assets/ts/server/games/PlayableGamesCrawler.ts b/assets/ts/server/games/PlayableGamesCrawler.ts index 05e0eb3b..61f19a15 100644 --- a/assets/ts/server/games/PlayableGamesCrawler.ts +++ b/assets/ts/server/games/PlayableGamesCrawler.ts @@ -1,7 +1,7 @@ import * as fs from 'fs'; import * as path from 'path'; -import { PlayableGame } from './PlayableGame'; +import { PlayableGame } from '../../models/PlayableGame'; class PlayableGamesCrawler { private playableGames: PlayableGame[]; diff --git a/assets/ts/server/games/PotentialGame.ts b/assets/ts/server/games/PotentialGame.ts deleted file mode 100644 index 50df788e..00000000 --- a/assets/ts/server/games/PotentialGame.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { PlayableGame } from './PlayableGame'; - -export class PotentialGame { - public commandLine: string[]; - public uuid: string; - - constructor(public name: string, public details?: any) {} -/* - public toPlayableGame() { - let playableGame: any = this; - playableGame.timePlayed = 0; - return playableGame; - }*/ - -} diff --git a/assets/ts/server/games/SteamGamesCrawler.ts b/assets/ts/server/games/SteamGamesCrawler.ts index 693347a2..c24b87e4 100644 --- a/assets/ts/server/games/SteamGamesCrawler.ts +++ b/assets/ts/server/games/SteamGamesCrawler.ts @@ -4,7 +4,7 @@ import * as glob from 'glob'; import { uuidV5 } from '../helpers'; import { AcfParser } from '../api/AcfParser'; -import { PotentialGame } from './PotentialGame'; +import { PotentialGame } from '../../models/PotentialGame'; import { IgdbWrapper } from '../api/IgdbWrapper'; class SteamGamesCrawler { From 6b58c9af105be39abb1fbe0da208549902452230 Mon Sep 17 00:00:00 2001 From: Paul Roman Date: Sat, 29 Jul 2017 16:01:13 +0200 Subject: [PATCH 4/9] alphabeticSort helper moved --- assets/ts/client/dom.ts | 6 +++--- assets/ts/client/helpers.ts | 30 ++++++++++++++--------------- assets/ts/models/GamesCollection.ts | 4 +++- assets/ts/server/events.ts | 4 ++-- assets/ts/server/helpers.ts | 6 ++++-- 5 files changed, 26 insertions(+), 24 deletions(-) diff --git a/assets/ts/client/dom.ts b/assets/ts/client/dom.ts index 317d0785..8d007414 100644 --- a/assets/ts/client/dom.ts +++ b/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() { ($('#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(); diff --git a/assets/ts/client/helpers.ts b/assets/ts/client/helpers.ts index 6256ee69..0fcc5b50 100644 --- a/assets/ts/client/helpers.ts +++ b/assets/ts/client/helpers.ts @@ -1,24 +1,22 @@ -$.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) { let rawStyling: string = ''; Object.keys(styling).forEach((key) => { rawStyling += key + ': ' + styling[key] + ';'; }); - $('head').append(''); } - -export function alphabeticSort(nodeA: any, nodeB: any) { - return nodeA.name > nodeB.name; -} diff --git a/assets/ts/models/GamesCollection.ts b/assets/ts/models/GamesCollection.ts index 0db8b6b3..869e5681 100644 --- a/assets/ts/models/GamesCollection.ts +++ b/assets/ts/models/GamesCollection.ts @@ -1,4 +1,6 @@ -import { alphabeticSort } from '../client/helpers'; +function alphabeticSort(nodeA: any, nodeB: any) { + return nodeA.name > nodeB.name; +} export class GamesCollection { private _games: T[]; diff --git a/assets/ts/server/events.ts b/assets/ts/server/events.ts index b397f88b..27904797 100644 --- a/assets/ts/server/events.ts +++ b/assets/ts/server/events.ts @@ -84,9 +84,9 @@ export const events = { let screenPath = path.join(gameDirectory, 'background.jpg'); let coverPath = path.join(gameDirectory, 'cover.jpg'); - downloadFile(addedGame.details.cover, coverPath, () => { + downloadFile(addedGame.details.cover, coverPath, true, () => { addedGame.details.cover = coverPath; - downloadFile(addedGame.details.screenshots[0].replace('t_screenshot_med', 't_screenshot_huge'), screenPath, () => { + downloadFile(addedGame.details.screenshots[0].replace('t_screenshot_med', 't_screenshot_huge'), screenPath, true,() => { addedGame.details.backgroundScreen = screenPath; delete addedGame.details.screenshots; fs.writeFile(configFilePath, JSON.stringify(addedGame, null, 2), (err) => { diff --git a/assets/ts/server/helpers.ts b/assets/ts/server/helpers.ts index 686bab4a..64c123eb 100644 --- a/assets/ts/server/helpers.ts +++ b/assets/ts/server/helpers.ts @@ -1,3 +1,4 @@ +import * as http from 'http'; import * as https from 'https'; import * as fs from 'fs'; import * as uuid from 'uuid/v5'; @@ -8,10 +9,11 @@ export function uuidV5(name: string) { return uuid(name, dnsNamespace); } -export function downloadFile(url, path, callback) { +export function downloadFile(url, path, isHttps, callback) { let file = fs.createWriteStream(path); + let protocol: any = (isHttps) ? (https) : (http); - https.get(url, (response) => { + protocol.get(url, (response) => { response.pipe(file); callback(); }); From 5b2324f9ed57db62946218446768d5173e6de1dc Mon Sep 17 00:00:00 2001 From: Paul Roman Date: Sat, 29 Jul 2017 16:22:35 +0200 Subject: [PATCH 5/9] GamesCollection used on server side --- assets/ts/server/events.ts | 22 ++++++++++-------- .../ts/server/games/PlayableGamesCrawler.ts | 23 ++++++++++++------- assets/ts/server/games/SteamGamesCrawler.ts | 15 ++++++------ 3 files changed, 36 insertions(+), 24 deletions(-) diff --git a/assets/ts/server/events.ts b/assets/ts/server/events.ts index 27904797..e2576696 100644 --- a/assets/ts/server/events.ts +++ b/assets/ts/server/events.ts @@ -3,28 +3,32 @@ import * as fs from 'fs'; import { execFile } from 'child_process'; import { IgdbWrapper } from './api/IgdbWrapper'; -import { getSteamCrawlerPromise } from './games/SteamGamesCrawler'; +import { GamesCollection } from '../models/GamesCollection'; import { PotentialGame } from '../models/PotentialGame'; import { PlayableGame } from '../models/PlayableGame'; -import { uuidV5, downloadFile } from './helpers'; +import { getSteamCrawlerPromise } from './games/SteamGamesCrawler'; import { getPlayableGamesCrawlerPromise } from './games/PlayableGamesCrawler'; +import { uuidV5, downloadFile } from './helpers'; let igdbWrapper: IgdbWrapper = new IgdbWrapper(); -let potentialGames: PotentialGame[]; -let playableGames: PlayableGame[]; +let potentialGames: GamesCollection; +let playableGames: GamesCollection; export const events = { 'client.ready': (event) => { - getSteamCrawlerPromise().then((games: PotentialGame[]) => { + potentialGames = new GamesCollection(); + playableGames = new GamesCollection(); + + getSteamCrawlerPromise().then((games: GamesCollection) => { potentialGames = games; - event.sender.send('server.add-potential-games', potentialGames); + event.sender.send('server.add-potential-games', potentialGames.games); }).catch((error) => { throw error; }); - getPlayableGamesCrawlerPromise().then((games: PlayableGame[]) => { + getPlayableGamesCrawlerPromise().then((games: GamesCollection) => { playableGames = games; - event.sender.send('server.add-playable-games', playableGames); + event.sender.send('server.add-playable-games', playableGames.games); }).catch((error) => { throw error; }); @@ -66,7 +70,7 @@ export const events = { }); } counter++; - if (counter == potentialGames.length && !gameFound) + if (counter == potentialGames.games.length && !gameFound) throw Error('Game not found'); }); }, diff --git a/assets/ts/server/games/PlayableGamesCrawler.ts b/assets/ts/server/games/PlayableGamesCrawler.ts index 61f19a15..c1ffcd7d 100644 --- a/assets/ts/server/games/PlayableGamesCrawler.ts +++ b/assets/ts/server/games/PlayableGamesCrawler.ts @@ -2,6 +2,7 @@ import * as fs from 'fs'; import * as path from 'path'; import { PlayableGame } from '../../models/PlayableGame'; +import { GamesCollection } from '../../models/GamesCollection'; class PlayableGamesCrawler { private playableGames: PlayableGame[]; @@ -15,14 +16,16 @@ class PlayableGamesCrawler { public search(callback) { this.callback = callback; - console.log(this.gamesDirectory); - fs.readdir(this.gamesDirectory, (err, files) => { - if (err) { - this.callback(err, null); + fs.readdir(this.gamesDirectory, (error, files) => { + if (error) { + this.callback(error, null); + return; + } + if (!files.length) { + let playableGames: GamesCollection = new GamesCollection(); + this.callback(null, playableGames); return; } - if (!files.length) - this.callback(null, []); let counter: number = 0; files.forEach((gameId) => { let configFilePath: any = path.join(this.gamesDirectory, gameId, 'config.json'); @@ -31,8 +34,12 @@ class PlayableGamesCrawler { this.playableGames.push(playableGame); } counter++; - if (counter == files.length) - this.callback(null, this.playableGames); + if (counter === files.length) { + let playableGames: GamesCollection = new GamesCollection(); + playableGames.games = this.playableGames; + this.callback(null, playableGames); + delete this.callback; + } }); }); } diff --git a/assets/ts/server/games/SteamGamesCrawler.ts b/assets/ts/server/games/SteamGamesCrawler.ts index c24b87e4..3106ceb8 100644 --- a/assets/ts/server/games/SteamGamesCrawler.ts +++ b/assets/ts/server/games/SteamGamesCrawler.ts @@ -6,6 +6,7 @@ import { uuidV5 } from '../helpers'; import { AcfParser } from '../api/AcfParser'; import { PotentialGame } from '../../models/PotentialGame'; import { IgdbWrapper } from '../api/IgdbWrapper'; +import { GamesCollection } from '../../models/GamesCollection'; class SteamGamesCrawler { private configFilePath: string; @@ -37,17 +38,15 @@ class SteamGamesCrawler { private processGames(error, files): void { if (!files.length) { - /* TODO: Remove this */ - let blankGame: PotentialGame = new PotentialGame('PuTTY', null); - blankGame.commandLine = ['C:/Users/P.ROMAN/Desktop/putty.exe']; - this.callback(null, [blankGame]); + let potentialGames: GamesCollection = new GamesCollection(); + this.callback(null, potentialGames); return; } let counter: number = 0; files.forEach((appManifest, index, array) => { let gameManifest: any = new AcfParser(appManifest).toObject().AppState; - if (this.isGameAlreadyAdded(gameManifest.name)) { + if (SteamGamesCrawler.isGameAlreadyAdded(gameManifest.name)) { counter++; return; } @@ -69,14 +68,16 @@ class SteamGamesCrawler { counter++; if (counter === array.length) { - this.callback(null, this.potentialGames); + let potentialGames: GamesCollection = new GamesCollection(); + potentialGames.games = this.potentialGames; + this.callback(null, potentialGames); delete this.callback; } }); }); } - private isGameAlreadyAdded(name: string) { + private static isGameAlreadyAdded(name: string) { let gameId: string = uuidV5(name); let gameDirectory = path.join(__dirname, 'games', gameId); From 5c63e240dcf3d341b516e5db641e290f04629586 Mon Sep 17 00:00:00 2001 From: Paul Roman Date: Sat, 29 Jul 2017 17:13:20 +0200 Subject: [PATCH 6/9] Clickable playable games --- assets/ts/client/events.ts | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/assets/ts/client/events.ts b/assets/ts/client/events.ts index 374c655d..198d7adc 100644 --- a/assets/ts/client/events.ts +++ b/assets/ts/client/events.ts @@ -1,9 +1,9 @@ import { ipcRenderer } from 'electron'; +import { GamesCollection } from '../models/GamesCollection'; import { PotentialGame } from '../models/PotentialGame'; import { PlayableGame } from '../models/PlayableGame'; import { beforeCss } from './helpers'; -import { GamesCollection } from '../models/GamesCollection'; let potentialGames: GamesCollection; let playableGames: GamesCollection; @@ -13,7 +13,26 @@ function createGameClickEvents(treatingPlayableGames: boolean) { $('a.play-game-link[game-id]').each(function() { $(this).click(() => { let gameId: string = $(this).attr('game-id'); - ipcRenderer.send('client.launch-game', gameId); + playableGames.getGame(gameId, (error, game) => { + if (error) + throw new Error(error); + 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 + }); + }); + // ipcRenderer.send('client.launch-game', gameId); }); }); } From 18ef303c3971763b0537a47b16e018b2e1dde45b Mon Sep 17 00:00:00 2001 From: Paul Roman Date: Sat, 29 Jul 2017 17:18:48 +0200 Subject: [PATCH 7/9] Selected game watcher added --- assets/ts/client/events.ts | 4 ++++ assets/ts/client/helpers.ts | 1 + 2 files changed, 5 insertions(+) diff --git a/assets/ts/client/events.ts b/assets/ts/client/events.ts index 198d7adc..c48a44ac 100644 --- a/assets/ts/client/events.ts +++ b/assets/ts/client/events.ts @@ -7,6 +7,7 @@ import { beforeCss } from './helpers'; let potentialGames: GamesCollection; let playableGames: GamesCollection; +let selectedGameId: string; function createGameClickEvents(treatingPlayableGames: boolean) { if (treatingPlayableGames) { @@ -16,6 +17,8 @@ function createGameClickEvents(treatingPlayableGames: boolean) { playableGames.getGame(gameId, (error, game) => { if (error) throw new Error(error); + if (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({ @@ -31,6 +34,7 @@ function createGameClickEvents(treatingPlayableGames: boolean) { beforeCss('#game-background', { 'background-image': gameBgScreen }); + selectedGameId = gameId; }); // ipcRenderer.send('client.launch-game', gameId); }); diff --git a/assets/ts/client/helpers.ts b/assets/ts/client/helpers.ts index 0fcc5b50..1c638d7e 100644 --- a/assets/ts/client/helpers.ts +++ b/assets/ts/client/helpers.ts @@ -14,6 +14,7 @@ export function extendJQuery() { } export function beforeCss(selector: any, styling: object) { + $('head style').remove(); let rawStyling: string = ''; Object.keys(styling).forEach((key) => { rawStyling += key + ': ' + styling[key] + ';'; From 33c096551b7386745617e3d455ba036b41f9e266 Mon Sep 17 00:00:00 2001 From: Paul Roman Date: Sat, 29 Jul 2017 17:27:40 +0200 Subject: [PATCH 8/9] Potential => Playable bug corrected --- assets/ts/client/events.ts | 7 +++++-- assets/ts/server/events.ts | 1 + 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/assets/ts/client/events.ts b/assets/ts/client/events.ts index c48a44ac..a04d9fd5 100644 --- a/assets/ts/client/events.ts +++ b/assets/ts/client/events.ts @@ -128,10 +128,13 @@ export function launchEvents() { if (error) throw new Error(error); else if (game) { - playableGames.addGame(PlayableGame.toPlayableGame(game)); renderPotentialGames(); - renderPlayableGames(); } }) }); + + ipcRenderer.on('server.add-playable-game', (event, playableGame) => { + playableGames.addGame(playableGame); + renderPlayableGames(); + }); } diff --git a/assets/ts/server/events.ts b/assets/ts/server/events.ts index e2576696..8f1db08f 100644 --- a/assets/ts/server/events.ts +++ b/assets/ts/server/events.ts @@ -97,6 +97,7 @@ export const events = { if (err) throw err; event.sender.send('server.remove-potential-game', potentialSteamGame.uuid); + event.sender.send('server.add-playable-game', addedGame); }); }); }); From 6ba13c073c3b8b1e8fd2349ac13c5e826757c26e Mon Sep 17 00:00:00 2001 From: Paul Roman Date: Sat, 29 Jul 2017 17:42:34 +0200 Subject: [PATCH 9/9] Client events => Client class --- assets/ts/client/VitrineClient.ts | 146 ++++++++++++++++++++++++++++++ assets/ts/client/events.ts | 140 ---------------------------- assets/ts/client/main.ts | 7 +- 3 files changed, 150 insertions(+), 143 deletions(-) create mode 100644 assets/ts/client/VitrineClient.ts delete mode 100644 assets/ts/client/events.ts diff --git a/assets/ts/client/VitrineClient.ts b/assets/ts/client/VitrineClient.ts new file mode 100644 index 00000000..9486a66d --- /dev/null +++ b/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; + private playableGames: GamesCollection; + 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 = '
  • ' + + //'' + potentialGame.name + '' + + '' + + '
    • '; + $('#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 = '
  • ' + playableGame.name + '
    • '; + $('#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); + }); + }); + } + } +} diff --git a/assets/ts/client/events.ts b/assets/ts/client/events.ts deleted file mode 100644 index a04d9fd5..00000000 --- a/assets/ts/client/events.ts +++ /dev/null @@ -1,140 +0,0 @@ -import { ipcRenderer } from 'electron'; - -import { GamesCollection } from '../models/GamesCollection'; -import { PotentialGame } from '../models/PotentialGame'; -import { PlayableGame } from '../models/PlayableGame'; -import { beforeCss } from './helpers'; - -let potentialGames: GamesCollection; -let playableGames: GamesCollection; -let selectedGameId: string; - -function createGameClickEvents(treatingPlayableGames: boolean) { - if (treatingPlayableGames) { - $('a.play-game-link[game-id]').each(function() { - $(this).click(() => { - let gameId: string = $(this).attr('game-id'); - playableGames.getGame(gameId, (error, game) => { - if (error) - throw new Error(error); - if (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 - }); - selectedGameId = gameId; - }); - // ipcRenderer.send('client.launch-game', gameId); - }); - }); - } - else { - $('button.add-game-btn[game-id]').each(function() { - $(this).click(() => { - let gameId: string = $(this).attr('game-id'); - ipcRenderer.send('client.add-game', gameId); - }); - }); - } -} - -function renderPotentialGames() { - $('#potential-games-list').html(''); - - potentialGames.sort(); - - let counter: number = 0; - potentialGames.forEach((potentialGame: PotentialGame) => { - let html: string = '
  • ' + - //'' + potentialGame.name + '' + - '' + - '
    • '; - $('#potential-games-list').append(html); - counter++; - if (counter == potentialGames.games.length) - createGameClickEvents(false); - }); -} - -function renderPlayableGames() { - $('#playable-games-list').html(''); - - playableGames.sort(); - - let counter: number = 0; - playableGames.forEach((playableGame: PlayableGame) => { - let html: string = '
  • ' + playableGame.name + '
    • '; - $('#playable-games-list').append(html); - counter++; - if (counter == playableGames.games.length) - createGameClickEvents(true); - }); -} - -export function setClientReady() { - potentialGames = new GamesCollection(); - playableGames = new GamesCollection(); - ipcRenderer.send('client.ready'); -} - -export function 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) => { - potentialGames.games = games; - renderPotentialGames(); - }); - - ipcRenderer.on('server.add-playable-games', (event, games) => { - playableGames.games = games; - renderPlayableGames(); - }); - - ipcRenderer.on('server.remove-potential-game', (event, gameId) => { - potentialGames.removeGame(gameId, (error, game: PotentialGame) => { - if (error) - throw new Error(error); - else if (game) { - renderPotentialGames(); - } - }) - }); - - ipcRenderer.on('server.add-playable-game', (event, playableGame) => { - playableGames.addGame(playableGame); - renderPlayableGames(); - }); -} diff --git a/assets/ts/client/main.ts b/assets/ts/client/main.ts index a29d466d..c9eca595 100644 --- a/assets/ts/client/main.ts +++ b/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(); });