Adding Custom Screens

Adding Custom Screens

If you want a custom screen in your scenario, you will need to know some javascript, css, and html.

Here is a basic rundown of adding a custom screen to an example scenario (1964 The Beatles) called 'Fan Club'. This screen displays the player's current counter levels.

How Do Custom Views Work?

Custom screens are just html that you inject into the game. You can style them with css just like you would any other element of an OSEG scenario, and you can populate their values with javascript when you create them.

You need to add custom views to the engine in the onScenarioStarted function of logic.js providing a function that takes in an Engine class and outputs a string (the html string of that view).

This sounds confusing, but here is an example:

// Create a function that returns the custom view. It can use values from the engine to get updated information!
function createFanClubCustomView(engine) {
    // Note because this string starts with `, you can use ${} to interpolate values into the string and make it readable
    const view = `
        <h1>Welcome to the Fan Club!</h1>
        <img src="https://beatles.ncf.ca/club15.jpg"></img>
        <p>Your walrus counter level is: ${engine.getCounter("Walrus")}</p>
    `   
    return view;
}

function onScenarioStarted(engine) {
    engine.setCounter("Walrus", 0);
    engine.setCounterDisplayName("Walrus", "Walrus Level: Just Four Guys");

    // This registers the custom view with the engine.
    engine.addCustomView("Fan Club", createFanClubCustomView); // Note I do not add () after createFanClubCustomView, I am just passing in the function name
}

This will result in a button called "Fan Club" being added to the game, and when you click it, it will look like this:

You can imagine with more time spend on styling the css and organizing html, you could show anything you wanted in here!

Previewing Custom Views

You can preview views that you have added in onScenarioStarted in the Custom View tab of the OSEG editor. It should update as you update your logic.js code, but may be slightly behind what you are typing. It is helpful for getting live updates though!