feat: Searchables

refactor: More memo cleanup

Author: colin969

extensions/core-nga/src/components.ts

@@ -1,4 +1,4 @@
-import { NgCredits, NgFaves, NgRating, NgScore, NgViews, NgRatingGridIcon, NgRatingListIcon } from './components/components';
+import { NgCredits, NgFaves, NgRating, NgScore, NgViews, NgRatingGridIcon, NgRatingListIcon, NgRatingSearchableSelect } from './components/components';
 
 const components: Record<string, React.ComponentType<any>> = {
   'NgRating': NgRating,
@@ -8,9 +8,9 @@ const components: Record<string, React.ComponentType<any>> = {
   'NgCredits': NgCredits,
   'NgRatingGridIcon': NgRatingGridIcon,
   'NgRatingListIcon': NgRatingListIcon,
+  'NgRatingSearchableSelect': NgRatingSearchableSelect,
 };
 
-
 (function() {
   // Update the display settings with our components
   const compDisplay = [
@@ -39,6 +39,8 @@ const components: Record<string, React.ComponentType<any>> = {
   // Add role icon
   window.displaySettings.gameGrid.upper.unshift('NgRatingGridIcon');
   window.displaySettings.gameList.icons.unshift('NgRatingListIcon');
+
+  window.displaySettings.searchComponents.push('NgRatingSearchableSelect');
 }());
 
 export default components;

extensions/core-nga/src/components/components.tsx

@@ -1,4 +1,4 @@
-import { DropdownItem, GameComponentProps, GameGridComponentProps, GameListComponentProps } from 'flashpoint-launcher-renderer';
+import { DropdownItem, GameComponentProps, GameGridComponentProps, GameListComponentProps, SearchableSelectItem, SearchComponentProps } from 'flashpoint-launcher-renderer';
 import { IconType } from 'react-icons';
 import { FaBug, FaChalkboardTeacher, FaCog, FaCrown, FaDesktop, FaDollarSign, FaFilm, FaMicrophone, FaMusic, FaPaintBrush, FaPenAlt, FaPencilAlt, FaSun, FaTruck, FaVolumeUp } from 'react-icons/fa';
 
@@ -50,17 +50,97 @@ type ExtData = {
 
 const numFormat = new Intl.NumberFormat();
 
-export function mapNgRatingString(rs: string) {
-  switch (rs) {
-    case '':
-      return 'None';
+export function mapNgRatingString(s: string) {
+  switch (s) {
     case 'e':
-      return 'Standalone';
+      return 'Everyone';
+    case 't':
+      return 'Teen';
+    case 'm':
+      return 'Mature';
+    case 'a':
+      return 'Adult';
     default:
-      return 'Broken Value';
+      return s;
   }
 }
 
+const genSelectItem = (missing: string): SearchableSelectItem => {
+  return {
+    value: missing,
+    orderVal: `zzzzzzz${missing}`,
+  };
+};
+
+export function NgRatingSearchableSelect(props: SearchComponentProps) {
+  const { SearchableSelect } = window.ext.components;
+  const { onBlacklistFactory, onWhitelistFactory, onClearFactory, onSetAndToggleFactory } = window.ext.utils.search;
+  const { advancedFilter, setAdvancedFilter } = props;
+  const extFilter = advancedFilter.ext.toggles['nga'];
+  const extAndToggles = advancedFilter.andToggles.ext['nga'];
+
+  const labelRenderer = (item: SearchableSelectItem) => {
+    const label = mapNgRatingString(item.value);
+    return (
+      <div className='platform-label-row'>
+        <div
+          className={`dropdown-icon dropdown-icon-image ng-image-rating_${item.value}`}>
+        </div>
+        <div className="searchable-select-dropdown-item-title">
+          {label}
+        </div>
+      </div>
+    );
+  };
+
+  const ratingItems: SearchableSelectItem[] = [
+    {
+      value: 'e',
+      orderVal: '1'
+    }, {
+      value: 't',
+      orderVal: '2'
+    }, {
+      value: 'm',
+      orderVal: '3'
+    }, {
+      value: 'a',
+      orderVal: '4'
+    }
+  ];
+
+  const onWhitelist = onWhitelistFactory('nga', 'rating', advancedFilter, setAdvancedFilter);
+  const onBlacklist = onBlacklistFactory('nga', 'rating', advancedFilter, setAdvancedFilter);
+  const onClear = onClearFactory('nga', 'rating', advancedFilter, setAdvancedFilter);
+  const onSetAndToggle = onSetAndToggleFactory('nga', 'rating', advancedFilter, setAdvancedFilter);
+
+  const andToggle = !!(extAndToggles?.rating);
+  const selected = extFilter?.rating || {};
+
+  return (
+    <SearchableSelect
+      title={'NG Rating'}
+      items={ratingItems}
+      andToggle={andToggle}
+      selected={selected}
+      labelRenderer={labelRenderer}
+      generateItem={genSelectItem}
+      onWhitelist={onWhitelist}
+      onBlacklist={onBlacklist}
+      onClear={onClear}
+      onSetAndToggle={onSetAndToggle}
+      mapName={(item) => {
+        switch (item) {
+          case 'e': return 'Everyone';
+          case 't': return 'Teen';
+          case 'm': return 'Mature';
+          case 'a': return 'Adult';
+          default: return '';
+        }
+      }}/>
+  );
+}
+
 export function NgRatingListIcon(props: GameListComponentProps) {
   if (props.game) {
     const extData: ExtData | undefined = props.game.extData?.nga;
@@ -174,9 +254,9 @@ export function NgScore(props: GameComponentProps) {
   const extData: ExtData | undefined = props.game.extData?.nga;
   const { GameComponentInputField } = window.ext.components;
   const score = Number(extData?.score) || 0;
-  const { updateGameExtData } = props;
+  const { updateGameExtData, editable } = props;
 
-  return (
+  return editable ? (
     <GameComponentInputField
       header='NG Score'
       text={score.toString()}
@@ -190,6 +270,20 @@ export function NgScore(props: GameComponentProps) {
         }
       }}
       {...props} />
+  ) : (
+    <div className='browse-right-sidebar__row browse-right-sidebar__row--one-line'>
+      <p>NG Score: </p>
+      {!score ? (
+        <p>None</p>
+      ) : (
+        <div className={'ng-score-sidebar'}>
+          <div className='ng-score-value'>{score}</div>
+          <div className='ng-score-stars'>
+            <div className='ng-score-stars-filled' style={{ clipPath: `inset(0 ${(1 - (score / 5)) * 100}% 0 0)` }}></div>
+          </div>
+        </div>
+      )}
+    </div>
   );
 }
 

extensions/core-nga/static/assets/score.webp

@@ -18,6 +18,21 @@
   background-image: url("assets/rating_adult.png");
 }
 
+.ng-score-stars {
+  background: url("assets/score.webp") left top repeat-x;
+  background-size: 20%;
+  width: calc(93px * 1.5);
+  height: calc(17px * 1.5);
+}
+
+.ng-score-stars-filled {
+  background: url("assets/score.webp") left top repeat-x;
+  background-position-y: 90%;
+  background-size: 20%;
+  width: 100%;
+  height: 100%;
+}
+
 .nga-credit {
   display: flex;
   flex-direction: row;

extensions/core-nga/static/nga.css

@@ -59,8 +59,8 @@ export function CurateBox(props: CurateBoxProps) {
   const dispatch = useAppDispatch();
   const folder = props.curation.folder;
 
-  const splitStatus = React.useMemo(() => props.curation.game.status ? props.curation.game.status.split(';').map(s => s.trim()).sort() : [], [props.curation.game.status]);
-  const splitPlayMode = React.useMemo(() => props.curation.game.playMode ? props.curation.game.playMode.split(';').map(s => s.trim()).sort() : [], [props.curation.game.playMode]);
+  const splitStatus = props.curation.game.status ? props.curation.game.status.split(';').map(s => s.trim()).sort() : [];
+  const splitPlayMode = props.curation.game.playMode ? props.curation.game.playMode.split(';').map(s => s.trim()).sort() : [];
   const tags = props.curation.game.tags;
   let sortedTags: Tag[] = [];
   if (tags) {

src/renderer/components/CurateBox.tsx

@@ -41,14 +41,11 @@ export function GameListItem(props: GameListItemProps) {
   // Get the platform icon path
   const platformIcon = getPlatformIconURL(platform, props.logoVersion);
   // 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]);
-    // Set element attributes
+  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;

src/renderer/components/GameListItem.tsx

@@ -47,9 +47,9 @@ export function StatusBar(props: ProgressComponentProps) {
 // Large top text `Percent% Complete`, medium progress bar, small underneath primary text.
 export function ProgressBar(props: ProgressComponentProps) {
   const strings = React.useContext(LangContext);
-  const barCssProps: React.CSSProperties = React.useMemo(() => ({
+  const barCssProps: React.CSSProperties = {
     width: `${props.progressData.percentDone}%`
-  }), [props.progressData.percentDone]);
+  };
 
   return (
     <div className={'progress-component__wrapper' + (props.wrapperClass ? ' ' + props.wrapperClass : '')}>

src/renderer/components/ProgressComponents.tsx

@@ -50,6 +50,7 @@ export function RandomGames(props: RandomGamesProps) {
 
   const gameItems = props.games.slice(0, 6).map(game => (
     <GameGridItem
+      game={game}
       key={game.id}
       id={game.id}
       title={game.title}

src/renderer/components/RandomGames.tsx

@@ -13,6 +13,8 @@ import { AutoSizer, List, ListRowProps } from 'react-virtualized';
 import { GameOrder } from './GameOrder';
 import { OpenIcon } from './OpenIcon';
 import { SimpleButton } from './SimpleButton';
+import { DynamicComponent } from './DynamicComponent';
+import { SearchComponentProps } from 'flashpoint-launcher-renderer';
 
 function TestComponent2() {
   const onClearFactory = (key: string) => {
@@ -366,6 +368,16 @@ export function SearchBar() {
     }
   }, [view.id]);
 
+  const searchComponentProps: SearchComponentProps = {
+    advancedFilter: view.advancedFilter,
+    setAdvancedFilter: (advFilter) => {
+      dispatch(setAdvancedFilter({
+        view: view.id,
+        filter: advFilter,
+      }));
+    }
+  };
+
   return (
     <div className='search-bar-wrapper search-bar-wrapper--expanded-simple'>
       <div className="search-bar">
@@ -517,6 +529,11 @@ export function SearchBar() {
             onBlacklist={onBlacklistTag}
             onClear={onClearTags}
             onSetAndToggle={onSetAndToggleTags} />
+          { window.displaySettings.searchComponents.map((name) => {
+            return (
+              <DynamicComponent name={name} props={searchComponentProps}/>
+            );
+          }) }
         </div>
       )}
     </div>
@@ -587,7 +604,7 @@ type TagSelectItem = {
   tag: Tag;
 } & SearchableSelectItem;
 
-function SearchableSelect<T extends SearchableSelectItem>(props: SearchableSelectProps<T>) {
+export function SearchableSelect<T extends SearchableSelectItem>(props: SearchableSelectProps<T>) {
   const { title, items, selected, andToggle, onWhitelist, onBlacklist, onClear, onSetAndToggle, mapName, labelRenderer } = props;
   const [expanded, setExpanded] = React.useState(false);
   const dropdownRef = React.useRef<HTMLDivElement>(null);

src/renderer/components/SearchBar.tsx

@@ -23,9 +23,7 @@ export function ServiceBox(props: ServiceBoxProps) {
   const strings = lang.developer;
   // Log
   const entries = window.Shared.log.entries;
-  const logData = React.useMemo(() => {
-    return stringifyServiceLogEntries(entries, service.name);
-  }, [entries, service.name]);
+  const logData = stringifyServiceLogEntries(entries, service.name);
   // Uptime
   const uptimeRef = React.useRef<HTMLDivElement>(null);
   useInterval(() => { // (Update the value of the timer at an interval)