OnePlayer implementation on web
Embedding
To embed the OnePlayer in your website, start by adding the following script-element in the head of the html:
<script
type="module"
src="https://cdn.42puzzles.com/slot/v1/slot.js"
crossorigin
async
defer
></script>
Next, add the <content-slot />
custom element somewhere in the body-element:
<content-slot id="[slot-id]"></content-slot>
ContentSlot and OnePlayer JavaScript ready
The <content-slot />
will load an OnePlayer, iFrame or Player collection.
Once the slot is done it will dispatch the onReady
event.
After the OnePlayer in inserted into the DOM, and is ready for use, it will also dispatch the onReady
event.
const contentSlot = document.querySelector('content-slot');
contentSlot.addEventListener('onReady', () => {
const onePlayer = document.querySelector('one-player');
onePlayer.addEventListener('onReady', () => {
console.log('This is the first way!');
});
});
Although this is a clean way of waiting for all parts to be ready, it’s also a little verbose.
Therefore, the onePlayer also calls the onePlayerReady
function once it’s ready.
You can already implement this function, wait for the player to be ready and go from there.
function onePlayerReady(onePlayer) {
// This onePlayer is the same as the result of:
// document.querySelector('one-player')
console.log('This is the second way!');
}
OnePlayer attributes
These are the supported attributes on the <content-slot/>
:
Attribute | Type | Optional | Default | Change via API |
---|---|---|---|---|
id | string | false | - | No |
theme | string | true | “lightMode” | setTheme |
language | string | true | “nl-NL” | setLanguage |
userId | string | true | undefined | No |
isInWebView | bool | true | false | setIsInWebView |
While embedding the player in the html, set the attributes like this:
<content-slot id="[id]" theme="darkMode" language="en-US" userId="abc" isInWebView="true"></content-slot>
OnePlayer methods
Start
Players can be configured to wait for the start method. This is how you start the player:
function onePlayerReady(onePlayer) {
onePlayer.start();
}
Set theme & language
Use these methods to change the attributes set earlier
function onePlayerReady(onePlayer) {
onePlayer.setTheme('darkMode');
onePlayer.setLanguage('nl-NL');
}
Subscribe to OnePlayer events
function onePlayerReady(onePlayer) {
// The custom onePlayer way...
onePlayer.events.on('all', (eventObject) => {
console.log('New event:', eventObject.name);
});
// The native way...
onePlayer.addEventListener('all', (evt) => {
console.log('New event:', evt.detail.name);
});
}
The eventObject
{
name: PlayerExternalEvent
prevState?: initializing | ready | playing | finished
nextState?: initializing | ready | playing | finished
data: any
// timestamp this event was emitted
timestamp: number
timer: {
// time that has progressed in the game, in milliseconds
ms: number
} | undefined,
metadata: {
// unique identifier for this puzzle.
puzzleId: string
// date this puzzle was published. Usually today but can also be a historical puzzle. yyyy-MM-dd
puzzleDate: string
// type of puzzle: wordle | headline | sudoku | etc...
gameType: string
// name of this puzzle: Vorto | Precies Vier | Sudoku | etc...
gameName: string
// ID of this puzzle
gameId: string
// ID of the user. If anonymous user, we generate one and keep it in localStorage.
// If it's an authenticated user, the userId is prefixed with `client-`
userId: string
}
}
PlayerExternalEvent
These are the event types the players emits:
- started
- completed
- closed
- aborted
- share
- visitUrl
- all
Styling
Make sure the parent of the <content-slot />
has a width and height for optimal performance.
<style>
.parent {
/*or any other parent element*/
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
}
</style>