@iyio/liirn-mini-games NPM

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-games

Script 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

tslib typescript

@infinitebrahmanuniverse/nolb-_iy @everything-registry/sub-chunk-476 @zalastax/nolb-_iy

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago