\n\nOur widget \"out of the box\" is a product that you can use immediately by placing it on your existing game, on your website or include it into your Node project directly or anything that you need it to be used for. The widget is fully editable, re-adjustable, multilingual (all languages are supported), units of measure are also auto-generated by the system (all the currencies are pre defined in your private space) and it is a complementary product that gives the player a full in-depth gaming experience. All you have to do is:\n\n[Read more here](https://complabs.atlassian.net/wiki/spaces/CLRAV/pages/842301445/The+Widget)\n\n## Installation\n\nThe Leaderboard Widget package lives in [npm](https://www.npmjs.com/get-npm). To install the latest stable version, run the following command:\n\n```sh\nnpm install @competitionlabs/leaderboard\n```\n\nOr if you're using [yarn](https://classic.yarnpkg.com/en/docs/install/):\n\n```sh\nyarn add @competitionlabs/leaderboard\n```\n\n## Contributing\n\n#### Prerequisites\n\n- NodeJS >= 10.10\n- NPM >= 6.x\n\n#### Build\n\nGo to the `leaderboard_v3` directory and install the dependencies.\n\n```sh\nnpm install\n```\n\nRun `npm run build` in the `leaderboard_v3` directory to generate production files inside `build`.\n\n```sh\nnpm run build\n```\n\nYou can include css file into the bundle by running `npm run build:inline-css`\n\n```sh\nnpm run build:inline-css\n```\n\nOr run `npm run dev` to build widget in development mode.\n\n```sh\nnpm run dev\n```\n\n#### Coding standards\n\nCode formatting rules are defined in `.eslintrc`. You can check your code against these standards by running:\n\n```sh\nnpm run lint\n```\n\nTo automatically fix any style violations in your code, you can run:\n\n```sh\nnpm run lint -- --fix\n```\n\n#### Running tests\n\nYou can run the test suite using the following command:\n\n```sh\nnpm run test\n```\n\nRun `npm run test:coverage` to open coverage report\n\n```sh\nnpm run test:coverage\n```\n\nPlease ensure that the tests are passing when submitting a pull request.\n\n#### Example\n\nRun `npm run example` to open the example page.\n\n```sh\nnpm run example\n```\n\n#### Documentation\n\nYou can generate documentation by running:\n\n```sh\nnpm run jsdoc\n```\n\n\n## Different themes\n\nThere are a few themes to choose from (or create your own):\n\nBuild default theme:\n```shell script\nnpm run dev\n```\nBuild dark theme:\n```shell script\nnpm run dev:dark-theme\n```\nBuild blue theme:\n```shell script\nnpm run dev:blue-theme\n```\nBuild green theme:\n```shell script\nnpm run dev:green-theme\n```\nBuild grey theme:\n```shell script\nnpm run dev:grey-theme\n```\nBuild red theme:\n```shell script\nnpm run dev:red-theme\n```\nBuild orange theme:\n```shell script\nnpm run dev:orange-theme\n```\nBuild black theme:\n```shell script\nnpm run dev:black-theme\n```\n\n## Examples\n* [Live Default Theme laoding examples](https://s3-eu-west-1.amazonaws.com/demo.competitionlabs.com/_widgets/examples/leaderboard_v3-default-theme.html)\n* [Live Dark Theme laoding examples](https://s3-eu-west-1.amazonaws.com/demo.competitionlabs.com/_widgets/examples/leaderboard_v3-dark-theme.html)\n* [Live loader script examples](https://s3-eu-west-1.amazonaws.com/demo.competitionlabs.com/_widgets/examples/leaderboard_v3_loader.html)\n\n\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n\n## Adding widget to your website\n```html\n\n```\n\n## Using the loader script\nYou can use this loader script to centralise all your widget loading needs (custom scripts, styles and environmental parameters) into a single place.\nThe \"Loader\" script requires the bear minimum of 2 things to be set to the global `window._CLLBV3Opt` parameter before the scripts loads:\n1) `gameId`\n2) `memberId`\n```html\n\n```\n#### Steps required to configure the loader script:\n1) update your default API key, space name (optional: `language` and `currency`), unless you are loading the API key and space name from your game/product\n2) define what products will load in the widget:\n```javascript\nproducts: {\n \"my_product_id\": {\n script: \"https://my.custom.script.location\",\n resources: [\n \"https://my.custom.stylesheet.location\"\n ],\n onBeforeLoad: function( instance, options, callback ){ // your custom logic before the widget gets initialised/rendered\n if( typeof callback === \"function\" ) callback();\n }\n },\n \"my_product_id_2\": {}\n}\n```\n3) add loader script to your website\n\n\n## FAQ\n### How do I set the currency:\nThe setting \"currency\" needs to be set to the appropriate ISO key used in [units of measure section](https://complabs.atlassian.net/wiki/spaces/CLRAV/pages/594935946/Units+of+Measure)\n```text\n{\n currency: \"usd\"\n}\n```\n\n### How do I specify a custom stylesheet:\nAll styles are loaded as part of the initialisation, so overwriting the resources array variable with your stylesheet asset will allow you to load in the external stylesheets dynamically.\nThere is no limit to how many stylesheets you can add as the widget will load all of them from the specified array.\n\n### How to show game/product specific competitions only:\n```text\nThe setting \"enforceGameLookup\" should be set to \"true\" and game/product ID should be assigned to the setting entry \"gameId\" part of the widget startup/initialisation\n{\n enforceGameLookup: true,\n gameId: \"my_id\"\n}\n```\n\n### How to disable Inbox/Messaging section:\n```text\nTo disable the inbox/messaging area on the full widget preview the following setting \"messages.enabled\" has to be set to \"false\":\n{\n messages: {\n enable: false\n }\n}\n```\n\n### How to show the widget only if there are any available competitions:\n```text\nThe primary method “this.startup“ inside the \"LbWidget\" class is the one you should adjust to implement your scenario to achieve a pre-launch check, you can wrap what's inside of that method with the function:\nthis.checkForAvailableCompetitions()\nThis method collects all the necessary information about active, ready and finished competitions (example: _this.settings.tournaments.readyCompetitions will contain a list of upcoming competitions) so you can use the callback and the collected information to decide to show or hide the mini-scoreboard on startup based on your requirements.\n```\n\n### How do I only show the competition tab if there is an active competition only and/or change the default tab to the achievements tab\n\nThe current flow is:\n1) once the mini scoreboard is clicked, the main layout gets initialized (unless it’s already not existing in the DOM)\n2) the navigation then gets reset to the initial competition tab\n\nTo achieve this scenario you would need to do an available competition check prior to the navigation reset and then hide/show tabs accordingly based on your business requirement.\nThe code of interest would be on line inside the method called: \"this.initLayout\" in the \"MainWidget\" widget class, the method that resets the navigation is \"_this.resetNavigation( callback )\" this handles what navigation item to set as default for the user.\nYou can either change this code directly or override that method after initialization inside the \"this.startup\" method for the class \"LbWidget\" by doing the following \"_this.settings.mainWidget.resetNavigation = function(callback){}\". \nThere you can write some logic that would check what tabs to show/hide. \nOr you can overwrite this on a more global scope level where you initialize the widget \"new LbWidget(window._CLLBV3Opt)\" as you get full access to the settings and all other methods.\n\n\n### Localization - How do I translate the widget UI:\nTo enable translation the following steps need to be made:\n1) Translate your UI elements to the appropriate language and save it in a \".json\" format using the following naming pattern `translation_en.json` [JSON example](https://s3-eu-west-1.amazonaws.com/demo.competitionlabs.com/_widgets/leaderboard_v3/i18n/translation_en.json)\n2) The translations you define inside the file will be merged with the core translations on run time\n\n```text\n* The default widget language is set to english \"en\", the widget will try to load look for an external translation \nresource based on the language setting and the \"translationPath\"\n\n* If the resource path is used as \"translation_:language.json\" the widget script will try to replace \":language\" with the \ncurrent language setting and load the translation dynamically from an external source, example:\nhttps://s3-eu-west-1.amazonaws.com/demo.competitionlabs.com/_widgets/leaderboard_v3/i18n/translation_:language.json\n\n* If translations are not required it is possible to disable them by changing \"loadTranslations\" setting to \"false\"\n```\n\n### Why we use SASS:\nHere are some of the basic benefits of why we are using SASS:\n* provides the ability to use variables, allows you to store a value, or a set of values, and to reuse these variables throughout your SASS files as many times you want and wherever you want. Easy, powerful, and useful.\n* the improved syntax allows you to use a nested syntax, which is code contained within another piece of code that performs a wider function\n* provides mixin functionality: Mixins are like functions in other programming languages. They return a value or set of values and can take parameters including default values.\n* allows you to break apart your big complex CSS files into smaller chunks, this improves the ability to work on the same stylesheets for multiple teams\n* still supports the basic CSS syntax as SCSS syntax is CSS compatible\n","readmeFilename":"README.md"}
![](\"https://www.competitionlabs.com/wp-content/uploads/2020/01/Logo-v4.svg\"){kind=logo}
![](\"https://s3-eu-west-1.amazonaws.com/demo.competitionlabs.com/_widgets/mini-scoreboard-animation.gif\")
![](\"https://s3-eu-west-1.amazonaws.com/demo.competitionlabs.com/_widgets/3.png\")
\n ![](\"https://s3-eu-west-1.amazonaws.com/demo.competitionlabs.com/_widgets/2.png\")
\n ![](\"https://s3-eu-west-1.amazonaws.com/demo.competitionlabs.com/_widgets/1.png\")
\n