# GSoC 2019 - FRVR Games - Shiqi Mei

**URL:** <https://forums.rocket.chat/t/gsoc-2019-frvr-games-shiqi-mei/4432>\
**Category:** gsoc2019\
**Tags:** project-final\
**Created:** [August 26, 2019, 5:53pm UTC](https://forums.rocket.chat/t/gsoc-2019-frvr-games-shiqi-mei/4432 "2019-08-26T17:53:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![lolimay](https://sea1.discourse-cdn.com/flex021/user_avatar/forums.rocket.chat/lolimay/32/1202_2.png) [@lolimay](https://forums.rocket.chat/u/lolimay)\
**Post date:** [August 26, 2019, 5:53pm UTC](https://forums.rocket.chat/t/gsoc-2019-frvr-games-shiqi-mei/4432/1 "2019-08-26T17:53:10Z")

</div>

The goal of this project is to enhance Rocket.Chat apps.engine’s abilities to make RocketChat support chat-based games.

Here is the final submission report: [https://github.com/WideChat/Rocket.Chat.Android/wiki/Rocket.Chat-FRVR-Games-Google-Summer-of-Code-Project-2019-Submission](https://github.com/WideChat/Rocket.Chat.Android/wiki/Rocket.Chat-FRVR-Games-Google-Summer-of-Code-Project-2019-Submission)

Here is the working branch: [https://github.com/RocketChat/Rocket.Chat.Apps-engine/tree/alpha](https://github.com/RocketChat/Rocket.Chat.Apps-engine/tree/alpha)

---

<div class="post-metadata">

**Author:** ![aaron.ogle](https://sea1.discourse-cdn.com/flex021/user_avatar/forums.rocket.chat/aaron.ogle/32/15_2.png) [@aaron.ogle](https://forums.rocket.chat/u/aaron.ogle)\
**Post date:** [August 27, 2019, 1:45am UTC](https://forums.rocket.chat/t/gsoc-2019-frvr-games-shiqi-mei/4432/2 "2019-08-27T01:45:22Z")

</div>

Can you attach a video or screenshots so we can better understand what’s happening here?

---

<div class="post-metadata">

**Author:** ![lolimay](https://sea1.discourse-cdn.com/flex021/user_avatar/forums.rocket.chat/lolimay/32/1202_2.png) [@lolimay](https://forums.rocket.chat/u/lolimay)\
**Post date:** [August 27, 2019, 3:44am UTC](https://forums.rocket.chat/t/gsoc-2019-frvr-games-shiqi-mei/4432/3 "2019-08-27T03:44:06Z")

</div>

Yeah, sure @aaron.ogle . So there are 5 main parts of my project:

Firstly, I extended the current Rocket.Chat Apps.engine by adding externalComponent which can render the HTML5 games in a modal or contextual bar as the video shown below:

> **[external\_component.mp4 (video)](https://drive.google.com/file/d/1Pv0WJd71lZIYpcNILb3O6Zwh0vrp8Xrj/view?usp=sharing)**
>
> Google Drive file.

> **[frvr\_basketball\_in\_RocketChat.mp4 (video)](https://drive.google.com/file/d/13JtE0QIiQy_xVGkqNkYeNd_Uk5fyo58h/view?usp=sharing)**
>
> Google Drive file.

Secondly and thirdly, I implemented the AppEmbeddedSDK and Webhooks for the externalComponent so that the game could call the APIs to get the users’ context and the room’s info easily and the developers of the game can also receive the notifications when the game starts or ends.

> **[AppEmbeddedSDK&amp;WebHooks\_demo.mp4 (video)](https://drive.google.com/file/d/1wMTnLugRPSt07TJv7hn7yfz0XcuiejuS/view?usp=sharing)**
>
> Google Drive file.

And for the next, some efforts have been made into the invitation part to make sure the players could be in a separate private group when playing the games. You can check the video bellow for the detail:

> **[rocket.chat-game-invitation.mp4 (video)](https://drive.google.com/file/d/1Sqm3L4xE7um4BpUR8ikGpmeKixQyamh-/view?usp=sharing)**
>
> Google Drive file.

The last part I’ve finished is the storage APIs for the externalComponent. Currently, I have implemented the following persistence APIs to make sure the externalComponent can access our apps\_persistence collection easily.

```
setItem(key: string, value: any) // add new item to the app's persistence
getItem(key: string) // get the item's value by key
removeItem(key: string) // remove the item by key
clear() // clear the app's persistence
getAll(): Array<IItem> () // get all items of in this app's persistence

```

 ![20190821221305](https://us1.discourse-cdn.com/flex021/uploads/rocketchat/original/2X/6/62f2afdca377047e46c3ae72e215891581ed4924.png)

The above picture can show that how the storage APIs work.

@aaron.ogle Please let me know if you have any questions or the points you are interested in, I am so glad to introduce the details of my project to you!

---

<div class="post-metadata">

**Author:** ![aaron.ogle](https://sea1.discourse-cdn.com/flex021/user_avatar/forums.rocket.chat/aaron.ogle/32/15_2.png) [@aaron.ogle](https://forums.rocket.chat/u/aaron.ogle)\
**Post date:** [August 28, 2019, 5:58pm UTC](https://forums.rocket.chat/t/gsoc-2019-frvr-games-shiqi-mei/4432/4 "2019-08-28T17:58:10Z")

</div>

This looks very cool! So I see the inviting action, I see the game action and I see the different calls. But do all 3 work together? Can you actually invite someone and play a game with them?

---

<div class="post-metadata">

**Author:** ![lolimay](https://sea1.discourse-cdn.com/flex021/user_avatar/forums.rocket.chat/lolimay/32/1202_2.png) [@lolimay](https://forums.rocket.chat/u/lolimay)\
**Post date:** [August 28, 2019, 7:13pm UTC](https://forums.rocket.chat/t/gsoc-2019-frvr-games-shiqi-mei/4432/5 "2019-08-28T19:13:16Z")

</div>

Yeah, they can work together. Our goal is to create a “Rocket.Chat Games Foundation” to support FRVR games. Now the work in the Rocket.Chat side is almost finished. And FRVR team is working on porting the first game to Rocket.Chat.
