Qbix-Beginners

Learn about the game Pictionary and its rules: https://www.wikihow.com/Play-Pictionary

1. There are N teams, each typically has the same P number of people, but could also have different number of people. In any case, the size of each team must be > 2. To form teams, we use the Games/teams tool.

2. Teams take turns, although in our game they could also play simultaneously. In each round, one member of the team is chosen to be given a word or phrase, and draw on a canvas clues to this word or phrase. The other team members see the canvas and try to guess what the word or phrase is. They can enter it either verbally by yelling it out, or typing it in (e.g. in a loud environment).

3. Once the correct word or phrase is typed, it is accepted, they get a point, and the next challenge starts, until the time in the round runs out. Each round has a difficulty and a duration. The word/phrase is chosen from a list of words/phrases in that difficulty set. There is a countdown done with Q/pie tool, alongside the avatars of the Presenter and their team members in the round.

4. Like all Qbix software, the game should work in multiple languages.

What to do¶

1. Please play around with https://www.chenyuho.com/project/handwritingjs/ then go to github and incorporate a copy of the minified library inside plugins/Q/js/handwriting.js .

2. Also please play around with https://www.google.com/intl/en/chrome/demos/speech.html and implement speech recognition by making sensible methods inside plugins/Q/js/Q/Speech.js

3. Now it's time to create Games/pictionary as a tool. Look at how other tools are done, and implement this one. Using the same kind of code found in the handwritingjs demo, allow people to draw, with the ink color and width in the options of the tool under {pen: {color: '0x24129x', width: 4} etc.

4. While drawing, use stream.ephemeral(payload) to send the new strokes to any observers. These are not saved to the database, but sent out via sockets. The type of ephemeral would be "Games/pictionary/drawing". It would contain an array of strokes under "strokes".

5. Then, collect the strokes, and add a handler to the Q.Pointer.end event. Wrap it in Q.debounce() with 5000 ms delay, so the callback happens every time a user lifts their finger for 5 seconds. Make the 5000 configurable by an option of the tool called "debounce". In the callback you can call stream.post() a message "Games/pictionary/drawing". It would also contain an array of strokes under "strokes". But this time it would be saved to the database.

6. For the observers of the canvas drawing, call stream.onEphemeral(...) and stream.onMessage(...) event factories, to receive the messages and recreate the strokes on their canvas.

7. For both the sender and recipients, have a panel above the canvas, which lists the sender and recipients (the people on the team). And also in the right side of the panel, show a Q/pie tool with a countdown of how many seconds remain in the round.

8. And for the recipients, have an <input> textbox which lets them enter any text and press Go. This may be accepted as the correct guess by the server, which then posts a message of type "Games/pictionary/solved" and everyone receiving this message resets their canvas and countdown.