@iyio/liirn-mini-games
v0.0.3
Published
The Liirn Mini Games interface (LMI) is a small package that allows mini-games hosted in a webview to communicate with the Liirn app.
Downloads
3
Readme
Liirn Mini Games interface
The Liirn Mini Games interface (LMI) is a small package that allows mini-games hosted in a webview to communicate with the Liirn app.
Install
You can install the package in 1 of 2 ways, npm or a script tag
npm
npm install @iyio/liirn-mini-gamesScript tag
<body>
...
<!-- include liirn-mini-game.js before your own game script -->
<script src="https://liirn-mini-games.web.app/liirn-mini-games-script/liirn-mini-games.js"></script>
<script src="path/to/your-game-script.js"></script>
</body>Examplpe Usage
Below is an example of a game where a player searches for dinosaurs and gets 5 points for finding a dinosaur a points for completing a level. The game can run either inside the Liirn app or standalone in a browser. The state of the game such as points and current level is stored in the memory of the game and points are are synchornized by sending an add points message to the host app.
// Using ES modules - Installed using npm
import {
addMiniGameMessageListener,
isInMiniGameWebView,
sendMiniGameMessage
} from "@iyio/liirn-mini-games";
// Using global varialbe - Installed using a script tag
const {
addMiniGameMessageListener,
isInMiniGameWebView,
sendMiniGameMessage
} = LiirnMiniGames;
let gameState='loading';
let points=0;
function loadGame()
{
if(isInMiniGameWebView){
// The game is running in the Liirn app
// Request game data from the host app
sendMiniGameMessage({
type:'host:getGame',
name:'dinosaur-finder'
})
}else{
// The game is not running in the Liirn app. Most likely you are testing
// the game in a browser
setLevels(getTestLevels());
startGame();
}
}
const stopListening=addMiniGameMessageListener(msg=>{
switch(msg.type){
case 'client:game':
// msg.game?.data should contain levels for your game,
// but if not fallback to using test levels.
setLevels(msg.game?.data || getTestLevels());
startGame();
break;
}
})
function setLevels(levels:GameLevel[])
{
// store levels somewhere
}
function startGame()
{
// Ready, Set, Go - 🕹 🎮 🎱
gameState='playing';
requestAnimationFrame(gameLoop);
}
function gameLoop()
{
....
switch(action){
case 'found-dinosaur':
addPoints(5);
break;
case 'completed-level':
addPoints(currentLevel.points)
break;
}
....
if(gameState==='playing'){
requestAnimationFrame(gameLoop);
}
}
function addPoints(p:number)
{
points+=p;
sendMiniGameMessage({
type:'host:addPoints',
points:currentLevel.points
})
}
function endGame()
{
gameState='end';
stopListening();
sendMiniGameMessage({
type:'host:exit'
})
}
loadGame();
Messages Structure
/**
* Message structure
*/
export interface MiniGameMessage
{
/**
* Indicates the message is a mini game message
*/
isMiniGameMessage:true;
/**
* message type
*/
type:MessageType;
/**
* points to add to the players score
*/
points?:number;
/**
* Game data sent as a respone to the host:getGame message.
*/
game?:MiniGame;
/**
* Generic name prop
*/
name?:string;
}
/**
* Defines the different messages passed between the host app and client game
*/
export type MessageType=(
'host:getGame'|
'host:addPoints'|
'host:exit'|
'host:levelComplete'|
'client:nextLevel'|
'client:game'
);Message Types
| Type | Props | Description | |--------------------|--------------------------------|---------------------------------------------------| | host:getGame | name: Name of the game | Request the host to send game data | | host:addPoints | ponts: number of points to add | Adds points to the players score | | host:exit | | Tells the host to unload the game | | host:levelComplete | | Tells the host the player has completed a level | | client:nextLevel | | Informs the client game to move to the next level | | client:game | game: Game data | Returns game data to the client game |