Gaming PC Finder

A gaming-specific version of PC Finder, focusing on gaming performance and discrete graphics card options.

Contents

• Quick start
• PC Finder Tools
• Documentation
• Local development
• Project customizations

Quick start

Note: requires Node 16. Recommended version is 16.19.1.

• Clone a PC finder repo to your project directory and initialize core and CLI submodules: git clone https://github.com/rwest-interactive/intel-srt-gaming.git
• Within your new project directory, initialize git submodules: git submodule update --init --recursive
• Run npm i to install the required Node modules.
• Run srt build --run to compile and run a development build, which can be viewed in the Webpack dev server at localhost:8080.
  • See CLI command documentation or run srt build -h for more information on build commands.

Note: if your terminal implementation does not automatically make Node bin scripts available in the PATH, add export PATH="$PATH:./node_modules/.bin" to your bash or zsh profile in order to run the SRT CLI tool.

PC Finder tools

• PC Finder directory - directory of all currently deployed staging and production builds.
• SRT inventory converter - convert SRT inventories between CSV ↔ JSON.

Documentation

Build process documentation

Full build process documentation can be found in the SRT Core build directory. This includes detailed information on CLI commands, build configuration, and more.

SRT Core Documentation

Core developer documentation is available here. Note that it is not yet automatically updated so it may be behind the current core version.

Updated core docs may be generated locally by running srt build --docs, which will build documentation to the docs directory which can be viewed with a local dev server. This documentation is generated automatically from SRT Core modules using JSDoc.

Project customization

Extensions of SRT Core for project-specific use cases are detailed in project customizations. This documentation is generated automatically from project modules using JSDoc.

Note: changes to project modules will require running srt build --docs in order to update project README with latest documentation.

Changelog

Changes to project are tracked in CHANGELOG.md.

Local Development

Updates to project-specific functionality and configuration options are done in the customize and config modules, respectively. SRT Core files should not be modified directly unless features that affect all projects need to be added/modified.

Branches & PRs

All changes need to be created from branches, then a PR is opened and merged into master after review. The branches should be named as features, fixes or chore. EG. feat/my-new-feature, fix/broken-submit-form, chore/working-on-event-page. Please always branch from master.

Please no long running branches! EG. feat/jareds-branch.

Good PRs

• Meaningful title
• Useful description with context
• Link to a Teamwork ticket
• What was changed and why?
• How does the code solve the issue?
• Screenshots, as appropriate
• Small PRs are easier to review.
• Avoid mixing concerns inside a single PR.
• Iterate, release code that is ready, even if the full feature isn't.

Commits

To help keep things standard and uniform we use Conventional Commits. This allows us to grow and run scripts based on commits.

Here are some simple rules.

• Always start the commit with feat:, fix: or chore:.
• Keep everything lowercase when possible.
• Keep them short and concise.

Examples of some commits:

git commit -am "fix: broken events page"
git commit -am "feat: created new location type"
git commit -am "chore: linted code"

Merging

Once you follow the above commits and branching, you'll then open a PR targeting master. Once the code is reviewed by at least one person and the code is merged. CI will build the project, create a new versioned release in Github and add a changelog based on your commits. You may then distribute that code as necessary.

Project customizations

Modules

project/config

Validate content for project-specific functionality.

For information on documenting project properties, see Core.

See: core/config

• project/config
  • .app_settings(settings)
  • .page(page)
  • .page_settings(settings)
  • ._content_type_products_products(products)

project/config.app_settings(settings)

Project app settings.

Kind: static method of project/config
See: app_settings
Since: 0.3.0

| Param | Type | Description | | --- | --- | --- | | settings | object | Modifies core app settings. | | [settings.progress_bar_count] | number | Number of "steps" or views the progress bar should contain. Should be used in global settings or config. | | [settings.share_button] | boolean | When enabled, displays a "share" button and renders a QR code. | | [settings.vertical_display] | boolean | When enabled, applies styles that better suite a vertically-oriented display. |

