Forest Cuties - from a poster on the wall to a mobile game utilizing Web Monetization and NFTs
Tags: gamedev, webmonetization, nft, javascript
Published: 2021-06-12 19:19:47

---
title: Forest Cuties - from a poster on the wall to a mobile game utilizing Web Monetization and NFTs
published: true
date: 2021-06-12 00:00:00 UTC
tags: gamedev, webmonetization, nft, javascript
canonical_url: https://enclavegames.com/blog/forest-cuties-making-of/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/myux4zt0pativ3hqlvz6.png
---

This game’s story started a couple of years ago on a wall above our daughter’s bed as a cute poster, only to evolve into a physical card game, and then a mobile one that implemented **Web Monetization** ’s **receipt verifier service** , and even offered an **NFT** to the mix.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#play-forest-cuties-now)[Play FOREST CUTIES now!](https://forest.enclavegames.com/)

It is quite similar to [NSHex Roulette’s making of](https://enclavegames.com/blog/nshex-roulette/), as it also started as an analog prototype and managed to turn into a mobile experience. Here’s how [Ewa](https://mypoint.pl/) explain the origins:

![Enclave Games - Forest Cuties: plakaty 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvg0i60y95ihh8rmjbu0.jpg)

> When I started running [MamaDesigner.pl](https://mamadesigner.pl) blog, my main goal was to create cute looking designs to decorate children’s rooms. One of the first obvious ideas revolved around animals, and so the [wall poster collection](https://mamadesigner.pl/2018/01/30/plakaty-do-pokoju-dziecka-1-lesne-zwierzeta/) was created.

![Enclave Games - Forest Cuties: plakaty 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejvvalfu8n3jvu7yz1b2.jpg)

> Our daughter [Kasia](https://tatadeveloper.end3r.com/) liked them a lot, and the blog readers did as well - it was the most downloaded content on the website. That’s why I decided to [refresh the collection](https://mamadesigner.pl/2021/01/12/plakaty-do-pokoju-dziecka-9-lesne-zwierzeta-po-raz-drugi/) a bit.

![Enclave Games - Forest Cuties: karty](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/of4e02ov0wqwdrhepb8t.jpg)

> In the third year from the start I decided to expand the collection by adding posters with new forest animals, the [physical card game](https://mamadesigner.pl/2021/01/26/gra-memory-z-lesnymi-zwierzetami/), and even [baby birth announcement](https://mamadesigner.pl/2021/02/16/metryczka-z-liskiem-do-samodzielnego-uzupelnienia/) and [baby shower certificates](https://mamadesigner.pl/2021/04/06/plakaty-na-przyjecie-brzuszkowe-baby-shower/).

![Enclave Games - Forest Cuties: plakaty 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3njn196e09iuxqzbkdnk.jpg)

> Sweet looking forest animals took everyone’s hearts by storm, so when [Andrzej](https://end3r.com/) suggested we could build and release a mobile web game with them, I said yes immediately. We’ve focused on making it as kid-friendly a possible, with Kasia being our very first tester, and it turned out great. It’s the first game created specifically for kids right from the start, but definitely not the last one.

You know, if you’re an adult, then you are totally fine to play it as well, so don’t stress about it too much!

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#last-piece-for-the-grant-for-the-web)Last piece for the Grant for the Web

As part of [our Grant for the Web grant](https://enclavegames.com/blog/awarded-grant-for-the-web/) we’ve organized the [Web Monetization category in js13kGames 2020](https://write.as/js13kgames/summarizing-web-monetization-category-in-js13kgames-2020), conducted the [Gamedev.js Survey 2021](https://gamedevjs.com/survey/2021/), and organized the [Web Monetization category in Gamedev.js Jam 2021](https://gamedevjs.com/competitions/web-monetization-category-in-gamedev-js-jam-2021/). On top of that, we’ve experimented with creative content creation and ways **Web Monetization** could benefit the players: from publishing [NSHex Roulette](https://nshex.enclavegames.com/roulette/) which [unlocked stats for monetized users](https://enclavegames.com/blog/nshex-roulette/), through [Body Guard](https://guard.enclavegames.com/) having [probabilistic revenue sharing](https://enclavegames.com/blog/body-guard-making-of/) (and supporting **Artist Rescue Trust** and **Phaser** ), to [Forest Cuties](https://forest.enclavegames.com/) showcasing **receipt verifier service** and unlocking exclusive content for paying [Coil](https://coil.com/?ref=end3r) members.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#web-monetization-through-receipt-verifier-service)Web Monetization through receipt verifier service

As you may know, using `document.monetization` to verify if someone is a paying [Coil](https://coil.com/?ref=end3r) subscriber is fast and simple, but can be easily spoofed, since it’s all happening on the front-end side of things. Someone with enough knowledge could alter the code and pretend to be a monetized user. Not that it makes any sense as they’re suppose to support the creators they are visiting, not pretend to be one and seeing _“thank you for your support”_ messages for free. Still, if this is going to be a business and you want to release a product you spent a lot of time creating, you’d like to verify if someone is actually who they say they are before you allow them to access your exclusive content.

You can have your own verifier, keep the content on the server and send it after the positive verification, but since [our games](https://enclavegames.com/games/) are front-end only, I decided to go with the simpler approach - using a publicly available verifier service and embedding an encrypted piece of content which will be decrypted if the visitor is truly a paying [Coil](https://coil.com/?ref=end3r) member.

![Enclave Games - Forest Cuties: Web Monetization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebafbtgt88wyh38o7l9q.png)

In our case, the three unique cards are being unlocked for the player, but this happens after visiting the Web Monetization screen within the game first and being verified that they are indeed a monetized user.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#implementation)Implementation

To implement the [request verifier service](https://webmonetization.org/docs/receipt-verifier/) two things have to be done - first, the payment pointer have to be modified for the payment to go through the verifier first, instead of going directly:

```
<meta name="monetization" content="$webmonetization.org/api/receipts/%24ilp.uphold.com%2Fk4eJGQUDF9nw" />
```

You can use any of the verifiers, or host one yourself, but the easiest way to do this is to use the one **hosted by the WebMonetization.org website themselves**.

Second, the actual [exclusive content](https://webmonetization.org/docs/exclusive-content#exclusive-content-with-payment-verification) have to be encoded, so it will only be accessible after positive verification - you can do it using the [Exclusive Content Generator](https://webmonetization.org/exclusive-content/) provided by the very same website as well:

![Enclave Games - Forest Cuties: Exclusive Content generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1op786lid92234h5dvuq.png)

As you can see, all you have to enter is your original payment pointer, and the secret message that will be encrypted. In the case of [Forest Cuties](https://forest.enclavegames.com/), that’s a `JSON` object with details of the three cards being unlocked: thier description, image urls, etc.

After clicking Generate you can paste the code into your `HTML` file. Here’s how the whole thing look like:

![Enclave Games - Forest Cuties: Exclusive Content generated](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jl8gks6c0phazay8cdu.png)

There’s also a link to the script that does all the magic. You can apply all the code, and put everything in your `index.html`: monetization meta tag with verifier url, encrypted content, and the script that does the decryption. As soon as the visitor is confirmed as a monetized user, the encrypted message will appear within the `exclusiveContent` div. Then, a JavaScript code can pick it up, treat as a `JSON` object and read the data, which ultimately unlocks the extra cards for the player.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#nft-with-outplay-games-via-paras-marketplace)NFT with OutPlay Games via Paras Marketplace

This is something we’ve started exploring - the whole concept of **NFTs** (Non-Fungible Tokens) and **Web 3** games on a **blockchain**. We’ve got only positive memories from having the [Decentralized category in Gamedev.js Jam 2021](https://gamedevjs.com/competitions/decentralized-category-in-gamedevjs-jam-2021/), where both [Outplay Games](https://outplay.games/) and [Paras Marketplace](https://paras.id/) partnered with our event.

![Enclave Games - Forest Cuties: Paras drop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5sgwfgqpbrz0ge8jpaz.png)

Now, thanks to their efforts again, we can offer you a [unique Forest Cuties NFT](https://paras.id/token/bafybeiam65l23gf7fcgusugepomljnvctu4d2asczk3r5c6nrq3zxnhvpu)! It can be bought for **40 NEAR** , and there’s only **60 tokens** total - make sure to grab yours! You can support us, and in exchange the game will offer three in-game cards only for those who own the NFT.

![Enclave Games - Forest Cuties: NFT card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qnfiwdyhrzkf4n068sk.png)

This should be implemented in the next couple of weeks, and will be announced through our social media channels.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#summary)Summary

I think it all went well, and I’m happy we were able to publish the game, implement Web Monetization features, and offer the NFT. After all it is a very simple game about matching the same pictures, but I do hope you’ll like the card collecting aspect of it, especially since the animals are indeed cute, and you can learn some cool facts about them in the process.