Gommette

Gommette is a geosocial game designed by you. Explore the world to collect and pin digital stickers in real locations or create your own design for others to find.

Comment 1

Inspiration

Gommette is inspired by the Nintendo 3DS game "Paper Mario: Sticker Star", where Mario, controlled by the player, collect stickers to solve puzzle, defeat enemies and change the world. Like in Paper Mario, Gommette encourages players to explore their environment and strategically use their (limited) stickers to interact with the game world and other players. The ability to create custom sticker designs and propose respawn locations takes Gommette a step further by turning it into a community-driven game where players make the world and the rules.

Gommette was also inspired by a sad statistic from the video game industry: in the US, only 13% of the published video games are in release and accessible. In other words, for nearly 90% of the games, it's impossible to access or purchase them through legal means. With Gommette, we wanted to explore the concept of a permanent game, from all points of view: source code, assets, and infrastructure.

What it does

Gommette is a geosocial mobile game that encourages players to explore their surroundings and connect with others through digital stickers. Each day, users receive a random pack of stickers with messages, which they can pin to specific geolocations. Players can pick up stickers left by others if they are physically present at that location. The game also allows players to create custom designs and contribute to the map by proposing respawn locations.

Gommette aims to promote local exploration, foster a community-driven experience, and, in the long run, replace all of its initial assets with user-designed content, making it a game defined by its users.

How we built it

Infrastructure: Warp smart contract

The infrastructure on which the game mechanics run was built with a Warp smart contract.

This smart contract defines 3 main entities in its state : the overworld map, the players, and the sticker boards.

  1. Sticker boards : sticker boards are a digital representation of an actual physical sticker board: they have a name, a picture, and a number of stickers. Upon creating the game, several sticker boards were defined, and the underlying images were all uploaded to Arweave via Bundlr, ensuring that all game assets will be accessible in the future.
  2. The overworld map stores the current stickers pinned on the map, as well as its history, making it possible to see what the map looked like at either a specific point in time (timestamp) or space (coordinates).
  3. The players keep track of the geolocation of all players as well as their inventories and custom designs. A player's stickers are stored in their inventories.

This state is then updated by the players actions : claiming their daily drop, picking a sticker, pinning a sticker, creating a new design... Some of those actions have safeguards that prevent certain actions, like claiming a daily drop several time per day, picking a sticker from a different geolocation than their own, updating another user inventory etc.

Making game assets accessible with Bundlr

All of the game assets were uploaded via Bundlr CLI. Those assets were then referenced in the initial state of the warp smart contract in the sticker boards entities.

Playing the game : progressive web application

To allow players to use Gommette more easily, we built a progressive web application with SolidJS and Vite that implements social login, making it easier than ever for anyone to join and start playing Gommette.

Upon signing in, the user doesn't need to create a profile, but they will have to grant access to their geolocation : this step is required to play Gommette.

Once this is done, players will see the Gommette overworld map, a precise, fast, high resolution map rendered with Mapbox. On this map, the player can see their current location, as well as the current location of stickers that weren't picked up yet. When clicking on one of those sticker, they can see the attached message. If they are at this geolocation and meet the requirements set by the original pinner, they can pick the sticker, which will be added to their inventory.

The main menu makes it easy for players to access their inventory, pin stickers from their inventory, claim their daily drop as well as create custom stickers.

Dialogue between the front end and the smart contract: REST API with Hono

We initially used Arweavekit to perform the read/write operations on our smart contract state, but ended up using Warp and a REST API built with Hono.

Challenges we ran into

We found it quite challenging to connecting the front-end with the smart contract ; we initially used Arweavekit with Othent but couldn't seem to figure out how to make it possible to write our smart contract state.

To bypass this, we updated our smart contract so the wallet that deployed the smart contract would perform the write actions on behalf of the players. We also had to create a REST API, but had issue there as well, as we would sometimes get “LEVEL DATABASE” error - this was due to how we were setting up Warp on our server.

Another challenge was that after calling a specific write function, the state returned from Arweavekit was different from what was returned from Warp and completely unpredictible (the inventory from the user was completely refreshed at every page refresh !). To avoid this issue, we also ended up reading our state with Warp.

Accomplishments that we're proud of

  • First time building a progressive web application !
  • First time building with Smartweave/Warp !
  • First time building a mini REST API… in a day !
  • Proud to have something up

What we learned

  • How to deploy assets via Bundlr CLI
  • How to create a progressive web app
  • How to write a smart contract on Arweave

What's next for Gommette

The ultimate goal for Gommette is to be completely shaped and ran by its community. The following features were drafted out but not implemented during this hackathon:

  • Design custom stickers (not implemented on the frontend, implemented in the smart contract)
  • Publish a sticker design to the marketplace : allow users to publish their custom design on a marketplace ; this would allow users to regulate how the "terms and conditions" of how their creation could be used outside of Gommette thanks to Universal Data License ; (not implemented yet)
  • Overworld history rewind : replay how the world map evolved (not implemented on the frontend, implemented in the smart contract)
  • Propose stickers spawn locations: players will be able submit spawn locations that will spawn random stickers everyday at specific time and locations ; (not implemented yet)
  • Moderation ; designs should be community approved before being added to the game sticker boards (not implemented yet)
  • No-pin zone: make certain zones non-pin zones (both hardcoded and on-demand). Schools for example should be non-pin by default.

Built With

Share this project:

Updates