vue-buzzer-game - BUZZ the game!
Install
To install the buzzergame please include in your main.js following code:
import VueBuzzer from 'vue-buzzer.plugin'
Vue.use(VueBuzzer);Game Setup
First of all, these routines have to insert in your App.vue:
// Add a language
this.$vueBuzzer.setLanguage("de")
// Add a Player (with Avatar)
this.$vueBuzzer.addPlayer({ de: "Spieler 1" }, "img/image.jpg")
// Multilingual
this.$vueBuzzer.addPlayer({ de: "Spieler 1", fr: "Joueur 1"}, "img/image.jpg")
// Add a Buzzer for the Player (has to be done for each Player) (in standard-language)
this.$vueBuzzer.addBuzzer("Player1", "buzzer1", "[key]", "#ff6900")
// Add a question catalogue
this.$vueBuzzer.addCatalog("cata1")
// Add a question to a catalogue
this.$vueBuzzer.addQuestion("cata1", "Question Text?", ["txt", "img", "video"], [
{"content": "./img/img.jpg", "is": true },
{"content": "./img/img.jpg", "is": false },
{"content": "./img/img.jpg", "is": false }
])Finally when everything is set up, you can create the game:
// run the game
this.$vueBuzzer.createGame()Eventlisteners
The buzzergame works a lot with events.
Key events
General registred is the "keypress" event, which is for the buzzers
Custom events
A bunch of custom events ar registred to track of the state and to manage the UI. The following list ar all events which are available.
To control the Route use:
| event-name | Emit Event | this.$vueBuzzer.next([...]) |
|---|---|---|
view-start-game |
yes | required: next('view-sel-lang')
|
view-sel-lang |
yes | required: next('view-sel-cata')
|
view-sel-cata |
yes | required: next('view-player-ready')
|
view-player-ready |
yes | required: next('view-question')
|
view-question |
yes | event / optional: next() (eg. if time is expired) |
view-right |
yes | required: next() (if there are unused Questions, redirects to view-question, if not to ```view-result``) |
view-wrong |
yes | required: next() (if its the first time, the other user(s) have a chance to answer) |
view-nobody-was-right |
yes | required: next() (if there are unused Questions, redirects to view-question, if not to view-result) |
view-question-end |
no | required: none (automatically forwards, when questions are available) |
view-result |
yes | required: next('view-thankyou')
|
view-thankyou |
yes | required: next('[view-start-game / view-sel-lang / view-sel-cata / view-player-ready]')
|
To process specific events use:
| event-name | Parameter | Description |
|---|---|---|
player-registered |
Nummber: Index of registred player | |
all-player-registered |
- | |
buzzer-right |
Object: {player: [0], buzzer: [1], question: true}
|
|
buzzer-wrong |
Object: {player: [0], buzzer: [1], question: false}
|
Hooks
To interrupt the state switch of the program, you can use hooks.
Usage
These hooks are functions, you have to overwrite:
this.$vueBuzzer.hookQuestionBeforeSwitchToAnswer = function (next) {
// your code
// alert("hello")
next() // important: call the callback function
}Available Hooks
| hook | Description | Use case |
|---|---|---|
| hookQuestionBeforeSwitchToAnswer | Before the event ```view-rightorview-wrong`` is called. |
Animation, Data manipulation |
Get data
To get Data, there are following functions: