import { Container } from 'springroll-container';

const container = new Container('#game');

container.openPath('local/path/to/game.html');

const container = new Container('#game');

container.openLocal('https://example.com/path/to/game.html');

const container = new Container('#game');

container.openRemote('https://springroll-connect.example.com/api/release/game-slug');

import { PausePlugin, Container } from 'springroll-container';

const container = new Container('#game', {
  plugins: [
    // Assuming that there is a <button id="pause-button" /> on the page somewhere
    new PausePlugin('button#pause-button'),
  ]
});

container.openPath('path/to/game.html');

import { Container } from 'springroll-container';

const iframe = document.createElement('iframe');
document.body.appendChild(iframe);

const container = new Container(iframe);
container.openPath('/path/to/game.html');

import { PausePlugin, HelpPlugin, Container } from 'springroll-container';

const container = new Container("#game", {
  plugins: [
    new PausePlugin('button#pause-button'), // Pauses or unpauses the game
    new HelpPlugin('button#help'), // requests a hint or help from the game
  ]
});
container.openPath('game.html');

import { PausePlugin, Container } from 'springroll-container';

const container = new Container("#game", {
  plugins: [
    // manageOwnVisibility is set to false which means the plugin will not send pause or unpause events if the app is no longer
    // focused or other similar states (switched tabs, etc)
    new PausePlugin('button#pause-button', false),
  ]
});
container.openPath('game.html');

import { CaptionsStylePlugin, CaptionsTogglePlugin, Container } from 'springroll-container';

const container = new Container('#game', {
  plugins: [
    new CaptionsTogglePlugin('#captions'),
    new CaptionsStylePlugin(
      // expects exactly three(3) radio buttons with values "small", "medium", and "large" indicating caption font sizes.
      'input[name=captions-font-size]',

      // expects exactly two(2) radio buttons with values "default" (black background, white text),
      // and "inverted" (black text, white background) for caption color schemes
      'input[name=captions-font-color]',

      // expects exactly two(2) radio buttons values "top" and "bottom".
      // Indicating that captions should be placed at the top or bottom of the screen.
      'input[name=captions-alignment]',
    ),
  ]
});
container.openPath('game.html');

import { SoundPlugin, Container } from 'springroll-container';

const container = new Container('#game', {
  plugins: [
    new SoundPlugin({
      soundButtons: '#soundButton', // mutes or unmutes all game audio
      musicButtons: '#musicButton', // mutes or unmutes the music
      voButtons: '#voButton', // mutes or unmutes the voice over
      sfxButtons: '#sfxButton', // mutes or unmutes the game's sound effects

      // The sound button expects these to be HTML range inputs
      soundSliders: '#soundSlider', // controls the game's audio volume
      musicSliders: '#musicSlider', // controls the game's music volume
      voSliders: '#voSlider', // controls the game's voice-over volume
      sfxSliders: '#sfxSlider', // controls the game's sound effects volume
    }),
  ]
});
container.openPath('game.html');

import {
  HitAreaScalePlugin, DragThresholdScalePlugin, HealthPlugin, ObjectCountPlugin,
  CompletionPercentagePlugin, SpeedScalePlugin, TimersScalePlugin, InputCountPlugin,
  Container
  } from 'springroll-container';

const container = new Container('#game', {
  plugins: [
      new HitAreaScalePlugin('#hitAreaScaleSlider', {defaultHitAreaScale = 0.5}),
      new DragThresholdScalePlugin('#dragThresholdScaleSlider', {defaultDragThresholdScale = 0.5}),
      new HealthPlugin('#healthSlider', {defaultHealth = 0.5}),
      new ObjectCountPlugin('#objectCountSlider', {defaultObjectCount = 0.5}),
      new CompletionPercentagePlugin('#completionPercentageSlider', {defaultCompletionPercentage = 0.5}),
      new SpeedScalePlugin('#speedScaleSlider', {defaultSpeedScale = 0.5}),
      new TimersScalePlugin('#timersScaleSlider', {defaultTimersScale = 0.5}),
      new InputCountPlugin('#inputCountSlider', {defaultInputCount = 0.5}),
  ]
});
container.openPath('game.html');

import { ButtonSizePlugin, PointerSizePlugin, LayersPlugin, Container } from 'springroll-container';

const container = new Container('#game', {
  plugins: [
    new ButtonSizePlugin('#button-slider-selector', {
      defaultButtonSize: 0.5, // button size goes from 0.0 to 1.0. Default = 0.5
    }),

    new PointerSizePlugin('#pointer-slider-selector', {
      defaultPointerSize: 0.5, //pointer size goes from 0.0 to 1.0. Default = 0.5
    }),

    new LayersPlugin('#layers-slider-selector', {
      defaultValue = 0 // goes from 0.0 to 1.0
    })
  ]
});

container.openPath('game.html');

import { HUDPlugin, Container } from 'springroll-container';

const container = new Container('#game', {
  plugins: [
    // expects exactly four(4) radio buttons with values "top", "bottom", "left", "right,
    new HUDPlugin('#hud-position-button-selector', {
      defaultValue: "top" //the initial starting value, defaults to "top"
    }),
  ]
});

container.openPath('game.html');

import { ControlSensitivityPlugin, KeyboardMapPlugin, Container } from 'springroll-container';

const container = new Container('#game', {
  plugins: [
    //ControlSensitivityPlugin expects an input of type=range for it's input.
    new ControlSensitivityPlugin('#sensitivity-slider-selector', {
      defaultSensitivity: 0.5, //control sensitivity goes from 0.0 to 1.0. Default = 0.5
    }),
    //The KeyboardMapPlugin expects a div or similar container element as it's selector. It will automatically build out the
    //buttons to use for re-mapping controls based on what the application returns. See note below for HTML structure.
    new KeyboardMapPlugin('#key-container', {
      //you can provide a custom classname that will be attached to each key button that is generated
      customClassName: 'custom-button-class' //default='springrollContainerKeyBinding__button'.
    })
  ]
});
container.openPath('game.html');

import { ColorVisionPlugin, Container } from 'springroll-container';

const container = new Container('#game', {
  plugins: [
    // expects exactly five(5) radio buttons with values "none", "achromatopsia", "tritanopia", "deuteranopia",
    // and "protanopia" indicating the types of color visions supported.
    new ColorVisionPlugin('input[name=color-vision-radios]'{
      defaultValue: 'none' // initial checked radio box, defaults to "none"
    }),
  ]
});
container.openPath('game.html');

import { FullScreenPlugin, Container } from  'springroll-container';

const container = new Container('#game', {

  plugins: [
    // FullScreenPlugin expects the selector for the element(s) to hook onto
    new FullScreenPlugin('#fullScreenButton'),
  ]
  });

container.openPath('game.html');

new FullScreenPlugin('#fullScreenButton');
new FullScreenPlugin(['#fullScreenButton', '.fullScreenButtonSideNav']);

// It will also accept one string with all selectors each separated by a comma
new FullScreenPlugin('#fullScreenButton, .fullScreenButtonSideNav');

  new SoundPlugin({
    soundButtons: '#soundButton, #soundButtonTwo',
    soundSliders: '#soundSlider',
    musicButtons: '#musicButton',
    musicSliders: '#musicSlider, #musicSliderTwo',
  });

var container = new Container('#game');
container.openPath('game.html', {
    playOptions: {
        difficulty: 7,
        theme: 'blue'
    }
});

var app = new springroll.Application({
  // various options here
});

app.on('init', function() {
  springroll.Debug.log('Play Options are', app.playOptions); // { difficulty: 7, theme: 'blue' }
});

const initialContext = {
  hostEnvironment: 'web',
  gameBuildInfo: {
    commit: '#abcd123',
    name: 'game-name'
  }
};

const container = new Container('#game', { context: initialContext });

// Once the container instance is created you can access the context from any plugin or anywhere else there is access to Container
console.log(container.context); // { "hostEnvironment": "web", "gameBuildInfo": { "commit": "#abcd123", "name": "game-name" } }

