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

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:

<script src="https://cdn.42puzzles.com/hub/v1/games-hub.js" type="module"></script>

How It Works

The script automatically scans the DOM for instances of the custom elements that are available in the Games Hub. When it detects these elements, it lazy loads the required components, ensuring that only the necessary resources are loaded, which ensures no unneeded resources are loaded.

Custom Elements

games-hub-overview

The games-hub-overview element provides a grid view of available games. It displays a list of games, allowing users to browse and select games to play.

Example Usage

<games-hub-overview></games-hub-overview>

games-hub-player

The games-hub-player element provides a player for a single game.

Attributes

  • slot: (Required) A string representing the unique identifier of the game slot to be displayed.

  • date: (Optional) A string representing the date of the game slot in YYYY-MM-DD format. Defaults to the current date.

Example Usage

<games-hub-player slot="12345" date="2023-10-01"></games-hub-player>

games-hub-history

Still under construction