Merge pull request #26 from paul-roman/dev

Ready for 0.6.3
vitrine-app · Nov 24, 2017 · 9faeded · 9faeded
2 parents 7349d1d + fe698f1
commit 9faeded
Show file tree

Hide file tree

Showing 21 changed files with 762 additions and 461 deletions.
diff --git a/assets/client/components/AddGameModal.tsx b/assets/client/components/AddGameModal.tsx
@@ -111,7 +111,7 @@ export class AddGameModal extends VitrineComponent {
 	}
 
 	private addGameBtnClickHandler() {
-		let gameInfos: any = {...this.state};
+		let gameInfos: any = { ...this.state };
 		delete gameInfos.potentialBackgrounds;
 		delete gameInfos.isEditing;
 		if (gameInfos.cover && !gameInfos.cover.startsWith('http'))
@@ -171,13 +171,15 @@ export class AddGameModal extends VitrineComponent {
 							<div className={`modal-body ${css(styles.modalBody)}`}>
 								<div className="row">
 									<div className="col-md-2">
-										<label className={css(styles.coverLabel)}>{localizer.f('coverLabel')}</label>
-										<BlurPicture
-											faIcon={'folder-open-o'}
-											fontSize={55}
-											background={this.state.cover}
-											clickHandler={this.gameCoverClickHandler.bind(this)}
-										/>
+										<div className={css(styles.coverDiv)}>
+											<label>{localizer.f('coverLabel')}</label>
+											<BlurPicture
+												faIcon={'folder-open-o'}
+												fontSize={55}
+												background={this.state.cover}
+												clickHandler={this.gameCoverClickHandler.bind(this)}
+											/>
+										</div>
 									</div>
 									<div className="col-md-7 col-md-offset-1">
 										<form className={css(styles.addGameForm)}>
@@ -374,7 +376,7 @@ const styles: React.CSSProperties = StyleSheet.create({
 		resize: 'none',
 		height: 7..em()
 	},
-	coverLabel: {
+	coverDiv: {
 		paddingLeft: 40
 	}
 });
diff --git a/assets/client/components/AddPotentialGamesModal.tsx b/assets/client/components/AddPotentialGamesModal.tsx
@@ -28,16 +28,14 @@ export class AddPotentialGamesModal extends VitrineComponent {
 						<div className="modal-body">
 							<div className={`row ${css(styles.potentialGamesRow)}`}>
 								{this.props.potentialGames.games.map((potentialGame: PotentialGame, index: number) =>
-									<div key={index} className="col-md-3">
-										<div className={css(styles.potentialGameCover)}>
-											<BlurPicture
-												faIcon={'plus-circle'}
-												fontSize={55}
-												background={potentialGame.details.cover}
-												clickHandler={this.gameCoverClickHandler.bind(this, potentialGame)}
-											/>
-											<span className={css(styles.potentialGameName)}>{potentialGame.name}</span>
-										</div>
+									<div key={index} className={`col-md-3 ${css(styles.potentialGameCell)}`}>
+										<BlurPicture
+											faIcon={'plus-circle'}
+											fontSize={55}
+											background={potentialGame.details.cover}
+											clickHandler={this.gameCoverClickHandler.bind(this, potentialGame)}
+										/>
+										<p>{potentialGame.name}</p>
 									</div>
 								)}
 							</div>
@@ -56,6 +54,9 @@ const styles: React.CSSProperties = StyleSheet.create({
 		maxHeight: 810,
 		overflowY: 'auto'
 	},
+	potentialGameCell: {
+		height: 300
+	},
 	potentialGameName: {
 		fontWeight: 300,
 		fontSize: 18,

diff --git a/assets/client/components/App.tsx b/assets/client/components/App.tsx
@@ -13,7 +13,7 @@ export class App extends React.Component {
 	private config: any;
 
 	public constructor() {
-		super();
+		super(null);
 
 		this.initLanguages();
 		$(document).on('show.bs.modal', '.modal', function() {

diff --git a/assets/client/components/BlurPicture.tsx b/assets/client/components/BlurPicture.tsx
@@ -7,7 +7,6 @@ import { urlify } from '../helpers';
 
 export class BlurPicture extends VitrineComponent {
 	private pulseDuration: number;
-	private mounted: boolean;
 
 	public constructor(props: any) {
 		super(props);
@@ -19,9 +18,9 @@ export class BlurPicture extends VitrineComponent {
 		this.state = {
 			divClassName: '',
 			divStyle: {
-				width: `${divWidth}em`,
-				height: `${divHeight}em`,
-				fontSize: `${this.props.fontSize}px`,
+				width: divWidth.em(),
+				height: divHeight.em(),
+				fontSize: this.props.fontSize.px(),
 				animationDuration: `${this.pulseDuration}ms`
 			},
 			imageStyle: {
@@ -38,15 +37,13 @@ export class BlurPicture extends VitrineComponent {
 	private mouseEnterHandler() {
 		let imageStyle: any = this.state.imageStyle;
 		let iconStyle: any = this.state.iconStyle;
-		imageStyle.filter = `blur(${4}px)`;
+		imageStyle.filter = `blur(${4..px()})`;
 		iconStyle.display = 'inline';
 
-		if (!this.mounted)
-			return;
 		this.setState({
 			imageStyle: {
 				backgroundImage: urlify(this.props.background),
-				filter: `blur(${4}px)`
+				filter: `blur(${4..px()})`
 			},
 			iconClassName: 'animated zoomIn',
 			iconStyle: iconStyle
@@ -59,8 +56,6 @@ export class BlurPicture extends VitrineComponent {
 		imageStyle.filter = '';
 		iconStyle.display = 'none';
 
-		if (!this.mounted)
-			return;
 		this.setState({
 			imageStyle: {
 				backgroundImage: urlify(this.props.background),
@@ -72,14 +67,10 @@ export class BlurPicture extends VitrineComponent {
 	}
 
 	private clickHandler() {
-		if (!this.mounted)
-			return;
 		this.setState({
 			divClassName: 'animated pulse'
 		}, () => {
-			if (!this.mounted)
-				return;
-			setTimeout(() => {
+			setTimeout(10, () => {
 				this.setState({
 					divClassName: ''
 				});
@@ -90,8 +81,6 @@ export class BlurPicture extends VitrineComponent {
 	}
 
 	public componentWillReceiveProps(props: any) {
-		if (!this.mounted)
-			return;
 		this.setState({
 			imageStyle: {
 				backgroundImage: urlify(props.background),
@@ -100,14 +89,6 @@ export class BlurPicture extends VitrineComponent {
 		});
 	}
 
-	public componentDidMount() {
-		this.mounted = true;
-	}
-
-	public componentWillUnmount() {
-		this.mounted = false;
-	}
-
 	public render(): JSX.Element {
 		return (
 			<div
@@ -132,18 +113,17 @@ const styles: React.CSSProperties = StyleSheet.create({
 	container: {
 		overflow: 'hidden',
 		position: 'relative',
-		left: 40,
+		//left: 40,
 		color: '#F1F1F1',
-		textShadow: `${0} ${0} ${10}px ${rgba(8, 8, 8, 0.17)}`,
-		boxShadow: `${0} ${0} ${10}px ${rgba(0, 0, 0, 0.55)}`
+		textShadow: `${0} ${0} ${10..px()} ${rgba(8, 8, 8, 0.17)}`,
+		boxShadow: `${0} ${0} ${10..px()} ${rgba(0, 0, 0, 0.55)}`
 	},
 	picture: {
 		width: 100..percents(),
 		height: 100..percents(),
 		cursor: 'pointer',
 		backgroundRepeat: 'no-repeat',
 		backgroundSize: `${100..percents()} ${100..percents()}`,
-		transform: `scale(${1.02.percents()})`,
 		transition: `${75}ms filter linear`
 	},
 	icon: {

diff --git a/assets/client/components/ErrorsWrapper.tsx b/assets/client/components/ErrorsWrapper.tsx
@@ -44,7 +44,6 @@ export class ErrorsWrapper extends React.Component<any, any> {
 							<div className="modal-body">
 								<h4>{localizer.f('crash')}</h4>
 								<hr className={css(styles.hr)}/>
-								<p className={css(styles.errorMessage)}>{this.state.error.message}</p>
 								<pre className={css(styles.errorStack)}>{this.state.error.stack}</pre>
 							</div>
 							<div className="modal-footer">
@@ -81,18 +80,14 @@ const styles: React.CSSProperties = StyleSheet.create({
 		top: -50,
 		right: 23
 	},
-	errorMessage: {
-		fontSize: 23,
-		marginTop: 15
-	},
 	errorStack: {
 		color: '#BDB3B3',
 		backgroundColor: '#272020',
-		border: `solid ${1}px #674242`
+		border: `solid ${1..px()} #674242`
 	},
 	hr: {
 		marginTop: 14,
 		marginBottom: 14,
-		borderTop: `solid ${1}px ${rgba(179, 144, 144, 0.39)}`
+		borderTop: `solid ${1..px()} ${rgba(179, 144, 144, 0.39)}`
 	}
 });
diff --git a/assets/client/components/GameContainer.tsx b/assets/client/components/GameContainer.tsx
@@ -15,7 +15,6 @@ import * as bootstrapVariables from '!!sass-variable-loader!../sass/bootstrap.va
 export class GameContainer extends VitrineComponent {
 	public constructor(props: any) {
 		super(props);
-
 		this.state = {
 			selectedGame: props.selectedGame,
 			backgroundImage: 'none'
@@ -27,14 +26,14 @@ export class GameContainer extends VitrineComponent {
 			this.setState({
 				selectedGame: props.selectedGame
 			}, () => {
-				let currentBackgroundImage: string;
+				let backgroundImage: string;
 				if (props.selectedGame && props.selectedGame.details.backgroundScreen) {
-					currentBackgroundImage = urlify(props.selectedGame.details.backgroundScreen);
+					backgroundImage = urlify(props.selectedGame.details.backgroundScreen);
 				}
 				else
-					currentBackgroundImage = 'none';
+					backgroundImage = 'none';
 				this.setState({
-					backgroundImage: currentBackgroundImage
+					backgroundImage
 				});
 			});
 		}
@@ -88,12 +87,14 @@ export class GameContainer extends VitrineComponent {
 						</div>
 					</div>
 					<div className="col-md-4">
-						<BlurPicture
-							faIcon={'play'}
-							fontSize={125}
-							background={this.state.selectedGame.details.cover}
-							clickHandler={this.props.launchGameCallback.bind(null, this.state.selectedGame.uuid)}
-						/>
+						<div className={css(styles.coverDiv)}>
+							<BlurPicture
+								faIcon={'play'}
+								fontSize={125}
+								background={this.state.selectedGame.details.cover}
+								clickHandler={this.props.launchGameCallback.bind(null, this.state.selectedGame.uuid)}
+							/>
+						</div>
 					</div>
 				</div>
 			);
@@ -140,9 +141,9 @@ const styles: React.CSSProperties = StyleSheet.create({
 		left: 0,
 		opacity: 0.8,
 		backgroundRepeat: 'no-repeat',
-		backgroundSize: 'cover',
+		backgroundSize: `${100..percents()} ${100..percents()}`,
 		filter: `blur(${4..px()})`,
-		transform: `scale(${1.02})`
+		transition: `${150}ms ease`
 	},
 	noSelectedGame: {
 		padding: 50
@@ -161,7 +162,7 @@ const styles: React.CSSProperties = StyleSheet.create({
 		color: bootstrapVariables.textColor
 	},
 	selectedGameCoreHr: {
-		borderTop: `solid ${1}px ${rgba(210, 210, 210, 0.15)}`
+		borderTop: `solid ${1..px()} ${rgba(210, 210, 210, 0.15)}`
 	},
 	selectedGameInfos: {
 		backgroundColor: rgba(0, 0, 0, 0.49),
@@ -173,5 +174,8 @@ const styles: React.CSSProperties = StyleSheet.create({
 	},
 	selectedGameInfosSpan: {
 		marginLeft: 15
+	},
+	coverDiv: {
+		paddingLeft: 40
 	}
 });
diff --git a/assets/client/components/IgdbResearchModal.tsx b/assets/client/components/IgdbResearchModal.tsx
@@ -201,7 +201,7 @@ const styles: React.CSSProperties = StyleSheet.create({
 	igdbResearchImg: {
 		width: 90,
 		height: 120,
-		boxShadow: `${0} ${0} ${5}px ${rgba(12, 12, 12, 0.33)}`
+		boxShadow: `${0} ${0} ${5..px()} ${rgba(12, 12, 12, 0.33)}`
 	},
 	igdbResearchName: {
 		top: 48

diff --git a/assets/client/components/ImagesCollection.tsx b/assets/client/components/ImagesCollection.tsx
@@ -100,7 +100,7 @@ const styles: React.CSSProperties = StyleSheet.create({
 		height: 270,
 		margin: 5,
 		borderRadius: bootstrapVariables.borderRadiusBase,
-		boxShadow: `${0} ${0} ${6}px ${rgba(0, 0, 0, 0.46)}`,
+		boxShadow: `${0} ${0} ${6..px()} ${rgba(0, 0, 0, 0.46)}`,
 		filter: `brightness(${65}%)`
 	},
 	selectedImage: {

diff --git a/assets/client/components/LaunchedGameContainer.tsx b/assets/client/components/LaunchedGameContainer.tsx
@@ -31,8 +31,11 @@ const backgroundKeyframes: React.CSSProperties = {
 	'0%': {
 		backgroundSize: 100..percents()
 	},
+	'85%': {
+		backgroundSize: 120..percents()
+	},
 	'100%': {
-		backgroundSize: 100..percents()
+		backgroundSize: 120..percents()
 	}
 };
 
@@ -43,7 +46,7 @@ const styles: React.CSSProperties = StyleSheet.create({
 	},
 	launchedGameTitle: {
 		fontSize: 50,
-		color: '#FFFFFF'
+		color: rgba(255, 255, 255, 0.7)
 	},
 	launchedGameHr: {
 		margin: margin(10, 40..vw()),

diff --git a/assets/client/components/TaskBar.tsx b/assets/client/components/TaskBar.tsx
@@ -122,7 +122,7 @@ const styles: React.CSSProperties = StyleSheet.create({
 		borderTop: border(1, 'solid', rgba(31, 30, 30, 0.63)),
 		borderBottom: border(1, 'solid', rgba(31, 30, 30, 0.63)),
 		padding: padding(4, 0, 0, 15),
-		boxShadow: `${0} ${0} ${9}px ${rgba(0, 0, 0, 0.55)}`,
+		boxShadow: `${0} ${0} ${9..px()} ${rgba(0, 0, 0, 0.55)}`,
 		'-webkitAppRegion': 'drag'
 	},
 	potentialGamesContainer: {

diff --git a/assets/client/components/Vitrine.tsx b/assets/client/components/Vitrine.tsx
@@ -174,8 +174,11 @@ export class Vitrine extends VitrineComponent {
 		});
 	}
 
-	private serverError(event: Event, error: Error) {
-		this.throwError(error.message);
+	private serverError(event: Event, errorName: string, errorStack: string) {
+		let error: Error = new Error(errorName);
+		error.stack = errorStack;
+		error.name = errorName;
+		this.throwError(error);
 	}
 
 	private taskBarRefreshBtnClickHandler() {
@@ -269,10 +272,9 @@ export class Vitrine extends VitrineComponent {
 			.on('server.add-potential-games', this.addPotentialGames.bind(this))
 			.on('server.stop-game', this.stopGame.bind(this))
 			.on('server.settings-updated', this.settingsUpdated.bind(this))
-			.on('server.server-error', this.serverError.bind(this));
+			.on('server.error', this.serverError.bind(this));
 
 		window.addEventListener('keydown', this.keyDownHandler.bind(this));
-
 	}
 
 	public componentWillUnmount() {