container.context.newField = 'hello';
container.context.gamebBuildInfo = 'newInfo';

// { "hostEnvironment": "web", "gameBuildInfo": "newInfo", "newField": "hello" }
console.log(container.context);

container.context = {
  newField: {
    newKey: 'newField'
  }
}

import { SavedData } from 'springroll-container';

//the last argument, tempOnly, is optional (default = false) and decides whether the value should be saved in session (temporary),
//or local (not temporary) storage.
const tempOnly = false;
SavedData.write('user-value-key', 'user-value', tempOnly);

//SavedData.read() checks localStorage first and then sessionStorage. If the key exists in both only the localStorage will be returned.
let data = SavedData.read('user-value-key'); //data will be either the value in storage, if it exists, or null if it does not.

SavedData.remove('user-value-key'); //removes the value from both local and session storage.

import { SavedData } from 'springroll-container';

// Firstly, construct the SavedData object. This is only needed for IndexedDB work
const savedData = new SavedData('dbName');

// Then, open a connection to the database (this is using all default parameters, more info on parameters below)
savedData.IDBOpen('dbName','1', {}, {}, (result) => console.log(result))

let additions = {
  stores: [{
    storeName: 'storeOne',
    // optionally define a keyPath and/or set autoIncrement to true or false
    options: { keyPath: "taskTitle" }
  },
  {
    storeName: 'storeTwo'
  }],
  indexes: [{
    indexName: 'newIndex',
    keyPath: 'key',
    // Any objectParameters for the Index
    options: {
      unique: false
    }
  }]
};

// Deletions is an optional parameter used to delete any indexes or stores
let deletions = {
  stores: ['storeOne', 'storeTwo'],
  indexes: ['newIndex']
};

// Optionally pass in the new database version. Set to true to increment the database version.
// Leave this parameter out or pass in false to connect without making any changes to the structure of the database
let dbVersion = 1

// The name of the database to connect to
let dbName = 'dbName';

// Finally, pass these parameters in to establish a connection with the database
savedData.onOpenDb(dbName, dbVersion, additions, deletions);

//Delete a record by the key in a specific store
savedData.IDBRemove('storeName', 'key');

//add a record to a store. The record can be any type of object accepted by indexedDB
savedData.IDBAdd('storeName', 'record');

//returns the record with the given key from the store with the given storeName
savedData.IDBRead('storeName', 'key');

//Return all records from a database or optionally a specified amount defined by the second parameter
savedData.IDBReadAll('storeName');
savedData.IDBReadAll('storeName', 5);

// Return all keys in a given Index. [Docs](https://developer.mozilla.org/en-US/docs/Web/API/IDBIndex/getAllKeys)
// See [here](https://developer.mozilla.org/en-US/docs/Web/API/IDBKeyRange) for keyRange info
const keyRange = IDBKeyRange.bound("A", "F");
const count = 5;
savedData.IDBGetIndexKeys('storeName', 'indexName', query, 5);

// Finally, close the connection to the database
savedData.closeDb();

All other methods will work the same as the documentation [here](https://github.com/SpringRoll/SpringRoll/tree/main/src/state#userdata);

### SavedDataHandler
The SavedDataHandler class is used primarily in the `UserDataPlugin` to interact with the `SavedData` class. But can be used directly
if you require a callback when reading or writing from `SavedData`. Like `SavedData` all of the methods are static.

```javascript
import { SavedDataHandler } from 'springroll-container';

SavedDataHandler.write('user-value-name', 'value-to-be-stored', () => console.log('user-value-name written to storage'));

SavedDataHandler.read('user-value-name', value => console.log('Returned value: ' + value));

SavedDataHandler.remove('user-value-name', () => console.log('user-value-name removed from storage'));

import { UserDataPlugin, Container } from 'springroll-container';

const container = new Container('#game', {
  plugins: [
    new UserDataPlugin(),
  ]
});
container.openPath('game.html');