CONFBridge

CONFBridge is an communication libary between an CONFApp and CONFStation. It also provides debugging utils for develop an CONFApp.

Usage

Create CONFApp from template

npx confbridge create-app <app-name>

And follow the instructions.

Run conf app dev Server

npx confbridge dev

Install as package in your browser application

NPM

npm i confbridge

yarn

yarn add confbridge

Embedding

as JS Module from compiled lib

<script type="module">
    import {CONFStation, CONFApp} from "confbridge.js"; 
</script>

TypeScript

import { CONFStation, CONFApp } from "confbridge";

CONFStation

Schnittstelle für CONFApp zur CONFStation.

| Methode | Beschreibung | |-----------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | .onReady( action:function ) | wird ausgeführt, wenn eine erfolgreiche Verbindung aufgebaut wurde. | | .levelUp( meta:any, score:number, user:object ) | triggert ein LevelUp für den Spieler | | .appFinished( meta:any, score: number, user:object) | meldet, dass die CONFApp beendet werden soll | | .onLanguageChange( action:function ) | wird ausgeführt, wenn die Sprache in der CONFStation geändert wird. Beim Ausführen dieser Funktion wird erwartet, dass eine CONFApp zur entsprechenden Sprache wechselt. | | [static] .connected( action:function ) | Komfortfunktion, welche das Initialisieren der CONFStation-Instanz übernimmt und onReady ausführt |

Komfort-Beispiel

<button id="level-up">Level UP!</button>
<script type="module">
    import {CONFStation} from "conf-bridge.js";
    CONFStation.connected((station, config, language, theme, profile) => {
        document.getElementById('level-up')
                .addEventListener('click', _ => station.levelUp())
    })
</script>

Example

<button id="level-up">Level UP!</button>
<script type="module">
    import {CONFStation} from "conf-bridge.js";
    const confStation = new CONFStation();
    confStation.onReady((config, language, theme, profile) => {
        document.getElementById('level-up')
                .addEventListener('click', _ => confStation.levelUp())
    })
</script>

CONFApp

Schnittstelle der CONFStation zur CONFApp.

| Methode | Beschreibung | |-----------------------------------|----------------------------------------------------------------------| | .onLevelUp( action:function ) | wird ausgeführt, wenn von der CONFApp ".levelUp" ausgeführt wird | | .onAppFinished( action:function ) | wird ausgeführt, wenn von der CONFApp ".appFinished" ausgeführt wird | | .setLanguage( language:string ) | ändert die Sprache einer CONFApp |

Example

<iframe id="conf-app" src="whereever.nowhere.uni"></iframe>
<script type="module">
    import {CONFApp} from "conf-bridge.js";
    const config = {
        "options": []
    }
    const theme = {
        "borderColor": "#990000"
    }
    const profile = {
        firstName: 'Username',
        lastName: 'Hui',
        email: '[email protected]'
    }
    const confApp = new CONFApp(config, document.getElementById('conf-app'), 'de', theme, profile)
    confApp.onLevelUp((meta, score, user) => {
        console.log({ meta, score, user })
    })
</script>

FAQ

veraltete Version mit npx

Benutze das "@latest" Tag, damit npx die aktuellste Version nutzt.

npx confbridge@latest dev