This README provides instructions on how to use the custom web components that are available in the Games Hub in your web application.

Implementing

First, you need a CLIENT_ID from us.

In your CMS, create an overview page. Populate it with:

<script>
  window.gamesHubData = {} // optional, to pass in configuration. Must come before the js file.
</script>
<script
  src="https://cdn.42puzzles.com/embed/{CLIENT_ID}/42puzzles.js"
  type="module"
></script>
<games-hub-overview></games-hub-overview>

Then, in your CMS, create a page for each puzzle. Populate it with:

<script>
  window.gamesHubData = {} // optional, to pass in configuration. Must come before the js file.
</script>
<script
  src="https://cdn.42puzzles.com/embed/{CLIENT_ID}/42puzzles.js"
  type="module"
></script>
<games-hub-player></games-hub-player>

Each games-hub-* element is best rendered when it has a parent element. This CSS usually works OK for that:

.games-hub-container {
  max-width: 900px;
  @media (min-width: 400px) {
    padding: 24px;
  }
  margin: 0 auto;
}

To make the links from the overview to the puzzle detail pages word, mail/slack us the URL’s of the puzzle detail pages, and we’ll configure the overview page correctly.

Below are extra options you can use to customize and personalize the experience.

Integration

Include the Script

To use these custom elements, you need to include the following script in your HTML file. This script is responsible for lazy loading the necessary custom elements by scanning the DOM for their presence:

window.gamesHubData = {
  // Required call - gameshub does not start without a userId
  // Pass null for anonymous users, they will receive a device-specific userid
  userId: 'USERID' | null

  // Optional. In the future we want to be able to disable features based on the subscription of a user
  // for instance, digital-only users cannot access the printed puzzles
  // A user can have multiple subscriptions, for instance 'premium' and 'digital'
  userSubscription: 'SUBNAME' | ['SUBNAME1', 'SUBNAME2'] | null

  // Optional. Defaults to `false`. 
  // `true` enables console logging and cheatcodes in the games
  debug: true | false
}