Stamp Rallies are a scavenger hunt type game popular in Japan, usually centered around railway travel or walking. A card contains a number of blank spaces with destinations. At each destination, is a table with a stamp and ink pad to mark the sheet. Players may redeem a fully stamped sheet for a prize, or an entry into a drawing.
I created this game to make a virtual stamp rally for my coworkers. Rather than traveling to a location, the stamp images are only revealed after entering a password, revealed upon completing a challenge.
Passphrases could be code words, solutions to puzzles, or revealed via locations in virtual worlds. Using Blockchain as the data store keeps a decentralized source of truth.
Select the "Build-along" branch if you are following along in a tutorial
- web3 plugin Metamask
- An address of the deployed instance of the stamp rally contract
- TODO: Sample address
- See below for how game managers can set up a stamp rally)
- Some test Ether
Visit this page to interact with a deployed version of the frontend. Use the gear icon to link the address of the Stamp Rally Contract.
Make sure to use the same Ethereum Address to play the game every time, if you want the images to show up on the same game card.
Prerequisites:
Clone this git repo and navigate to the webui directory and install dependencies.
cd webui
yarn install
Now you can fire up the app with:
yarn serve
Navigate to http://localhost:8080 in your web3 enabled browser to start the game.
I recommend deploying on a test network such as Rinkeby. That way you get a public Blockchain without the high cost of real Ether. Make sure you have some test Ethereum in order to deploy the contract.
- Navigate to https://remix.ethereum.org in a web3 enabled browser. Make sure your browser is connected to the correct network -- in this case, Rinkeby.
- Click the plus icon to add a new file. Copy the contents of StampRally.sol into the text area.
- Select the 0.5.0 version of the compiler and wait for it to compile.
- Click the Run tab.
- Select which account you wish to deploy from. This will become the contract owner, and it will be the only account able to manage the game (unless you transfer ownership).
- Choose the number of stamps available in your rally, as well as the rally name.
- Click Deploy. You will see a popup asking for you to sign and submit the transaction. Click to accept.
- In the bottom drawer you will see a link to view the transaction on etherscan.io. Click this, and wait until you see TxReceipt Status:Success. This means your contract has been deployed and mined into a block.
- Look for the contract address
[Contract 0xabcd... Created]
and click on it to view the contract page. - Copy the contract address to a safe place. You'll need it to set up stamps, and to give to your players.
I recommend copying the BlankStamp.jpg image and adding your own drawings in the center, using photo editing software like Photoshop or the Gimp. Dimensions are 1000x1000px.
Here's an example:
There are a number of options for where to save images for your own stamp rally.
- Fork the repo and add in your own images.
- Pros: Simple and free. Same origin, no CORS issues.
- Cons: No element of surprise for players to discover stamps
- Your own website:
- Pros: Ability to hide stamps
- Cons: CORS configuration is a challenge. Cost of hosting
- Amazon S3
- Pros: Ability to hide stamps
- Cons: CORS configuration is a challenge. Cost of hosting. I recommend not leaking the image URLs, as Amazon discourages public buckets.
- Log into the AWS S3 management console.
- Create a new bucket and give it a unique name.
- Configure the public access settings for this bucket. Uncheck everything because Amazon's recommendations are pretty maddening.*
- Block new public ACLS and uploading public objects -- Unchecked
- Remove public access granted through ACLS -- Unchecked
- Block new public bucket policies -- Unchecked
- Block public and cross-account access if bucket has public policies -- Unchecked.
- Click the permissions tab. In the bucket policy editor, add the following, replacing "myBucket" with the name of your bucket:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AddPerm",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::myBucket/*"
}
]
}
- Under the CORS configuration tab, add the following:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
- Upload your images to S3 using the upload button. You can put all your images in the same bucket. To keep stamps a surprise, give images names that aren't easy for players to guess.
- Keep track of the Object URL for each stamp.
- Decide which images and prompts (hints or instructions) to correspond to each stamp index. Indexes start at 0 and go to N-1, for a game with N stamps.
- Go back to https://remix.ethereum.org with the contract loaded. You should see your deployed contract in the lower right. Or you can add the saved address into the "At Address" field.
- Make sure that your web3 enabled browser has the contract owner (the same address you deployed from) as the selected signer.
- For each index, call the following two methods in order:
- generateHash with the password, to create the hashed passphrase
- setStamp using the index, the hash generated in the previous step, the url, and the prompt
- Give the contract address out to your players and let the games begin!
* Presumably these recommendations are to keep malicious actors from eating up your AWS budget by slamming your public S3 urls... so be cautious about where you share your image links, and please set up budget monitoring.