@@ -143,7 +128,7 @@ function SortableColumn(props: SortableColumnProps) {
{ active ? (
): undefined }
diff --git a/src/renderer/components/GameListItem.tsx b/src/renderer/components/GameListItem.tsx
index 442ec098b..8ff861afa 100644
--- a/src/renderer/components/GameListItem.tsx
+++ b/src/renderer/components/GameListItem.tsx
@@ -1,10 +1,14 @@
+import { num } from '@shared/utils/Coerce';
+import { Game } from 'flashpoint-launcher';
+import { DisplaySettings, GameListComponentProps } from 'flashpoint-launcher-renderer';
import * as React from 'react';
import { ListRowProps } from 'react-virtualized';
-import { getPlatformIconURL } from '../Util';
+import { DynamicComponent } from './DynamicComponent';
import { GameDragEventData } from './pages/BrowsePage';
-import { num } from '@shared/utils/Coerce';
export type GameListItemProps = ListRowProps & {
+ displaySettings: DisplaySettings;
+ game?: Game;
id: string;
title: string;
platform: string;
@@ -29,85 +33,74 @@ export type GameListItemProps = ListRowProps & {
/** Game drag event */
onDrop?: (event: React.DragEvent) => void;
onDragOver?: (event: React.DragEvent) => void;
+ totalWeight: number;
};
export function GameListItem(props: GameListItemProps) {
- const { id, title, platform, tags, developer, publisher, extreme, tagGroupIconBase64, isDraggable, isSelected, isDragged, extremeIconPath, showExtremeIcon, index, style, onDrop,
+ const { id, extreme, tagGroupIconBase64, isDraggable, isSelected, isDragged, extremeIconPath, showExtremeIcon, index, style, onDrop,
onDragOver } = props;
- // Get the platform icon path
- const platformIcon = React.useMemo(() => (
- getPlatformIconURL(platform, props.logoVersion)
- ), [platform]);
+ const game = props.game!;
// Pick class names
- const className = React.useMemo(() => {
- let className = 'game-list-item';
- if (index % 2 === 0) { className += ' game-list-item--even'; }
- if (isSelected) { className += ' game-list-item--selected'; }
- if (isDragged) { className += ' game-list-item--dragged'; }
- return className;
- }, [index, isSelected, isDragged]);
- // Memoize render
- return React.useMemo(() => {
- // Set element attributes
- const attributes: any = {};
- attributes[GameListItem.idAttribute] = id;
- attributes[GameListItem.indexAttribute] = index;
- // Render
- return (
-
- { showExtremeIcon &&
+ let className = 'game-list-item';
+ if (index % 2 === 0) { className += ' game-list-item--even'; }
+ if (isSelected) { className += ' game-list-item--selected'; }
+ if (isDragged) { className += ' game-list-item--dragged'; }
+ // Set element attributes
+ const attributes: any = {};
+ attributes[GameListItem.idAttribute] = id;
+ attributes[GameListItem.indexAttribute] = index;
+ attributes[GameListItem.logoPathAttribute] = props.game?.logoPath;
+ attributes[GameListItem.screenshotPathAttribute] = props.game?.screenshotPath;
+
+ const gameListComponentProps: GameListComponentProps = {
+ isSelected,
+ isDragged,
+ game,
+ logoVersion: props.logoVersion,
+ };
+
+ // Render
+ return (
+
+ { props.displaySettings.gameList.columns.filter(col => col.type === 'icon').map(col => {
+ return ;
+ })}
+ { showExtremeIcon &&
(extreme ? (
- ) : (tagGroupIconBase64 ? (
-
+ ) : (tagGroupIconBase64 ? (
+
) : (
)))
- }
-
-
-
- {title}
-
-
- {developer}
-
-
- {publisher}
-
-
- {tags.join('; ')}
-
-
- );
- }, [style, className, isDraggable, id, tags, title, platformIcon, onDrop, onDragOver]);
+ }
+
+ { props.displaySettings.gameList.columns.filter(col => col.type === 'normal').map(col => {
+ return
+
+
;
+ })}
+
+
+ );
}
export namespace GameListItem {
/** ID of the attribute used to store the game's id. */
export const idAttribute = 'data-game-id';
export const indexAttribute = 'data-game-index';
+ export const logoPathAttribute = 'data-game-logo-path';
+ export const screenshotPathAttribute = 'data-game-screenshot-path';
/**
* Get the data of the game displayed in a GameListItem element (or throw an error if it fails).
@@ -117,10 +110,14 @@ export namespace GameListItem {
export function getDragEventData(element: Element): GameDragEventData {
const gameId = element.getAttribute(GameListItem.idAttribute);
const index = num(element.getAttribute(GameListItem.indexAttribute));
+ const logoPath = element.getAttribute(GameListItem.logoPathAttribute) || '';
+ const screenshotPath = element.getAttribute(GameListItem.screenshotPathAttribute) || '';
if (typeof gameId !== 'string') { throw new Error('Failed to get ID from GameListItem element. Attribute not found.'); }
return {
gameId,
- index
+ index,
+ logoPath,
+ screenshotPath
};
}
diff --git a/src/renderer/components/GameOrder.tsx b/src/renderer/components/GameOrder.tsx
index 6df379960..95a5faa43 100644
--- a/src/renderer/components/GameOrder.tsx
+++ b/src/renderer/components/GameOrder.tsx
@@ -1,12 +1,16 @@
-import { GameOrderBy, GameOrderReverse } from 'flashpoint-launcher';
+import { ExtOrder, GameOrderBy, GameOrderReverse } from 'flashpoint-launcher';
import * as React from 'react';
import { LangContext } from '../util/lang';
+import { useContext } from 'react';
+import { useAppSelector } from '@renderer/hooks/useAppSelector';
export type GameOrderProps = {
/** Called when the either the property to order by, or what way to order in, is changed. */
onChange?: (event: GameOrderChangeEvent) => void;
/** What property to order the games by. */
orderBy: GameOrderBy;
+ /** Extension order settings */
+ extOrder: ExtOrder;
/** What way to order the games in. */
orderReverse: GameOrderReverse;
};
@@ -15,68 +19,101 @@ export type GameOrderProps = {
export type GameOrderChangeEvent = {
orderBy: GameOrderBy;
orderReverse: GameOrderReverse;
+ extOrder: ExtOrder;
};
/**
* Two drop down lists, the first for selecting what to order the games by, and
* the second for selecting what way to order the games in.
*/
-export class GameOrder extends React.Component
{
- render() {
- const strings = this.context.filter;
- const allStrings = this.context;
- return (
- <>
- {/* Order By */}
-
- {/* Order Reverse */}
-
-
- );
- }
+export function GameOrder(props: GameOrderProps) {
+ const allStrings = useContext(LangContext);
+ const orderables = useAppSelector(state => state.main.extOrderables);
+ const strings = allStrings.filter;
- onOrderByChange = (event: React.ChangeEvent): void => {
- this.updateOrder({ orderBy: event.target.value as GameOrderBy }); // Let the parser deal with invalid values instead. How would this even happen?
+ const onOrderByChange = (event: React.ChangeEvent) => {
+ const orderBy = event.target.value as GameOrderBy;
+ const extId = event.target.selectedOptions[0].getAttribute('ext-id');
+ const extKey = event.target.selectedOptions[0].getAttribute('ext-key');
+ const extOrderable = orderables.find(e => e.extId === extId && e.key === extKey);
+ console.log(`selected ${extId} ${extKey}`);
+ if (extOrderable) {
+ updateOrder({ orderBy }, extOrderable);
+ } else {
+ updateOrder({ orderBy }, {
+ extId: '',
+ key: '',
+ default: ''
+ });
+ }
};
- onOrderReverseChange = (event: React.ChangeEvent): void => {
+ const onOrderReverseChange = (event: React.ChangeEvent) => {
if (isOrderReverse(event.target.value)) {
- this.updateOrder({ orderReverse: event.target.value });
+ updateOrder({ orderReverse: event.target.value }, props.extOrder);
} else {
console.error(`Failed to set "Order Reverse". Value is invalid! (value: "${event.target.value}")`);
}
};
- updateOrder(data: Partial): void {
- if (this.props.onChange) {
- this.props.onChange({
- orderBy: data.orderBy || this.props.orderBy,
- orderReverse: data.orderReverse || this.props.orderReverse,
+ const updateOrder = (data: Partial, extOrder: ExtOrder) => {
+ if (props.onChange) {
+ props.onChange({
+ orderBy: data.orderBy || props.orderBy,
+ orderReverse: data.orderReverse || props.orderReverse,
+ extOrder,
});
}
+ };
+
+ // Only apply ext selection if it exists
+ const extOrderables = orderables.map(e => `ext_${e.extId}_${e.key}`);
+ let selected: string = props.orderBy;
+ if (props.extOrder) {
+ const extOrderKey = `ext_${props.extOrder.extId}_${props.extOrder.key}`;
+ if (extOrderables.includes(extOrderKey)) {
+ selected = extOrderKey;
+ }
}
- static contextType = LangContext;
+ return (
+ <>
+ {/* Order By */}
+
+ {/* Order Reverse */}
+
+
+ );
}
function isOrderReverse(value: string): value is GameOrderReverse {
diff --git a/src/renderer/components/Header.tsx b/src/renderer/components/Header.tsx
index a313e33a0..6c5279eee 100644
--- a/src/renderer/components/Header.tsx
+++ b/src/renderer/components/Header.tsx
@@ -5,7 +5,7 @@ import { FpfssUser } from '@shared/back/types';
import { getLibraryItemTitle } from '@shared/library/util';
import { MenuItemConstructorOptions } from 'electron';
import * as React from 'react';
-import { Link, RouteComponentProps, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
import { WithPreferencesProps } from '../containers/withPreferences';
import { Paths } from '@shared/Paths';
import { joinLibraryRoute } from '../Util';
@@ -19,6 +19,7 @@ import { WithMainStateProps } from '@renderer/containers/withMainState';
import { DialogField, DialogState } from 'flashpoint-launcher';
import { uuid } from '@shared/utils/uuid';
import { WithConfirmDialogProps } from '@renderer/containers/withConfirmDialog';
+import { WithNavigationProps } from '@renderer/containers/withNavigation';
const viewDragType = 'text/plain';
@@ -33,9 +34,9 @@ type OwnProps = {
logoutUser: () => void;
};
-export type HeaderProps = OwnProps & RouteComponentProps & WithMainStateProps & WithConfirmDialogProps & WithPreferencesProps & WithTagCategoriesProps & WithSearchProps & WithViewProps;
+export type HeaderProps = OwnProps & WithMainStateProps & WithConfirmDialogProps & WithPreferencesProps & WithTagCategoriesProps & WithSearchProps & WithViewProps & WithNavigationProps;
-type HeaderState = {};
+type HeaderState = Record;
/** The header that is always visible at the top of the main window (just below the title bar). */
export class Header extends React.Component {
@@ -77,13 +78,13 @@ export class Header extends React.Component