Learn LaunchDarkly: Hide behind a flag

Hiding Space Mode behind a flag

So far, you have:

Identified changes needed to change the game mode
Created a feature flag that will be used to change the game mode

Next, write the code that displays the game's graphics based on the value of the feature flag. To do this, your code needs to replace the .png files in the following <img> tags:

<img id="resources-1x" src="/images/100-percent/100-sprite.png" />
<img id="resources-2x" src="/images/200-percent/200-sprite.png" />

When the space-mode flag returns true, the code needs to adjust the image src attributes:

Image ID	Off	On
resources-1x	/images/100-percent/100-sprite.png	/images/100-percent/100-sprite-space.png
resources-2x	/images/200-percent/200-sprite.png	/images/200-percent/200-sprite-space.png

The first time the page loads, feature flags are not available until the SDK client contacts LaunchDarkly. For this reason, the SDK uses an event handler which runs some code when flags become available.

To implement your space-mode feature flag:

Create a function for your handler called drawGame:

function drawGame() {
  const runner = new Runner('.interstitial-wrapper', config);
}

Connect the feature flag. You have code that turns Dinosaur Mode into Space Mode, but it only works if your feature flag is turned on.

The LaunchDarkly SDK function that evaluates a flag is ldclient.variation(). Execute that function as part of an if statement, so the code inside the if is only executed if the space-mode flag is set to true:

function drawGame() {
  // Before we start the game, let's confirm that space mode is enabled for this user
  // We will use `false` as the fallback value, so that if the client fails to initialize or the flag has not yet been created, the game will    use the dinosaur sprite sheet.
  if (ldclient.variation("space-mode", false)) {
    // TODO: swap the images!
  }
  const runner = new Runner('.interstitial-wrapper', config);
}

The Space Mode logic needs to:

Find the image elements that load the sprite sheets.
Swap the space sprite sheets into those image elements.
Change the header text from "T-Rex Runner" to "Toggle Runner".

// Locate the image elements in the document by their ID
// You can see these elements defined in index.html
const smallSprites = document.getElementById("resources-1x");
const largeSprites = document.getElementById("resources-2x");
// Locate the game name heading
const heading = document.getElementById("heading");
   
function drawGame() {
  // Before we start the game, let's confirm that space mode is enabled for this user
  // We will use `false` as the fallback value, so that if the client fails to initialize or the flag has not yet been created, the game will    use the dinosaur sprite sheet.
  if (ldclient.variation("space-mode", false)) {
    // Change the source URL for the sprite sheets
    smallSprites.src = "/images/100-percent/100-sprite-space.png";
    largeSprites.src = "/images/200-percent/200-sprite-space.png";
    // Change the game name heading
    heading.innerText = "Toggle Runner";
  }
  const runner = new Runner('.interstitial-wrapper', config);
}

The above code includes the complete drawGame function, but you still need to execute it when the SDK has loaded the flags. Add this snippet at the bottom of the file:
```
// Register an event handler that calls `drawGame` once the client is ready
ldclient.on('ready', drawGame);
```

Check your work

Your copy of js/app.js should look like this:

// Follow the instructions here: https://learn-launchdarkly.netlify.app/
import config from './config.js';
import Runner from './runner.js';

// Copy the Client ID for your environment from https://app.launchdarkly.com/settings/projects
const LD_CLIENT_ID = 'YOUR CLIENT ID HERE';

// The user object for flag evaluation (explained in lesson 3)
let lduser = {"key": "user123"};

// LDClient is loaded by a script tag in index.html.
// Let's initialize it using the client id we defined above and the user object
const ldclient = LDClient.initialize(LD_CLIENT_ID, lduser);

// Locate the image elements in the document by their ID
// You can see these elements defined in index.html
const smallSprites = document.getElementById("resources-1x");
const largeSprites = document.getElementById("resources-2x");
// Locate the game name heading
const heading = document.getElementById("heading");

function drawGame() {
  // Before we start the game, let's confirm that space mode is enabled for this user.
  // We will use `false` as the fallback value, so that if the client fails
  // to initialize or the flag has not yet been created, the game will use the dinosaur sprite sheet.
  if (ldclient.variation("space-mode", false)) {
    // Change the source URL for the sprite sheets
    smallSprites.src = "/images/100-percent/100-sprite-space.png";
    largeSprites.src = "/images/200-percent/200-sprite-space.png";
    // Change the game name heading
    heading.innerText = "Toggle Runner";
  }
  const runner = new Runner('.interstitial-wrapper', config);
}

// Register an event handler that calls `drawGame` once the client is ready
ldclient.on('ready', drawGame);

Congratulations! You've implemented your first feature flag. In the next step, you will run your application and flip the flag on and off to see your changes working.