!

!

!

!

!

!

Requirements

• Node.js not newer than 16.x
• Any operating system that Node.js supports

Installation

If you are starting from scratch:

1. Download the latest SDK version (Version 23.02.15): https://public.3.basecamp.com/p/DQPkcPyqb5f9c575Tku2J85j
2. Open a terminal window in the main folder
3. Run the yarn command to install all dependencies

Updating

To update, bump the patchkit_* entries in the package.json file to their latest version.

Running the Development Environment

1. Open the command line in the root directory of the SDK (the one containing the package.json file).
2. Use the yarn run-theme-dev command to start the development server.
3. Open the http://localhost:9060/dev address in your web browser.

Interface Overview

1. The top bar contains a set of buttons that allow you to simulate the call of specific actions in the launcher.
2. Below it (in the center), you can find the preview of your theme.
3. At the bottom, there’s an editor for the state data loaded into the theme. Modifying them affects the content.

:::warning Simulated actions do not terminate automatically. When you trigger an action in the launcher, such as clicking the INSTALL button, you may think it has crashed. You have to terminate it manually using buttons (e.g., finishAppBranchOngoingInstallTaskStep). :::

Modifying the Theme

:::warning By default, the theme is set to the not initialized state. This is the state where the launcher theme is being displayed to the user, but the launcher still needs some time to load all the required data. Feel free to customize this view and switch to the initialized state by setting State > isInitialized to true in the data editor. :::

You can modify the theme by editing files in the src directory using your favorite code editor. The included example theme is based on React, and all React rules apply here.

:::info You can build launcher themes on any technology, not just React. :::

:::info In the example, all components are styled inline, and there are no external stylesheets. However, you can use external stylesheets freely if you prefer! You might need to update the scripts/core/_get_app_webpack_config.ts file. :::

In our React example, we use camel-case notation for styling, and non-numeric values must be enclosed in quotation marks (``, ‘’, “”).

Example:

style={{
  height: `100%`,
  flexBasis: `60px`,
  flexGrow: 0,
  flexShrink: 0,
  paddingLeft: `10px`,

  overflow: `auto`,
{{
  height: `100%`,
  flexBasis: `60px`,
  flexGrow: 0,
  flexShrink: 0,
  paddingLeft: `10px`,

  overflow: `auto`,
{% end %}
}}

For more complex styling, you can import the emotion package:

import emotion = require('emotion');

This allows you to use standard CSS styling with the className attribute:

className={emotion.css`
  &::-webkit-scrollbar {
    width: 5px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 50px;
    background-color: #dedede;
  }
`}

Modifying the Window

The main theme file is called window_widget.tsx and can be found in the src directory. For example, if you want to change the overall background color or round the corners, this is the right place to do it.

Reusable Components

There are universal components that can be used in different situations, such as:

• button_widget.tsx
• hoverable_html_div_widget.tsx
• label_button_widget.tsx
• label_widget.tsx
• popup_widget.tsx

These components are used in various places with slightly modified variations. Be cautious when making changes to these components, as it can lead to unpredictable behavior of other components that rely on them.

Backend-related Components

All components containing app_branch in their name are backend-related components. Modify those only if you are sure that it will not break the launcher functionality.

:::info We recommend using version control systems (VCS) like Git and committing your code frequently. This way, you can track any breaking changes more easily. :::

Examples

Changing the Background Color of the Launcher

To change the main background color, modify the window_widget.tsx file:

88. backgroundColor: `lightblue`,

The top bar retains its original color. To change it, modify the window_title_bar_widget.tsx file:

43. backgroundColor: `lightblue`,

Changing the popup background color

To change the popup background color, modify the popup_widget.tsx file:

48. backgroundColor: `lightblue`,

Centering the INSTALL/PLAY Button

In the app_branch_widget.tsx file, add centering style to the parent div of the AppBranchStateWidget component:

91. display: `flex`,
92. justifyContent: `center`,

The code should look like this:

{% raw %}
<div
  style={{
    width: `100%`,
    flexBasis: 0,
    flexGrow: 1,
    flexShrink: 0,
    display: `flex`,
    justifyContent: `center`,
  }}
>
  <AppBranchStateWidget
    appId={appId}
    appBranchId={appBranchId}
    appPresentation={appPresentation}
  />
</div>

Removing the “Check for Updates” Button

Change the isVisible flag to false in the start_app_branch_widget.tsx file:

68. checkForUpdatesButtonWidget={{
69.   isVisible: false,
70. }}

Adding the Application Name Next to Its Icon

In the window_widget.tsx file, around the line 126, there is a component responsible for displaying application icons in the left menu. Its children iteratively return the icon of each application. To add the application name next to its icon, you can use the appState object.

<div
    style={{
      width: `40px`,
      height: `40px`,
      marginTop: `10px`,

      cursor: `pointer`,

      backgroundImage: `url(${appState.iconImageUrl})`,
      backgroundSize: `contain`,
      backgroundRepeat: `no-repeat`,
    }}
    onClick={() => {
      setCurrentAppId({ currentAppId: appId });
    }}
    >{[
    currentAppId === appId
      ? undefined
      : <div
        style={{
          width: `100%`,
          height: `100%`,
          backgroundColor: `#00000055`,
        }}
      />,
    ]}

</div>

For simplification, I will use the icon code as <AppIcon /> in future examples. To get information about the application name, we can use the appState object.

You should change: (pseudocode)

<AppIcon />

into:

<div>
    <AppIcon />
    <div>{appState.name}</div>
</div>

The text is too wide and cannot fit inside the bar. To fix this issue, apply some styling:

1. Around the line 140, increase the flexBasis value to widen the entire bar.
2. Modify the icon styling:

<div
    style={{
        display: `flex`,
        alignItems: `center`,
        cursor: `pointer`,
    }}
>
    <AppIcon />
    <div
        style={{
            width: `100%`,
            paddingLeft: `10px`,
        }}
    >{appState.name}</div>
</div>

The text will not respond to clicks because the onClick action is only attached to the icon. To include the text, move the onClick action up a level:

<div
    style={{
        display: `flex`,
        alignItems: `center`,
        cursor: `pointer`,
    }}
    onClick={() => {
      setCurrentAppId({ currentAppId: appId });
    }}
>
    <AppIcon />
    <div
        style={{
            width: `100%`,
            paddingLeft: `10px`,
        }}
    >{appState.name}</div>
</div>

Deploying

To deploy your custom launcher theme, you need to build the launcher theme and upload it to your dashboard. You can build your theme by executing the following command:

yarn build-theme-prod

This will create a theme_prod folder in the root directory of your project. You should zip the contents of this folder and upload it to your dashboard. You can learn how to do this by navigating to the Launcher Themes Managament page.

Frequently Asked Questions (FAQ)

Q1: Can I use a different front-end framework or library other than React for my custom launcher theme?

Yes, you can use any front-end framework or library, or even build your launcher theme from scratch. The example provided uses React, but you’re not limited to using React.

Q2: How can I integrate custom logic or user authentication before allowing a user to install or update a game?

You can add custom logic by modifying the relevant components in the SDK, such as the app_branch_widget.tsx file. Implement the desired logic within the component and make sure the launcher functionality isn’t affected.

Q3: Can I use CSS modules or external stylesheets instead of inline styling?

Yes, you can use external stylesheets or CSS modules. To include them, you might need to update the scripts/core/_get_app_webpack_config.ts file to properly load and apply the styles.

Q4: Can I use a different JavaScript/TypeScript bundler instead of Webpack?

Yes, you can use a different bundler if you prefer. However, you will need to configure it correctly to work with the Electron Launcher SDK and ensure compatibility with all dependencies.

Q5: What should I do if I encounter an issue or bug with the Electron Launcher SDK?

If you encounter an issue or bug, first ensure that you have the latest version of the SDK. If the issue persists, consult the documentation and relevant online resources. If you still cannot resolve the issue, consider contacting the SDK support team for assistance.

Q6: How can I test my custom launcher theme on different operating systems and devices?

Since the launcher is built on the Chromium web engine, it should work consistently across different operating systems and devices that support Chromium. However, to ensure compatibility and optimal user experience, it’s recommended to test your custom theme on various devices and operating systems.

Q7: How do I deploy my custom launcher theme?

To deploy your custom launcher theme, you need to build the launcher theme and upload it to your dashboard. Please refer to the Deploying section for more information.