project/config.page(page)

Project page custom properties. Modifies core page.

Kind: static method of project/config
See: page
Since: 0.3.0

| Param | Type | Description | | --- | --- | --- | | page | object | | | [page.logo] | object | Logo for template display. Uses standard image object validation. |

project/config.page_settings(settings)

Project page settings.

Kind: static method of project/config
See: page_settings
Since: 0.3.0

| Param | Type | Description | | --- | --- | --- | | settings | object | Modifies core page settings. | | [settings.progress_bar] | number | The current page's progress bar position. E.g., if the current page represents the third item in the progress bar, this value would be 3. Should be used in a relevant page's settings. | | [settings.recommend_intel_priority] | boolean | Enable Intel products priority, when used on a page preceding a recommendation template. | | [settings.recommend_pad_results] | boolean | Enable recommendation results padding, when used on a page preceding a recommendation template. Note that this setting should NOT be used on the recommendation page itself, but on the referring page which has the recommendation page as the next destination. This allows for different paths to utilize results padding as necessary. |

Example

"settings": {
  "recommend_pad_results": true
}

project/config._content_type_products_products(products)

Products content type.

Kind: static method of project/config
See

• Extends:
• _content_type_products

Since: 0.3.0

| Param | Type | Description | | --- | --- | --- | | products | object | | | [products.ratings] | object | Settings for product star ratings. | | products.ratings.enabled | boolean | Turn on/off product star ratings. Note that even with this setting enabled, stars will only be displayed if a rating for that product exists. | | products.ratings.minimum_rating | number | Number from 0 to 5 under which product rating information should be hidden. | | products.ratings.minimum_ratings_count | number | Number of reviews a product must have before rating count will be displayed. |

Example

{
  "content_type": "products",
  "products": {
    "ratings": {
      "enabled": true,
      "minimum_rating": 3.5,
      "minimum_ratings_count": 10
    }
  }
}

project/customize

Customize SRT functionality. Methods used to extend SRT directly should be exported, but additional project callbacks within those calls may be inner methods. See App.customize for more information on extending SRT.

• project/customize
  • static
    • .config : object
    • .configInit()
    • .init()
    • .setProductLabels(formatFunctions)
    • .setCurrentContent(view)
    • .postRenderViewActions()
    • .addEventListeners()
    • .viewAllInit(viewAllContent)
  • inner
    • ~setDynamicRefs()
    • ~setProductContent(view)
    • ~getGraphicsQuality() ⇒ string
    • ~applyStarClasses()
    • ~setRecommendGameSelect([index])
    • ~recommendQRCode()

project/customize.config : object

Project default settings.

See project content settings for more information on configuration.

Kind: static constant of project/customize
Since: 1.3.0

project/customize.configInit()

Customize config defaults.

• Update app config with project defaults.

Kind: static method of project/customize
See: App.updateConfig
Since: 1.3.0

project/customize.init()

Initialize project functionality.

• Add game attribute definition to facilitate recommendation screen game selection.
• Set dynamic reference strings.

Kind: static method of project/customize
See

• App.updateAttributeDefs
• setDynamicRefs

Since: 1.0.0

project/customize.setProductLabels(formatFunctions)

Customize product spec labels.

• price - Product price attribute is formatted based on price.format_number settings in filter schema.
  • A special case exists for es-ar lang builds, in which numbers are custom formatted to LATAM standards, e.g.: 999,99, 1999,99, 10 999,99.
• display - Display value is formatted based on display.format_number settings in filter schema, and inserted into a template string provided by the translated JSON content. Note that in many cases, the default formatted unit is replaced with the inches symbol " for consistency throughout the app.
• ram - Memory attribute is formatted into either GB or TB, and inserted into a template string provided by translated JSON content.
• storage_amount - Each drive type is formatted into either GB or TB, inserted into a relevant template string provided by translated JSON content, and joined together with a + for the final storage amount label.

Kind: static method of project/customize

| Param | Type | Description | | --- | --- | --- | | formatFunctions | object | Object containing custom formatting functions for product attributes. |

project/customize.setCurrentContent(view)

Customize current view content.

Kind: static method of project/customize
See

• setDynamicLabels
• setProductContent

Since: 1.0.0

| Param | Type | Description | | --- | --- | --- | | view | object | Current view content. |

project/customize.postRenderViewActions()

Custom post-render view actions.

• Build star rating classes, by looping through each star and giving it either a full or half star class.
• Set game select field initial value on recommendation view.
• Render recommendation QR code, if necessary.

Kind: static method of project/customize
See

• applyStarClasses
• setRecommendGameSelect
• recommendQRCode

Since: 1.0.0

project/customize.addEventListeners()

Add project event listeners.

• Handle game performance select option interaction on .game-performance .js-selectOption click.
• Toggle popup for QR code on .js-qrCode-button click.
• When project setting share_button and app setting hatch_button are enabled, prevent Hatch button product navigation on click and instead display popup for QR code.

Kind: static method of project/customize
See

• setRecommendGameSelect
• View.togglePopup

Since: 1.0.0

project/customize.viewAllInit(viewAllContent)

Customize "view all" content.

Kind: static method of project/customize
See

• Extends:
• App.viewAllInit

| Param | Type | Description | | --- | --- | --- | | viewAllContent | object | Page settings and content for "view all" page. |

project/customize~setDynamicRefs()

Set dynamic reference tags and their replacement value.

• [products_remaining] - <span class="js-products-remaining"></span>

Kind: inner method of project/customize
See

• Used by:
• init

Since: 1.0.3

project/customize~setProductContent(view)

Inject additional product content, including processor generation badge names and FPS values into product content lists.

The following processing is completed for each product contained in view:

Set processor badge name

Get the current processor name and generation (if applicable) and generate a string name based on those values. This string is used to reference a badge image path in app content, e.g. settings.images.i7-11.

Set game FPS values

'Get graphics quality' value, then inject game FPS data for that quality into the product game list.

Kind: inner method of project/customize
See

• getGraphicsQuality
• Used by:
• setCurrentContent

Since: 1.0.0

| Param | Type | Description | | --- | --- | --- | | view | object | Current view content. |

project/customize~getGraphicsQuality() ⇒ string

Get a single graphics quality based on graphics quality selections. Returns the name of either the lowest selected graphics quality, or if none are selected, the 1080p_ultra quality.

Kind: inner method of project/customize
See

• Used by:
• setProductContent

Since: 1.0.0

project/customize~applyStarClasses()

Add classes to product stars that correspond to the product's rating (if provided).

• Runs a loop for each integer in the provided rating, decrementing the rating on each loop.
• Adds a "full" star class if remaining rating is greater than one.
• Adds a "half" star class if less than one.

Kind: inner method of project/customize
See

• Used by:
• postRenderViewActions

Since: 1.0.0

project/customize~setRecommendGameSelect([index])

Activate first input of game select field, or a specified index.

Kind: inner method of project/customize
See

• Used by:
• postRenderViewActions

Since: 1.0.0

| Param | Type | Default | Description | | --- | --- | --- | --- | | [index] | number | 0 | Index of the input to activate. |

project/customize~recommendQRCode()

Render QR code for sharing recommendation screen.

If the current page has a QR code popup element (.js-qrCode), the current recommendation share URL will added to it under the data-url attribute.

To enable QR code functionality:

• the project setting share_button must be enabled.
• the QRCode module must be available as a setting at App.settings.QRCode. See View.renderQRCode for more information.

Kind: inner method of project/customize
See

• App.getShareRecommendationLink
• View.renderQRCode
• Used by:
• postRenderViewActions

Since: 1.0.1