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: 'username@hui.lol'
}
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